Migrate list block test to Playwright (#41555)

* convert e2e test for list block to playwright.

* add snapshots

* add snapshots

* fix strict mode error

* fix transformBlockTo

* remove last line form snapshot

* use locator

* replace snapshot to toBe

* remove all snapshot

* replage $eval

* use role selector.

* use locator

* remove list.test.js form e2e-tests

* use page.click

* bind this for Editor methods

* use expect.poll

* Use wordpress api in transformBlockTo.

* use getEditedPostContent instead of innerHTML

* use nth selector

* Wait with selector instead of requestIdleCallback.

* add bind(this)

* add bind(this) for Admin methods

* replace waitForSelector to locator

* use clickBlockToolbarButton

* replace NBSP to unicode escape sequence

* fix cast rest and batchRest

* fix type error

Author: torounit

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

@@ -33,8 +33,8 @@ export class Admin {
 		this.pageUtils = pageUtils;
 	}
 
-	createNewPost = createNewPost;
-	getPageError = getPageError;
-	visitAdminPage = visitAdminPage;
-	visitSiteEditor = visitSiteEditor;
+	createNewPost = createNewPost.bind( this );
+	getPageError = getPageError.bind( this );
+	visitAdminPage = visitAdminPage.bind( this );
+	visitSiteEditor = visitSiteEditor.bind( this );
 }

packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts

@@ -8,7 +8,7 @@ import { addQueryArgs } from '@wordpress/url';
  */
 import type { Admin } from './';
 
-interface SiteEditorQueryParams {
+export interface SiteEditorQueryParams {
 	postId: string | number;
 	postType: string;
 }

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

@@ -16,6 +16,7 @@ import { publishPost } from './publish-post';
 import { selectBlocks } from './select-blocks';
 import { showBlockToolbar } from './show-block-toolbar';
 import { saveSiteEditorEntities } from './site-editor';
+import { transformBlockTo } from './transform-block-to';
 
 type EditorConstructorProps = {
 	page: Page;
@@ -52,7 +53,6 @@ export class Editor {
 
 		return frame;
 	}
-
 	clickBlockOptionsMenuItem = clickBlockOptionsMenuItem.bind( this );
 	clickBlockToolbarButton = clickBlockToolbarButton.bind( this );
 	getEditedPostContent = getEditedPostContent.bind( this );
@@ -63,4 +63,5 @@ export class Editor {
 	saveSiteEditorEntities = saveSiteEditorEntities.bind( this );
 	selectBlocks = selectBlocks.bind( this );
 	showBlockToolbar = showBlockToolbar.bind( this );
+	transformBlockTo = transformBlockTo.bind( this );
 }

packages/e2e-test-utils-playwright/src/editor/transform-block-to.ts

@@ -0,0 +1,32 @@
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+
+/**
+ * Clicks the default block appender.
+ *
+ * @param {Editor} this
+ * @param {string} name Block name.
+ */
+export async function transformBlockTo( this: Editor, name: string ) {
+	await this.page.evaluate(
+		( [ blockName ] ) => {
+			// @ts-ignore (Reason: wp isn't typed)
+			const clientIds = window.wp.data
+				.select( 'core/block-editor' )
+				.getSelectedBlockClientIds();
+			// @ts-ignore (Reason: wp isn't typed)
+			const blocks = window.wp.data
+				.select( 'core/block-editor' )
+				.getBlocksByClientId( clientIds );
+			// @ts-ignore (Reason: wp isn't typed)
+			window.wp.data.dispatch( 'core/block-editor' ).replaceBlocks(
+				clientIds,
+				// @ts-ignore (Reason: wp isn't typed)
+				window.wp.blocks.switchToBlockType( blocks, blockName )
+			);
+		},
+		[ name ]
+	);
+}

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

@@ -29,11 +29,11 @@ class PageUtils {
 		this.browser = this.context.browser()!;
 	}
 
-	isCurrentURL = isCurrentURL;
-	pressKeyTimes = pressKeyTimes;
-	pressKeyWithModifier = pressKeyWithModifier;
-	setBrowserViewport = setBrowserViewport;
-	setClipboardData = setClipboardData;
+	isCurrentURL = isCurrentURL.bind( this );
+	pressKeyTimes = pressKeyTimes.bind( this );
+	pressKeyWithModifier = pressKeyWithModifier.bind( this );
+	setBrowserViewport = setBrowserViewport.bind( this );
+	setClipboardData = setClipboardData.bind( this );
 }
 
 export { PageUtils };

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

@@ -108,25 +108,27 @@ class RequestUtils {
 		this.baseURL = baseURL;
 	}
 
-	login = login;
-	setupRest = setupRest;
-	rest = rest;
-	getMaxBatchSize = getMaxBatchSize;
-	batchRest = batchRest;
-	getPluginsMap = getPluginsMap;
-	activatePlugin = activatePlugin;
-	deactivatePlugin = deactivatePlugin;
-	activateTheme = activateTheme;
+	login = login.bind( this );
+	setupRest = setupRest.bind( this );
+	// .bind() drops the generic types. Re-casting it to keep the type signature.
+	rest = rest.bind( this ) as typeof rest;
+	getMaxBatchSize = getMaxBatchSize.bind( this );
+	// .bind() drops the generic types. Re-casting it to keep the type signature.
+	batchRest = batchRest.bind( this ) as typeof batchRest;
+	getPluginsMap = getPluginsMap.bind( this );
+	activatePlugin = activatePlugin.bind( this );
+	deactivatePlugin = deactivatePlugin.bind( this );
+	activateTheme = activateTheme.bind( this );
 	deleteAllBlocks = deleteAllBlocks;
-	deleteAllPosts = deleteAllPosts;
-	deleteAllWidgets = deleteAllWidgets;
-	addWidgetBlock = addWidgetBlock;
-	deleteAllTemplates = deleteAllTemplates;
-	resetPreferences = resetPreferences;
-	listMedia = listMedia;
-	uploadMedia = uploadMedia;
-	deleteMedia = deleteMedia;
-	deleteAllMedia = deleteAllMedia;
+	deleteAllPosts = deleteAllPosts.bind( this );
+	deleteAllWidgets = deleteAllWidgets.bind( this );
+	addWidgetBlock = addWidgetBlock.bind( this );
+	deleteAllTemplates = deleteAllTemplates.bind( this );
+	resetPreferences = resetPreferences.bind( this );
+	listMedia = listMedia.bind( this );
+	uploadMedia = uploadMedia.bind( this );
+	deleteMedia = deleteMedia.bind( this );
+	deleteAllMedia = deleteAllMedia.bind( this );
 }
 
 export type { StorageState };

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

@@ -8,7 +8,7 @@ import * as fs from 'fs';
  */
 import type { RequestUtils } from './index';
 
-interface Media {
+export interface Media {
 	id: number;
 	title: {
 		raw: string;

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

@@ -70,7 +70,7 @@ type RequestFetchOptions = Exclude<
 	Parameters< APIRequestContext[ 'fetch' ] >[ 1 ],
 	undefined
 >;
-interface RestOptions extends RequestFetchOptions {
+export interface RestOptions extends RequestFetchOptions {
 	path: string;
 }
 
@@ -152,7 +152,7 @@ async function getMaxBatchSize( this: RequestUtils, forceRefetch = false ) {
 	return this.maxBatchSize;
 }
 
-interface BatchRequest {
+export interface BatchRequest {
 	method?: string;
 	path: string;
 	headers?: Record< string, string | string[] >;