add property portals to wrapito config (#155)

Author: alexbriski

package-lock.json

@@ -85,6 +85,7 @@ export interface Config {
   changeRoute: (path: string) => void
   history?: BrowserHistory
   portal?: string
+  portals?: string[]
   handleQueryParams?: boolean
 }
 

src/models.ts

@@ -115,7 +115,7 @@ const debugRequests = () => {
 }
 
 const getMount = () => {
-  const { portal, changeRoute, history, mount } = getConfig()
+  const { portal, portals, changeRoute, history, mount } = getConfig()
   const { Component, props, responses, path, hasPath, debug, historyState } =
     getOptions()
 
@@ -125,6 +125,10 @@ const getMount = () => {
     setupPortal(portal)
   }
 
+  if (portals) {
+    setupPortals(portals)
+  }
+
   if (hasPath && history) {
     console.warn(
       'wrapito WARNING: history is DEPRECATED. Pass a changeRoute function to the config instead.',
@@ -154,4 +158,10 @@ const setupPortal = (portalRootId: string) => {
   document.body.appendChild(portalRoot)
 }
 
+const setupPortals = (portalRootIds: string[]) => {
+  portalRootIds.forEach(portal => {
+    setupPortal(portal)
+  })
+}
+
 export { wrap }

src/wrap.tsx

@@ -21,6 +21,12 @@ export const MyComponentWithProps = props => (
 export const MyComponentWithPortal = ({ children }) =>
   createPortal(children, document.getElementById('portal-root-id'))
 
+export const MyComponentWithPortals = ({ children, portalIds }) => {
+  return portalIds.map((portalId, index) => {
+    return createPortal(children[index], document.getElementById(portalId))
+  })
+}
+
 export class MyComponentMakingHttpCalls extends Component {
   state = {
     quantity: 0,

tests/components.mock.jsx

@@ -5,6 +5,7 @@ import {
   MyComponent,
   MyComponentWithProps,
   MyComponentWithPortal,
+  MyComponentWithPortals,
 } from '../components.mock'
 import { it, expect, afterEach } from 'vitest'
 
@@ -49,6 +50,20 @@ it('should have an element where to place a portal defined in the config', () =>
   expect(document.body).toHaveTextContent(childrenText)
 })
 
+it('should have elements where to place portals defined in the config', () => {
+  const childrenTexts = ['I am a portal 1', 'I am a portal 2']
+  const portalIds = ['portal-root-id1', 'portal-root-id2']
+
+  configure({ portals: portalIds })
+  const props = { children: childrenTexts, portalIds }
+
+  wrap(MyComponentWithPortals).withProps(props).mount()
+
+  childrenTexts.forEach(childrenText => {
+    expect(document.body).toHaveTextContent(childrenText)
+  })
+})
+
 it('should have unique portals', () => {
   configure({ mount: render, portal: portalRootId })
   const childrenText = 'I am a portal'