Skip to content

Commit

Permalink
More end 2 end tests fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad committed Aug 7, 2020
1 parent 4a81959 commit fe92b1e
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 34 deletions.
25 changes: 23 additions & 2 deletions packages/e2e-test-utils/src/inserter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ async function toggleGlobalBlockInserter() {
*/
export async function searchForBlock( searchTerm ) {
await openGlobalBlockInserter();
await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
await page.focus( INSERTER_SEARCH_SELECTOR );
await pressKeyWithModifier( 'primary', 'a' );
await page.keyboard.type( searchTerm );
Expand All @@ -71,10 +72,11 @@ export async function searchForBlock( searchTerm ) {
export async function searchForPattern( searchTerm ) {
await openGlobalBlockInserter();
// Select the patterns tab
const [ tab ] = await page.$x(
const tab = await page.waitForXPath(
'//div[contains(@class, "block-editor-inserter__tabs")]//button[.="Patterns"]'
);
await tab.click();
await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
await page.focus( INSERTER_SEARCH_SELECTOR );
await pressKeyWithModifier( 'primary', 'a' );
await page.keyboard.type( searchTerm );
Expand All @@ -96,10 +98,11 @@ export async function searchForReusableBlock( searchTerm ) {
);

// Select the reusable blocks tab.
const [ tab ] = await page.$x(
const tab = await page.waitForXPath(
'//div[contains(@class, "block-editor-inserter__tabs")]//button[text()="Reusable"]'
);
await tab.click();
await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
await page.focus( INSERTER_SEARCH_SELECTOR );
await pressKeyWithModifier( 'primary', 'a' );
await page.keyboard.type( searchTerm );
Expand All @@ -117,6 +120,12 @@ export async function insertBlock( searchTerm ) {
await page.$x( `//button//span[contains(text(), '${ searchTerm }')]` )
)[ 0 ];
await insertButton.click();
// We should wait until the inserter closes and the focus moves to the content.
await page.waitForFunction( () =>
document.body
.querySelector( '.block-editor-block-list__layout' )
.contains( document.activeElement )
);
}

/**
Expand All @@ -133,6 +142,12 @@ export async function insertPattern( searchTerm ) {
)
)[ 0 ];
await insertButton.click();
// We should wait until the inserter closes and the focus moves to the content.
await page.waitForFunction( () =>
document.body
.querySelector( '.block-editor-block-list__layout' )
.contains( document.activeElement )
);
}

/**
Expand All @@ -148,4 +163,10 @@ export async function insertReusableBlock( searchTerm ) {
await page.$x( `//button//span[contains(text(), '${ searchTerm }')]` )
)[ 0 ];
await insertButton.click();
// We should wait until the inserter closes and the focus moves to the content.
await page.waitForFunction( () =>
document.body
.querySelector( '.block-editor-block-list__layout' )
.contains( document.activeElement )
);
}
43 changes: 12 additions & 31 deletions packages/e2e-tests/specs/editor/plugins/align-hook.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
insertBlock,
selectBlockByClientId,
setPostContent,
clickBlockToolbarButton,
} from '@wordpress/e2e-test-utils';

const alignLabels = {
Expand All @@ -21,9 +22,6 @@ const alignLabels = {
};

describe( 'Align Hook Works As Expected', () => {
const CHANGE_ALIGNMENT_BUTTON_SELECTOR =
'.block-editor-block-toolbar .components-dropdown-menu__toggle[aria-label="Change alignment"]';

beforeAll( async () => {
await activatePlugin( 'gutenberg-test-align-hook' );
} );
Expand All @@ -37,11 +35,7 @@ describe( 'Align Hook Works As Expected', () => {
} );

const getAlignmentToolbarLabels = async () => {
const element = await page.waitForSelector(
CHANGE_ALIGNMENT_BUTTON_SELECTOR
);
await element.click();

await clickBlockToolbarButton( 'Change alignment' );
const buttonLabels = await page.evaluate( () => {
return Array.from(
document.querySelectorAll(
Expand All @@ -57,20 +51,14 @@ describe( 'Align Hook Works As Expected', () => {
const createShowsTheExpectedButtonsTest = ( blockName, buttonLabels ) => {
it( 'Shows the expected buttons on the alignment toolbar', async () => {
await insertBlock( blockName );

expect( await getAlignmentToolbarLabels() ).toEqual( buttonLabels );
} );
};

const createDoesNotApplyAlignmentByDefaultTest = ( blockName ) => {
it( 'Does not apply any alignment by default', async () => {
await insertBlock( blockName );

// verify no alignment button is in pressed state
const element = await page.waitForSelector(
CHANGE_ALIGNMENT_BUTTON_SELECTOR
);
await element.click();
await clickBlockToolbarButton( 'Change alignment' );
const pressedButtons = await page.$$(
'.components-dropdown-menu__menu button.is-active'
);
Expand All @@ -95,14 +83,11 @@ describe( 'Align Hook Works As Expected', () => {
'.components-dropdown-menu__menu button.is-active';
// set the specified alignment.
await insertBlock( blockName );
const element = await page.waitForSelector(
CHANGE_ALIGNMENT_BUTTON_SELECTOR
);
await element.click();
await clickBlockToolbarButton( 'Change alignment' );
await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click();

// verify the button of the specified alignment is pressed.
await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
await clickBlockToolbarButton( 'Change alignment' );
let pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
expect( pressedButtons ).toHaveLength( 1 );

Expand All @@ -119,11 +104,11 @@ describe( 'Align Hook Works As Expected', () => {
);

// remove the alignment.
await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
await clickBlockToolbarButton( 'Change alignment' );
await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click();

// verify no alignment button is in pressed state.
await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
await clickBlockToolbarButton( 'Change alignment' );
pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
expect( pressedButtons ).toHaveLength( 0 );

Expand All @@ -139,7 +124,7 @@ describe( 'Align Hook Works As Expected', () => {
);

// verify no alignment button is in pressed state after parsing the block.
await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
await clickBlockToolbarButton( 'Change alignment' );
pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
expect( pressedButtons ).toHaveLength( 0 );
} );
Expand All @@ -149,6 +134,8 @@ describe( 'Align Hook Works As Expected', () => {
const BLOCK_NAME = 'Test No Alignment Set';
it( 'Shows no alignment buttons on the alignment toolbar', async () => {
await insertBlock( BLOCK_NAME );
const CHANGE_ALIGNMENT_BUTTON_SELECTOR =
'.block-editor-block-toolbar .components-dropdown-menu__toggle[aria-label="Change alignment"]';
const changeAlignmentButton = await page.$(
CHANGE_ALIGNMENT_BUTTON_SELECTOR
);
Expand Down Expand Up @@ -205,10 +192,7 @@ describe( 'Align Hook Works As Expected', () => {
it( 'Applies the selected alignment by default', async () => {
await insertBlock( BLOCK_NAME );
// verify the correct alignment button is pressed
const element = await page.waitForSelector(
CHANGE_ALIGNMENT_BUTTON_SELECTOR
);
await element.click();
await clickBlockToolbarButton( 'Change alignment' );
const selectedAlignmentControls = await page.$x(
SELECTED_ALIGNMENT_CONTROL_SELECTOR
);
Expand All @@ -225,10 +209,7 @@ describe( 'Align Hook Works As Expected', () => {
it( 'Can remove the default alignment and the align attribute equals none but alignnone class is not applied', async () => {
await insertBlock( BLOCK_NAME );
// remove the alignment.
const element = await page.waitForSelector(
CHANGE_ALIGNMENT_BUTTON_SELECTOR
);
await element.click();
await clickBlockToolbarButton( 'Change alignment' );
const [ selectedAlignmentControl ] = await page.$x(
SELECTED_ALIGNMENT_CONTROL_SELECTOR
);
Expand Down
1 change: 0 additions & 1 deletion packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ const navigateToContentEditorTop = async () => {
// Use 'Ctrl+`' to return to the top of the editor
await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyWithModifier( 'ctrl', '`' );
};

const tabThroughParagraphBlock = async ( paragraphText ) => {
Expand Down

0 comments on commit fe92b1e

Please sign in to comment.