@wordpress/e2e-tests 2.4.1-next.253d9b6e21.0 → 2.5.1

package/specs/widgets/editing-widgets.test.js

@@ -2,14 +2,15 @@
  * WordPress dependencies
  */
 import {
-	activatePlugin,
+	__experimentalActivatePlugin as activatePlugin,
 	activateTheme,
 	clickBlockToolbarButton,
-	deactivatePlugin,
+	__experimentalDeactivatePlugin as deactivatePlugin,
 	showBlockToolbar,
 	visitAdminPage,
 	deleteAllWidgets,
 	pressKeyWithModifier,
+	__experimentalRest as rest,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -19,6 +20,10 @@ import {
 import { find, findAll } from 'puppeteer-testing-library';
 import { groupBy, mapValues } from 'lodash';
 
+const twentyTwentyError = `Stylesheet twentytwenty-block-editor-styles-css was not properly added.
+For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
+For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles).`;
+
 describe( 'Widgets screen', () => {
 	beforeEach( async () => {
 		await visitWidgetsScreen();
@@ -26,14 +31,14 @@ describe( 'Widgets screen', () => {
 		// Disable welcome guide if it is enabled.
 		const isWelcomeGuideActive = await page.evaluate( () =>
 			wp.data
-				.select( 'core/edit-widgets' )
-				.__unstableIsFeatureActive( 'welcomeGuide' )
+				.select( 'core/interface' )
+				.isFeatureActive( 'core/edit-widgets', 'welcomeGuide' )
 		);
 		if ( isWelcomeGuideActive ) {
 			await page.evaluate( () =>
 				wp.data
-					.dispatch( 'core/edit-widgets' )
-					.__unstableToggleFeature( 'welcomeGuide' )
+					.dispatch( 'core/interface' )
+					.toggleFeature( 'core/edit-widgets', 'welcomeGuide' )
 			);
 		}
 
@@ -51,23 +56,10 @@ describe( 'Widgets screen', () => {
 	beforeAll( async () => {
 		// TODO: Ideally we can bundle our test theme directly in the repo.
 		await activateTheme( 'twentytwenty' );
-		// Reduced motion is needed to immediately show and dismiss the snackbars.
-		await page.emulateMediaFeatures( [
-			{
-				name: 'prefers-reduced-motion',
-				value: 'reduce',
-			},
-		] );
 		await deleteAllWidgets();
 	} );
 
 	afterAll( async () => {
-		await page.emulateMediaFeatures( [
-			{
-				name: 'prefers-reduced-motion',
-				value: 'no-preference',
-			},
-		] );
 		await activateTheme( 'twentytwentyone' );
 	} );
 
@@ -245,6 +237,8 @@ describe( 'Widgets screen', () => {
 		</div></div>",
 		}
 	` );
+
+		expect( console ).toHaveErrored( twentyTwentyError );
 	} );
 
 	it.skip( 'Should insert content using the inline inserter', async () => {
@@ -554,8 +548,6 @@ describe( 'Widgets screen', () => {
 		</div></div>",
 		}
 	` );
-		const initialWidgets = await getWidgetAreaWidgets();
-		expect( initialWidgets[ 'sidebar-1' ].length ).toBe( 1 );
 
 		firstParagraphBlock = await firstWidgetArea.$(
 			'[data-block][data-type="core/paragraph"]'
@@ -608,66 +600,47 @@ describe( 'Widgets screen', () => {
 		</div></div>",
 		}
 	` );
-		const editedWidgets = await getWidgetAreaWidgets();
-		expect( editedWidgets[ 'sidebar-1' ].length ).toBe( 2 );
-		expect( editedWidgets[ 'sidebar-1' ][ 0 ] ).toBe(
-			initialWidgets[ 'sidebar-1' ][ 0 ]
+		expect( editedSerializedWidgetAreas[ 'sidebar-1' ] ).toBe(
+			[
+				initialSerializedWidgetAreas[ 'sidebar-1' ],
+				initialSerializedWidgetAreas[ 'sidebar-1' ],
+			].join( '\n' )
 		);
+
+		expect( console ).toHaveErrored( twentyTwentyError );
 	} );
 
 	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(
-			{
-				role: 'heading',
-				name: 'Search',
-				level: 3,
-			},
-			{
-				root: await page.$( '#widget-list' ),
-			}
-		);
-		await searchWidget.click();
-
-		const addWidgetButton = await find( {
-			role: 'button',
-			name: 'Add Widget',
+		// Get the default empty instance of a legacy search widget.
+		const { instance: defaultSearchInstance } = await rest( {
+			method: 'POST',
+			path: '/wp/v2/widget-types/search/encode',
+			data: { instance: {} },
 		} );
-		await addWidgetButton.click();
 
-		// Wait for the changes to be saved.
-		// TODO: Might have better ways to do this.
-		await page.waitForFunction( () => {
-			const addedSearchWidget = document.querySelector(
-				'#widgets-right .widget'
-			);
-			const spinner = addedSearchWidget.querySelector( '.spinner' );
-
-			return (
-				addedSearchWidget.classList.contains( 'open' ) &&
-				! spinner.classList.contains( 'is-active' )
-			);
+		// Create a search widget in the first sidebar using the default instance.
+		await rest( {
+			method: 'POST',
+			path: '/wp/v2/widgets',
+			data: {
+				id_base: 'search',
+				sidebar: 'sidebar-1',
+				instance: defaultSearchInstance,
+			},
 		} );
-		// FIXME: For some reasons, waiting for the spinner to disappear is not enough.
-		// eslint-disable-next-line no-restricted-syntax
-		await page.waitForTimeout( 500 );
 
-		await deactivatePlugin( 'gutenberg-test-classic-widgets' );
-		await visitWidgetsScreen();
+		await page.reload();
 
 		// Wait for the Legacy Widget block's preview iframe to load.
 		const frame = await new Promise( ( resolve ) => {
-			const checkFrame = async ( candidateFrame ) => {
-				const url = await candidateFrame.url();
-				if ( url.includes( 'legacy-widget-preview' ) ) {
+			const checkFrame = async () => {
+				const frameElement = await page.$(
+					'iframe.wp-block-legacy-widget__edit-preview-iframe'
+				);
+				if ( frameElement ) {
 					page.off( 'frameattached', checkFrame );
 					page.off( 'framenavigated', checkFrame );
-					resolve( candidateFrame );
+					resolve( frameElement.contentFrame() );
 				}
 			};
 			page.on( 'frameattached', checkFrame );
@@ -809,6 +782,8 @@ describe( 'Widgets screen', () => {
 		</div></div>",
 		}
 	` );
+
+		expect( console ).toHaveErrored( twentyTwentyError );
 	} );
 
 	it( 'Allows widget deletion to be undone', async () => {
@@ -847,6 +822,8 @@ describe( 'Widgets screen', () => {
 		// Delete the last block and save again.
 		await pressKeyWithModifier( 'access', 'z' );
 		await saveWidgets();
+		// To do: clicking on the Snackbar causes focus loss.
+		await page.focus( '.block-editor-writing-flow' );
 
 		// Undo block deletion and save again
 		await pressKeyWithModifier( 'primary', 'z' );
@@ -866,6 +843,8 @@ describe( 'Widgets screen', () => {
 		</div></div>",
 		}
 	` );
+
+		expect( console ).toHaveErrored( twentyTwentyError );
 	} );
 } );
 
@@ -912,13 +891,15 @@ async function saveWidgets() {
 	// Close the snackbar.
 	const savedSnackbar = await find( savedSnackbarQuery );
 	await savedSnackbar.click();
+	// Expect focus not to be lost.
+	await expect(
+		await page.evaluate( () => document.activeElement.className )
+	).toBe( 'components-snackbar-list edit-widgets-notices__snackbar' );
 	await expect( savedSnackbarQuery ).not.toBeFound();
 }
 
 async function getSerializedWidgetAreas() {
-	const widgets = await page.evaluate( () =>
-		wp.data.select( 'core' ).getWidgets( { _embed: 'about' } )
-	);
+	const widgets = await rest( { path: '/wp/v2/widgets' } );
 
 	const serializedWidgetAreas = mapValues(
 		groupBy( widgets, 'sidebar' ),
@@ -931,20 +912,3 @@ async function getSerializedWidgetAreas() {
 
 	return serializedWidgetAreas;
 }
-
-async function getWidgetAreaWidgets() {
-	const widgets = await page.evaluate( () => {
-		const widgetAreas = wp.data
-			.select( 'core/edit-widgets' )
-			.getWidgetAreas();
-		const sidebars = {};
-
-		for ( const widgetArea of widgetAreas ) {
-			sidebars[ widgetArea.id ] = widgetArea.widgets;
-		}
-
-		return sidebars;
-	} );
-
-	return widgets;
-}

package/plugins/classic-widgets.php

@@ -1,11 +0,0 @@
-<?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' );