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

  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


 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

 }

-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

 }

+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

 }

-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)

Uh oh!

Shallow renders though portal child #1761

Shallow renders though portal child #1761

Uh oh!

Conversation

jgzuke commented Aug 16, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jgzuke commented Aug 17, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ljharb left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jgzuke commented Aug 17, 2018 •

edited

Loading