From 0cf023736815d2e9ac027a0ca25468215df547b0 Mon Sep 17 00:00:00 2001 From: Marcelo Serpa Date: Wed, 11 Nov 2020 20:26:32 -0600 Subject: [PATCH 1/5] Add regresion E2E test for the empty reusable block causing WSODs issue --- packages/e2e-test-utils/README.md | 4 ++ packages/e2e-test-utils/src/index.js | 1 + packages/e2e-test-utils/src/inserter.js | 6 ++- .../editor/various/reusable-blocks.test.js | 43 +++++++++++++++++++ 4 files changed, 52 insertions(+), 2 deletions(-) diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md index 0953e51c470af..3ac3ccdf328b7 100644 --- a/packages/e2e-test-utils/README.md +++ b/packages/e2e-test-utils/README.md @@ -600,6 +600,10 @@ running the test is not already the admin user). Switches the current user to whichever user we should be running the tests as (if we're not already that user). +# **toggleGlobalBlockInserter** + +Toggles the global inserter. + # **toggleMoreMenu** Toggles the More Menu. diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js index 355d8d280f6bb..2c822577d683c 100644 --- a/packages/e2e-test-utils/src/index.js +++ b/packages/e2e-test-utils/src/index.js @@ -37,6 +37,7 @@ export { insertBlockDirectoryBlock, openGlobalBlockInserter, closeGlobalBlockInserter, + toggleGlobalBlockInserter, } from './inserter'; export { installPlugin } from './install-plugin'; export { installTheme } from './install-theme'; diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js index d08198c5f825f..fafd726da6181 100644 --- a/packages/e2e-test-utils/src/inserter.js +++ b/packages/e2e-test-utils/src/inserter.js @@ -44,8 +44,10 @@ async function isGlobalInserterOpen() { ); } ); } - -async function toggleGlobalBlockInserter() { +/** + * Toggles the global inserter. + */ +export async function toggleGlobalBlockInserter() { await page.click( '.edit-post-header [aria-label="Add block"], .edit-site-header [aria-label="Add block"]' ); diff --git a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js index 624e8f4e4000b..16f6a647e5d71 100644 --- a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js @@ -11,6 +11,8 @@ import { searchForReusableBlock, getEditedPostContent, trashAllPosts, + visitAdminPage, + toggleGlobalBlockInserter, } from '@wordpress/e2e-test-utils'; function waitForAndAcceptDialog() { @@ -70,6 +72,7 @@ describe( 'Reusable blocks', () => { const block = await page.$( '.block-editor-block-list__block[data-type="core/block"]' ); + expect( block ).not.toBeNull(); // Check that its title is displayed @@ -330,4 +333,44 @@ describe( 'Reusable blocks', () => { // Check that we have two paragraph blocks on the page expect( await getEditedPostContent() ).toMatchSnapshot(); } ); + + it( 'will not break the editor if empty', async () => { + await insertReusableBlock( 'Awesome block' ); + + await visitAdminPage( 'edit.php', [ 'post_type=wp_block' ] ); + + const [ editButton ] = await page.$x( + `//a[contains(@aria-label, 'Awesome block')]` + ); + await editButton.click(); + + await page.waitForNavigation(); + + // Give focus to the editor + await page.click( '.block-editor-writing-flow' ); + + // Move focus to the paragraph block + await page.keyboard.press( 'Tab' ); + await page.keyboard.press( 'Tab' ); + + // Delete the block, leaving the reusable block empty + await clickBlockToolbarButton( 'More options' ); + const deleteButton = await page.waitForXPath( + '//button/span[text()="Remove block"]' + ); + deleteButton.click(); + + // Save the reusable block + await page.click( '.editor-post-publish-button__button' ); + + await page.waitForXPath( + '//*[contains(@class, "components-snackbar")]/*[text()="Reusable Block updated."]' + ); + + await createNewPost(); + + await toggleGlobalBlockInserter(); + + expect( console ).not.toHaveErrored(); + } ); } ); From c0540699bc826becc8dc17cf67d29bf1c24625c0 Mon Sep 17 00:00:00 2001 From: Marcelo Serpa Date: Thu, 12 Nov 2020 18:45:59 -0600 Subject: [PATCH 2/5] Add unit regression test __experimentalGetParsedReusableBlock to make sure it properly handles the scenario when the reusable block's content is an empty string --- .../block-editor/src/store/test/selectors.js | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index 8656f069347cf..920fa8fdadb60 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -69,6 +69,7 @@ const { __experimentalGetLastBlockAttributeChanges, getLowestCommonAncestorWithSelectedBlock, __experimentalGetActiveBlockIdByBlockNames: getActiveBlockIdByBlockNames, + __experimentalGetParsedReusableBlock, } = selectors; describe( 'selectors', () => { @@ -3034,3 +3035,23 @@ describe( 'selectors', () => { } ); } ); } ); + +describe( '__experimentalGetParsedReusableBlock', () => { + const state = { + settings: { + __experimentalReusableBlocks: [ + { + id: 1, + content: { raw: '' }, + }, + ], + }, + }; + + // Regression test for https://github.com/WordPress/gutenberg/issues/26485. See https://github.com/WordPress/gutenberg/issues/26548. + it( 'Should not throw an exception if reusable content.raw is an empty string', () => { + expect( () => + __experimentalGetParsedReusableBlock( state, 1 ) + ).not.toThrowError(); + } ); +} ); From aea086763231bdb6f8eeaaf06a65ea6bae453e28 Mon Sep 17 00:00:00 2001 From: Marcelo Serpa Date: Thu, 12 Nov 2020 18:57:05 -0600 Subject: [PATCH 3/5] Minor cleanup --- packages/block-editor/src/store/test/selectors.js | 2 +- packages/e2e-tests/specs/editor/various/reusable-blocks.test.js | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index 920fa8fdadb60..b6ef255796054 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -3049,7 +3049,7 @@ describe( '__experimentalGetParsedReusableBlock', () => { }; // Regression test for https://github.com/WordPress/gutenberg/issues/26485. See https://github.com/WordPress/gutenberg/issues/26548. - it( 'Should not throw an exception if reusable content.raw is an empty string', () => { + it( "should not throw an exception if reusable block's content.raw is an empty string", () => { expect( () => __experimentalGetParsedReusableBlock( state, 1 ) ).not.toThrowError(); diff --git a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js index 16f6a647e5d71..e2afd37511f36 100644 --- a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js @@ -72,7 +72,6 @@ describe( 'Reusable blocks', () => { const block = await page.$( '.block-editor-block-list__block[data-type="core/block"]' ); - expect( block ).not.toBeNull(); // Check that its title is displayed @@ -362,7 +361,6 @@ describe( 'Reusable blocks', () => { // Save the reusable block await page.click( '.editor-post-publish-button__button' ); - await page.waitForXPath( '//*[contains(@class, "components-snackbar")]/*[text()="Reusable Block updated."]' ); From e99ec76c079ec351279af11e5c7db53b2cab3dc1 Mon Sep 17 00:00:00 2001 From: Marcelo Serpa Date: Fri, 13 Nov 2020 19:33:51 -0600 Subject: [PATCH 4/5] Change the unit test to check for the function return value instead of explicitly checking that it does not throw an exception --- packages/block-editor/src/store/test/selectors.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index b6ef255796054..d11e53a9e7485 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -3049,9 +3049,9 @@ describe( '__experimentalGetParsedReusableBlock', () => { }; // Regression test for https://github.com/WordPress/gutenberg/issues/26485. See https://github.com/WordPress/gutenberg/issues/26548. - it( "should not throw an exception if reusable block's content.raw is an empty string", () => { - expect( () => - __experimentalGetParsedReusableBlock( state, 1 ) - ).not.toThrowError(); + it( "Should return an empty array if reusable block's content.raw is an empty string", () => { + expect( __experimentalGetParsedReusableBlock( state, 1 ) ).toEqual( + [] + ); } ); } ); From 044c358b1a4013d147987a2fd83f9f63af059f6b Mon Sep 17 00:00:00 2001 From: Marcelo Serpa Date: Fri, 13 Nov 2020 21:31:20 -0600 Subject: [PATCH 5/5] Wait for the editor writing flow div before trying to click it --- packages/e2e-tests/specs/editor/various/reusable-blocks.test.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js index e2afd37511f36..1a0b19049478d 100644 --- a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js @@ -346,6 +346,7 @@ describe( 'Reusable blocks', () => { await page.waitForNavigation(); // Give focus to the editor + await page.waitForSelector( '.block-editor-writing-flow' ); await page.click( '.block-editor-writing-flow' ); // Move focus to the paragraph block