Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use showBlockToolbar consistently in e2e tests. #23311

Merged
merged 2 commits into from
Jun 22, 2020
Merged

Use showBlockToolbar consistently in e2e tests. #23311

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
05e12ba
Use showBlockToolbar consistently
youknowriad Jun 19, 2020
ce30954
fix typo
youknowriad Jun 19, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/e2e-test-utils/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,6 +491,11 @@ _Parameters_

- _mocks_ `Array`: Array of mock settings.

<a name="showBlockToolbar" href="#showBlockToolbar">#</a> **showBlockToolbar**

The block toolbar is not always visible while typing.
Call this function to reveal it.

<a name="switchEditorModeTo" href="#switchEditorModeTo">#</a> **switchEditorModeTo**

Switches editor mode.
Expand Down
8 changes: 0 additions & 8 deletions packages/e2e-test-utils/src/click-block-toolbar-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,6 @@ export async function clickBlockToolbarButton( buttonAriaLabel ) {
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();
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need to hover the switcher anymore, the movers are always there now.


const button = await page.waitForSelector( BUTTON_SELECTOR );
await button.evaluate( ( element ) => element.scrollIntoView() );
await button.click();
Expand Down
1 change: 1 addition & 0 deletions packages/e2e-test-utils/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
4 changes: 4 additions & 0 deletions packages/e2e-test-utils/src/show-block-toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 );
Expand Down
4 changes: 1 addition & 3 deletions packages/e2e-test-utils/src/transform-block-to.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = 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 page.waitForXPath( xpath, { visible: true } );
await insertButton.click();

// Wait for the transformed block to appear.
Expand Down
4 changes: 0 additions & 4 deletions packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
10 changes: 0 additions & 10 deletions packages/e2e-tests/specs/editor/various/block-deletion.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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:
Expand Down
10 changes: 3 additions & 7 deletions packages/e2e-tests/specs/editor/various/block-mover.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 () => {
Expand All @@ -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.
Expand All @@ -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' );
Expand Down
16 changes: 0 additions & 16 deletions packages/e2e-tests/specs/editor/various/editor-modes.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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(
Expand All @@ -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(
Expand All @@ -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(
Expand Down
9 changes: 6 additions & 3 deletions packages/e2e-tests/specs/editor/various/is-typing.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 () => {
Expand Down Expand Up @@ -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' );
Expand Down
6 changes: 2 additions & 4 deletions packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
pressKeyWithModifier,
clickBlockAppender,
getEditedPostContent,
showBlockToolbar,
} from '@wordpress/e2e-test-utils';

async function getActiveLabel() {
Expand Down Expand Up @@ -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' );

Expand Down
5 changes: 2 additions & 3 deletions packages/e2e-tests/specs/editor/various/links.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
getEditedPostContent,
createNewPost,
pressKeyWithModifier,
showBlockToolbar,
} from '@wordpress/e2e-test-utils';

describe( 'Links', () => {
Expand Down Expand Up @@ -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();
Expand Down
7 changes: 3 additions & 4 deletions packages/e2e-tests/specs/editor/various/rich-text.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
insertBlock,
clickBlockAppender,
pressKeyWithModifier,
showBlockToolbar,
} from '@wordpress/e2e-test-utils';

describe( 'RichText', () => {
Expand Down Expand Up @@ -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( '.' );

Expand Down
4 changes: 2 additions & 2 deletions packages/e2e-tests/specs/experiments/navigation.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
setUpResponseMocking,
clickBlockToolbarButton,
pressKeyWithModifier,
showBlockToolbar,
} from '@wordpress/e2e-test-utils';

/**
Expand Down Expand Up @@ -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,
Expand Down