From 9b03c84c72955507e3b69ee5e42ed4ac7d2412eb Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 26 Feb 2020 10:24:41 +0100 Subject: [PATCH 1/4] Fix intermittent RichText e2e test failure --- packages/e2e-tests/specs/editor/various/rich-text.test.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/e2e-tests/specs/editor/various/rich-text.test.js b/packages/e2e-tests/specs/editor/various/rich-text.test.js index cd3fa85e62fdcf..8f43d5ac2dd7e8 100644 --- a/packages/e2e-tests/specs/editor/various/rich-text.test.js +++ b/packages/e2e-tests/specs/editor/various/rich-text.test.js @@ -84,6 +84,7 @@ describe( 'RichText', () => { await page.keyboard.type( 'Some ' ); await page.mouse.move( 0, 0 ); await page.mouse.move( 10, 10 ); + await page.waitForSelector( '[aria-label="Bold"]' ); await page.click( '[aria-label="Bold"]' ); await page.keyboard.type( 'bold' ); await page.mouse.move( 0, 0 ); From 7dd615053aa27fcb970414ff2c71e1f9e75c49e5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 26 Feb 2020 11:15:06 +0100 Subject: [PATCH 2/4] Prefer useLayoutEffect for slots --- .../components/src/slot-fill/bubbles-virtually/slot.js | 9 ++------- .../e2e-tests/specs/editor/various/rich-text.test.js | 1 - 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot.js b/packages/components/src/slot-fill/bubbles-virtually/slot.js index d1347a92272426..0483a5057e1f22 100644 --- a/packages/components/src/slot-fill/bubbles-virtually/slot.js +++ b/packages/components/src/slot-fill/bubbles-virtually/slot.js @@ -1,12 +1,7 @@ /** * WordPress dependencies */ -import { - useEffect, - useRef, - useLayoutEffect, - useContext, -} from '@wordpress/element'; +import { useRef, useLayoutEffect, useContext } from '@wordpress/element'; import isShallowEqual from '@wordpress/is-shallow-equal'; /** @@ -25,7 +20,7 @@ export default function Slot( { const ref = useRef(); const slot = useSlot( name ); - useEffect( () => { + useLayoutEffect( () => { registry.registerSlot( name, ref, fillProps ); return () => { registry.unregisterSlot( name, ref ); diff --git a/packages/e2e-tests/specs/editor/various/rich-text.test.js b/packages/e2e-tests/specs/editor/various/rich-text.test.js index 8f43d5ac2dd7e8..cd3fa85e62fdcf 100644 --- a/packages/e2e-tests/specs/editor/various/rich-text.test.js +++ b/packages/e2e-tests/specs/editor/various/rich-text.test.js @@ -84,7 +84,6 @@ describe( 'RichText', () => { await page.keyboard.type( 'Some ' ); await page.mouse.move( 0, 0 ); await page.mouse.move( 10, 10 ); - await page.waitForSelector( '[aria-label="Bold"]' ); await page.click( '[aria-label="Bold"]' ); await page.keyboard.type( 'bold' ); await page.mouse.move( 0, 0 ); From 2e2abe367412919f912d77cc4351afd068d571ea Mon Sep 17 00:00:00 2001 From: Haz Date: Wed, 26 Feb 2020 07:53:11 -0300 Subject: [PATCH 3/4] Mock ReactDOM.createPortal for Storyshots Storyshots use react-test-renderer underneath, which doesn't support ReactDOM.createPortal --- storybook/test/__snapshots__/index.js.snap | 18 ++++++++++++++++++ storybook/test/index.js | 7 +++++++ 2 files changed, 25 insertions(+) diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index 04c2ce67b11331..30cfcb20dec246 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -7900,6 +7900,12 @@ Array [ Age:

, +
+ Grace +
, +
+ 33 +
, ] `; @@ -7916,6 +7922,12 @@ Array [ Age:

, +
+ Grace +
, +
+ 33 +
, ] `; @@ -7934,6 +7946,12 @@ Array [

, +
+ Grace +
, +
+ 33 +
, ] `; diff --git a/storybook/test/index.js b/storybook/test/index.js index 8752847743e0b8..33c9a6a2557f27 100644 --- a/storybook/test/index.js +++ b/storybook/test/index.js @@ -4,6 +4,8 @@ import initStoryshots, { snapshotWithOptions, } from '@storybook/addon-storyshots'; +import React from 'react'; +import ReactDOM from 'react-dom'; import path from 'path'; initStoryshots( { @@ -25,6 +27,11 @@ initStoryshots( { const parentElement = document.createElement( 'div' ); parentElement.appendChild( currentElement ); } + if ( story.kind === 'Components/SlotFill' ) { + ReactDOM.createPortal = ( children ) => { + return React.createElement( 'div', null, children ); + }; + } return currentElement; }, From 80f4403a5f9e6be81f3fd3fea9c7f2ec11cc7b6c Mon Sep 17 00:00:00 2001 From: Haz Date: Wed, 26 Feb 2020 08:09:59 -0300 Subject: [PATCH 4/4] Disable storyshots for the SlotFill module SlotFill uses ReactDOM.createPortal, which is not supported by Storyshots and react-test-renderer --- .../components/src/slot-fill/stories/index.js | 8 ++- storybook/test/__snapshots__/index.js.snap | 68 ------------------- storybook/test/index.js | 7 -- 3 files changed, 7 insertions(+), 76 deletions(-) diff --git a/packages/components/src/slot-fill/stories/index.js b/packages/components/src/slot-fill/stories/index.js index 48d07ef62b69c8..035defa5eb4f6e 100644 --- a/packages/components/src/slot-fill/stories/index.js +++ b/packages/components/src/slot-fill/stories/index.js @@ -13,7 +13,13 @@ import { createContext, useContext } from '@wordpress/element'; */ import { Slot, Fill, Provider } from '../'; -export default { title: 'Components/SlotFill', component: Slot }; +export default { + title: 'Components/SlotFill', + component: Slot, + parameters: { + storyshots: { disable: true }, + }, +}; export const _default = () => { return ( diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index 30cfcb20dec246..d17f24d407078a 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -7887,74 +7887,6 @@ exports[`Storyshots Components/ScrollLock Default 1`] = ` `; -exports[`Storyshots Components/SlotFill Default 1`] = ` -Array [ -

- Profile -

, -

- Name: - -

, -

- Age: - -

, -
- Grace -
, -
- 33 -
, -] -`; - -exports[`Storyshots Components/SlotFill With Context 1`] = ` -Array [ -

- Profile -

, -

- Name: - -

, -

- Age: - -

, -
- Grace -
, -
- 33 -
, -] -`; - -exports[`Storyshots Components/SlotFill With Fill Props 1`] = ` -Array [ -

- Profile -

, -

- Name: - - -

, -

- Age: - - -

, -
- Grace -
, -
- 33 -
, -] -`; - exports[`Storyshots Components/Snackbar Default 1`] = `
{ - return React.createElement( 'div', null, children ); - }; - } return currentElement; },