Migrate customizing-widgets to Playwright

packages/customize-widgets/src/controls/sidebar-section.js

@@ -16,6 +16,14 @@ export default function getSidebarSection() {
 		wp: { customize },
 	} = window;
 
+	const reduceMotionMediaQuery = window.matchMedia(
+		'(prefers-reduced-motion: reduce)'
+	);
+	let isReducedMotion = reduceMotionMediaQuery.matches;
+	reduceMotionMediaQuery.addEventListener( 'change', ( event ) => {
+		isReducedMotion = event.matches;
+	} );
+
 	return class SidebarSection extends customize.Section {
 		ready() {
 			const InspectorSection = getInspectorSection();
@@ -58,10 +66,6 @@ export default function getSidebarSection() {
 					this.contentContainer
 						.closest( '.wp-full-overlay' )
 						.addClass( 'section-open' );
-					this.contentContainer.one( 'transitionend', () => {
-						this.contentContainer.removeClass( 'busy' );
-						args.completeCallback();
-					} );
 				} else {
 					this.contentContainer.addClass( [
 						'busy',
@@ -71,10 +75,20 @@ export default function getSidebarSection() {
 						.closest( '.wp-full-overlay' )
 						.addClass( 'section-open' );
 					this.contentContainer.removeClass( 'open' );
-					this.contentContainer.one( 'transitionend', () => {
-						this.contentContainer.removeClass( 'busy' );
-						args.completeCallback();
-					} );
+				}
+
+				const handleTransitionEnd = () => {
+					this.contentContainer.removeClass( 'busy' );
+					args.completeCallback();
+				};
+
+				if ( isReducedMotion ) {
+					handleTransitionEnd();
+				} else {
+					this.contentContainer.one(
+						'transitionend',
+						handleTransitionEnd
+					);
 				}
 			} else {
 				super.onChangeExpanded( expanded, args );

packages/e2e-test-utils-playwright/src/page/click-block-toolbar-button.js

@@ -0,0 +1,16 @@
+/**
+ * Clicks a block toolbar button.
+ *
+ * @this {import('./').PageUtils}
+ * @param {string} label The text string of the button label.
+ */
+export async function clickBlockToolbarButton( label ) {
+	await this.showBlockToolbar();
+
+	const blockToolbar = this.page.locator(
+		'role=toolbar[name="Block tools"i]'
+	);
+	const button = blockToolbar.locator( `role=button[name="${ label }"]` );
+
+	await button.click();
+}

packages/e2e-test-utils-playwright/src/page/index.ts

@@ -6,8 +6,10 @@ import type { Browser, Page, BrowserContext } from '@playwright/test';
 /**
  * Internal dependencies
  */
+import { clickBlockToolbarButton } from './click-block-toolbar-button';
 import { getPageError } from './get-page-error';
 import { isCurrentURL } from './is-current-url';
+import { showBlockToolbar } from './show-block-toolbar';
 import { visitAdminPage } from './visit-admin-page';
 
 class PageUtils {
@@ -21,8 +23,10 @@ class PageUtils {
 		this.browser = this.context.browser()!;
 	}
 
+	clickBlockToolbarButton = clickBlockToolbarButton;
 	getPageError = getPageError;
 	isCurrentURL = isCurrentURL;
+	showBlockToolbar = showBlockToolbar;
 	visitAdminPage = visitAdminPage;
 }
 

packages/e2e-test-utils-playwright/src/page/show-block-toolbar.js

@@ -0,0 +1,15 @@
+/**
+ * The block toolbar is not always visible while typing.
+ * Call this function to reveal it.
+ *
+ * @this {import('./').PageUtils}
+ */
+export async function showBlockToolbar() {
+	// Move the mouse to disable the isTyping mode. We need at least three
+	// mousemove events for it to work across windows (iframe). With three
+	// moves, it's a guarantee that at least two will be in the same window.
+	// Two events are required for the flag to be unset.
+	await this.page.mouse.move( 50, 50 );
+	await this.page.mouse.move( 75, 75 );
+	await this.page.mouse.move( 100, 100 );
+}

packages/e2e-test-utils-playwright/src/request/index.ts

@@ -17,6 +17,7 @@ import { getPluginsMap, activatePlugin, deactivatePlugin } from './plugins';
 import { activateTheme } from './themes';
 import { deleteAllBlocks } from './blocks';
 import { deleteAllPosts } from './posts';
+import { deleteAllWidgets, addWidgetBlock } from './widgets';
 
 interface StorageState {
 	cookies: Cookie[];
@@ -115,6 +116,8 @@ class RequestUtils {
 	activateTheme = activateTheme;
 	deleteAllBlocks = deleteAllBlocks;
 	deleteAllPosts = deleteAllPosts;
+	deleteAllWidgets = deleteAllWidgets;
+	addWidgetBlock = addWidgetBlock;
 }
 
 export type { StorageState };

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

@@ -0,0 +1,65 @@
+/**
+ * Delete all the widgets in the widgets screen.
+ *
+ * @this {import('./index').RequestUtils}
+ */
+export async function deleteAllWidgets() {
+	const [ widgets, sidebars ] = await Promise.all( [
+		this.rest( { path: '/wp/v2/widgets' } ),
+		this.rest( { path: '/wp/v2/sidebars' } ),
+	] );
+
+	await this.batchRest(
+		widgets.map( ( widget ) => ( {
+			method: 'DELETE',
+			path: `/wp/v2/widgets/${ widget.id }?force=true`,
+		} ) )
+	);
+
+	await this.batchRest(
+		sidebars.map( ( sidebar ) => ( {
+			method: 'POST',
+			path: `/wp/v2/sidebars/${ sidebar.id }`,
+			body: { id: sidebar.id, widgets: [] },
+		} ) )
+	);
+}
+
+/**
+ * Add a widget block to the widget area.
+ *
+ * @this {import('./index').RequestUtils}
+ * @param {string} serializedBlock The serialized content of the inserted block HTML.
+ * @param {string} widgetAreaId    The ID of the widget area.
+ */
+export async function addWidgetBlock( serializedBlock, widgetAreaId ) {
+	const { id: blockId } = await this.rest( {
+		method: 'POST',
+		path: '/wp/v2/widgets',
+		data: {
+			id_base: 'block',
+			sidebar: widgetAreaId,
+			instance: {
+				raw: { content: serializedBlock },
+			},
+		},
+	} );
+
+	const { widgets } = await this.rest( {
+		path: `/wp/v2/sidebars/${ widgetAreaId }`,
+	} );
+
+	const updatedWidgets = new Set( widgets );
+	// Remove duplicate.
+	updatedWidgets.delete( blockId );
+	// Add to last block.
+	updatedWidgets.add( blockId );
+
+	await this.rest( {
+		method: 'PUT',
+		path: `/wp/v2/sidebars/${ widgetAreaId }`,
+		data: {
+			widgets: [ ...updatedWidgets ],
+		},
+	} );
+}