From 691d21c00d0df2f1aa74d6b010527db1c289e97b Mon Sep 17 00:00:00 2001 From: Jason Zukewich Date: Thu, 16 Aug 2018 16:00:49 -0700 Subject: [PATCH 1/2] [enzyme-adapter-react-16*, enzyme-adapter-utils] `shallow`: add support for Portals --- .../src/ReactThirteenElementToTree.js | 2 +- .../src/ReactSixteenOneAdapter.js | 34 ++++- .../src/ReactSixteenTwoAdapter.js | 34 ++++- .../src/ReactSixteenThreeAdapter.js | 34 ++++- .../src/ReactSixteenAdapter.js | 34 ++++- packages/enzyme-adapter-utils/src/Utils.js | 6 +- packages/enzyme-test-suite/package.json | 3 +- .../test/ShallowWrapper-spec.jsx | 140 ++++++++++++++++++ 8 files changed, 270 insertions(+), 17 deletions(-) diff --git a/packages/enzyme-adapter-react-13/src/ReactThirteenElementToTree.js b/packages/enzyme-adapter-react-13/src/ReactThirteenElementToTree.js index 1c431db66..55fdabbab 100644 --- a/packages/enzyme-adapter-react-13/src/ReactThirteenElementToTree.js +++ b/packages/enzyme-adapter-react-13/src/ReactThirteenElementToTree.js @@ -23,7 +23,7 @@ export default function elementToTree(el) { const { children } = props; let rendered = null; if (isArrayLike(children)) { - rendered = flatten([...children]).map(elementToTree); + rendered = flatten([...children]).map(el => elementToTree(el)); } else if (typeof children !== 'undefined') { rendered = elementToTree(children); } diff --git a/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js b/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js index 5058dae4f..f7d90e451 100644 --- a/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js +++ b/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.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, @@ -16,8 +17,8 @@ import { 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 index 7e67a0fe0..722fbe693 100644 --- 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 index bff713326..3c7a07e7a 100644 --- 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 index 0baabffbc..b2e1ca1f3 100644 --- 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 index 89fb1a2c9..694ebccde 100644 --- a/packages/enzyme-adapter-utils/src/Utils.js +++ b/packages/enzyme-adapter-utils/src/Utils.js @@ -180,7 +180,7 @@ export function ensureKeyOrUndefined(key) { return key || (key === '' ? '' : undefined); } -export function elementToTree(el) { +export function elementToTree(el, recurse = elementToTree) { if (el === null || typeof el !== 'object' || !('type' in el)) { return el; } @@ -193,9 +193,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 index 885d696fe..d9b18f3b4 100644 --- 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 index d4286d9eb..a7387e2c9 100644 --- a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx +++ b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx @@ -15,6 +15,9 @@ import { sym, } from 'enzyme/build/Utils'; import getAdapter from 'enzyme/build/getAdapter'; +import { + Portal, +} from 'react-is'; import './_helpers/setupAdapters'; import { @@ -272,6 +275,92 @@ describe('shallow', () => { }); }); + describeIf(is('>= 16'), 'portals', () => { + it('should show portals in shallow debug tree', () => { + const Foo = () => ( +
+ {createPortal( +
InPortal
, + { nodeType: 1 }, + )} +
+ ); + + const wrapper = shallow(); + expect(wrapper.debug()).to.equal(`
+ +
+ InPortal +
+ +
`); + }); + + it('should show portal container in shallow debug tree', () => { + const Foo = () => ( +
+ {createPortal( +
InPortal
, + { nodeType: 1 }, + )} +
+ ); + + const wrapper = shallow(); + expect(wrapper.debug({ verbose: true })).to.equal(`
+ +
+ InPortal +
+ +
`); + }); + + it('should show nested portal children in shallow debug tree', () => { + const Bar = () => null; + + const Foo = () => ( +
+ {createPortal( +
+
+ +
+
, + { nodeType: 1 }, + )} +
+ ); + + const wrapper = shallow(); + expect(wrapper.debug()).to.equal(`
+ +
+
+ +
+
+ +
`); + }); + + it('should have top level portals in debug tree', () => { + const Foo = () => ( + createPortal( +
InPortal
, + { nodeType: 1 }, + ) + ); + + const wrapper = shallow(); + expect(wrapper.debug()).to.equal(` +
+ InPortal +
+`); + }); + }); + describe('.contains(node)', () => { it('should allow matches on the root node', () => { const a =
; @@ -1074,6 +1163,42 @@ describe('shallow', () => { expect(wrapper.children()).to.have.lengthOf(0); }); }); + + itIf(is('>= 16'), 'should find portals by name', () => { + const Foo = () => ( +
+ {createPortal( +
InPortal
, + { nodeType: 1 }, + )} +
+ ); + + const wrapper = shallow(); + + expect(wrapper.find('Portal')).to.have.lengthOf(1); + }); + + itIf(is('>= 16'), 'should find elements through portals', () => { + const Foo = () => ( +
+ {createPortal( +
+

Successful Portal!

+ +
, + { nodeType: 1 }, + )} +
+ ); + + + const wrapper = shallow(); + + expect(wrapper.find('h1')).to.have.lengthOf(1); + + expect(wrapper.find('span')).to.have.lengthOf(1); + }); }); describe('.findWhere(predicate)', () => { @@ -1368,6 +1493,21 @@ describe('shallow', () => { wrapper.findWhere(spy); expect(spy).to.have.property('callCount', 2); }); + + itIf(is('>= 16'), 'should find portals by react-is Portal type', () => { + const Foo = () => ( +
+ {createPortal( +
InPortal
, + { nodeType: 1 }, + )} +
+ ); + + const wrapper = shallow(); + + expect(wrapper.findWhere(node => node.type() === Portal)).to.have.lengthOf(1); + }); }); describe('.setProps(newProps)', () => { From 892d368456421f5d3a7141b2c8a6537696179d68 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Fri, 17 Aug 2018 20:53:14 -0700 Subject: [PATCH 2/2] [enzyme-adapter-utils] `elementToTree`: back compat: support naive mapping --- .../enzyme-adapter-react-13/src/ReactThirteenElementToTree.js | 2 +- packages/enzyme-adapter-utils/src/Utils.js | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/enzyme-adapter-react-13/src/ReactThirteenElementToTree.js b/packages/enzyme-adapter-react-13/src/ReactThirteenElementToTree.js index 55fdabbab..1c431db66 100644 --- a/packages/enzyme-adapter-react-13/src/ReactThirteenElementToTree.js +++ b/packages/enzyme-adapter-react-13/src/ReactThirteenElementToTree.js @@ -23,7 +23,7 @@ export default function elementToTree(el) { const { children } = props; let rendered = null; if (isArrayLike(children)) { - rendered = flatten([...children]).map(el => elementToTree(el)); + rendered = flatten([...children]).map(elementToTree); } else if (typeof children !== 'undefined') { rendered = elementToTree(children); } diff --git a/packages/enzyme-adapter-utils/src/Utils.js b/packages/enzyme-adapter-utils/src/Utils.js index 694ebccde..5c33d0da3 100644 --- a/packages/enzyme-adapter-utils/src/Utils.js +++ b/packages/enzyme-adapter-utils/src/Utils.js @@ -181,6 +181,10 @@ export function ensureKeyOrUndefined(key) { } 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; }