From 05e12baffe2bda1aad655074dfca4e9be82252db Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 19 Jun 2020 14:14:28 +0100 Subject: [PATCH 1/2] Use showBlockToolbar consistently --- packages/e2e-test-utils/README.md | 11 ++++++----- .../src/click-block-toolbar-button.js | 10 +--------- packages/e2e-test-utils/src/index.js | 1 + .../e2e-test-utils/src/show-block-toolbar.js | 4 ++++ .../e2e-test-utils/src/transform-block-to.js | 4 +--- .../specs/editor/plugins/cpt-locking.test.js | 4 ---- .../specs/editor/various/block-deletion.test.js | 10 ---------- .../specs/editor/various/block-mover.test.js | 10 +++------- .../specs/editor/various/editor-modes.test.js | 16 ---------------- .../specs/editor/various/is-typing.test.js | 9 ++++++--- .../various/keyboard-navigable-blocks.test.js | 6 ++---- .../e2e-tests/specs/editor/various/links.test.js | 5 ++--- .../specs/editor/various/rich-text.test.js | 7 +++---- .../specs/experiments/navigation.test.js | 4 ++-- 14 files changed, 31 insertions(+), 70 deletions(-) diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md index edb33eaa182705..243b8c4a8fe9c1 100644 --- a/packages/e2e-test-utils/README.md +++ b/packages/e2e-test-utils/README.md @@ -42,11 +42,7 @@ Clicks the default block appender. # **clickBlockToolbarButton** -Clicks a block toolbar button. - -_Parameters_ - -- _buttonAriaLabel_ `string`: The aria label of the button to click. +Undocumented declaration. # **clickButton** @@ -491,6 +487,11 @@ _Parameters_ - _mocks_ `Array`: Array of mock settings. +# **showBlockToolbar** + +The block toolbar is not always visible while typing. +Call this function to reveal it. + # **switchEditorModeTo** Switches editor mode. diff --git a/packages/e2e-test-utils/src/click-block-toolbar-button.js b/packages/e2e-test-utils/src/click-block-toolbar-button.js index 1e25da1ba2e36a..e925887a18f678 100644 --- a/packages/e2e-test-utils/src/click-block-toolbar-button.js +++ b/packages/e2e-test-utils/src/click-block-toolbar-button.js @@ -8,20 +8,12 @@ import { showBlockToolbar } from './show-block-toolbar'; * * @param {string} buttonAriaLabel The aria label of the button to click. */ -export async function clickBlockToolbarButton( buttonAriaLabel ) { +export async function c( buttonAriaLabel ) { await showBlockToolbar(); const BLOCK_TOOLBAR_SELECTOR = '.block-editor-block-toolbar'; const BUTTON_SELECTOR = `${ BLOCK_TOOLBAR_SELECTOR } button[aria-label="${ buttonAriaLabel }"]`; - // Hover the block switcher to show the movers - const switcher = await page.$( - '.block-editor-block-toolbar .block-editor-block-toolbar__block-switcher-wrapper' - ); - if ( switcher ) { - await switcher.hover(); - } - const button = await page.waitForSelector( BUTTON_SELECTOR ); await button.evaluate( ( element ) => element.scrollIntoView() ); await button.click(); diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js index 2afccf59db89d1..fba8c67b1c269d 100644 --- a/packages/e2e-test-utils/src/index.js +++ b/packages/e2e-test-utils/src/index.js @@ -59,5 +59,6 @@ export { transformBlockTo } from './transform-block-to'; export { uninstallPlugin } from './uninstall-plugin'; export { visitAdminPage } from './visit-admin-page'; export { waitForWindowDimensions } from './wait-for-window-dimensions'; +export { showBlockToolbar } from './show-block-toolbar'; export * from './mocks'; diff --git a/packages/e2e-test-utils/src/show-block-toolbar.js b/packages/e2e-test-utils/src/show-block-toolbar.js index f76f0061d2ac71..f1ac720e028d4f 100644 --- a/packages/e2e-test-utils/src/show-block-toolbar.js +++ b/packages/e2e-test-utils/src/show-block-toolbar.js @@ -1,3 +1,7 @@ +/** + * The block toolbar is not always visible while typing. + * Call this function to reveal it. + */ export async function showBlockToolbar() { // Move the mouse to disable the isTyping mode await page.mouse.move( 50, 50 ); diff --git a/packages/e2e-test-utils/src/transform-block-to.js b/packages/e2e-test-utils/src/transform-block-to.js index 0ea2b49ffa05f8..2ba5ea894f6e44 100644 --- a/packages/e2e-test-utils/src/transform-block-to.js +++ b/packages/e2e-test-utils/src/transform-block-to.js @@ -25,11 +25,9 @@ export async function transformBlockTo( name ) { // Find the block button option within the switcher popover. const xpath = `//*[contains(@class, "block-editor-block-switcher__popover")]//button[.='${ name }']`; - const insertButton = ( await page.$x( xpath ) )[ 0 ]; - + const insertButton = page.waitForXPath( xpath, { visible: true } ); // Clicks may fail if the button is out of view. Assure it is before click. await insertButton.evaluate( ( element ) => element.scrollIntoView() ); - await page.waitForXPath( xpath, { visible: true } ); await insertButton.click(); // Wait for the transformed block to appear. diff --git a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js index ab069ebcfed1e0..454476b108ff38 100644 --- a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js +++ b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js @@ -47,10 +47,6 @@ describe( 'cpt locking', () => { await page.click( '.block-editor-rich-text__editable[data-type="core/paragraph"]' ); - // Hover the block switcher to show the movers - await page.hover( - '.block-editor-block-toolbar .block-editor-block-toolbar__block-switcher-wrapper' - ); expect( await page.$( 'button[aria-label="Move up"]' ) ).not.toBeNull(); await page.click( 'button[aria-label="Move up"]' ); await page.type( diff --git a/packages/e2e-tests/specs/editor/various/block-deletion.test.js b/packages/e2e-tests/specs/editor/various/block-deletion.test.js index 00027d94137cf2..63aee6d901c18f 100644 --- a/packages/e2e-tests/specs/editor/various/block-deletion.test.js +++ b/packages/e2e-tests/specs/editor/various/block-deletion.test.js @@ -66,11 +66,6 @@ describe( 'block deletion -', () => { it( 'results in two remaining blocks and positions the caret at the end of the second block', async () => { // The blocks can't be empty to trigger the toolbar await page.keyboard.type( 'Paragraph to remove' ); - - // Move the mouse to show the block toolbar - await page.mouse.move( 0, 0 ); - await page.mouse.move( 10, 10 ); - await clickOnBlockSettingsMenuRemoveBlockButton(); expect( await getEditedPostContent() ).toMatchSnapshot(); @@ -156,11 +151,6 @@ describe( 'deleting all blocks', () => { it( 'results in the default block getting selected', async () => { await clickBlockAppender(); await page.keyboard.type( 'Paragraph' ); - - // Move the mouse to show the block toolbar - await page.mouse.move( 0, 0 ); - await page.mouse.move( 10, 10 ); - await clickOnBlockSettingsMenuRemoveBlockButton(); // There is a default block: diff --git a/packages/e2e-tests/specs/editor/various/block-mover.test.js b/packages/e2e-tests/specs/editor/various/block-mover.test.js index 3b936f212aba0b..c3a04f6f3a6c4e 100644 --- a/packages/e2e-tests/specs/editor/various/block-mover.test.js +++ b/packages/e2e-tests/specs/editor/various/block-mover.test.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { createNewPost } from '@wordpress/e2e-test-utils'; +import { createNewPost, showBlockToolbar } from '@wordpress/e2e-test-utils'; describe( 'block mover', () => { beforeEach( async () => { @@ -18,9 +18,7 @@ describe( 'block mover', () => { // Select a block so the block mover is rendered. await page.focus( '.block-editor-block-list__block' ); - // Move the mouse to show the block toolbar - await page.mouse.move( 0, 0 ); - await page.mouse.move( 10, 10 ); + await showBlockToolbar(); const blockMover = await page.$$( '.block-editor-block-mover' ); // There should be a block mover. @@ -35,9 +33,7 @@ describe( 'block mover', () => { // Select a block so the block mover has the possibility of being rendered. await page.focus( '.block-editor-block-list__block' ); - // Move the mouse to show the block toolbar - await page.mouse.move( 0, 0 ); - await page.mouse.move( 10, 10 ); + await showBlockToolbar(); // Ensure no block mover exists when only one block exists on the page. const blockMover = await page.$$( '.block-editor-block-mover' ); diff --git a/packages/e2e-tests/specs/editor/various/editor-modes.test.js b/packages/e2e-tests/specs/editor/various/editor-modes.test.js index 6aef17cd69594d..44ca74c6ae46c8 100644 --- a/packages/e2e-tests/specs/editor/various/editor-modes.test.js +++ b/packages/e2e-tests/specs/editor/various/editor-modes.test.js @@ -22,10 +22,6 @@ describe( 'Editing modes (visual/HTML)', () => { ); expect( visualBlock ).toHaveLength( 1 ); - // Move the mouse to show the block toolbar - await page.mouse.move( 0, 0 ); - await page.mouse.move( 10, 10 ); - // Change editing mode from "Visual" to "HTML". await clickBlockToolbarButton( 'More options' ); let changeModeButton = await page.waitForXPath( @@ -39,10 +35,6 @@ describe( 'Editing modes (visual/HTML)', () => { ); expect( htmlBlock ).toHaveLength( 1 ); - // Move the mouse to show the block toolbar - await page.mouse.move( 0, 0 ); - await page.mouse.move( 10, 10 ); - // Change editing mode from "HTML" back to "Visual". await clickBlockToolbarButton( 'More options' ); changeModeButton = await page.waitForXPath( @@ -58,10 +50,6 @@ describe( 'Editing modes (visual/HTML)', () => { } ); it( 'should display sidebar in HTML mode', async () => { - // Move the mouse to show the block toolbar - await page.mouse.move( 0, 0 ); - await page.mouse.move( 10, 10 ); - // Change editing mode from "Visual" to "HTML". await clickBlockToolbarButton( 'More options' ); const changeModeButton = await page.waitForXPath( @@ -78,10 +66,6 @@ describe( 'Editing modes (visual/HTML)', () => { } ); it( 'should update HTML in HTML mode when sidebar is used', async () => { - // Move the mouse to show the block toolbar - await page.mouse.move( 0, 0 ); - await page.mouse.move( 10, 10 ); - // Change editing mode from "Visual" to "HTML". await clickBlockToolbarButton( 'More options' ); const changeModeButton = await page.waitForXPath( diff --git a/packages/e2e-tests/specs/editor/various/is-typing.test.js b/packages/e2e-tests/specs/editor/various/is-typing.test.js index 8161118d65944d..2416b63473816f 100644 --- a/packages/e2e-tests/specs/editor/various/is-typing.test.js +++ b/packages/e2e-tests/specs/editor/various/is-typing.test.js @@ -1,7 +1,11 @@ /** * WordPress dependencies */ -import { clickBlockAppender, createNewPost } from '@wordpress/e2e-test-utils'; +import { + clickBlockAppender, + createNewPost, + showBlockToolbar, +} from '@wordpress/e2e-test-utils'; describe( 'isTyping', () => { beforeEach( async () => { @@ -83,8 +87,7 @@ describe( 'isTyping', () => { await page.keyboard.type( 'Type' ); // Show Toolbar - await page.mouse.move( 0, 0 ); - await page.mouse.move( 10, 10 ); + await showBlockToolbar(); // Open the dropdown await page.click( '.dropdown-open' ); diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js index d8f4e06458bf70..96ec77412f5478 100644 --- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js @@ -7,6 +7,7 @@ import { pressKeyWithModifier, clickBlockAppender, getEditedPostContent, + showBlockToolbar, } from '@wordpress/e2e-test-utils'; async function getActiveLabel() { @@ -89,10 +90,7 @@ describe( 'Order of block keyboard navigation', () => { // Select the middle block. await page.keyboard.press( 'ArrowUp' ); - // Move the mouse to show the block toolbar - await page.mouse.move( 0, 0 ); - await page.mouse.move( 10, 10 ); - + await showBlockToolbar(); await navigateToContentEditorTop(); await tabThroughParagraphBlock( 'Paragraph 1' ); diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js index d13f4dc4a91333..21c50094a0d1f3 100644 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ b/packages/e2e-tests/specs/editor/various/links.test.js @@ -7,6 +7,7 @@ import { getEditedPostContent, createNewPost, pressKeyWithModifier, + showBlockToolbar, } from '@wordpress/e2e-test-utils'; describe( 'Links', () => { @@ -300,9 +301,7 @@ describe( 'Links', () => { // Make a collapsed selection inside the link await page.keyboard.press( 'ArrowLeft' ); await page.keyboard.press( 'ArrowRight' ); - // Move the mouse to show the block toolbar - await page.mouse.move( 0, 0 ); - await page.mouse.move( 10, 10 ); + await showBlockToolbar(); const [ editButton ] = await page.$x( '//button[text()="Edit"]' ); await editButton.click(); await waitForAutoFocus(); 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 1ac2080a1631cb..17e064b7c58523 100644 --- a/packages/e2e-tests/specs/editor/various/rich-text.test.js +++ b/packages/e2e-tests/specs/editor/various/rich-text.test.js @@ -7,6 +7,7 @@ import { insertBlock, clickBlockAppender, pressKeyWithModifier, + showBlockToolbar, } from '@wordpress/e2e-test-utils'; describe( 'RichText', () => { @@ -84,12 +85,10 @@ describe( 'RichText', () => { it( 'should return focus when pressing formatting button', async () => { await clickBlockAppender(); await page.keyboard.type( 'Some ' ); - await page.mouse.move( 0, 0 ); - await page.mouse.move( 10, 10 ); + await showBlockToolbar(); await page.click( '[aria-label="Bold"]' ); await page.keyboard.type( 'bold' ); - await page.mouse.move( 0, 0 ); - await page.mouse.move( 10, 10 ); + await showBlockToolbar(); await page.click( '[aria-label="Bold"]' ); await page.keyboard.type( '.' ); diff --git a/packages/e2e-tests/specs/experiments/navigation.test.js b/packages/e2e-tests/specs/experiments/navigation.test.js index 26cc1c339d4db7..bf5fd9a339ec03 100644 --- a/packages/e2e-tests/specs/experiments/navigation.test.js +++ b/packages/e2e-tests/specs/experiments/navigation.test.js @@ -9,6 +9,7 @@ import { setUpResponseMocking, clickBlockToolbarButton, pressKeyWithModifier, + showBlockToolbar, } from '@wordpress/e2e-test-utils'; /** @@ -427,8 +428,7 @@ describe( 'Navigation', () => { type: 'url', } ); - // Move the mouse to reveal the block movers. Without this the test seems to fail. - await page.mouse.move( 100, 100 ); + await showBlockToolbar(); // Add another Link block. // Using 'click' here checks for regressions of https://github.com/WordPress/gutenberg/issues/18329, From ce30954665d479ca60218a88bc55536687e8f345 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 19 Jun 2020 15:36:23 +0100 Subject: [PATCH 2/2] fix typo --- packages/e2e-test-utils/README.md | 6 +++++- packages/e2e-test-utils/src/click-block-toolbar-button.js | 2 +- packages/e2e-test-utils/src/transform-block-to.js | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md index 243b8c4a8fe9c1..df113a7c407599 100644 --- a/packages/e2e-test-utils/README.md +++ b/packages/e2e-test-utils/README.md @@ -42,7 +42,11 @@ Clicks the default block appender. # **clickBlockToolbarButton** -Undocumented declaration. +Clicks a block toolbar button. + +_Parameters_ + +- _buttonAriaLabel_ `string`: The aria label of the button to click. # **clickButton** diff --git a/packages/e2e-test-utils/src/click-block-toolbar-button.js b/packages/e2e-test-utils/src/click-block-toolbar-button.js index e925887a18f678..40d2118343d153 100644 --- a/packages/e2e-test-utils/src/click-block-toolbar-button.js +++ b/packages/e2e-test-utils/src/click-block-toolbar-button.js @@ -8,7 +8,7 @@ import { showBlockToolbar } from './show-block-toolbar'; * * @param {string} buttonAriaLabel The aria label of the button to click. */ -export async function c( buttonAriaLabel ) { +export async function clickBlockToolbarButton( buttonAriaLabel ) { await showBlockToolbar(); const BLOCK_TOOLBAR_SELECTOR = '.block-editor-block-toolbar'; diff --git a/packages/e2e-test-utils/src/transform-block-to.js b/packages/e2e-test-utils/src/transform-block-to.js index 2ba5ea894f6e44..4a6968c684904e 100644 --- a/packages/e2e-test-utils/src/transform-block-to.js +++ b/packages/e2e-test-utils/src/transform-block-to.js @@ -25,7 +25,7 @@ export async function transformBlockTo( name ) { // Find the block button option within the switcher popover. const xpath = `//*[contains(@class, "block-editor-block-switcher__popover")]//button[.='${ name }']`; - const insertButton = page.waitForXPath( xpath, { visible: true } ); + const insertButton = await page.waitForXPath( xpath, { visible: true } ); // Clicks may fail if the button is out of view. Assure it is before click. await insertButton.evaluate( ( element ) => element.scrollIntoView() ); await insertButton.click();