From a5810f02022e607ffd9e445b3beb2296418c2379 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 28 Nov 2023 14:17:13 -0600 Subject: [PATCH 1/3] Move and rename is-typing test file --- .../e2e/specs/editor/various/is-typing.spec.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/e2e-tests/specs/editor/various/is-typing.test.js => test/e2e/specs/editor/various/is-typing.spec.js (100%) diff --git a/packages/e2e-tests/specs/editor/various/is-typing.test.js b/test/e2e/specs/editor/various/is-typing.spec.js similarity index 100% rename from packages/e2e-tests/specs/editor/various/is-typing.test.js rename to test/e2e/specs/editor/various/is-typing.spec.js From 106710f9a3b51a05bdd695afe346194d5015ec0d Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 28 Nov 2023 16:50:13 -0600 Subject: [PATCH 2/3] Migrate is typing tests to playwright For 'should not close the dropdown when typing in it' I switched the test method to use an existing block with a dropdown rather than add a dropdown with an input to the screen. This feels more like real e2e test usage. --- .../specs/editor/various/is-typing.spec.js | 114 ++++++------------ 1 file changed, 38 insertions(+), 76 deletions(-) diff --git a/test/e2e/specs/editor/various/is-typing.spec.js b/test/e2e/specs/editor/various/is-typing.spec.js index c6208470ffb8e5..c019174e8a3375 100644 --- a/test/e2e/specs/editor/various/is-typing.spec.js +++ b/test/e2e/specs/editor/various/is-typing.spec.js @@ -1,101 +1,63 @@ /** * WordPress dependencies */ -import { - clickBlockAppender, - createNewPost, - showBlockToolbar, -} from '@wordpress/e2e-test-utils'; +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); -describe( 'isTyping', () => { - beforeEach( async () => { - await createNewPost(); +test.describe( 'isTyping', () => { + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); } ); - it( 'should hide the toolbar when typing', async () => { - const blockToolbarSelector = '.block-editor-block-toolbar'; - - await clickBlockAppender(); - - // Type in a paragraph. + test( 'should hide the toolbar when typing', async ( { editor, page } ) => { + // Enter to reach paragraph block. + await page.keyboard.press( 'Enter' ); + // Insert paragraph await page.keyboard.type( 'Type' ); - // Toolbar is hidden - let blockToolbar = await page.$( blockToolbarSelector ); - expect( blockToolbar ).toBe( null ); + const blockToolbar = page.locator( + 'role=toolbar[name="Block tools"i]' + ); + + // Toolbar should not be showing + await expect( blockToolbar ).toBeHidden(); // Moving the mouse shows the toolbar. - await showBlockToolbar(); + await editor.showBlockToolbar(); // Toolbar is visible. - blockToolbar = await page.$( blockToolbarSelector ); - expect( blockToolbar ).not.toBe( null ); + await expect( blockToolbar ).toBeVisible(); // Typing again hides the toolbar await page.keyboard.type( ' and continue' ); // Toolbar is hidden again - blockToolbar = await page.$( blockToolbarSelector ); - expect( blockToolbar ).toBe( null ); + await expect( blockToolbar ).toBeHidden(); } ); - it( 'should not close the dropdown when typing in it', async () => { - // Adds a Dropdown with an input to all blocks. - await page.evaluate( () => { - const { Dropdown, ToolbarButton, Fill } = wp.components; - const { createElement: el, Fragment } = wp.element; - function AddDropdown( BlockListBlock ) { - return ( props ) => { - return el( - Fragment, - {}, - el( - Fill, - { name: 'BlockControls' }, - el( Dropdown, { - renderToggle: ( { onToggle } ) => - el( - ToolbarButton, - { - onClick: onToggle, - className: 'dropdown-open', - }, - 'Open Dropdown' - ), - renderContent: () => - el( 'input', { - className: 'dropdown-input', - } ), - } ) - ), - el( BlockListBlock, props ) - ); - }; - } - - wp.hooks.addFilter( - 'editor.BlockListBlock', - 'e2e-test/add-dropdown', - AddDropdown - ); - } ); - - await clickBlockAppender(); - - // Type in a paragraph. - await page.keyboard.type( 'Type' ); - - // Show Toolbar. - await showBlockToolbar(); - + test( 'should not close the dropdown when typing in it', async ( { + editor, + page, + } ) => { + // Add a block with a dropdown in the toolbar that contains an input. + await editor.insertBlock( { name: 'core/query' } ); + + // Tab to Start Blank Button + await page.keyboard.press( 'Tab' ); + // Select the Start Blank Button + await page.keyboard.press( 'Enter' ); + // Select the First variation + await page.keyboard.press( 'Enter' ); + // Moving the mouse shows the toolbar. + await editor.showBlockToolbar(); // Open the dropdown. - await page.click( '.dropdown-open' ); + await page.getByLabel( 'Display settings' ).click(); + const itemsPerPageInput = page.getByLabel( 'Items per Page' ); + // Make sure we're where we think we are + await expect( itemsPerPageInput ).toBeFocused(); // Type inside the dropdown's input - await page.type( '.dropdown-input', 'Random' ); - + await page.keyboard.type( '00' ); // The input should still be visible. - const input = await page.$( '.dropdown-input' ); - expect( input ).not.toBe( null ); + await expect( itemsPerPageInput ).toBeVisible(); } ); } ); From 7022a5fc41a717df7287b61a6ff2020fad2d5484 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 29 Nov 2023 07:39:03 -0600 Subject: [PATCH 3/3] Use getByRole instead of getByLabel --- test/e2e/specs/editor/various/is-typing.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/various/is-typing.spec.js b/test/e2e/specs/editor/various/is-typing.spec.js index c019174e8a3375..0cd5e0d6f64953 100644 --- a/test/e2e/specs/editor/various/is-typing.spec.js +++ b/test/e2e/specs/editor/various/is-typing.spec.js @@ -50,7 +50,7 @@ test.describe( 'isTyping', () => { // Moving the mouse shows the toolbar. await editor.showBlockToolbar(); // Open the dropdown. - await page.getByLabel( 'Display settings' ).click(); + await page.getByRole( 'button', { name: 'Display settings' } ).click(); const itemsPerPageInput = page.getByLabel( 'Items per Page' ); // Make sure we're where we think we are