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.

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 errors caused by adding widgets to WordPress core #32176

Merged
merged 8 commits into from
May 25, 2021
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
Fix widgets e2e tests (#32182)
  • Loading branch information
kevin940726 authored and ellatrix committed May 25, 2021
commit 56e66ec2b8cdf887268abd01c6fb08463aaf77e1
6 changes: 5 additions & 1 deletion packages/e2e-test-utils/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### New Features

- Added `deleteAllWidgets` - Delete all widgets in the widgets screen.

## 5.0.0 (2021-01-21)

### Breaking Changes
Expand All @@ -12,7 +16,7 @@

## 4.16.0 (2020-12-17)

### Nee Features
### New Features

- Added `clickMenuItem` - clicks the item that matches the label in the opened menu.

Expand Down
4 changes: 4 additions & 0 deletions packages/e2e-test-utils/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,10 @@ _Parameters_

- _slug_ `string`: Plugin slug.

<a name="deleteAllWidgets" href="#deleteAllWidgets">#</a> **deleteAllWidgets**

Delete all the widgets in the widgets screen.

<a name="deleteTheme" href="#deleteTheme">#</a> **deleteTheme**

Deletes a theme from the site, activating another theme if necessary.
Expand Down
1 change: 1 addition & 0 deletions packages/e2e-test-utils/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -78,5 +78,6 @@ export { waitForWindowDimensions } from './wait-for-window-dimensions';
export { showBlockToolbar } from './show-block-toolbar';
export { openPreviewPage } from './preview';
export { wpDataSelect } from './wp-data-select';
export { deleteAllWidgets } from './widgets';

export * from './mocks';
32 changes: 32 additions & 0 deletions packages/e2e-test-utils/src/widgets.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/**
* Internal dependencies
*/
import { activatePlugin } from './activate-plugin';
import { deactivatePlugin } from './deactivate-plugin';
import { visitAdminPage } from './visit-admin-page';

/**
* Delete all the widgets in the widgets screen.
*/
export async function deleteAllWidgets() {
// TODO: Deleting widgets in the new widgets screen is cumbersome and slow.
// To workaround this for now, we visit the old widgets screen to delete them.
await activatePlugin( 'gutenberg-test-classic-widgets' );

await visitAdminPage( 'widgets.php' );

let widget = await page.$( '.widgets-sortables .widget' );

// We have to do this one-by-one since there might be race condition when deleting multiple widgets at once.
while ( widget ) {
const deleteButton = await widget.$( 'button.widget-control-remove' );
const id = await widget.evaluate( ( node ) => node.id );
await deleteButton.evaluate( ( node ) => node.click() );
// Wait for the widget to be removed from DOM.
await page.waitForSelector( `#${ id }`, { hidden: true } );

widget = await page.$( '.widgets-sortables .widget' );
}

await deactivatePlugin( 'gutenberg-test-classic-widgets' );
}
11 changes: 11 additions & 0 deletions packages/e2e-tests/plugins/classic-widgets.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<?php
/**
* Plugin Name: Gutenberg Test Classic Widgets
* Plugin URI: https://github.com/WordPress/gutenberg
* Author: Gutenberg Team
*
* @package gutenberg-test-classic-widgets
*/

// Disable the widgets block editor and enable the legacy widgets screen.
add_filter( 'use_widgets_block_editor', '__return_false' );
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
visitAdminPage,
showBlockToolbar,
clickBlockToolbarButton,
deleteAllWidgets,
} from '@wordpress/e2e-test-utils';

/**
Expand All @@ -18,7 +19,7 @@ import { find } from 'puppeteer-testing-library';

describe( 'Widgets Customizer', () => {
beforeEach( async () => {
await cleanupWidgets();
await deleteAllWidgets();
await visitAdminPage( 'customize.php' );

// Disable welcome guide if it is enabled.
Expand Down Expand Up @@ -512,28 +513,6 @@ describe( 'Widgets Customizer', () => {
} );
} );

/**
* TODO: Deleting widgets in the new widgets screen seems to be unreliable.
* We visit the old widgets screen to delete them.
* Refactor this to use real interactions in the new widgets screen once the bug is fixed.
*/
async function cleanupWidgets() {
await visitAdminPage( 'widgets.php' );

let widget = await page.$( '.widgets-sortables .widget' );

// We have to do this one-by-one since there might be race condition when deleting multiple widgets at once.
while ( widget ) {
const deleteButton = await widget.$( 'button.widget-control-remove' );
const id = await widget.evaluate( ( node ) => node.id );
await deleteButton.evaluate( ( node ) => node.click() );
// Wait for the widget to be removed from DOM.
await page.waitForSelector( `#${ id }`, { hidden: true } );

widget = await page.$( '.widgets-sortables .widget' );
}
}

/**
* Wait when there's only one preview iframe.
* There could be a 2 iframes when it's changing from no widgets to
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
deactivatePlugin,
showBlockToolbar,
visitAdminPage,
deleteAllWidgets,
} from '@wordpress/e2e-test-utils';

/**
Expand All @@ -17,11 +18,9 @@ import {
import { find, findAll } from 'puppeteer-testing-library';
import { groupBy, mapValues } from 'lodash';

/** @typedef {import('puppeteer').ElementHandle} ElementHandle */

describe( 'Widgets screen', () => {
beforeEach( async () => {
await visitAdminPage( 'themes.php', 'page=gutenberg-widgets' );
await visitWidgetsScreen();

// Disable welcome guide if it is enabled.
const isWelcomeGuideActive = await page.evaluate( () =>
Expand All @@ -45,7 +44,7 @@ describe( 'Widgets screen', () => {
} );

afterEach( async () => {
await cleanupWidgets();
await deleteAllWidgets();
} );

beforeAll( async () => {
Expand All @@ -54,7 +53,7 @@ describe( 'Widgets screen', () => {
await deactivatePlugin(
'gutenberg-test-plugin-disables-the-css-animations'
);
await cleanupWidgets();
await deleteAllWidgets();
} );

afterAll( async () => {
Expand Down Expand Up @@ -480,6 +479,10 @@ describe( 'Widgets screen', () => {
} );

it( 'Should display legacy widgets', async () => {
/**
* Using the classic widgets screen to simulate creating legacy widgets.
*/
await activatePlugin( 'gutenberg-test-classic-widgets' );
await visitAdminPage( 'widgets.php' );

const searchWidget = await find(
Expand Down Expand Up @@ -517,7 +520,8 @@ describe( 'Widgets screen', () => {
// eslint-disable-next-line no-restricted-syntax
await page.waitForTimeout( 500 );

await visitAdminPage( 'themes.php', 'page=gutenberg-widgets' );
await deactivatePlugin( 'gutenberg-test-classic-widgets' );
await visitWidgetsScreen();

// Wait for the Legacy Widget block's preview iframe to load.
const frame = await new Promise( ( resolve ) => {
Expand Down Expand Up @@ -671,6 +675,31 @@ describe( 'Widgets screen', () => {
} );
} );

/**
* Visit the widgets screen via link clicking. The widgets screen currently
* has different URLs during the integration to core.
* We should be able to refactor it once it's fully merged into core.
*/
async function visitWidgetsScreen() {
// Visit the Appearance page.
await visitAdminPage( 'themes.php' );

// Go to the Widgets page.
const appearanceMenu = await page.$( '#menu-appearance' );
await appearanceMenu.hover();
const widgetsLink = await find(
{ role: 'link', name: 'Widgets' },
{ root: appearanceMenu }
);
await Promise.all( [
page.waitForNavigation(),
// Click on the link no matter if it's visible or not.
widgetsLink.evaluate( ( link ) => {
link.click();
} ),
] );
}

async function saveWidgets() {
const updateButton = await find( {
role: 'button',
Expand Down Expand Up @@ -721,25 +750,3 @@ async function getWidgetAreaWidgets() {

return widgets;
}

/**
* TODO: Deleting widgets in the new widgets screen seems to be unreliable.
* We visit the old widgets screen to delete them.
* Refactor this to use real interactions in the new widgets screen once the bug is fixed.
*/
async function cleanupWidgets() {
await visitAdminPage( 'widgets.php' );

let widget = await page.$( '.widgets-sortables .widget' );

// We have to do this one-by-one since there might be race condition when deleting multiple widgets at once.
while ( widget ) {
const deleteButton = await widget.$( 'button.widget-control-remove' );
const id = await widget.evaluate( ( node ) => node.id );
await deleteButton.evaluate( ( node ) => node.click() );
// Wait for the widget to be removed from DOM.
await page.waitForSelector( `#${ id }`, { hidden: true } );

widget = await page.$( '.widgets-sortables .widget' );
}
}