Migrate spacer test to playwright

packages/e2e-test-utils-playwright/src/editor/drag-and-resize.ts

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import type { Locator } from '@playwright/test';
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+
+type Delta = {
+	x: number;
+	y: number;
+};
+
+/**
+ * Clicks an element, drags a particular distance and releases the mouse button.
+ *
+ * @param {Editor} this
+ * @param {Object} element The puppeteer element handle.
+ * @param {Object} delta   Object containing movement distances.
+ * @param {number} delta.x Horizontal distance to drag.
+ * @param {number} delta.y Vertical distance to drag.
+ *
+ * @return {Promise} Promise resolving when drag completes.
+ */
+export async function dragAndResize(
+	this: Editor,
+	element: Locator,
+	delta: Delta
+) {
+	const elementPoint = await element.boundingBox();
+	if ( elementPoint ) {
+		await this.page.mouse.move( elementPoint.x, elementPoint.y );
+		await this.page.mouse.down();
+		await this.page.mouse.move(
+			elementPoint.x + delta.x,
+			elementPoint.y + delta.y
+		);
+		await this.page.mouse.up();
+	}
+}

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

@@ -8,6 +8,7 @@ import type { Browser, Page, BrowserContext, Frame } from '@playwright/test';
  */
 import { clickBlockOptionsMenuItem } from './click-block-options-menu-item';
 import { clickBlockToolbarButton } from './click-block-toolbar-button';
+import { dragAndResize } from './drag-and-resize';
 import { getEditedPostContent } from './get-edited-post-content';
 import { insertBlock } from './insert-block';
 import { openDocumentSettingsSidebar } from './open-document-settings-sidebar';
@@ -54,6 +55,7 @@ export class Editor {
 
 	clickBlockOptionsMenuItem = clickBlockOptionsMenuItem;
 	clickBlockToolbarButton = clickBlockToolbarButton;
+	dragAndResize = dragAndResize;
 	getEditedPostContent = getEditedPostContent;
 	insertBlock = insertBlock;
 	openDocumentSettingsSidebar = openDocumentSettingsSidebar;

test/e2e/specs/editor/blocks/__snapshots__/Spacer-can-be-created-by-typing-spacer-1-chromium.txt

@@ -0,0 +1,3 @@
+<!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->

test/e2e/specs/editor/blocks/__snapshots__/Spacer-can-be-resized-using-the-drag-handle-and-remains-selected-after-being-dragged-1-chromium.txt

@@ -0,0 +1,3 @@
+<!-- wp:spacer {"height":"150px"} -->
+<div style="height:150px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->

test/e2e/specs/editor/blocks/spacer.spec.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Spacer', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'can be created by typing "/spacer"', async ( { editor, page } ) => {
+		// Create a spacer with the slash block shortcut.
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( '/spacer' );
+		await page.keyboard.press( 'Enter' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	test( 'can be resized using the drag handle and remains selected after being dragged', async ( {
+		page,
+		editor,
+	} ) => {
+		// Create a spacer with the slash block shortcut.
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( '/spacer' );
+		await page.keyboard.press( 'Enter' );
+
+		const resizableHandle = page.locator(
+			'[aria-label="Block: Spacer"] .block-library-spacer__resize-container .components-resizable-box__handle'
+		);
+		await editor.dragAndResize( resizableHandle, { x: 0, y: 50 } );
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+
+		const selectedSpacer = page.locator(
+			'[data-type="core/spacer"].is-selected'
+		);
+		expect( selectedSpacer ).not.toBe( null );
+	} );
+} );