Add block patterns e2e tests (#22414)

packages/e2e-test-utils/README.md

@@ -288,6 +288,15 @@ _Parameters_
 
 -   _searchTerm_ `string`: The text to search the inserter for.
 
+<a name="insertPattern" href="#insertPattern">#</a> **insertPattern**
+
+Opens the inserter, searches for the given pattern, then selects the first
+result that appears. It then waits briefly for the block list to update.
+
+_Parameters_
+
+-   _searchTerm_ `string`: The text to search the inserter for.
+
 <a name="installPlugin" href="#installPlugin">#</a> **installPlugin**
 
 Installs a plugin from the WP.org repository.
@@ -412,6 +421,14 @@ _Parameters_
 
 -   _searchTerm_ `string`: The text to search the inserter for.
 
+<a name="searchForPattern" href="#searchForPattern">#</a> **searchForPattern**
+
+Search for pattern in the global inserter
+
+_Parameters_
+
+-   _searchTerm_ `string`: The text to search the inserter for.
+
 <a name="selectBlockByClientId" href="#selectBlockByClientId">#</a> **selectBlockByClientId**
 
 Given the clientId of a block, selects the block on the editor.

packages/e2e-test-utils/src/index.js

@@ -23,7 +23,14 @@ export { getBlockSetting } from './get-block-setting';
 export { getEditedPostContent } from './get-edited-post-content';
 export { hasBlockSwitcher } from './has-block-switcher';
 export { getPageError } from './get-page-error';
-export { insertBlock } from './insert-block';
+export {
+	insertBlock,
+	insertPattern,
+	searchForBlock,
+	searchForPattern,
+	openGlobalBlockInserter,
+	closeGlobalBlockInserter,
+} from './inserter';
 export { installPlugin } from './install-plugin';
 export { isCurrentURL } from './is-current-url';
 export { isInDefaultBlock } from './is-in-default-block';
@@ -33,17 +40,12 @@ export {
 	disableFocusLossObservation,
 } from './observe-focus-loss';
 export { openDocumentSettingsSidebar } from './open-document-settings-sidebar';
-export {
-	openGlobalBlockInserter,
-	closeGlobalBlockInserter,
-} from './open-global-block-inserter';
 export { openPublishPanel } from './open-publish-panel';
 export { pressKeyTimes } from './press-key-times';
 export { pressKeyWithModifier } from './press-key-with-modifier';
 export { publishPost } from './publish-post';
 export { publishPostWithPrePublishChecksDisabled } from './publish-post-with-pre-publish-checks-disabled';
 export { saveDraft } from './save-draft';
-export { searchForBlock } from './search-for-block';
 export { selectBlockByClientId } from './select-block-by-client-id';
 export { setBrowserViewport } from './set-browser-viewport';
 export { setPostContent } from './set-post-content';

packages/e2e-test-utils/src/inserter.js

@@ -0,0 +1,103 @@
+/**
+ * Internal dependencies
+ */
+import { pressKeyWithModifier } from './press-key-with-modifier';
+
+/**
+ * Opens the global block inserter.
+ */
+export async function openGlobalBlockInserter() {
+	if ( ! ( await isGlobalInserterOpen() ) ) {
+		await toggleGlobalBlockInserter();
+
+		// Waiting here is necessary because sometimes the inserter takes more time to
+		// render than Puppeteer takes to complete the 'click' action
+		await page.waitForSelector( '.block-editor-inserter__menu' );
+	}
+
+	// Select the block tab by default if the tabs are visible
+	const hasTabs = !! ( await page.$( '.block-editor-inserter__tabs' ) );
+	if ( hasTabs ) {
+		await page.click(
+			'.block-editor-inserter__tabs [aria-controls="0-blocks-view"]'
+		);
+	}
+}
+
+export async function closeGlobalBlockInserter() {
+	if ( await isGlobalInserterOpen() ) {
+		await toggleGlobalBlockInserter();
+	}
+}
+
+async function isGlobalInserterOpen() {
+	return await page.evaluate( () => {
+		return !! document.querySelector(
+			'.edit-post-header [aria-label="Add block"].is-pressed, .edit-site-header [aria-label="Add block"].is-pressed'
+		);
+	} );
+}
+
+async function toggleGlobalBlockInserter() {
+	await page.click(
+		'.edit-post-header [aria-label="Add block"], .edit-site-header [aria-label="Add block"]'
+	);
+}
+
+/**
+ * Search for block in the global inserter
+ *
+ * @param {string} searchTerm The text to search the inserter for.
+ */
+export async function searchForBlock( searchTerm ) {
+	await openGlobalBlockInserter();
+	await page.focus( '.block-editor-inserter__search-input' );
+	await pressKeyWithModifier( 'primary', 'a' );
+	await page.keyboard.type( searchTerm );
+}
+
+/**
+ * Search for pattern in the global inserter
+ *
+ * @param {string} searchTerm The text to search the inserter for.
+ */
+export async function searchForPattern( searchTerm ) {
+	await openGlobalBlockInserter();
+	// Select the patterns tab
+	await page.click(
+		'.block-editor-inserter__tabs [aria-controls="0-patterns-view"]'
+	);
+	await page.focus( '.block-editor-inserter__search-input' );
+	await pressKeyWithModifier( 'primary', 'a' );
+	await page.keyboard.type( searchTerm );
+}
+
+/**
+ * Opens the inserter, searches for the given term, then selects the first
+ * result that appears. It then waits briefly for the block list to update.
+ *
+ * @param {string} searchTerm The text to search the inserter for.
+ */
+export async function insertBlock( searchTerm ) {
+	await searchForBlock( searchTerm );
+	const insertButton = (
+		await page.$x( `//button//span[contains(text(), '${ searchTerm }')]` )
+	 )[ 0 ];
+	await insertButton.click();
+}
+
+/**
+ * Opens the inserter, searches for the given pattern, then selects the first
+ * result that appears. It then waits briefly for the block list to update.
+ *
+ * @param {string} searchTerm The text to search the inserter for.
+ */
+export async function insertPattern( searchTerm ) {
+	await searchForPattern( searchTerm );
+	const insertButton = (
+		await page.$x(
+			`//div[@role = 'button']//div[contains(text(), '${ searchTerm }')]`
+		)
+	 )[ 0 ];
+	await insertButton.click();
+}

packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`adding blocks should insert a block pattern 1`] = `
+"<!-- wp:buttons {\\"align\\":\\"center\\"} -->
+<div class=\\"wp-block-buttons aligncenter\\"><!-- wp:button {\\"borderRadius\\":0,\\"backgroundColor\\":\\"very-dark-gray\\"} -->
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link has-very-dark-gray-background-color has-background no-border-radius\\">Button One</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {\\"borderRadius\\":0,\\"textColor\\":\\"very-dark-gray\\",\\"className\\":\\"is-style-outline\\"} -->
+<div class=\\"wp-block-button is-style-outline\\"><a class=\\"wp-block-button__link has-very-dark-gray-color has-text-color no-border-radius\\">Button Two</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->"
+`;

packages/e2e-tests/specs/editor/various/adding-patterns.test.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createNewPost,
+	insertPattern,
+	getEditedPostContent,
+} from '@wordpress/e2e-test-utils';
+
+/** @typedef {import('puppeteer').ElementHandle} ElementHandle */
+
+describe( 'adding blocks', () => {
+	beforeEach( async () => {
+		await createNewPost();
+	} );
+
+	it( 'should insert a block pattern', async () => {
+		await insertPattern( 'Two Buttons' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+} );