Skip to content

Commit

Permalink
Update failing e2e tests to work after UI changes introduced
Browse files Browse the repository at this point in the history
  • Loading branch information
@gziolo
gziolo committed Jul 25, 2019
1 parent 8a1d9e7 commit 66a5518
Show file tree
Hide file tree
Showing 6 changed files with 54 additions and 43 deletions.
2 changes: 1 addition & 1 deletion packages/e2e-tests/specs/block-deletion.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const clickOnBlockSettingsMenuRemoveBlockButton = async () => {

let isRemoveButton = false;

let numButtons = await page.$$eval( '.block-editor-block-toolbar button', ( btns ) => btns.length );
let numButtons = await page.$$eval( '.block-editor-block-settings-menu__content button', ( btns ) => btns.length );

// Limit by the number of buttons available
while ( --numButtons ) {
Expand Down
10 changes: 6 additions & 4 deletions packages/e2e-tests/specs/block-grouping.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,13 +157,15 @@ describe( 'Block Grouping', () => {
await insertBlock( 'Heading' );
await page.keyboard.type( 'Group Heading' );

// Full width image
// Full width image.
await insertBlock( 'Image' );
await clickBlockToolbarButton( 'Full width' );
await clickBlockToolbarButton( 'Change alignment' );
await page.click( '.components-dropdown-menu__menu button svg.dashicons-align-full-width' );

// Wide width image)
// Wide width image.
await insertBlock( 'Image' );
await clickBlockToolbarButton( 'Wide width' );
await clickBlockToolbarButton( 'Change alignment' );
await page.click( '.components-dropdown-menu__menu button svg.dashicons-align-wide' );

await insertBlock( 'Paragraph' );
await page.keyboard.type( 'Some paragraph' );
Expand Down
4 changes: 2 additions & 2 deletions packages/e2e-tests/specs/blocks/__snapshots__/table.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

exports[`Table allows adding and deleting columns across the table header, body and footer 1`] = `
"<!-- wp:table -->
<figure class=\\"wp-block-table\\"><table class=\\"\\"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td></tr></tfoot></table></figure>
<figure class=\\"wp-block-table\\"><table class=\\"\\"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td><td></td></tr></tfoot></table></figure>
<!-- /wp:table -->"
`;
exports[`Table allows adding and deleting columns across the table header, body and footer 2`] = `
"<!-- wp:table -->
<figure class=\\"wp-block-table\\"><table class=\\"\\"><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr><tr><td></td></tr></tbody><tfoot><tr><td></td></tr></tfoot></table></figure>
<figure class=\\"wp-block-table\\"><table class=\\"\\"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td></tr></tfoot></table></figure>
<!-- /wp:table -->"
`;
Expand Down
2 changes: 2 additions & 0 deletions packages/e2e-tests/specs/blocks/table.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,8 @@ describe( 'Table', () => {
await headerSwitch[ 0 ].click();
await footerSwitch[ 0 ].click();

await page.click( '.wp-block-table__cell-content' );

// Add a column.
await clickBlockToolbarButton( 'Edit table' );
const addColumnAfterButton = await page.$x( "//button[text()='Add Column After']" );
Expand Down
22 changes: 4 additions & 18 deletions packages/e2e-tests/specs/keyboard-navigable-blocks.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,26 +76,12 @@ const tabThroughBlockToolbar = async () => {
);
await expect( isFocusedBlockSwitcherControl ).toBe( true );

// Tab to focus on the 'left paragraph alignment' dropdown control
// Tab to focus on the 'Change text alignment' dropdown control
await page.keyboard.press( 'Tab' );
const isFocusedLeftAlignmentControl = await page.evaluate( () =>
document.activeElement.classList.contains( 'components-toolbar__control' )
);
await expect( isFocusedLeftAlignmentControl ).toBe( true );

// Tab to focus on the 'center paragraph alignment' dropdown control
await page.keyboard.press( 'Tab' );
const isFocusedCenterAlignmentControl = await page.evaluate( () =>
document.activeElement.classList.contains( 'components-toolbar__control' )
);
await expect( isFocusedCenterAlignmentControl ).toBe( true );

// Tab to focus on the 'right paragraph alignment' dropdown control
await page.keyboard.press( 'Tab' );
const isFocusedRightAlignmentControl = await page.evaluate( () =>
document.activeElement.classList.contains( 'components-toolbar__control' )
const isFocusedChangeTextAlignmentControl = await page.evaluate( () =>
document.activeElement.classList.contains( 'components-dropdown-menu__toggle' )
);
await expect( isFocusedRightAlignmentControl ).toBe( true );
await expect( isFocusedChangeTextAlignmentControl ).toBe( true );

// Tab to focus on the 'More formatting' dropdown toggle
await page.keyboard.press( 'Tab' );
Expand Down
57 changes: 39 additions & 18 deletions packages/e2e-tests/specs/plugins/align-hook.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {
} from '@wordpress/e2e-test-utils';

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 @@ -26,14 +28,16 @@ describe( 'Align Hook Works As Expected', () => {
} );

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

const buttonLabels = await page.evaluate( () => {
return Array.from(
document.querySelectorAll(
'.block-editor-block-toolbar button[aria-label^="Align"]'
'.components-dropdown-menu__menu button'
)
).map(
( button ) => {
return button.getAttribute( 'aria-label' );
return button.innerText;
}
);
} );
Expand All @@ -44,6 +48,7 @@ describe( 'Align Hook Works As Expected', () => {
it( 'Shows the expected buttons on the alignment toolbar',
async () => {
await insertBlock( blockName );

expect(
await getAlignmentToolbarLabels()
).toEqual( buttonLabels );
Expand All @@ -53,8 +58,10 @@ describe( 'Align Hook Works As Expected', () => {
const createDoesNotApplyAlignmentByDefaultTest = ( blockName ) => {
it( 'Does not apply any alignment by default', async () => {
await insertBlock( blockName );

// verify no alignment button is in pressed state
const pressedButtons = await page.$$( '.block-editor-block-toolbar button[aria-label^="Align"][aria-pressed="true"]' );
await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
const pressedButtons = await page.$$( '.components-dropdown-menu__menu button.is-active' );
expect( pressedButtons ).toHaveLength( 0 );
} );
};
Expand All @@ -69,13 +76,15 @@ describe( 'Align Hook Works As Expected', () => {
const createCorrectlyAppliesAndRemovesAlignmentTest = ( blockName, alignment ) => {
it( 'Correctly applies the selected alignment and correctly removes the alignment',
async () => {
const BUTTON_SELECTOR = `.block-editor-block-toolbar button[aria-label="Align ${ alignment }"]`;
const BUTTON_PRESSED_SELECTOR = `${ BUTTON_SELECTOR }[aria-pressed="true"]`;
const BUTTON_SELECTOR = `.components-dropdown-menu__menu button svg.dashicons-align-${ alignment }`;
const BUTTON_PRESSED_SELECTOR = '.components-dropdown-menu__menu button.is-active';
// set the specified alignment.
await insertBlock( blockName );
await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
await page.click( BUTTON_SELECTOR );

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

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

// remove the alignment.
await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
await page.click( BUTTON_SELECTOR );

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

Expand All @@ -110,6 +121,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 );
pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
expect( pressedButtons ).toHaveLength( 0 );
}
Expand All @@ -120,7 +132,9 @@ describe( 'Align Hook Works As Expected', () => {
const BLOCK_NAME = 'Test No Alignment Set';
it( 'Shows no alignment buttons on the alignment toolbar',
async () => {
expect( await getAlignmentToolbarLabels() ).toHaveLength( 0 );
await insertBlock( BLOCK_NAME );
const changeAlignmentButton = await page.$( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
expect( changeAlignmentButton ).toBe( null );
}
);

Expand All @@ -136,9 +150,11 @@ describe( 'Align Hook Works As Expected', () => {
const BLOCK_NAME = 'Test Align True';

createShowsTheExpectedButtonsTest( BLOCK_NAME, [
'Align left',
'Align center',
'Align right',
'Align Left',
'Align Center',
'Align Right',
'Wide Width',
'Full Width',
] );

createDoesNotApplyAlignmentByDefaultTest( BLOCK_NAME );
Expand All @@ -150,8 +166,8 @@ describe( 'Align Hook Works As Expected', () => {
const BLOCK_NAME = 'Test Align Array';

createShowsTheExpectedButtonsTest( BLOCK_NAME, [
'Align left',
'Align center',
'Align Left',
'Align Center',
] );

createDoesNotApplyAlignmentByDefaultTest( BLOCK_NAME );
Expand All @@ -161,18 +177,21 @@ describe( 'Align Hook Works As Expected', () => {

describe( 'Block with default align', () => {
const BLOCK_NAME = 'Test Default Align';
const PRESSED_BUTTON_SELECTOR = '.block-editor-block-toolbar button[aria-label="Align right"][aria-pressed="true"]';
const SELECTED_ALIGNMENT_CONTROL_SELECTOR = '//div[contains(@class, "components-dropdown-menu__menu")]//button[contains(@class, "is-active")][text()="Align Right"]';
createShowsTheExpectedButtonsTest( BLOCK_NAME, [
'Align left',
'Align center',
'Align right',
'Align Left',
'Align Center',
'Align Right',
'Wide Width',
'Full Width',
] );

it( 'Applies the selected alignment by default', async () => {
await insertBlock( BLOCK_NAME );
// verify the correct alignment button is pressed
const pressedButtons = await page.$$( PRESSED_BUTTON_SELECTOR );
expect( pressedButtons ).toHaveLength( 1 );
await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
const selectedAlignmentControls = await page.$x( SELECTED_ALIGNMENT_CONTROL_SELECTOR );
expect( selectedAlignmentControls ).toHaveLength( 1 );
} );

it( 'The default markup does not contain the alignment attribute but contains the alignment class',
Expand All @@ -187,7 +206,9 @@ 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.
await page.click( PRESSED_BUTTON_SELECTOR );
await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
const [ selectedAlignmentControl ] = await page.$x( SELECTED_ALIGNMENT_CONTROL_SELECTOR );
await selectedAlignmentControl.click();
const markup = await getEditedPostContent();
expect( markup ).toContain( '"align":""' );
} );
Expand Down

0 comments on commit 66a5518

Please sign in to comment.