Use WordPress data to guarantee block presence

tests/e2e/specs/backend/__snapshots__/site-editing-templates.test.js.snap

@@ -4,7 +4,7 @@ exports[`Store Editing Templates Product Archive block template should contain t
 "<!-- wp:template-part {\\"slug\\":\\"header\\",\\"theme\\":\\"emptytheme\\"} /-->
 
 <!-- wp:group {\\"layout\\":{\\"inherit\\":true}} -->
-<div class=\\"wp-block-group\\"><!-- wp:woocommerce/legacy-template {\\"template\\":\\"archive-product\\"} /--></div>
+<div class=\\"wp-block-group\\"><!-- wp:woocommerce/legacy-template /--></div>
 <!-- /wp:group -->
 
 <!-- wp:template-part {\\"slug\\":\\"footer\\",\\"theme\\":\\"emptytheme\\"} /-->"

tests/e2e/specs/backend/site-editing-templates.test.js

@@ -15,6 +15,7 @@ import {
 import {
 	BASE_URL,
 	DEFAULT_TIMEOUT,
+	filterCurrentBlocks,
 	getAllTemplates,
 	goToSiteEditor,
 	saveTemplate,
@@ -55,10 +56,21 @@ function legacyBlockSelector( title ) {
 	) }[data-title="${ title }"]`;
 }
 
+const BLOCK_DATA = {
+	'archive-product': {
+		attributes: {
+			placeholder: 'archive-product',
+			template: 'archive-product',
+			title: 'WooCommerce Product Grid Block',
+		},
+		name: 'woocommerce/legacy-template',
+	},
+};
+
 const SELECTORS = {
 	blocks: {
 		paragraph: blockSelector( 'core/paragraph' ),
-		productArchive: legacyBlockSelector( 'WooCommerce Legacy Template' ),
+		productArchive: legacyBlockSelector( 'WooCommerce Product Grid Block' ),
 		singleProduct: legacyBlockSelector(
 			'WooCommerce Single Product Block'
 		),
@@ -201,9 +213,12 @@ describe( 'Store Editing Templates', () => {
 			await goToSiteEditor( templateQuery );
 			await waitForCanvas();
 
-			await expect( canvas() ).toMatchElement(
-				SELECTORS.blocks.productArchive,
-				{ timeout: DEFAULT_TIMEOUT }
+			const [ legacyBlock ] = await filterCurrentBlocks(
+				( block ) => block.name === BLOCK_DATA[ 'archive-product' ].name
+			);
+
+			expect( legacyBlock.attributes ).toEqual(
+				BLOCK_DATA[ 'archive-product' ].attributes
 			);
 			expect( await getCurrentSiteEditorContent() ).toMatchSnapshot();
 		} );

tests/e2e/utils.js

@@ -14,6 +14,7 @@ import { WP_ADMIN_DASHBOARD } from '@woocommerce/e2e-utils';
 /**
  * @typedef {import('@types/puppeteer').Page} Page
  * @typedef {import('@types/puppeteer').ElementHandle} ElementHandle
+ * @typedef {import('@wordpress/blocks').Block} WPBlock
  */
 
 /**
@@ -44,6 +45,16 @@ const SELECTORS = {
 	},
 };
 
+/**
+ * Gets all serializeable data from a block
+ *
+ * @param {WPBlock} block A Gutenberg Block
+ * @return {Partial<WPBlock>} A block with unserializeable values turned to `null`
+ */
+function getSerializeableBlockData( block ) {
+	return JSON.parse( JSON.stringify( block ) );
+}
+
 /**
  * Search for block in the global inserter.
  *
@@ -217,3 +228,28 @@ export async function getAllTemplates() {
 		} ) )
 	);
 }
+
+/**
+ * Gets all the blocks that fulfill a given predicate
+ *
+ * @param {( block: WPBlock ) => boolean} predicate The function invoked per iteration
+ * @return {Promise< Partial< WPBlock >[] >} The blocks which have been found
+ */
+export async function filterCurrentBlocks( predicate ) {
+	/**
+	 * @type {WPBlock[]}
+	 */
+	const blocks = await page.evaluate( () => {
+		const blockEditorStore = window.wp.data.select( 'core/block-editor' );
+		/**
+		 * @type {string[]}
+		 */
+		const allClientIds = blockEditorStore.getClientIdsWithDescendants();
+
+		return allClientIds.map( ( id ) =>
+			getSerializeableBlockData( blockEditorStore.getBlock( id ) )
+		);
+	} );
+
+	return blocks.filter( predicate );
+}