Merge pull request #1761 from jgzuke/jgzuke-support-portal-shallow

ljharb · web-flow · commit 5774d0d982aa · 2018-08-17T21:22:11.000-07:00
[enzyme-adapter-react-16*, enzyme-adapter-utils] [new] `shallow`: add support for Portals
diff --git a/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js b/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js
@@ -9,15 +9,16 @@ import ShallowRenderer from 'react-test-renderer/shallow';
 import TestUtils from 'react-dom/test-utils';
 import {
   isElement,
+  isPortal,
   isValidElementType,
   Fragment,
   Portal,
 } from 'react-is';
 import { EnzymeAdapter } from 'enzyme';
 import {
   displayNameOfNode,
-  elementToTree,
-  nodeTypeFromType,
+  elementToTree as utilElementToTree,
+  nodeTypeFromType as utilNodeTypeFromType,
   mapNativeEventNames,
   propFromEvent,
   assertDomAvailable,
@@ -72,6 +73,33 @@ function flatten(arr) {
   return result;
 }
 
+function nodeTypeFromType(type) {
+  if (type === Portal) {
+    return 'portal';
+  }
+
+  return utilNodeTypeFromType(type);
+}
+
+function elementToTree(el) {
+  if (!isPortal(el)) {
+    return utilElementToTree(el, elementToTree);
+  }
+
+  const { children, containerInfo } = el;
+  const props = { children, containerInfo };
+
+  return {
+    nodeType: 'portal',
+    type: Portal,
+    props,
+    key: ensureKeyOrUndefined(el.key),
+    ref: el.ref,
+    instance: null,
+    rendered: elementToTree(el.children),
+  };
+}
+
 function toTree(vnode) {
   if (vnode == null) {
     return null;
@@ -280,7 +308,7 @@ class ReactSixteenOneAdapter extends EnzymeAdapter {
           ref: cachedNode.ref,
           instance: renderer._instance,
           rendered: Array.isArray(output)
-            ? flatten(output).map(elementToTree)
+            ? flatten(output).map(el => elementToTree(el))
             : elementToTree(output),
         };
       },
diff --git a/packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js b/packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js
@@ -9,6 +9,7 @@ import ShallowRenderer from 'react-test-renderer/shallow';
 import TestUtils from 'react-dom/test-utils';
 import {
   isElement,
+  isPortal,
   isValidElementType,
   Fragment,
   Portal,
@@ -17,8 +18,8 @@ import { EnzymeAdapter } from 'enzyme';
 import { typeOfNode } from 'enzyme/build/Utils';
 import {
   displayNameOfNode,
-  elementToTree,
-  nodeTypeFromType,
+  elementToTree as utilElementToTree,
+  nodeTypeFromType as utilNodeTypeFromType,
   mapNativeEventNames,
   propFromEvent,
   assertDomAvailable,
@@ -73,6 +74,33 @@ function flatten(arr) {
   return result;
 }
 
+function nodeTypeFromType(type) {
+  if (type === Portal) {
+    return 'portal';
+  }
+
+  return utilNodeTypeFromType(type);
+}
+
+function elementToTree(el) {
+  if (!isPortal(el)) {
+    return utilElementToTree(el, elementToTree);
+  }
+
+  const { children, containerInfo } = el;
+  const props = { children, containerInfo };
+
+  return {
+    nodeType: 'portal',
+    type: Portal,
+    props,
+    key: ensureKeyOrUndefined(el.key),
+    ref: el.ref,
+    instance: null,
+    rendered: elementToTree(el.children),
+  };
+}
+
 function toTree(vnode) {
   if (vnode == null) {
     return null;
@@ -282,7 +310,7 @@ class ReactSixteenTwoAdapter extends EnzymeAdapter {
           ref: cachedNode.ref,
           instance: renderer._instance,
           rendered: Array.isArray(output)
-            ? flatten(output).map(elementToTree)
+            ? flatten(output).map(el => elementToTree(el))
             : elementToTree(output),
         };
       },
diff --git a/packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js b/packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js
@@ -10,6 +10,7 @@ import ShallowRenderer from 'react-test-renderer/shallow';
 import TestUtils from 'react-dom/test-utils';
 import {
   isElement,
+  isPortal,
   isValidElementType,
   AsyncMode,
   Fragment,
@@ -24,8 +25,8 @@ import { EnzymeAdapter } from 'enzyme';
 import { typeOfNode } from 'enzyme/build/Utils';
 import {
   displayNameOfNode,
-  elementToTree,
-  nodeTypeFromType,
+  elementToTree as utilElementToTree,
+  nodeTypeFromType as utilNodeTypeFromType,
   mapNativeEventNames,
   propFromEvent,
   assertDomAvailable,
@@ -78,6 +79,33 @@ function flatten(arr) {
   return result;
 }
 
+function nodeTypeFromType(type) {
+  if (type === Portal) {
+    return 'portal';
+  }
+
+  return utilNodeTypeFromType(type);
+}
+
+function elementToTree(el) {
+  if (!isPortal(el)) {
+    return utilElementToTree(el, elementToTree);
+  }
+
+  const { children, containerInfo } = el;
+  const props = { children, containerInfo };
+
+  return {
+    nodeType: 'portal',
+    type: Portal,
+    props,
+    key: ensureKeyOrUndefined(el.key),
+    ref: el.ref,
+    instance: null,
+    rendered: elementToTree(el.children),
+  };
+}
+
 function toTree(vnode) {
   if (vnode == null) {
     return null;
@@ -300,7 +328,7 @@ class ReactSixteenThreeAdapter extends EnzymeAdapter {
           ref: cachedNode.ref,
           instance: renderer._instance,
           rendered: Array.isArray(output)
-            ? flatten(output).map(elementToTree)
+            ? flatten(output).map(el => elementToTree(el))
             : elementToTree(output),
         };
       },
diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js
@@ -10,6 +10,7 @@ import ShallowRenderer from 'react-test-renderer/shallow';
 import TestUtils from 'react-dom/test-utils';
 import {
   isElement,
+  isPortal,
   isValidElementType,
   AsyncMode,
   Fragment,
@@ -24,8 +25,8 @@ import { EnzymeAdapter } from 'enzyme';
 import { typeOfNode } from 'enzyme/build/Utils';
 import {
   displayNameOfNode,
-  elementToTree,
-  nodeTypeFromType,
+  elementToTree as utilElementToTree,
+  nodeTypeFromType as utilNodeTypeFromType,
   mapNativeEventNames,
   propFromEvent,
   assertDomAvailable,
@@ -78,6 +79,33 @@ function flatten(arr) {
   return result;
 }
 
+function nodeTypeFromType(type) {
+  if (type === Portal) {
+    return 'portal';
+  }
+
+  return utilNodeTypeFromType(type);
+}
+
+function elementToTree(el) {
+  if (!isPortal(el)) {
+    return utilElementToTree(el, elementToTree);
+  }
+
+  const { children, containerInfo } = el;
+  const props = { children, containerInfo };
+
+  return {
+    nodeType: 'portal',
+    type: Portal,
+    props,
+    key: ensureKeyOrUndefined(el.key),
+    ref: el.ref,
+    instance: null,
+    rendered: elementToTree(el.children),
+  };
+}
+
 function toTree(vnode) {
   if (vnode == null) {
     return null;
@@ -303,7 +331,7 @@ class ReactSixteenAdapter extends EnzymeAdapter {
           ref: cachedNode.ref,
           instance: renderer._instance,
           rendered: Array.isArray(output)
-            ? flatten(output).map(elementToTree)
+            ? flatten(output).map(el => elementToTree(el))
             : elementToTree(output),
         };
       },
diff --git a/packages/enzyme-adapter-utils/src/Utils.js b/packages/enzyme-adapter-utils/src/Utils.js
@@ -180,7 +180,11 @@ export function ensureKeyOrUndefined(key) {
   return key || (key === '' ? '' : undefined);
 }
 
-export function elementToTree(el) {
+export function elementToTree(el, recurse = elementToTree) {
+  if (typeof recurse !== 'function' && arguments.length === 3) {
+    // special case for backwards compat for `.map(elementToTree)`
+    recurse = elementToTree; // eslint-disable-line no-param-reassign
+  }
   if (el === null || typeof el !== 'object' || !('type' in el)) {
     return el;
   }
@@ -193,9 +197,9 @@ export function elementToTree(el) {
   const { children } = props;
   let rendered = null;
   if (isArrayLike(children)) {
-    rendered = flatten(children).map(elementToTree);
+    rendered = flatten(children).map(x => recurse(x));
   } else if (typeof children !== 'undefined') {
-    rendered = elementToTree(children);
+    rendered = recurse(children);
   }
   return {
     nodeType: nodeTypeFromType(type),
diff --git a/packages/enzyme-test-suite/package.json b/packages/enzyme-test-suite/package.json
@@ -49,6 +49,7 @@
     "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-react": "^7.11.1"
+    "eslint-plugin-react": "^7.11.1",
+    "react-is": "^16.4.2"
   }
 }
diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx

Original file line number	Diff line number	Diff line change
`@@ -49,6 +49,7 @@`
`49`	`49`	`"eslint-config-airbnb": "^17.1.0",`
`50`	`50`	`"eslint-plugin-import": "^2.14.0",`
`51`	`51`	`"eslint-plugin-jsx-a11y": "^6.1.1",`
`52`		`- "eslint-plugin-react": "^7.11.1"`
	`52`	`+ "eslint-plugin-react": "^7.11.1",`
	`53`	`+ "react-is": "^16.4.2"`
`53`	`54`	`}`
`54`	`55`	`}`