Fix widgets e2e tests

packages/e2e-test-utils/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+-   Added `deleteAllWidgets` - Delete all widgets in the widgets screen.
+
 ## 5.0.0 (2021-01-21)
 
 ### Breaking Changes
@@ -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.
 

packages/e2e-test-utils/README.md

@@ -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.

packages/e2e-test-utils/src/index.js

@@ -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';

packages/e2e-test-utils/src/widgets.js

@@ -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' );
+}

packages/e2e-tests/plugins/classic-widgets.php

@@ -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' );

packages/e2e-tests/specs/experiments/customizing-widgets.test.js → packages/e2e-tests/specs/widgets/customizing-widgets.test.js

@@ -8,6 +8,7 @@ import {
 	visitAdminPage,
 	showBlockToolbar,
 	clickBlockToolbarButton,
+	deleteAllWidgets,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -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.
@@ -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

packages/e2e-tests/specs/widgets/adding-widgets.test.js → packages/e2e-tests/specs/widgets/editing-widgets.test.js

@@ -8,6 +8,7 @@ import {
 	deactivatePlugin,
 	showBlockToolbar,
 	visitAdminPage,
+	deleteAllWidgets,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -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( () =>
@@ -45,7 +44,7 @@ describe( 'Widgets screen', () => {
 	} );
 
 	afterEach( async () => {
-		await cleanupWidgets();
+		await deleteAllWidgets();
 	} );
 
 	beforeAll( async () => {
@@ -54,7 +53,7 @@ describe( 'Widgets screen', () => {
 		await deactivatePlugin(
 			'gutenberg-test-plugin-disables-the-css-animations'
 		);
-		await cleanupWidgets();
+		await deleteAllWidgets();
 	} );
 
 	afterAll( async () => {
@@ -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(
@@ -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 ) => {
@@ -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',
@@ -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' );
-	}
-}