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

Fix flaky widgets-related E2E tests #33066

Merged
merged 14 commits into from
Jun 30, 2021
Merged

Fix flaky widgets-related E2E tests #33066

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
6d6710f
Remove empty keys from the compared object
adamziel Jun 29, 2021
f790a52
Revert dev artifacts
adamziel Jun 29, 2021
745dcd4
Disable the gutenberg-test-marquee-widget plugin
adamziel Jun 29, 2021
e0392db
Wrap marquee tests in their own describe statement
adamziel Jun 29, 2021
b423aa1
Lint
adamziel Jun 29, 2021
386be3c
Update snapshots
adamziel Jun 29, 2021
08cf2bd
Replace hello with howdy
adamziel Jun 30, 2021
5b4609b
Move plugin activation to beforeEach
adamziel Jun 30, 2021
0e01eed
Move deleteAllWidgets to beforeEach
adamziel Jun 30, 2021
7f73b7e
Update tests
kevin940726 Jun 30, 2021
659c78e
use data-testid rather than name attribute selectors
kevin940726 Jun 30, 2021
e8d7ec8
Merge branch 'fix-widgets-tests' of github.com:WordPress/gutenberg in…
adamziel Jun 30, 2021
4a8467e
Remove any existing marquees before running the tests, use the "save"…
adamziel Jun 30, 2021
97bc5c7
Remove dev artifact
adamziel Jun 30, 2021
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
6 changes: 4 additions & 2 deletions packages/e2e-tests/plugins/marquee-function-widget.php
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -34,15 +34,17 @@ function() {
$greeting = get_option( 'marquee_greeting' ); $greeting = get_option( 'marquee_greeting' );
?> ?>
<p> <p>
<label for="marquee-greeting">Greeting:</label> <label>
Greeting:
<input <input
id="marquee-greeting"
class="widefat" class="widefat"
data-testid="marquee-greeting"
name="marquee-greeting" name="marquee-greeting"
type="text" type="text"
value="<?php echo esc_attr( $greeting ); ?>" value="<?php echo esc_attr( $greeting ); ?>"
placeholder="Hello!" placeholder="Hello!"
/> />
</label>
</p> </p>
<?php <?php
} }
Expand Down
144 changes: 81 additions & 63 deletions packages/e2e-tests/specs/widgets/editing-widgets.test.js
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
* External dependencies * External dependencies
*/ */
// eslint-disable-next-line no-restricted-imports // eslint-disable-next-line no-restricted-imports
import { find, findAll, waitFor } from 'puppeteer-testing-library'; import { find, findAll } from 'puppeteer-testing-library';
import { groupBy, mapValues } from 'lodash'; import { groupBy, mapValues } from 'lodash';


describe( 'Widgets screen', () => { describe( 'Widgets screen', () => {
Expand Down Expand Up @@ -89,6 +89,12 @@ describe( 'Widgets screen', () => {
); );
expect( categoryHeaders.length > 0 ).toBe( true ); expect( categoryHeaders.length > 0 ).toBe( true );


const searchBox = await find( {
role: 'searchbox',
name: 'Search for blocks and patterns',
} );
await searchBox.type( blockName );

const addBlock = await find( const addBlock = await find(
{ {
role: 'option', role: 'option',
Expand Down Expand Up @@ -394,61 +400,81 @@ describe( 'Widgets screen', () => {
` ); ` );
} ); } );


async function addMarquee() { describe( 'Function widgets', () => {
// There will be 2 matches here. async function addMarquee( nbExpectedMarquees ) {
// One is the in-between inserter, const marqueeBlock = await getBlockInGlobalInserter(
// and the other one is the button block appender. 'Marquee Greeting'
const [ inlineInserterButton ] = await findAll( { );
role: 'combobox', await marqueeBlock.click();
name: 'Add block', await page.waitForFunction(
} ); ( expectedMarquees ) => {
await inlineInserterButton.click(); return (

document.querySelectorAll(
// TODO: Convert to find() API from puppeteer-testing-library. '[data-testid="marquee-greeting"]'
const inserterSearchBox = await page.waitForSelector( ).length === expectedMarquees
'aria/Search for blocks and patterns[role="searchbox"]'
); );
await expect( inserterSearchBox ).toHaveFocus();

await page.keyboard.type( 'Marquee' );

const inlineQuickInserter = await find( {
role: 'listbox',
name: 'Blocks',
} );
const marqueeBlockOption = await find(
{
role: 'option',
}, },
{ {},
root: inlineQuickInserter, nbExpectedMarquees
);
} }

async function deleteExistingMarquees() {
const widgetAreasHoldingMarqueeWidgets = await page.$x(
'//input[@data-testid="marquee-greeting"]/ancestor::div[@aria-label="Block: Widget Area"]'
); );
await marqueeBlockOption.click(); for ( const widgetArea of widgetAreasHoldingMarqueeWidgets ) {
const closedPanelBody = await widgetArea.$(
'.components-panel__body:not(.is-opened)'
);
if ( closedPanelBody ) {
await closedPanelBody.focus();
await closedPanelBody.click();
} }


it( 'Should add and save the marquee widget', async () => { const [ existingMarqueeWidgets ] = await widgetArea.$x(
await activatePlugin( 'gutenberg-test-marquee-widget' ); '//input[@data-testid="marquee-greeting"]/ancestor::div[@data-block][contains(@class, "wp-block-legacy-widget")]'
await visitAdminPage( 'widgets.php' ); );
if ( existingMarqueeWidgets ) {
await existingMarqueeWidgets.focus();
await pressKeyWithModifier( 'access', 'z' );
}
}
}


await addMarquee(); beforeAll( async () => {
await activatePlugin( 'gutenberg-test-marquee-widget' );
} );


await find( { beforeEach( async () => {
selector: '[data-block][data-type="core/legacy-widget"]', await deleteExistingMarquees();
} ); } );


const greetingsInput = await find( { afterAll( async () => {
selector: '#marquee-greeting', await deactivatePlugin( 'gutenberg-test-marquee-widget' );
} ); } );
await greetingsInput.click();
await page.keyboard.type( 'Howdy' ); it( 'Should add and save the marquee widget', async () => {
await addMarquee( 1 );

const [ marqueeInput ] = await page.$x(
'//input[@data-testid="marquee-greeting"]'
);
await marqueeInput.focus();
await marqueeInput.type( 'Howdy' );

// The first marquee is saved after clicking the form save button.
const [ marqueeSaveButton ] = await marqueeInput.$x(
'//input/ancestor::div[@data-block][contains(@class, "wp-block-legacy-widget")]//button[@type="submit"]'
);
await marqueeSaveButton.click();


await saveWidgets(); await saveWidgets();


let editedSerializedWidgetAreas = await getSerializedWidgetAreas(); let editedSerializedWidgetAreas = await getSerializedWidgetAreas();
await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( ` await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
Object { Object {
"sidebar-1": "<marquee>Hello!</marquee>", "sidebar-1": "<marquee>Howdy</marquee>",
} }
` ); ` );


Expand All @@ -457,46 +483,40 @@ describe( 'Widgets screen', () => {
editedSerializedWidgetAreas = await getSerializedWidgetAreas(); editedSerializedWidgetAreas = await getSerializedWidgetAreas();
await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( ` await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
Object { Object {
"sidebar-1": "<marquee>Hello!</marquee>", "sidebar-1": "<marquee>Howdy</marquee>",
} }
` ); ` );


// Add another marquee, it shouldn't be saved await addMarquee( 2 );
await addMarquee();


// It takes a moment to load the form, let's wait for it. const marqueeInputs = await page.$$(
await waitFor( async () => { '[data-testid="marquee-greeting"]'
const marquees = await findAll( { );
selector: '[id=marquee-greeting]',
} );
if ( marquees.length === 1 ) {
throw new Error();
}
} );


const marquees = await findAll( { expect( marqueeInputs ).toHaveLength( 2 );
selector: '[id=marquee-greeting]', await marqueeInputs[ 0 ].focus();
} ); await marqueeInputs[ 0 ].type( 'first howdy' );


expect( marquees ).toHaveLength( 2 ); await marqueeInputs[ 1 ].focus();
await marquees[ 1 ].click(); await marqueeInputs[ 1 ].type( 'Second howdy' );
await page.keyboard.type( 'Second howdy' );


// No marquee should be changed without clicking on their "save" button.
// The second marquee shouldn't be stored as a widget.
// See #32978 for more info.
await saveWidgets(); await saveWidgets();
editedSerializedWidgetAreas = await getSerializedWidgetAreas(); editedSerializedWidgetAreas = await getSerializedWidgetAreas();
await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( ` await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
Object { Object {
"sidebar-1": "<marquee>Hello!</marquee>", "sidebar-1": "<marquee>Howdy</marquee>",
} }
` ); ` );


await page.reload(); await page.reload();
const marqueesAfter = await findAll( { const marqueesAfter = await findAll( {
selector: '[id=marquee-greeting]', selector: '[data-testid="marquee-greeting"]',
} ); } );
expect( marqueesAfter ).toHaveLength( 1 ); expect( marqueesAfter ).toHaveLength( 1 );

} );
await deactivatePlugin( 'gutenberg-test-marquee-widget' );
} ); } );


// Disable reason: We temporary skip this test until we can figure out why it fails sometimes. // Disable reason: We temporary skip this test until we can figure out why it fails sometimes.
Expand Down Expand Up @@ -528,7 +548,6 @@ describe( 'Widgets screen', () => {
"sidebar-1": "<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\"> "sidebar-1": "<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
<p>First Paragraph</p> <p>First Paragraph</p>
</div></div>", </div></div>",
"wp_inactive_widgets": "",
} }
` ); ` );
const initialWidgets = await getWidgetAreaWidgets(); const initialWidgets = await getWidgetAreaWidgets();
Expand Down Expand Up @@ -599,7 +618,6 @@ describe( 'Widgets screen', () => {
<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\"> <div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
<p>First Paragraph</p> <p>First Paragraph</p>
</div></div>", </div></div>",
"wp_inactive_widgets": "",
} }
` ); ` );
const editedWidgets = await getWidgetAreaWidgets(); const editedWidgets = await getWidgetAreaWidgets();
Expand Down