diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md index 845b6725cf82f..0b1c589738236 100644 --- a/packages/e2e-test-utils/README.md +++ b/packages/e2e-test-utils/README.md @@ -46,10 +46,20 @@ Clears the local storage. Clicks the default block appender. -### clickButton +### clickBlockToolbarButton [src/index.js#L5-L5](src/index.js#L5-L5) +Clicks a block toolbar button. + +**Parameters** + +- **buttonAriaLabel** `string`: The aria label of the button to click. + +### clickButton + +[src/index.js#L6-L6](src/index.js#L6-L6) + Clicks a button based on the text on the button. **Parameters** @@ -58,7 +68,7 @@ Clicks a button based on the text on the button. ### clickOnCloseModalButton -[src/index.js#L6-L6](src/index.js#L6-L6) +[src/index.js#L7-L7](src/index.js#L7-L7) Click on the close button of an open modal. @@ -68,7 +78,7 @@ Click on the close button of an open modal. ### clickOnMoreMenuItem -[src/index.js#L7-L7](src/index.js#L7-L7) +[src/index.js#L8-L8](src/index.js#L8-L8) Clicks on More Menu item, searches for the button with the text provided and clicks it. @@ -78,7 +88,7 @@ Clicks on More Menu item, searches for the button with the text provided and cli ### createEmbeddingMatcher -[src/index.js#L46-L46](src/index.js#L46-L46) +[src/index.js#L47-L47](src/index.js#L47-L47) Creates a function to determine if a request is embedding a certain URL. @@ -92,7 +102,7 @@ Creates a function to determine if a request is embedding a certain URL. ### createJSONResponse -[src/index.js#L46-L46](src/index.js#L46-L46) +[src/index.js#L47-L47](src/index.js#L47-L47) Respond to a request with a JSON response. @@ -106,7 +116,7 @@ Respond to a request with a JSON response. ### createNewPost -[src/index.js#L8-L8](src/index.js#L8-L8) +[src/index.js#L9-L9](src/index.js#L9-L9) Creates new post. @@ -116,7 +126,7 @@ Creates new post. ### createURL -[src/index.js#L9-L9](src/index.js#L9-L9) +[src/index.js#L10-L10](src/index.js#L10-L10) Creates new URL by parsing base URL, WPPath and query string. @@ -131,7 +141,7 @@ Creates new URL by parsing base URL, WPPath and query string. ### createURLMatcher -[src/index.js#L46-L46](src/index.js#L46-L46) +[src/index.js#L47-L47](src/index.js#L47-L47) Creates a function to determine if a request is calling a URL with the substring present. @@ -145,7 +155,7 @@ Creates a function to determine if a request is calling a URL with the substring ### deactivatePlugin -[src/index.js#L10-L10](src/index.js#L10-L10) +[src/index.js#L11-L11](src/index.js#L11-L11) Deactivates an active plugin. @@ -155,26 +165,26 @@ Deactivates an active plugin. ### disablePrePublishChecks -[src/index.js#L11-L11](src/index.js#L11-L11) +[src/index.js#L12-L12](src/index.js#L12-L12) Disables Pre-publish checks. ### enablePageDialogAccept -[src/index.js#L12-L12](src/index.js#L12-L12) +[src/index.js#L13-L13](src/index.js#L13-L13) Enables even listener which accepts a page dialog which may appear when navigating away from Gutenberg. ### enablePrePublishChecks -[src/index.js#L13-L13](src/index.js#L13-L13) +[src/index.js#L14-L14](src/index.js#L14-L14) Enables Pre-publish checks. ### ensureSidebarOpened -[src/index.js#L14-L14](src/index.js#L14-L14) +[src/index.js#L15-L15](src/index.js#L15-L15) Verifies that the edit post sidebar is opened, and if it is not, opens it. @@ -184,7 +194,7 @@ Verifies that the edit post sidebar is opened, and if it is not, opens it. ### findSidebarPanelToggleButtonWithTitle -[src/index.js#L15-L15](src/index.js#L15-L15) +[src/index.js#L16-L16](src/index.js#L16-L16) Finds a sidebar panel with the provided title. @@ -198,7 +208,7 @@ Finds a sidebar panel with the provided title. ### findSidebarPanelWithTitle -[src/index.js#L16-L16](src/index.js#L16-L16) +[src/index.js#L17-L17](src/index.js#L17-L17) Finds the button responsible for toggling the sidebar panel with the provided title. @@ -212,7 +222,7 @@ Finds the button responsible for toggling the sidebar panel with the provided ti ### getAllBlocks -[src/index.js#L17-L17](src/index.js#L17-L17) +[src/index.js#L18-L18](src/index.js#L18-L18) Returns an array with all blocks; Equivalent to calling wp.data.select( 'core/editor' ).getBlocks(); @@ -222,7 +232,7 @@ Returns an array with all blocks; Equivalent to calling wp.data.select( 'core/ed ### getAvailableBlockTransforms -[src/index.js#L18-L18](src/index.js#L18-L18) +[src/index.js#L19-L19](src/index.js#L19-L19) Returns an array of strings with all block titles, that the current selected block can be transformed into. @@ -233,7 +243,7 @@ that the current selected block can be transformed into. ### getEditedPostContent -[src/index.js#L19-L19](src/index.js#L19-L19) +[src/index.js#L20-L20](src/index.js#L20-L20) Returns a promise which resolves with the edited post content (HTML string). @@ -243,7 +253,7 @@ Returns a promise which resolves with the edited post content (HTML string). ### hasBlockSwitcher -[src/index.js#L20-L20](src/index.js#L20-L20) +[src/index.js#L21-L21](src/index.js#L21-L21) Returns a boolean indicating if the current selected block has a block switcher or not. @@ -253,7 +263,7 @@ Returns a boolean indicating if the current selected block has a block switcher ### insertBlock -[src/index.js#L21-L21](src/index.js#L21-L21) +[src/index.js#L22-L22](src/index.js#L22-L22) Opens the inserter, searches for the given term, then selects the first result that appears. @@ -265,7 +275,7 @@ result that appears. ### installPlugin -[src/index.js#L22-L22](src/index.js#L22-L22) +[src/index.js#L23-L23](src/index.js#L23-L23) Installs a plugin from the WP.org repository. @@ -276,7 +286,7 @@ Installs a plugin from the WP.org repository. ### isCurrentURL -[src/index.js#L23-L23](src/index.js#L23-L23) +[src/index.js#L24-L24](src/index.js#L24-L24) Checks if current URL is a WordPress path. @@ -291,7 +301,7 @@ Checks if current URL is a WordPress path. ### loginUser -[src/index.js#L24-L24](src/index.js#L24-L24) +[src/index.js#L25-L25](src/index.js#L25-L25) Performs log in with specified username and password. @@ -302,7 +312,7 @@ Performs log in with specified username and password. ### mockOrTransform -[src/index.js#L46-L46](src/index.js#L46-L46) +[src/index.js#L47-L47](src/index.js#L47-L47) Mocks a request with the supplied mock object, or allows it to run with an optional transform, based on the deserialised JSON response for the request. @@ -319,26 +329,26 @@ deserialised JSON response for the request. ### observeFocusLoss -[src/index.js#L25-L25](src/index.js#L25-L25) +[src/index.js#L26-L26](src/index.js#L26-L26) Binds to the document on page load which throws an error if a `focusout` event occurs without a related target (i.e. focus loss). ### openDocumentSettingsSidebar -[src/index.js#L26-L26](src/index.js#L26-L26) +[src/index.js#L27-L27](src/index.js#L27-L27) Clicks on the button in the header which opens Document Settings sidebar when it is closed. ### openPublishPanel -[src/index.js#L27-L27](src/index.js#L27-L27) +[src/index.js#L28-L28](src/index.js#L28-L28) Opens the publish panel. ### pressKeyTimes -[src/index.js#L28-L28](src/index.js#L28-L28) +[src/index.js#L29-L29](src/index.js#L29-L29) Presses the given keyboard key a number of times in sequence. @@ -353,7 +363,7 @@ Presses the given keyboard key a number of times in sequence. ### pressKeyWithModifier -[src/index.js#L29-L29](src/index.js#L29-L29) +[src/index.js#L30-L30](src/index.js#L30-L30) Performs a key press with modifier (Shift, Control, Meta, Alt), where each modifier is normalized to platform-specific modifier. @@ -365,7 +375,7 @@ is normalized to platform-specific modifier. ### publishPost -[src/index.js#L30-L30](src/index.js#L30-L30) +[src/index.js#L31-L31](src/index.js#L31-L31) Publishes the post, resolving once the request is complete (once a notice is displayed). @@ -376,7 +386,7 @@ is displayed). ### publishPostWithPrePublishChecksDisabled -[src/index.js#L31-L31](src/index.js#L31-L31) +[src/index.js#L32-L32](src/index.js#L32-L32) Publishes the post without the pre-publish checks, resolving once the request is complete (once a notice is displayed). @@ -387,7 +397,7 @@ resolving once the request is complete (once a notice is displayed). ### saveDraft -[src/index.js#L32-L32](src/index.js#L32-L32) +[src/index.js#L33-L33](src/index.js#L33-L33) Saves the post as a draft, resolving once the request is complete (once the "Saved" indicator is displayed). @@ -398,7 +408,7 @@ Saves the post as a draft, resolving once the request is complete (once the ### searchForBlock -[src/index.js#L33-L33](src/index.js#L33-L33) +[src/index.js#L34-L34](src/index.js#L34-L34) Search for block in the global inserter @@ -408,7 +418,7 @@ Search for block in the global inserter ### selectBlockByClientId -[src/index.js#L34-L34](src/index.js#L34-L34) +[src/index.js#L35-L35](src/index.js#L35-L35) Given the clientId of a block, selects the block on the editor. @@ -418,7 +428,7 @@ Given the clientId of a block, selects the block on the editor. ### setBrowserViewport -[src/index.js#L35-L35](src/index.js#L35-L35) +[src/index.js#L36-L36](src/index.js#L36-L36) Sets browser viewport to specified type. @@ -428,7 +438,7 @@ Sets browser viewport to specified type. ### setPostContent -[src/index.js#L36-L36](src/index.js#L36-L36) +[src/index.js#L37-L37](src/index.js#L37-L37) Sets code editor content @@ -442,7 +452,7 @@ Sets code editor content ### setUpResponseMocking -[src/index.js#L46-L46](src/index.js#L46-L46) +[src/index.js#L47-L47](src/index.js#L47-L47) Sets up mock checks and responses. Accepts a list of mock settings with the following properties: @@ -473,7 +483,7 @@ If none of the mock settings match the request, the request is allowed to contin ### switchEditorModeTo -[src/index.js#L37-L37](src/index.js#L37-L37) +[src/index.js#L38-L38](src/index.js#L38-L38) Switches editor mode. @@ -483,21 +493,21 @@ Switches editor mode. ### switchUserToAdmin -[src/index.js#L38-L38](src/index.js#L38-L38) +[src/index.js#L39-L39](src/index.js#L39-L39) Switches the current user to the admin user (if the user running the test is not already the admin user). ### switchUserToTest -[src/index.js#L39-L39](src/index.js#L39-L39) +[src/index.js#L40-L40](src/index.js#L40-L40) Switches the current user to whichever user we should be running the tests as (if we're not already that user). ### toggleScreenOption -[src/index.js#L40-L40](src/index.js#L40-L40) +[src/index.js#L41-L41](src/index.js#L41-L41) Toggles the screen option with the given label. @@ -508,7 +518,7 @@ Toggles the screen option with the given label. ### transformBlockTo -[src/index.js#L41-L41](src/index.js#L41-L41) +[src/index.js#L42-L42](src/index.js#L42-L42) Converts editor's block type. @@ -518,7 +528,7 @@ Converts editor's block type. ### uninstallPlugin -[src/index.js#L42-L42](src/index.js#L42-L42) +[src/index.js#L43-L43](src/index.js#L43-L43) Uninstalls a plugin. @@ -528,7 +538,7 @@ Uninstalls a plugin. ### visitAdminPage -[src/index.js#L43-L43](src/index.js#L43-L43) +[src/index.js#L44-L44](src/index.js#L44-L44) Visits admin page; if user is not logged in then it logging in it first, then visits admin page. @@ -539,7 +549,7 @@ Visits admin page; if user is not logged in then it logging in it first, then vi ### waitForWindowDimensions -[src/index.js#L44-L44](src/index.js#L44-L44) +[src/index.js#L45-L45](src/index.js#L45-L45) Function that waits until the page viewport has the required dimensions. It is being used to address a problem where after using setViewport the execution may continue, diff --git a/packages/e2e-test-utils/src/click-block-toolbar-button.js b/packages/e2e-test-utils/src/click-block-toolbar-button.js new file mode 100644 index 0000000000000..511b300866673 --- /dev/null +++ b/packages/e2e-test-utils/src/click-block-toolbar-button.js @@ -0,0 +1,15 @@ +/** + * Clicks a block toolbar button. + * + * @param {string} buttonAriaLabel The aria label of the button to click. + */ +export async function clickBlockToolbarButton( buttonAriaLabel ) { + const BLOCK_TOOLBAR_SELECTOR = '.editor-block-toolbar'; + const BUTTON_SELECTOR = `${ BLOCK_TOOLBAR_SELECTOR } button[aria-label="${ buttonAriaLabel }"]`; + if ( await page.$( BLOCK_TOOLBAR_SELECTOR ) === null ) { + // Press escape to show the block toolbar + await page.keyboard.press( 'Escape' ); + } + await page.waitForSelector( BUTTON_SELECTOR ); + await page.click( BUTTON_SELECTOR ); +} diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js index 6f48ab320a206..2d9e5b6af6ffc 100644 --- a/packages/e2e-test-utils/src/index.js +++ b/packages/e2e-test-utils/src/index.js @@ -2,6 +2,7 @@ export { activatePlugin } from './activate-plugin'; export { arePrePublishChecksEnabled } from './are-pre-publish-checks-enabled'; export { clearLocalStorage } from './clear-local-storage'; export { clickBlockAppender } from './click-block-appender'; +export { clickBlockToolbarButton } from './click-block-toolbar-button'; export { clickButton } from './click-button'; export { clickOnCloseModalButton } from './click-on-close-modal-button'; export { clickOnMoreMenuItem } from './click-on-more-menu-item'; diff --git a/packages/e2e-tests/specs/blocks/list.test.js b/packages/e2e-tests/specs/blocks/list.test.js index 8432ff5d912d6..23d02e0f10cb7 100644 --- a/packages/e2e-tests/specs/blocks/list.test.js +++ b/packages/e2e-tests/specs/blocks/list.test.js @@ -3,6 +3,7 @@ */ import { clickBlockAppender, + clickBlockToolbarButton, getEditedPostContent, createNewPost, pressKeyTimes, @@ -124,11 +125,7 @@ describe( 'List', () => { await insertBlock( 'List' ); await page.keyboard.type( 'one' ); await page.keyboard.press( 'Enter' ); - // Pointer device is needed. Shift+Tab won't focus the toolbar. - // To do: fix so Shift+Tab works. - // Press escape to show the block toolbar - await page.keyboard.press( 'Escape' ); - await page.click( 'button[aria-label="Indent list item"]' ); + await clickBlockToolbarButton( 'Indent list item' ); await page.keyboard.type( 'two' ); await transformBlockTo( 'Paragraph' ); @@ -198,11 +195,7 @@ describe( 'List', () => { await insertBlock( 'List' ); await page.keyboard.type( 'one' ); await page.keyboard.press( 'Enter' ); - // Pointer device is needed. Shift+Tab won't focus the toolbar. - // To do: fix so Shift+Tab works. - // Press escape to show the block toolbar - await page.keyboard.press( 'Escape' ); - await page.click( 'button[aria-label="Indent list item"]' ); + await clickBlockToolbarButton( 'Indent list item' ); await page.keyboard.type( 'two' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'three' ); @@ -233,12 +226,7 @@ describe( 'List', () => { await pressKeyWithModifier( 'primary', 'm' ); await page.keyboard.type( '1' ); - // Pointer device is needed. Shift+Tab won't focus the toolbar. - // To do: fix so Shift+Tab works. - // Press escape to show the block toolbar - await page.keyboard.press( 'Escape' ); - - await page.click( 'button[aria-label="Convert to ordered list"]' ); + await clickBlockToolbarButton( 'Convert to ordered list' ); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); diff --git a/packages/e2e-tests/specs/invalid-block.test.js b/packages/e2e-tests/specs/invalid-block.test.js index 803fed87b6446..007912aafe317 100644 --- a/packages/e2e-tests/specs/invalid-block.test.js +++ b/packages/e2e-tests/specs/invalid-block.test.js @@ -4,6 +4,7 @@ import { createNewPost, clickBlockAppender, + clickBlockToolbarButton, } from '@wordpress/e2e-test-utils'; describe( 'invalid blocks', () => { @@ -16,10 +17,7 @@ describe( 'invalid blocks', () => { await clickBlockAppender(); await page.keyboard.type( 'hello' ); - // Press escape to show the block toolbar - await page.keyboard.press( 'Escape' ); - // Click the 'more options' - await page.click( 'button[aria-label="More options"]' ); + await clickBlockToolbarButton( 'More options' ); // Change to HTML mode and close the options const changeModeButton = await page.waitForXPath( '//button[text()="Edit as HTML"]' ); diff --git a/packages/e2e-tests/specs/links.test.js b/packages/e2e-tests/specs/links.test.js index 39b6eca2f5810..b4be3dbfc53a6 100644 --- a/packages/e2e-tests/specs/links.test.js +++ b/packages/e2e-tests/specs/links.test.js @@ -3,6 +3,7 @@ */ import { clickBlockAppender, + clickBlockToolbarButton, getEditedPostContent, createNewPost, pressKeyWithModifier, @@ -219,10 +220,7 @@ describe( 'Links', () => { await clickBlockAppender(); await page.keyboard.type( 'Text' ); - // Press escape to show the block toolbar - await page.keyboard.press( 'Escape' ); - await page.waitForSelector( 'button[aria-label="Link"]' ); - await page.click( 'button[aria-label="Link"]' ); + await clickBlockToolbarButton( 'Link' ); // Typing "left" should not close the dialog await page.keyboard.press( 'ArrowLeft' ); diff --git a/packages/e2e-tests/specs/plugins/format-api.test.js b/packages/e2e-tests/specs/plugins/format-api.test.js index 203714863c083..25f56f5a39c77 100644 --- a/packages/e2e-tests/specs/plugins/format-api.test.js +++ b/packages/e2e-tests/specs/plugins/format-api.test.js @@ -4,6 +4,7 @@ import { activatePlugin, clickBlockAppender, + clickBlockToolbarButton, createNewPost, deactivatePlugin, getEditedPostContent, @@ -26,9 +27,7 @@ describe( 'Using Format API', () => { it( 'Format toolbar is present in a paragraph block', async () => { await clickBlockAppender(); await page.keyboard.type( 'First paragraph' ); - // Press escape to show the block toolbar - await page.keyboard.press( 'Escape' ); - expect( await page.$( '[aria-label="Custom Link"]' ) ).not.toBeNull(); + await clickBlockToolbarButton( 'Custom Link' ); } ); it( 'Clicking the control wraps the selected text properly with HTML code', async () => { @@ -36,9 +35,7 @@ describe( 'Using Format API', () => { await page.keyboard.type( 'First paragraph' ); await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); await pressKeyWithModifier( 'primary', 'A' ); - // Press escape to show the block toolbar - await page.keyboard.press( 'Escape' ); - await page.click( '[aria-label="Custom Link"]' ); + await clickBlockToolbarButton( 'Custom Link' ); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); } ); diff --git a/packages/e2e-tests/specs/reusable-blocks.test.js b/packages/e2e-tests/specs/reusable-blocks.test.js index a444a61cfbb58..982762b63dfec 100644 --- a/packages/e2e-tests/specs/reusable-blocks.test.js +++ b/packages/e2e-tests/specs/reusable-blocks.test.js @@ -4,6 +4,7 @@ import { insertBlock, createNewPost, + clickBlockToolbarButton, pressKeyWithModifier, searchForBlock, getEditedPostContent, @@ -34,12 +35,8 @@ describe( 'Reusable Blocks', () => { await insertBlock( 'Paragraph' ); await page.keyboard.type( 'Hello there!' ); - // Press escape to show the block toolbar - await page.keyboard.press( 'Escape' ); + await clickBlockToolbarButton( 'More options' ); - // Convert block to a reusable block - await page.waitForSelector( 'button[aria-label="More options"]' ); - await page.click( 'button[aria-label="More options"]' ); const convertButton = await page.waitForXPath( '//button[text()="Add to Reusable Blocks"]' ); await convertButton.click(); @@ -80,12 +77,8 @@ describe( 'Reusable Blocks', () => { await insertBlock( 'Paragraph' ); await page.keyboard.type( 'Hello there!' ); - // Press escape to show the block toolbar - await page.keyboard.press( 'Escape' ); + await clickBlockToolbarButton( 'More options' ); - // Convert block to a reusable block - await page.waitForSelector( 'button[aria-label="More options"]' ); - await page.click( 'button[aria-label="More options"]' ); const convertButton = await page.waitForXPath( '//button[text()="Add to Reusable Blocks"]' ); await convertButton.click(); diff --git a/packages/e2e-tests/specs/style-variation.test.js b/packages/e2e-tests/specs/style-variation.test.js index 2ec32efe89141..33ddcc3c2f809 100644 --- a/packages/e2e-tests/specs/style-variation.test.js +++ b/packages/e2e-tests/specs/style-variation.test.js @@ -1,7 +1,12 @@ /** * WordPress dependencies */ -import { createNewPost, insertBlock, getEditedPostContent } from '@wordpress/e2e-test-utils'; +import { + createNewPost, + clickBlockToolbarButton, + insertBlock, + getEditedPostContent, +} from '@wordpress/e2e-test-utils'; describe( 'adding blocks', () => { beforeAll( async () => { @@ -13,12 +18,8 @@ describe( 'adding blocks', () => { await insertBlock( 'Quote' ); await page.keyboard.type( 'Quote content' ); - // Press escape to show the block toolbar - await page.keyboard.press( 'Escape' ); + await clickBlockToolbarButton( 'Change block type' ); - // Use a different style variation - await page.waitForSelector( 'button[aria-label="Change block type"]' ); - await page.click( 'button[aria-label="Change block type"]' ); const styleVariations = await page.$$( '.editor-block-styles__item' ); await styleVariations[ 1 ].click();