From dbc4370144fca87a00a0025cb2fa16a6c2df7efc Mon Sep 17 00:00:00 2001 From: pooja-muchandikar Date: Tue, 10 Oct 2023 15:58:32 +0530 Subject: [PATCH 1/9] Migrate Child Block Test to Playwright --- .../specs/editor/plugins/child-blocks.test.js | 66 ------------ .../specs/editor/plugins/child-blocks.spec.js | 100 ++++++++++++++++++ 2 files changed, 100 insertions(+), 66 deletions(-) delete mode 100644 packages/e2e-tests/specs/editor/plugins/child-blocks.test.js create mode 100644 test/e2e/specs/editor/plugins/child-blocks.spec.js diff --git a/packages/e2e-tests/specs/editor/plugins/child-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/child-blocks.test.js deleted file mode 100644 index c7ca368003397..0000000000000 --- a/packages/e2e-tests/specs/editor/plugins/child-blocks.test.js +++ /dev/null @@ -1,66 +0,0 @@ -/** - * WordPress dependencies - */ -import { - activatePlugin, - closeGlobalBlockInserter, - createNewPost, - deactivatePlugin, - getAllBlockInserterItemTitles, - insertBlock, - openGlobalBlockInserter, -} from '@wordpress/e2e-test-utils'; - -describe( 'Child Blocks', () => { - beforeAll( async () => { - await activatePlugin( 'gutenberg-test-child-blocks' ); - } ); - - beforeEach( async () => { - await createNewPost(); - } ); - - afterAll( async () => { - await deactivatePlugin( 'gutenberg-test-child-blocks' ); - } ); - - it( 'are hidden from the global block inserter', async () => { - await openGlobalBlockInserter(); - await expect( await getAllBlockInserterItemTitles() ).not.toContain( - 'Child Blocks Child' - ); - } ); - - it( 'shows up in a parent block', async () => { - await insertBlock( 'Child Blocks Unrestricted Parent' ); - await closeGlobalBlockInserter(); - await page.waitForSelector( - '[data-type="test/child-blocks-unrestricted-parent"] .block-editor-default-block-appender' - ); - await page.click( - '[data-type="test/child-blocks-unrestricted-parent"] .block-editor-default-block-appender' - ); - await openGlobalBlockInserter(); - const inserterItemTitles = await getAllBlockInserterItemTitles(); - expect( inserterItemTitles ).toContain( 'Child Blocks Child' ); - expect( inserterItemTitles.length ).toBeGreaterThan( 20 ); - } ); - - it( 'display in a parent block with allowedItems', async () => { - await insertBlock( 'Child Blocks Restricted Parent' ); - await closeGlobalBlockInserter(); - await page.waitForSelector( - '[data-type="test/child-blocks-restricted-parent"] .block-editor-default-block-appender' - ); - await page.click( - '[data-type="test/child-blocks-restricted-parent"] .block-editor-default-block-appender' - ); - await openGlobalBlockInserter(); - const allowedBlocks = await getAllBlockInserterItemTitles(); - expect( allowedBlocks.sort() ).toEqual( [ - 'Child Blocks Child', - 'Image', - 'Paragraph', - ] ); - } ); -} ); diff --git a/test/e2e/specs/editor/plugins/child-blocks.spec.js b/test/e2e/specs/editor/plugins/child-blocks.spec.js new file mode 100644 index 0000000000000..fbe2a457cf5a6 --- /dev/null +++ b/test/e2e/specs/editor/plugins/child-blocks.spec.js @@ -0,0 +1,100 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.use( { + ChildBook: async ( { page }, use ) => { + await use( new ChildBook( { page } ) ); + }, +} ); + +test.describe( 'Child Blocks', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.activatePlugin( 'gutenberg-test-child-blocks' ); + } ); + + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.deactivatePlugin( 'gutenberg-test-child-blocks' ); + } ); + + test( 'are hidden from the global block inserter', async ( { + page, + ChildBook, + } ) => { + await page + .getByRole( 'button', { name: 'Toggle block inserter' } ) + .click(); + await expect( + await ChildBook.getAllBlockInserterItemTitles() + ).not.toContain( 'Child Blocks Child' ); + } ); + + test( 'shows up in a parent block', async ( { + page, + editor, + ChildBook, + } ) => { + await editor.insertBlock( { + name: 'test/child-blocks-unrestricted-parent', + } ); + + await page.click( + '[data-type="test/child-blocks-unrestricted-parent"] .block-editor-default-block-appender' + ); + await page + .getByRole( 'button', { name: 'Toggle block inserter' } ) + .click(); + const inserterItemTitles = + await ChildBook.getAllBlockInserterItemTitles(); + expect( inserterItemTitles ).toContain( 'Child Blocks Child' ); + expect( inserterItemTitles.length ).toBeGreaterThanOrEqual( 20 ); + } ); + + test( 'display in a parent block with allowedItems', async ( { + page, + editor, + ChildBook, + } ) => { + await editor.insertBlock( { + name: 'test/child-blocks-restricted-parent', + } ); + + await page.click( + '[data-type="test/child-blocks-restricted-parent"] .block-editor-default-block-appender' + ); + await page + .getByRole( 'button', { name: 'Toggle block inserter' } ) + .click(); + const allowedBlocks = await ChildBook.getAllBlockInserterItemTitles(); + expect( allowedBlocks.sort() ).toEqual( [ + 'Child Blocks Child', + 'Image', + 'Paragraph', + ] ); + } ); +} ); + +class ChildBook { + constructor( { page } ) { + this.page = page; + } + + async getAllBlockInserterItemTitles() { + + const inserterItemTitles = await this.page.evaluate( () => { + return Array.from( + document.querySelectorAll( + '.block-editor-block-types-list__item-title' + ) + ).map( ( inserterItem ) => { + return inserterItem.innerText; + } ); + } ); + return [ ...new Set( inserterItemTitles ) ]; + } +} From 7e7fad2634557688f869520a98d59e8ce3871325 Mon Sep 17 00:00:00 2001 From: pooja-muchandikar Date: Wed, 11 Oct 2023 10:01:37 +0530 Subject: [PATCH 2/9] Fix Stylelint failing and modified the test case --- test/e2e/specs/editor/plugins/child-blocks.spec.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/test/e2e/specs/editor/plugins/child-blocks.spec.js b/test/e2e/specs/editor/plugins/child-blocks.spec.js index fbe2a457cf5a6..c61508826f290 100644 --- a/test/e2e/specs/editor/plugins/child-blocks.spec.js +++ b/test/e2e/specs/editor/plugins/child-blocks.spec.js @@ -52,7 +52,7 @@ test.describe( 'Child Blocks', () => { const inserterItemTitles = await ChildBook.getAllBlockInserterItemTitles(); expect( inserterItemTitles ).toContain( 'Child Blocks Child' ); - expect( inserterItemTitles.length ).toBeGreaterThanOrEqual( 20 ); + expect( inserterItemTitles.length ).toBeGreaterThan( 10 ); } ); test( 'display in a parent block with allowedItems', async ( { @@ -73,7 +73,6 @@ test.describe( 'Child Blocks', () => { const allowedBlocks = await ChildBook.getAllBlockInserterItemTitles(); expect( allowedBlocks.sort() ).toEqual( [ 'Child Blocks Child', - 'Image', 'Paragraph', ] ); } ); @@ -85,7 +84,6 @@ class ChildBook { } async getAllBlockInserterItemTitles() { - const inserterItemTitles = await this.page.evaluate( () => { return Array.from( document.querySelectorAll( From 3d25cbceefef819b5f05ea69f6918022e84ee9c5 Mon Sep 17 00:00:00 2001 From: pooja-muchandikar Date: Wed, 11 Oct 2023 13:26:53 +0530 Subject: [PATCH 3/9] Fix failed CI --- test/e2e/specs/editor/plugins/child-blocks.spec.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/e2e/specs/editor/plugins/child-blocks.spec.js b/test/e2e/specs/editor/plugins/child-blocks.spec.js index c61508826f290..f3a99bb5ed7c4 100644 --- a/test/e2e/specs/editor/plugins/child-blocks.spec.js +++ b/test/e2e/specs/editor/plugins/child-blocks.spec.js @@ -73,6 +73,7 @@ test.describe( 'Child Blocks', () => { const allowedBlocks = await ChildBook.getAllBlockInserterItemTitles(); expect( allowedBlocks.sort() ).toEqual( [ 'Child Blocks Child', + 'Image', 'Paragraph', ] ); } ); From 688f9fc5e56270834c2f53198e2b3b9b625b2199 Mon Sep 17 00:00:00 2001 From: pooja-muchandikar Date: Fri, 13 Oct 2023 11:54:42 +0530 Subject: [PATCH 4/9] Update locators --- .../specs/editor/plugins/child-blocks.spec.js | 100 ++++++++---------- 1 file changed, 44 insertions(+), 56 deletions(-) diff --git a/test/e2e/specs/editor/plugins/child-blocks.spec.js b/test/e2e/specs/editor/plugins/child-blocks.spec.js index f3a99bb5ed7c4..ec882028cdcac 100644 --- a/test/e2e/specs/editor/plugins/child-blocks.spec.js +++ b/test/e2e/specs/editor/plugins/child-blocks.spec.js @@ -3,12 +3,6 @@ */ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); -test.use( { - ChildBook: async ( { page }, use ) => { - await use( new ChildBook( { page } ) ); - }, -} ); - test.describe( 'Child Blocks', () => { test.beforeAll( async ( { requestUtils } ) => { await requestUtils.activatePlugin( 'gutenberg-test-child-blocks' ); @@ -22,78 +16,72 @@ test.describe( 'Child Blocks', () => { await requestUtils.deactivatePlugin( 'gutenberg-test-child-blocks' ); } ); - test( 'are hidden from the global block inserter', async ( { - page, - ChildBook, - } ) => { - await page - .getByRole( 'button', { name: 'Toggle block inserter' } ) - .click(); - await expect( - await ChildBook.getAllBlockInserterItemTitles() - ).not.toContain( 'Child Blocks Child' ); + test( 'are hidden from the global block inserter', async ( { page } ) => { + const blockInserter = page + .getByRole( 'toolbar', { name: 'Document tools' } ) + .getByRole( 'button', { name: 'Toggle block inserter' } ); + const blockLibrary = page.getByRole( 'region', { + name: 'Block Library', + } ); + + await blockInserter.click(); + await expect( blockLibrary ).toBeVisible(); + expect( blockLibrary.getByRole( 'option' ) ).not.toContain( [ + 'Child Blocks Child', + ] ); } ); - test( 'shows up in a parent block', async ( { - page, - editor, - ChildBook, - } ) => { + test( 'shows up in a parent block', async ( { page, editor } ) => { await editor.insertBlock( { name: 'test/child-blocks-unrestricted-parent', } ); - await page.click( - '[data-type="test/child-blocks-unrestricted-parent"] .block-editor-default-block-appender' - ); await page - .getByRole( 'button', { name: 'Toggle block inserter' } ) + .getByRole( 'document', { + name: 'Block: Child Blocks Unrestricted Parent', + } ) .click(); - const inserterItemTitles = - await ChildBook.getAllBlockInserterItemTitles(); - expect( inserterItemTitles ).toContain( 'Child Blocks Child' ); - expect( inserterItemTitles.length ).toBeGreaterThan( 10 ); + const blockInserter = page + .getByRole( 'toolbar', { name: 'Document tools' } ) + .getByRole( 'button', { name: 'Toggle block inserter' } ); + const blockLibrary = page.getByRole( 'region', { + name: 'Block Library', + } ); + + await blockInserter.click(); + await expect( blockLibrary ).toBeVisible(); + expect( + await blockLibrary.getByRole( 'option' ).count() + ).toBeGreaterThan( 10 ); } ); test( 'display in a parent block with allowedItems', async ( { page, editor, - ChildBook, } ) => { await editor.insertBlock( { name: 'test/child-blocks-restricted-parent', } ); - await page.click( - '[data-type="test/child-blocks-restricted-parent"] .block-editor-default-block-appender' - ); await page - .getByRole( 'button', { name: 'Toggle block inserter' } ) + .getByRole( 'document', { + name: 'Block: Child Blocks Restricted Parent', + } ) .click(); - const allowedBlocks = await ChildBook.getAllBlockInserterItemTitles(); - expect( allowedBlocks.sort() ).toEqual( [ + + const blockInserter = page + .getByRole( 'toolbar', { name: 'Document tools' } ) + .getByRole( 'button', { name: 'Toggle block inserter' } ); + const blockLibrary = page.getByRole( 'region', { + name: 'Block Library', + } ); + + await blockInserter.click(); + await expect( blockLibrary ).toBeVisible(); + await expect( blockLibrary.getByRole( 'option' ) ).toHaveText( [ + 'Paragraph', 'Child Blocks Child', 'Image', - 'Paragraph', ] ); } ); } ); - -class ChildBook { - constructor( { page } ) { - this.page = page; - } - - async getAllBlockInserterItemTitles() { - const inserterItemTitles = await this.page.evaluate( () => { - return Array.from( - document.querySelectorAll( - '.block-editor-block-types-list__item-title' - ) - ).map( ( inserterItem ) => { - return inserterItem.innerText; - } ); - } ); - return [ ...new Set( inserterItemTitles ) ]; - } -} From c0ebee3a61879f9259e1849255a2b055021f597b Mon Sep 17 00:00:00 2001 From: pooja-muchandikar Date: Tue, 7 Nov 2023 13:21:49 +0530 Subject: [PATCH 5/9] Address Feedback --- .../specs/editor/plugins/child-blocks.spec.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/test/e2e/specs/editor/plugins/child-blocks.spec.js b/test/e2e/specs/editor/plugins/child-blocks.spec.js index ec882028cdcac..605f9526a640f 100644 --- a/test/e2e/specs/editor/plugins/child-blocks.spec.js +++ b/test/e2e/specs/editor/plugins/child-blocks.spec.js @@ -36,11 +36,9 @@ test.describe( 'Child Blocks', () => { name: 'test/child-blocks-unrestricted-parent', } ); - await page - .getByRole( 'document', { - name: 'Block: Child Blocks Unrestricted Parent', - } ) - .click(); + await page.click( + '[data-type="test/child-blocks-unrestricted-parent"] .block-editor-default-block-appender' + ); const blockInserter = page .getByRole( 'toolbar', { name: 'Document tools' } ) .getByRole( 'button', { name: 'Toggle block inserter' } ); @@ -63,11 +61,9 @@ test.describe( 'Child Blocks', () => { name: 'test/child-blocks-restricted-parent', } ); - await page - .getByRole( 'document', { - name: 'Block: Child Blocks Restricted Parent', - } ) - .click(); + await page.click( + '[data-type="test/child-blocks-restricted-parent"] .block-editor-default-block-appender' + ); const blockInserter = page .getByRole( 'toolbar', { name: 'Document tools' } ) From c8a6589ec64c26cfddb6b84a7a6af651c7a73c9b Mon Sep 17 00:00:00 2001 From: pooja-muchandikar Date: Tue, 7 Nov 2023 14:58:25 +0530 Subject: [PATCH 6/9] Address feedbacks --- test/e2e/specs/editor/plugins/child-blocks.spec.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/test/e2e/specs/editor/plugins/child-blocks.spec.js b/test/e2e/specs/editor/plugins/child-blocks.spec.js index 605f9526a640f..5f83c3a5a77a0 100644 --- a/test/e2e/specs/editor/plugins/child-blocks.spec.js +++ b/test/e2e/specs/editor/plugins/child-blocks.spec.js @@ -36,9 +36,15 @@ test.describe( 'Child Blocks', () => { name: 'test/child-blocks-unrestricted-parent', } ); - await page.click( - '[data-type="test/child-blocks-unrestricted-parent"] .block-editor-default-block-appender' - ); + await page + .getByRole( 'document', { + name: 'Block: Child Blocks Unrestricted Parent', + } ) + .getByRole( 'button', { + name: 'Add block', + } ) + .click(); + const blockInserter = page .getByRole( 'toolbar', { name: 'Document tools' } ) .getByRole( 'button', { name: 'Toggle block inserter' } ); From ef7a2fbaf1298dac22e59e88cb1067239e84f4b3 Mon Sep 17 00:00:00 2001 From: pooja-muchandikar Date: Tue, 7 Nov 2023 15:59:45 +0530 Subject: [PATCH 7/9] Address feedbacks --- .../specs/editor/plugins/child-blocks.spec.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/test/e2e/specs/editor/plugins/child-blocks.spec.js b/test/e2e/specs/editor/plugins/child-blocks.spec.js index 5f83c3a5a77a0..c77e37ae4d62e 100644 --- a/test/e2e/specs/editor/plugins/child-blocks.spec.js +++ b/test/e2e/specs/editor/plugins/child-blocks.spec.js @@ -29,6 +29,9 @@ test.describe( 'Child Blocks', () => { expect( blockLibrary.getByRole( 'option' ) ).not.toContain( [ 'Child Blocks Child', ] ); + expect( + await blockLibrary.getByRole( 'option' ).count() + ).toBeGreaterThan( 10 ); } ); test( 'shows up in a parent block', async ( { page, editor } ) => { @@ -41,7 +44,7 @@ test.describe( 'Child Blocks', () => { name: 'Block: Child Blocks Unrestricted Parent', } ) .getByRole( 'button', { - name: 'Add block', + name: 'Add default block', } ) .click(); @@ -54,6 +57,9 @@ test.describe( 'Child Blocks', () => { await blockInserter.click(); await expect( blockLibrary ).toBeVisible(); + await expect( blockLibrary.getByRole( 'option' ) ).toContainText( [ + 'Child Blocks Child', + ] ); expect( await blockLibrary.getByRole( 'option' ).count() ).toBeGreaterThan( 10 ); @@ -67,9 +73,14 @@ test.describe( 'Child Blocks', () => { name: 'test/child-blocks-restricted-parent', } ); - await page.click( - '[data-type="test/child-blocks-restricted-parent"] .block-editor-default-block-appender' - ); + await page + .getByRole( 'document', { + name: 'Block: Child Blocks Restricted Parent', + } ) + .getByRole( 'button', { + name: 'Add default block', + } ) + .click(); const blockInserter = page .getByRole( 'toolbar', { name: 'Document tools' } ) From 03785f395020d63e3fb09a02ea100f3e0b3cf4ea Mon Sep 17 00:00:00 2001 From: pooja-muchandikar Date: Tue, 7 Nov 2023 16:35:40 +0530 Subject: [PATCH 8/9] Update test case --- test/e2e/specs/editor/plugins/child-blocks.spec.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/test/e2e/specs/editor/plugins/child-blocks.spec.js b/test/e2e/specs/editor/plugins/child-blocks.spec.js index c77e37ae4d62e..6adc351e041b8 100644 --- a/test/e2e/specs/editor/plugins/child-blocks.spec.js +++ b/test/e2e/specs/editor/plugins/child-blocks.spec.js @@ -60,9 +60,6 @@ test.describe( 'Child Blocks', () => { await expect( blockLibrary.getByRole( 'option' ) ).toContainText( [ 'Child Blocks Child', ] ); - expect( - await blockLibrary.getByRole( 'option' ).count() - ).toBeGreaterThan( 10 ); } ); test( 'display in a parent block with allowedItems', async ( { From b7830ab78fbb44e29defe82736b8f74e00fe4b3f Mon Sep 17 00:00:00 2001 From: pooja-muchandikar Date: Tue, 7 Nov 2023 16:36:59 +0530 Subject: [PATCH 9/9] Update test case --- test/e2e/specs/editor/plugins/child-blocks.spec.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/e2e/specs/editor/plugins/child-blocks.spec.js b/test/e2e/specs/editor/plugins/child-blocks.spec.js index 6adc351e041b8..b3073b70a5409 100644 --- a/test/e2e/specs/editor/plugins/child-blocks.spec.js +++ b/test/e2e/specs/editor/plugins/child-blocks.spec.js @@ -29,9 +29,6 @@ test.describe( 'Child Blocks', () => { expect( blockLibrary.getByRole( 'option' ) ).not.toContain( [ 'Child Blocks Child', ] ); - expect( - await blockLibrary.getByRole( 'option' ).count() - ).toBeGreaterThan( 10 ); } ); test( 'shows up in a parent block', async ( { page, editor } ) => { @@ -60,6 +57,9 @@ test.describe( 'Child Blocks', () => { await expect( blockLibrary.getByRole( 'option' ) ).toContainText( [ 'Child Blocks Child', ] ); + expect( + await blockLibrary.getByRole( 'option' ).count() + ).toBeGreaterThan( 10 ); } ); test( 'display in a parent block with allowedItems', async ( {