Migrate query test to Playwright

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

@@ -26,6 +26,7 @@ import {
 	createNavigationMenu,
 	deleteAllMenus,
 } from './menus';
+import { deleteAllPages } from './pages';
 import { resetPreferences } from './preferences';
 import { getSiteSettings, updateSiteSettings } from './site-settings';
 import { deleteAllWidgets, addWidgetBlock } from './widgets';
@@ -147,6 +148,7 @@ class RequestUtils {
 	deleteAllUsers = deleteAllUsers.bind( this );
 	getSiteSettings = getSiteSettings.bind( this );
 	updateSiteSettings = updateSiteSettings.bind( this );
+	deleteAllPages = deleteAllPages.bind( this );
 }
 
 export type { StorageState };

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

@@ -0,0 +1,51 @@
+/**
+ * Internal dependencies
+ */
+import type { RequestUtils } from './index';
+
+const PAGE_STATUS = [
+	'publish',
+	'future',
+	'draft',
+	'pending',
+	'private',
+	'trash',
+] as const;
+
+export type Page = {
+	id: number;
+	status: typeof PAGE_STATUS[ number ];
+};
+
+/**
+ * Delete all pages using REST API.
+ *
+ * @param {RequestUtils} this
+ */
+export async function deleteAllPages( this: RequestUtils ) {
+	// List all pages.
+	// https://developer.wordpress.org/rest-api/reference/pages/#list-pages
+	const pages = await this.rest< Page[] >( {
+		path: '/wp/v2/pages',
+		params: {
+			per_page: 100,
+
+			status: PAGE_STATUS.join( ',' ),
+		},
+	} );
+
+	// Delete all pages one by one.
+	// https://developer.wordpress.org/rest-api/reference/pages/#delete-a-page
+	// "/wp/v2/pages" not yet supports batch requests.
+	await Promise.all(
+		pages.map( ( page ) =>
+			this.rest( {
+				method: 'DELETE',
+				path: `/wp/v2/pages/${ page.id }`,
+				params: {
+					force: true,
+				},
+			} )
+		)
+	);
+}

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

@@ -10,6 +10,7 @@ export interface Post {
 }
 
 export interface CreatePostPayload {
+	title?: string;
 	content: string;
 	status: 'publish' | 'future' | 'draft' | 'pending' | 'private';
 }

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

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Query block', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activatePlugin( 'gutenberg-test-query-block' ),
+			requestUtils.deleteAllPosts(),
+			requestUtils.deleteAllPages(),
+		] );
+		await requestUtils.createPost( { title: 'Post 1', status: 'publish' } );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.deleteAllPosts(),
+			requestUtils.deactivatePlugin( 'gutenberg-test-query-block' ),
+		] );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost( { postType: 'page', title: 'Query Page' } );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPages();
+	} );
+
+	test.describe( 'Query block insertion', () => {
+		test( 'List', async ( { page, editor } ) => {
+			await editor.insertBlock( { name: 'core/query' } );
+
+			await editor.canvas
+				.getByRole( 'document', { name: 'Block: Query Loop' } )
+				.getByRole( 'button', { name: 'Choose' } )
+				.click();
+
+			await page
+				.getByRole( 'dialog', { name: 'Choose a pattern' } )
+				.getByRole( 'option', { name: 'Standard' } )
+				.click();
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/query',
+					innerBlocks: [
+						{
+							name: 'core/post-template',
+							innerBlocks: [
+								{ name: 'core/post-title' },
+								{ name: 'core/post-featured-image' },
+								{ name: 'core/post-excerpt' },
+								{ name: 'core/separator' },
+								{ name: 'core/post-date' },
+							],
+						},
+					],
+				},
+			] );
+		} );
+	} );
+} );