Including adding of category and retrieving pattern by category to th…

…e main flow (#54923)

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

@@ -35,6 +35,7 @@ import { deleteAllPages, createPage } from './pages';
 import { resetPreferences } from './preferences';
 import { getSiteSettings, updateSiteSettings } from './site-settings';
 import { deleteAllWidgets, addWidgetBlock } from './widgets';
+import { deleteAllPatternCategories } from './patterns';
 
 interface StorageState {
 	cookies: Cookie[];
@@ -198,6 +199,8 @@ class RequestUtils {
 	/** @borrows getThemeGlobalStylesRevisions as this.getThemeGlobalStylesRevisions */
 	getThemeGlobalStylesRevisions: typeof getThemeGlobalStylesRevisions =
 		getThemeGlobalStylesRevisions.bind( this );
+	/** @borrows deleteAllPatternCategories as this.deleteAllPatternCategories */
+	deleteAllPatternCategories = deleteAllPatternCategories.bind( this );
 }
 
 export type { StorageState };

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

@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import type { RequestUtils } from './index';
+
+/**
+ * Delete all pattern categories using REST API.
+ *
+ * @see https://developer.wordpress.org/rest-api/reference/categories/#list-categories
+ * @param this
+ */
+export async function deleteAllPatternCategories( this: RequestUtils ) {
+	// List all pattern categories.
+	// https://developer.wordpress.org/rest-api/reference/categories/#list-categories
+	const categories = await this.rest( {
+		path: '/wp/v2/wp_pattern_category',
+		params: {
+			per_page: 100,
+		},
+	} );
+
+	// Delete pattern categories.
+	// https://developer.wordpress.org/rest-api/reference/categories/#delete-a-category
+	// "/wp/v2/category" does not yet supports batch requests.
+	await this.batchRest(
+		categories.map( ( category: { id: number } ) => ( {
+			method: 'DELETE',
+			path: `/wp/v2/wp_pattern_category/${ category.id }?force=true`,
+		} ) )
+	);
+}

test/e2e/specs/editor/various/patterns.spec.js

@@ -6,6 +6,7 @@ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 test.describe( 'Unsynced pattern', () => {
 	test.beforeAll( async ( { requestUtils } ) => {
 		await requestUtils.deleteAllBlocks();
+		await requestUtils.deleteAllPatternCategories();
 	} );
 
 	test.beforeEach( async ( { admin } ) => {
@@ -14,6 +15,7 @@ test.describe( 'Unsynced pattern', () => {
 
 	test.afterEach( async ( { requestUtils } ) => {
 		await requestUtils.deleteAllBlocks();
+		await requestUtils.deleteAllPatternCategories();
 	} );
 
 	test( 'create a new unsynced pattern via the block options menu', async ( {
@@ -40,6 +42,10 @@ test.describe( 'Unsynced pattern', () => {
 		await createPatternDialog
 			.getByRole( 'textbox', { name: 'Name' } )
 			.fill( 'My unsynced pattern' );
+		const newCategory = 'Contact details';
+		await createPatternDialog
+			.getByRole( 'combobox', { name: 'Categories' } )
+			.fill( newCategory );
 		await createPatternDialog
 			.getByRole( 'checkbox', { name: 'Synced' } )
 			.setChecked( false );
@@ -59,10 +65,15 @@ test.describe( 'Unsynced pattern', () => {
 		// a plain paragraph block.
 		await page.getByLabel( 'Toggle block inserter' ).click();
 		await page
-			.getByRole( 'searchbox', {
-				name: 'Search for blocks and patterns',
+			.getByRole( 'tab', {
+				name: 'Patterns',
 			} )
-			.fill( 'My unsynced pattern' );
+			.click();
+		await page
+			.getByRole( 'button', {
+				name: newCategory,
+			} )
+			.click();
 		await page.getByLabel( 'My unsynced pattern' ).click();
 
 		// Just compare the block name and content as the clientIDs will be different.