Shallow renders though portal child #1761

jgzuke · 2018-08-16T22:50:32Z

elementToTree when given a Portal element returns a wrapper node and renders through children. Previously this would just return the element itself which would show in debug as <Portal /> but not render through any children.

jgzuke · 2018-08-16T22:53:24Z

packages/enzyme-adapter-utils/src/Utils.js

+  if (el.$$typeof === Portal) {
+    return {
+      nodeType: nodeTypeFromType(Portal),
+      type: Portal,


Same comment here as https://github.com/airbnb/enzyme/pull/1760/files/f00cac8aab51269101a0b951d2bab3742409e01a#r210763428

…rt for Portals

ljharb · 2018-08-17T06:02:10Z

packages/enzyme-adapter-utils/src/Utils.js

@@ -94,6 +97,10 @@ export function displayNameOfNode(node) {

  if (!type) return null;

+  if (type === Portal) {
+    return 'Portal';


Same question as on the other PR; should we add this here, or only on the adapters?

ljharb · 2018-08-17T06:02:32Z

packages/enzyme-adapter-utils/src/Utils.js

@@ -168,9 +178,20 @@ export function ensureKeyOrUndefined(key) {
 }

 export function elementToTree(el) {
-  if (el === null || typeof el !== 'object' || !('type' in el)) {
+  if (el === null || typeof el !== 'object' || !('type' in el || el.$$typeof === Portal)) {


the $$typeof part should definitely not be here; that should be adapter-specific.

jgzuke · 2018-08-17T20:19:50Z

Moved Utils changes into 16+ adapters
Added children and containerInfo props to portal node
Added a test for finding through portals similar to https://github.com/airbnb/enzyme/blob/master/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx#L957

jgzuke · 2018-08-17T20:21:35Z

packages/enzyme-adapter-utils/src/Utils.js

@@ -180,7 +180,9 @@ export function ensureKeyOrUndefined(key) {
  return key || (key === '' ? '' : undefined);
 }

-export function elementToTree(el) {
+export function elementToTree(el, wrapperElementToTree = null) {


@ljharb is there a nicer way to do this? One option would be to replace elementToTree entirely in the 16+ adapters, but we can't just replace the top level calls and fall through like displayNameOfNode and nodeTypeFromType since this is recursive

good point. i guess this could be like recurse = elementToTree, and then use recurse below?

The default second argument would break .map(elementToTree) since that provides a second index arg. Im not sure if its nicer to switch the .maps or leave this as typeof recurse === 'function'

ljharb · 2018-08-17T21:56:46Z

packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js

+}
+
+function elementToTree(el) {
+  if (!(el && el.$$typeof === Portal)) {


i think this line can be if (!isPortal(el)) {?

ljharb · 2018-08-17T21:57:17Z

packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js

+}
+
+function elementToTree(el) {
+  if (!(el && el.$$typeof === Portal)) {


also isPortal here?

ljharb · 2018-08-17T21:57:29Z

packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js

+}
+
+function elementToTree(el) {
+  if (!(el && el.$$typeof === Portal)) {


ljharb · 2018-08-17T21:57:55Z

packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js

@@ -78,6 +78,33 @@ function flatten(arr) {
  return result;
 }

+function nodeTypeFromType(type) {
+  if (type && type === Portal) {


if type is falsy, it won't === Portal, so i think this can be type === Portal ? 'portal' : utilNodeTypeFromType(type)

ljharb · 2018-08-17T21:59:44Z

packages/enzyme-adapter-utils/src/Utils.js

@@ -180,7 +180,9 @@ export function ensureKeyOrUndefined(key) {
  return key || (key === '' ? '' : undefined);
 }

-export function elementToTree(el) {
+export function elementToTree(el, wrapperElementToTree = null) {


good point. i guess this could be like recurse = elementToTree, and then use recurse below?

ljharb

Thanks, this looks great.

…pping

- createMountWrapper: add Portals to propType (#1760, #1761, #1772) - add pointer events (#1753) - `elementToTree`: add ability to inject recursed `elementToTree` (#1760)

@jgzuke

- [New] Add Portal support (#1760, #1761, #1772, #1774, @jgzuke) - [New] Add pointer events support (#1753, @ljharb) - [New] Add `displayNameOfNode`, `isValidElementType` (#1701, @jquense) - [New] pass the adapter into `createMountWrapper` (#1592, @jquense) - [Fix] `shallow`: skip updates when nextState is `null` or `undefined` (#1785, @koba04) - update deps - [meta] ensure a license and readme is present in all packages when published

@jquense

- [New] Add forwardRef support (#1592, @jquense) - [New] Add Portal support (#1760, #1761, #1772, #1774, @jgzuke) - [New] Add pointer events support (#1753, @ljharb) - [New] Add `displayNameOfNode`, `isValidElementType` (#1701, @jquense) - [New] pass the adapter into `createMountWrapper` (#1592, @jquense) - [Fix] preemptively fix compat with React v16.4.3 (#1790, #1778, @gaearon, @aweary) - [Fix] `shallow`: skip updates when nextState is `null` or `undefined` (#1785, @koba04) - update deps - [meta] ensure a license and readme is present in all packages when published

@jquense

- [New] Add forwardRef support (#1592, @jquense) - [New] Add Portal support (#1760, #1761, #1772, #1774, @jgzuke) - [New] Add pointer events support (#1753, @ljharb) - [Fix] preemptively fix compat with React v16.4.3 (#1790, #1778, @gaearon, @aweary) - [Fix] `shallow`: prevent rerenders with PureComponents (#1786, @koba04) - [Fix] `shallow`: skip updates when nextState is `null` or `undefined` (#1785, @koba04) - [Fix] `shallow`: `setState` after `setProps` calls `componentWillReceiveProps` (#1779, @peanutenthusiast) - [Fix] `mount`/`shallow`: be stricter on the wrapper’s setState/setProps callback - [Fix] `shallow`/`mount`: improve error message when wrapping invalid elements (#1759, @jgzuke) - update deps - [Refactor] remove most uses of lodash - [meta] ensure a license and readme is present in all packages when published

jgzuke requested a review from ljharb August 16, 2018 22:50

jgzuke commented Aug 16, 2018

View reviewed changes

[enzyme-adapter-react-16*, enzyme-adapter-utils] shallow: add suppo…

691d21c

…rt for Portals

jgzuke force-pushed the jgzuke-support-portal-shallow branch from 4854d43 to 9cf359f Compare August 16, 2018 23:01

ljharb reviewed Aug 17, 2018

View reviewed changes

jgzuke force-pushed the jgzuke-support-portal-shallow branch from 6ef7f24 to 5d24796 Compare August 17, 2018 20:18

jgzuke commented Aug 17, 2018

View reviewed changes

ljharb reviewed Aug 17, 2018

View reviewed changes

jgzuke force-pushed the jgzuke-support-portal-shallow branch from 73a2aa0 to 61ef730 Compare August 17, 2018 23:24

ljharb approved these changes Aug 18, 2018

View reviewed changes

[enzyme-adapter-utils] elementToTree: back compat: support naive ma…

892d368

…pping

ljharb force-pushed the jgzuke-support-portal-shallow branch 2 times, most recently from 0982fbc to 892d368 Compare August 18, 2018 04:07

ljharb merged commit 5774d0d into enzymejs:master Aug 18, 2018

ljharb mentioned this pull request Aug 18, 2018

Support of shallow for React16 Portals #1507

Closed

4 tasks

jgzuke mentioned this pull request Aug 18, 2018

Remove portal specific logic from utils #1772

Merged

ljharb added a commit that referenced this pull request Aug 24, 2018

[enzyme-adapter-utils] v1.6.0

f9ddb18

- createMountWrapper: add Portals to propType (#1760, #1761, #1772) - add pointer events (#1753) - `elementToTree`: add ability to inject recursed `elementToTree` (#1760)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Shallow renders though portal child #1761

Shallow renders though portal child #1761

jgzuke commented Aug 16, 2018

jgzuke Aug 16, 2018

ljharb Aug 17, 2018

ljharb Aug 17, 2018

jgzuke commented Aug 17, 2018 •

edited

Loading

jgzuke Aug 17, 2018

ljharb Aug 17, 2018

jgzuke Aug 17, 2018

ljharb Aug 17, 2018

ljharb Aug 17, 2018

ljharb Aug 17, 2018

ljharb Aug 17, 2018

ljharb Aug 17, 2018

ljharb left a comment

Shallow renders though portal child #1761

Shallow renders though portal child #1761

Conversation

jgzuke commented Aug 16, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jgzuke commented Aug 17, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ljharb left a comment

Choose a reason for hiding this comment

jgzuke commented Aug 17, 2018 •

edited

Loading