Migrate post-editor-template-mode to Playwright (#40175)

* Migrate post-editor-template-mode to Playwright

* Use core/preferences store

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

@@ -12,10 +12,13 @@ import { getEditedPostContent } from './get-edited-post-content';
 import { getPageError } from './get-page-error';
 import { insertBlock } from './insert-block';
 import { isCurrentURL } from './is-current-url';
+import { openDocumentSettingsSidebar } from './open-document-settings-sidebar';
 import {
 	setClipboardData,
 	pressKeyWithModifier,
 } from './press-key-with-modifier';
+import { openPreviewPage } from './preview';
+import { setBrowserViewport } from './set-browser-viewport';
 import { showBlockToolbar } from './show-block-toolbar';
 import { visitAdminPage } from './visit-admin-page';
 
@@ -40,6 +43,9 @@ class PageUtils {
 	setClipboardData = setClipboardData;
 	showBlockToolbar = showBlockToolbar;
 	visitAdminPage = visitAdminPage;
+	openDocumentSettingsSidebar = openDocumentSettingsSidebar;
+	openPreviewPage = openPreviewPage;
+	setBrowserViewport = setBrowserViewport;
 }
 
 export { PageUtils };

packages/e2e-test-utils-playwright/src/page/open-document-settings-sidebar.js

@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+const { expect } = require( '../test' );
+
+/**
+ * Clicks on the button in the header which opens Document Settings sidebar when it is closed.
+ *
+ * @this {import('./').PageUtils}
+ */
+export async function openDocumentSettingsSidebar() {
+	const editorSettings = this.page.locator(
+		'role=region[name="Editor settings"i]'
+	);
+
+	if ( ! ( await editorSettings.isVisible() ) ) {
+		await this.page.click(
+			'role=region[name="Editor top bar"i] >> role=button[name="Settings"i]'
+		);
+
+		await expect( editorSettings ).toBeVisible();
+	}
+}

packages/e2e-test-utils-playwright/src/page/preview.js

@@ -0,0 +1,24 @@
+/** @typedef {import('@playwright/test').Page} Page */
+
+/**
+ * Opens the preview page of an edited post.
+ *
+ * @this {import('./').PageUtils}
+ * @return {Page} preview page.
+ */
+export async function openPreviewPage() {
+	const editorTopBar = this.page.locator(
+		'role=region[name="Editor top bar"i]'
+	);
+	const previewButton = editorTopBar.locator(
+		'role=button[name="Preview"i]'
+	);
+	await previewButton.click();
+
+	const [ previewPage ] = await Promise.all( [
+		this.context.waitForEvent( 'page' ),
+		this.page.click( 'role=menuitem[name="Preview in new tab"i]' ),
+	] );
+
+	return previewPage;
+}

packages/e2e-test-utils-playwright/src/page/set-browser-viewport.js

@@ -0,0 +1,48 @@
+/**
+ * Named viewport options.
+ *
+ * @typedef {"large"|"medium"|"small"} WPDimensionsName
+ */
+
+/**
+ * Viewport dimensions object.
+ *
+ * @typedef {Object} WPViewportDimensions
+ *
+ * @property {number} width  Width, in pixels.
+ * @property {number} height Height, in pixels.
+ */
+
+/**
+ * Predefined viewport dimensions to reference by name.
+ *
+ * @enum {WPViewportDimensions}
+ *
+ * @type {Record<WPDimensionsName, WPViewportDimensions>}
+ */
+const PREDEFINED_DIMENSIONS = {
+	large: { width: 960, height: 700 },
+	medium: { width: 768, height: 700 },
+	small: { width: 600, height: 700 },
+};
+
+/**
+ * Valid argument argument type from which to derive viewport dimensions.
+ *
+ * @typedef {WPDimensionsName|WPViewportDimensions} WPViewport
+ */
+
+/**
+ * Sets browser viewport to specified type.
+ *
+ * @this {import('./').PageUtils}
+ * @param {WPViewport} viewport Viewport name or dimensions object to assign.
+ */
+export async function setBrowserViewport( viewport ) {
+	const dimensions =
+		typeof viewport === 'string'
+			? PREDEFINED_DIMENSIONS[ viewport ]
+			: viewport;
+
+	await this.page.setViewportSize( dimensions );
+}

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

@@ -14,6 +14,7 @@ import type { User } from './login';
 import { login } from './login';
 import { setupRest, rest, getMaxBatchSize, batchRest } from './rest';
 import { getPluginsMap, activatePlugin, deactivatePlugin } from './plugins';
+import { deleteAllTemplates } from './templates';
 import { activateTheme } from './themes';
 import { deleteAllBlocks } from './blocks';
 import { deleteAllPosts } from './posts';
@@ -118,6 +119,7 @@ class RequestUtils {
 	deleteAllPosts = deleteAllPosts;
 	deleteAllWidgets = deleteAllWidgets;
 	addWidgetBlock = addWidgetBlock;
+	deleteAllTemplates = deleteAllTemplates;
 }
 
 export type { StorageState };

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

@@ -146,8 +146,8 @@ async function getMaxBatchSize( this: RequestUtils, forceRefetch = false ) {
 interface BatchRequest {
 	method?: string;
 	path: string;
-	headers: Record< string, string | string[] >;
-	body: any;
+	headers?: Record< string, string | string[] >;
+	body?: any;
 }
 
 async function batchRest< BatchResponse >(

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

@@ -0,0 +1,66 @@
+/**
+ * Internal dependencies
+ */
+import type { RequestUtils } from './index';
+
+type TemplateType = 'wp_template' | 'wp_template_part';
+
+interface Template {
+	wp_id: number;
+	id: string;
+}
+
+const PATH_MAPPING = {
+	wp_template: '/wp/v2/templates',
+	wp_template_part: '/wp/v2/template-parts',
+};
+
+/**
+ * Delete all the templates of given type.
+ *
+ * @param  this
+ * @param  type - Template type to delete.
+ */
+async function deleteAllTemplates( this: RequestUtils, type: TemplateType ) {
+	const path = PATH_MAPPING[ type ];
+
+	if ( ! path ) {
+		throw new Error( `Unsupported template type: ${ type }.` );
+	}
+
+	const templates = await this.rest< Template[] >( { path } );
+
+	for ( const template of templates ) {
+		if ( ! template?.id || ! template?.wp_id ) {
+			continue;
+		}
+
+		let response;
+
+		try {
+			response = await this.rest( {
+				method: 'DELETE',
+				path: `${ path }/${ template.id }`,
+				params: { force: true },
+			} );
+		} catch ( responseError ) {
+			// Disable reason - the error provides valuable feedback about issues with tests.
+			// eslint-disable-next-line no-console
+			console.warn(
+				`deleteAllTemplates failed to delete template (id: ${ template.wp_id }) with the following error`,
+				responseError
+			);
+		}
+
+		if ( ! response.deleted ) {
+			// Disable reason - the error provides valuable feedback about issues with tests.
+			// eslint-disable-next-line no-console
+			console.warn(
+				`deleteAllTemplates failed to delete template (id: ${ template.wp_id }) with the following response`,
+				response
+			);
+		}
+	}
+}
+
+export { deleteAllTemplates };