Skip to content

Commit

Permalink
Improve code quality of table e2e tests (#16872)
Browse files Browse the repository at this point in the history
  • Loading branch information
@talldan @gziolo
talldan authored and gziolo committed Aug 29, 2019
1 parent 5251d69 commit 75a921b
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 28 deletions.
2 changes: 1 addition & 1 deletion packages/e2e-tests/specs/blocks/__snapshots__/table.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ exports[`Table allows adding and deleting columns across the table header, body
exports[`Table allows cells to be selected when the cell area outside of the RichText is clicked 1`] = `
"<!-- wp:table {\\"hasFixedLayout\\":true} -->
<figure class=\\"wp-block-table\\"><table class=\\"has-fixed-layout\\"><tbody><tr><td>Some long text that will wrap onto multiple lines.</td><td>This content is in the second cell.</td></tr><tr><td></td><td></td></tr></tbody></table></figure>
<figure class=\\"wp-block-table\\"><table class=\\"has-fixed-layout\\"><tbody><tr><td><br><br><br><br></td><td>Second cell.</td></tr><tr><td></td><td></td></tr></tbody></table></figure>
<!-- /wp:table -->"
`;
Expand Down
44 changes: 17 additions & 27 deletions packages/e2e-tests/specs/blocks/table.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,14 @@ import { capitalize } from 'lodash';
* WordPress dependencies
*/
import {
clickButton,
clickBlockToolbarButton,
createNewPost,
getEditedPostContent,
insertBlock,
} from '@wordpress/e2e-test-utils';

const createButtonSelector = "//div[@data-type='core/table']//button[text()='Create Table']";
const createButtonLabel = 'Create Table';

/**
* Utility function for changing the selected cell alignment.
Expand All @@ -22,8 +23,7 @@ const createButtonSelector = "//div[@data-type='core/table']//button[text()='Cre
*/
async function changeCellAlignment( align ) {
await clickBlockToolbarButton( 'Change column alignment' );
const alignButton = await page.$x( `//button[text()='Align Column ${ capitalize( align ) }']` );
await alignButton[ 0 ].click();
await clickButton( `Align Column ${ capitalize( align ) }` );
}

describe( 'Table', () => {
Expand Down Expand Up @@ -57,8 +57,7 @@ describe( 'Table', () => {
await page.keyboard.type( '10' );

// Create the table.
const createButton = await page.$x( createButtonSelector );
await createButton[ 0 ].click();
await clickButton( createButtonLabel );

// Expect the post content to have a correctly sized table.
expect( await getEditedPostContent() ).toMatchSnapshot();
Expand All @@ -68,8 +67,7 @@ describe( 'Table', () => {
await insertBlock( 'Table' );

// Create the table.
const createButton = await page.$x( createButtonSelector );
await createButton[ 0 ].click();
await clickButton( createButtonLabel );

// Click the first cell and add some text.
await page.click( '.wp-block-table__cell-content' );
Expand Down Expand Up @@ -104,8 +102,7 @@ describe( 'Table', () => {
expect( footerSwitch ).toHaveLength( 0 );

// Create the table.
const createButton = await page.$x( createButtonSelector );
await createButton[ 0 ].click();
await clickButton( createButtonLabel );

// Expect the header and footer switches to be present now that the table has been created.
headerSwitch = await page.$x( headerSwitchSelector );
Expand Down Expand Up @@ -141,8 +138,7 @@ describe( 'Table', () => {
await insertBlock( 'Table' );

// Create the table.
const createButton = await page.$x( createButtonSelector );
await createButton[ 0 ].click();
await clickButton( createButtonLabel );

// Toggle on the switches and add some content.
const headerSwitch = await page.$x( "//label[text()='Header section']" );
Expand All @@ -154,8 +150,7 @@ describe( 'Table', () => {

// Add a column.
await clickBlockToolbarButton( 'Edit table' );
const addColumnAfterButton = await page.$x( "//button[text()='Add Column After']" );
await addColumnAfterButton[ 0 ].click();
await clickButton( 'Add Column After' );

// Expect the table to have 3 columns across the header, body and footer.
expect( await getEditedPostContent() ).toMatchSnapshot();
Expand All @@ -164,8 +159,7 @@ describe( 'Table', () => {

// Delete a column.
await clickBlockToolbarButton( 'Edit table' );
const deleteColumnButton = await page.$x( "//button[text()='Delete Column']" );
await deleteColumnButton[ 0 ].click();
await clickButton( 'Delete Column' );

// Expect the table to have 2 columns across the header, body and footer.
expect( await getEditedPostContent() ).toMatchSnapshot();
Expand All @@ -180,8 +174,7 @@ describe( 'Table', () => {
await page.keyboard.type( '4' );

// Create the table.
const [ createButton ] = await page.$x( createButtonSelector );
await createButton.click();
await clickButton( createButtonLabel );

// Click the first cell and add some text. Don't align.
const cells = await page.$$( '.wp-block-table__cell-content' );
Expand Down Expand Up @@ -212,23 +205,20 @@ describe( 'Table', () => {
await insertBlock( 'Table' );

// Create the table.
const createButton = await page.$x( createButtonSelector );
await createButton[ 0 ].click();
await clickButton( createButtonLabel );

// Enable fixed width as it exascerbates the amount of empty space around the RichText.
const fixedWidthSwitch = await page.$x( "//label[text()='Fixed width table cells']" );
await fixedWidthSwitch[ 0 ].click();
const [ fixedWidthSwitch ] = await page.$x( "//label[text()='Fixed width table cells']" );
await fixedWidthSwitch.click();

// Add lots of text to the first cell.
// Add multiple new lines to the first cell to make it taller.
await page.click( '.wp-block-table__cell-content' );
await page.keyboard.type(
`Some long text that will wrap onto multiple lines.`
);
await page.keyboard.type( '\n\n\n\n' );

// Get the bounding client rect for the second cell.
const { x: secondCellX, y: secondCellY } = await page.evaluate( () => {
const secondCell = document.querySelectorAll( '.wp-block-table td' )[ 1 ];
// Page.evaluate can only return a non-serializable value to the
// Page.evaluate can only return a serializable value to the
// parent process, so destructure and restructure the result
// into an object.
const { x, y } = secondCell.getBoundingClientRect();
Expand All @@ -237,7 +227,7 @@ describe( 'Table', () => {

// Click in the top left corner of the second cell and type some text.
await page.mouse.click( secondCellX, secondCellY );
await page.keyboard.type( 'This content is in the second cell.' );
await page.keyboard.type( 'Second cell.' );

// Expect that the snapshot shows the text in the second cell.
expect( await getEditedPostContent() ).toMatchSnapshot();
Expand Down

0 comments on commit 75a921b

Please sign in to comment.