From dfb0117f938785103d6f866820d4b398a38b8ff6 Mon Sep 17 00:00:00 2001 From: Ella van Durpe Date: Fri, 27 Mar 2020 11:17:39 +0100 Subject: [PATCH] Fix more e2e tests --- packages/e2e-test-utils/README.md | 1 + packages/e2e-test-utils/src/click-button.js | 5 +- .../specs/editor/blocks/heading.test.js | 10 ++- .../specs/editor/blocks/table.test.js | 75 +++++++++++++------ .../editor/plugins/wp-editor-meta-box.test.js | 5 +- .../specs/editor/various/autosave.test.js | 6 +- .../specs/editor/various/editor-modes.test.js | 17 +++-- .../various/keyboard-navigable-blocks.test.js | 11 ++- .../specs/editor/various/rtl.test.js | 10 +-- .../src/components/visual-editor/index.js | 1 + 10 files changed, 99 insertions(+), 42 deletions(-) diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md index d397bce0bf647..197ad48854677 100644 --- a/packages/e2e-test-utils/README.md +++ b/packages/e2e-test-utils/README.md @@ -55,6 +55,7 @@ Clicks a button based on the text on the button. _Parameters_ - _buttonText_ `string`: The text that appears on the button to click. +- _frame_ `Object`: # **clickOnCloseModalButton** diff --git a/packages/e2e-test-utils/src/click-button.js b/packages/e2e-test-utils/src/click-button.js index 634319101e5d0..3e0a6a9190beb 100644 --- a/packages/e2e-test-utils/src/click-button.js +++ b/packages/e2e-test-utils/src/click-button.js @@ -2,9 +2,10 @@ * Clicks a button based on the text on the button. * * @param {string} buttonText The text that appears on the button to click. + * @param {Object} frame */ -export async function clickButton( buttonText ) { - const button = await page.waitForXPath( +export async function clickButton( buttonText, frame = page ) { + const button = await frame.waitForXPath( `//button[contains(text(), '${ buttonText }')]` ); await button.click(); diff --git a/packages/e2e-tests/specs/editor/blocks/heading.test.js b/packages/e2e-tests/specs/editor/blocks/heading.test.js index 0732102750712..eb12c3af10259 100644 --- a/packages/e2e-tests/specs/editor/blocks/heading.test.js +++ b/packages/e2e-tests/specs/editor/blocks/heading.test.js @@ -83,7 +83,10 @@ describe( 'Heading', () => { await page.click( COLOR_INPUT_FIELD_SELECTOR ); await pressKeyWithModifier( 'primary', 'A' ); await page.keyboard.type( '#7700ff' ); - await page.click( 'h3[data-type="core/heading"]' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + await frame.click( 'h3[data-type="core/heading"]' ); await page.waitForSelector( '.component-color-indicator[aria-label="(Color: #7700ff)"]' ); @@ -101,7 +104,10 @@ describe( 'Heading', () => { const colorButtonSelector = `//button[@aria-label='Color: Luminous vivid orange']`; const [ colorButton ] = await page.$x( colorButtonSelector ); await colorButton.click(); - await page.click( 'h2[data-type="core/heading"]' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + await frame.click( 'h2[data-type="core/heading"]' ); await page.waitForXPath( `${ colorButtonSelector }[@aria-pressed='true']` ); diff --git a/packages/e2e-tests/specs/editor/blocks/table.test.js b/packages/e2e-tests/specs/editor/blocks/table.test.js index 680416980067d..bb3566687f7d9 100644 --- a/packages/e2e-tests/specs/editor/blocks/table.test.js +++ b/packages/e2e-tests/specs/editor/blocks/table.test.js @@ -34,15 +34,19 @@ describe( 'Table', () => { it( 'displays a form for choosing the row and column count of the table', async () => { await insertBlock( 'Table' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + // Check for existence of the column count field. - const columnCountLabel = await page.$x( + const columnCountLabel = await frame.$x( "//div[@data-type='core/table']//label[text()='Column Count']" ); expect( columnCountLabel ).toHaveLength( 1 ); // Modify the column count. await columnCountLabel[ 0 ].click(); - const currentColumnCount = await page.evaluate( + const currentColumnCount = await frame.evaluate( () => document.activeElement.value ); expect( currentColumnCount ).toBe( '2' ); @@ -50,14 +54,14 @@ describe( 'Table', () => { await page.keyboard.type( '5' ); // Check for existence of the row count field. - const rowCountLabel = await page.$x( + const rowCountLabel = await frame.$x( "//div[@data-type='core/table']//label[text()='Row Count']" ); expect( rowCountLabel ).toHaveLength( 1 ); // Modify the row count. await rowCountLabel[ 0 ].click(); - const currentRowCount = await page.evaluate( + const currentRowCount = await frame.evaluate( () => document.activeElement.value ); expect( currentRowCount ).toBe( '2' ); @@ -65,7 +69,7 @@ describe( 'Table', () => { await page.keyboard.type( '10' ); // Create the table. - await clickButton( createButtonLabel ); + await clickButton( createButtonLabel, frame ); // Expect the post content to have a correctly sized table. expect( await getEditedPostContent() ).toMatchSnapshot(); @@ -74,11 +78,15 @@ describe( 'Table', () => { it( 'allows text to by typed into cells', async () => { await insertBlock( 'Table' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + // Create the table. - await clickButton( createButtonLabel ); + await clickButton( createButtonLabel, frame ); // Click the first cell and add some text. - await page.click( 'td' ); + await frame.click( 'td' ); await page.keyboard.type( 'This' ); // Tab to the next cell and add some text. @@ -109,8 +117,12 @@ describe( 'Table', () => { expect( headerSwitch ).toHaveLength( 0 ); expect( footerSwitch ).toHaveLength( 0 ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + // Create the table. - await clickButton( createButtonLabel ); + await clickButton( createButtonLabel, frame ); // Expect the header and footer switches to be present now that the table has been created. headerSwitch = await page.$x( headerSwitchSelector ); @@ -122,13 +134,13 @@ describe( 'Table', () => { await headerSwitch[ 0 ].click(); await footerSwitch[ 0 ].click(); - await page.click( 'thead th' ); + await frame.click( 'thead th' ); await page.keyboard.type( 'header' ); - await page.click( 'tbody td' ); + await frame.click( 'tbody td' ); await page.keyboard.type( 'body' ); - await page.click( 'tfoot td' ); + await frame.click( 'tfoot td' ); await page.keyboard.type( 'footer' ); // Expect the table to have a header, body and footer with written content. @@ -145,8 +157,12 @@ describe( 'Table', () => { it( 'allows adding and deleting columns across the table header, body and footer', async () => { await insertBlock( 'Table' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + // Create the table. - await clickButton( createButtonLabel ); + await clickButton( createButtonLabel, frame ); // Toggle on the switches and add some content. const headerSwitch = await page.$x( @@ -158,7 +174,7 @@ describe( 'Table', () => { await headerSwitch[ 0 ].click(); await footerSwitch[ 0 ].click(); - await page.click( 'td' ); + await frame.click( 'td' ); // Add a column. await clickBlockToolbarButton( 'Edit table' ); @@ -167,7 +183,7 @@ describe( 'Table', () => { // Expect the table to have 3 columns across the header, body and footer. expect( await getEditedPostContent() ).toMatchSnapshot(); - await page.click( 'td' ); + await frame.click( 'td' ); // Delete a column. await clickBlockToolbarButton( 'Edit table' ); @@ -180,7 +196,11 @@ describe( 'Table', () => { it( 'allows columns to be aligned', async () => { await insertBlock( 'Table' ); - const [ columnCountLabel ] = await page.$x( + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + + const [ columnCountLabel ] = await frame.$x( "//div[@data-type='core/table']//label[text()='Column Count']" ); await columnCountLabel.click(); @@ -188,10 +208,10 @@ describe( 'Table', () => { await page.keyboard.type( '4' ); // Create the table. - await clickButton( createButtonLabel ); + await clickButton( createButtonLabel, frame ); // Click the first cell and add some text. Don't align. - const cells = await page.$$( 'td,th' ); + const cells = await frame.$$( 'td,th' ); await cells[ 0 ].click(); await page.keyboard.type( 'None' ); @@ -218,8 +238,12 @@ describe( 'Table', () => { it( 'allows cells to be selected when the cell area outside of the RichText is clicked', async () => { await insertBlock( 'Table' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + // Create the table. - await clickButton( createButtonLabel ); + await clickButton( createButtonLabel, frame ); // Enable fixed width as it exascerbates the amount of empty space around the RichText. const [ fixedWidthSwitch ] = await page.$x( @@ -228,11 +252,11 @@ describe( 'Table', () => { await fixedWidthSwitch.click(); // Add multiple new lines to the first cell to make it taller. - await page.click( 'td' ); + await frame.click( 'td' ); 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 { x: secondCellX, y: secondCellY } = await frame.evaluate( () => { const secondCell = document.querySelectorAll( '.wp-block-table td' )[ 1 ]; @@ -240,7 +264,8 @@ describe( 'Table', () => { // parent process, so destructure and restructure the result // into an object. const { x, y } = secondCell.getBoundingClientRect(); - return { x, y }; + const winRect = window.frameElement.getBoundingClientRect(); + return { x: x + winRect.x, y: y + winRect.y }; } ); // Click in the top left corner of the second cell and type some text. @@ -254,11 +279,15 @@ describe( 'Table', () => { it( 'allows a caption to be added', async () => { await insertBlock( 'Table' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + // Create the table. - await clickButton( createButtonLabel ); + await clickButton( createButtonLabel, frame ); // Click the first cell and add some text. - await page.click( '.wp-block-table figcaption' ); + await frame.click( '.wp-block-table figcaption' ); await page.keyboard.type( 'Caption!' ); expect( await getEditedPostContent() ).toMatchSnapshot(); diff --git a/packages/e2e-tests/specs/editor/plugins/wp-editor-meta-box.test.js b/packages/e2e-tests/specs/editor/plugins/wp-editor-meta-box.test.js index 32286764092f1..048d4c6518de0 100644 --- a/packages/e2e-tests/specs/editor/plugins/wp-editor-meta-box.test.js +++ b/packages/e2e-tests/specs/editor/plugins/wp-editor-meta-box.test.js @@ -19,8 +19,11 @@ describe( 'WP Editor Meta Boxes', () => { } ); it( 'Should save the changes', async () => { + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); // Add title to enable valid non-empty post save. - await page.type( '.editor-post-title__input', 'Hello Meta' ); + await frame.type( '.editor-post-title__input', 'Hello Meta' ); // Type something await expect( page ).toClick( '#test_tinymce_id-html' ); diff --git a/packages/e2e-tests/specs/editor/various/autosave.test.js b/packages/e2e-tests/specs/editor/various/autosave.test.js index 5780302794aac..42ec5aa415054 100644 --- a/packages/e2e-tests/specs/editor/various/autosave.test.js +++ b/packages/e2e-tests/specs/editor/various/autosave.test.js @@ -310,7 +310,11 @@ describe( 'autosave', () => { await page.keyboard.type( 'before publish' ); await publishPost(); - await page.click( '[data-type="core/paragraph"]' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + + await frame.click( '[data-type="core/paragraph"]' ); await page.keyboard.type( ' after publish' ); // Trigger remote autosave 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 15d767cd6cc2c..175206ad51c54 100644 --- a/packages/e2e-tests/specs/editor/various/editor-modes.test.js +++ b/packages/e2e-tests/specs/editor/various/editor-modes.test.js @@ -16,8 +16,11 @@ describe( 'Editing modes (visual/HTML)', () => { } ); it( 'should switch between visual and HTML modes', async () => { + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); // This block should be in "visual" mode by default. - let visualBlock = await page.$$( + let visualBlock = await frame.$$( '.block-editor-block-list__layout .block-editor-block-list__block.rich-text' ); expect( visualBlock ).toHaveLength( 1 ); @@ -34,7 +37,7 @@ describe( 'Editing modes (visual/HTML)', () => { await changeModeButton.click(); // Wait for the block to be converted to HTML editing mode. - const htmlBlock = await page.$$( + const htmlBlock = await frame.$$( '.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea' ); expect( htmlBlock ).toHaveLength( 1 ); @@ -51,7 +54,7 @@ describe( 'Editing modes (visual/HTML)', () => { await changeModeButton.click(); // This block should be in "visual" mode by default. - visualBlock = await page.$$( + visualBlock = await frame.$$( '.block-editor-block-list__layout .block-editor-block-list__block.rich-text' ); expect( visualBlock ).toHaveLength( 1 ); @@ -89,8 +92,12 @@ describe( 'Editing modes (visual/HTML)', () => { ); await changeModeButton.click(); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + // Make sure the paragraph content is rendered as expected. - let htmlBlockContent = await page.$eval( + let htmlBlockContent = await frame.$eval( '.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea', ( node ) => node.textContent ); @@ -106,7 +113,7 @@ describe( 'Editing modes (visual/HTML)', () => { ); // Make sure the HTML content updated. - htmlBlockContent = await page.$eval( + htmlBlockContent = await frame.$eval( '.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea', ( node ) => node.textContent ); 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 7226e0750e572..80340de2f88fa 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 @@ -10,7 +10,10 @@ import { } from '@wordpress/e2e-test-utils'; async function getActiveLabel() { - return await page.evaluate( () => { + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + return await frame.evaluate( () => { return ( document.activeElement.getAttribute( 'aria-label' ) || document.activeElement.innerHTML @@ -22,6 +25,7 @@ const navigateToContentEditorTop = async () => { // Use 'Ctrl+`' to return to the top of the editor await pressKeyWithModifier( 'ctrl', '`' ); await pressKeyWithModifier( 'ctrl', '`' ); + await expect( await getActiveLabel() ).toBe( 'Editor content' ); }; const tabThroughParagraphBlock = async ( paragraphText ) => { @@ -33,8 +37,11 @@ const tabThroughParagraphBlock = async ( paragraphText ) => { await page.keyboard.press( 'Tab' ); await expect( await getActiveLabel() ).toBe( 'Paragraph block' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); await expect( - await page.evaluate( () => document.activeElement.innerHTML ) + await frame.evaluate( () => document.activeElement.innerHTML ) ).toBe( paragraphText ); await page.keyboard.press( 'Tab' ); diff --git a/packages/e2e-tests/specs/editor/various/rtl.test.js b/packages/e2e-tests/specs/editor/various/rtl.test.js index c4fd3797cc292..f4c6f21a6d0f8 100644 --- a/packages/e2e-tests/specs/editor/various/rtl.test.js +++ b/packages/e2e-tests/specs/editor/various/rtl.test.js @@ -15,10 +15,13 @@ const ARABIC_TWO = '٢'; describe( 'RTL', () => { beforeEach( async () => { await createNewPost(); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + await frame.evaluate( () => ( document.dir = 'rtl' ) ); } ); it( 'should arrow navigate', async () => { - await page.evaluate( () => ( document.dir = 'rtl' ) ); await page.keyboard.press( 'Enter' ); // We need at least three characters as arrow navigation *from* the @@ -36,7 +39,6 @@ describe( 'RTL', () => { } ); it( 'should split', async () => { - await page.evaluate( () => ( document.dir = 'rtl' ) ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( ARABIC_ZERO ); @@ -48,7 +50,6 @@ describe( 'RTL', () => { } ); it( 'should merge backward', async () => { - await page.evaluate( () => ( document.dir = 'rtl' ) ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( ARABIC_ZERO ); @@ -61,7 +62,6 @@ describe( 'RTL', () => { } ); it( 'should merge forward', async () => { - await page.evaluate( () => ( document.dir = 'rtl' ) ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( ARABIC_ZERO ); @@ -75,7 +75,6 @@ describe( 'RTL', () => { } ); it( 'should arrow navigate between blocks', async () => { - await page.evaluate( () => ( document.dir = 'rtl' ) ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( ARABIC_ZERO ); @@ -101,7 +100,6 @@ describe( 'RTL', () => { } ); it( 'should navigate inline boundaries', async () => { - await page.evaluate( () => ( document.dir = 'rtl' ) ); await page.keyboard.press( 'Enter' ); await pressKeyWithModifier( 'primary', 'b' ); diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index cae52e85c8e24..b9e2c9d03b864 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -36,6 +36,7 @@ export const IFrame = ( { children, head, styles, ...props } ) => { doc.body.className = 'editor-styles-wrapper'; doc.body.style.margin = '0px'; doc.head.innerHTML = head; + doc.dir = document.dir; styles.forEach( ( { css } ) => { const styleEl = doc.createElement( 'style' );