Fix Products block tests (https://github.com/woocommerce/woocommerce-blocks/pull/9951)

* fix Products block test

* test now

* fix test

* improve E2E test

* restore pw configuration

* change order

* remove timeout

---------

Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>

plugins/woocommerce-blocks/tests/e2e-pw/playwright-utils/test.ts

@@ -134,8 +134,8 @@ const test = base.extend<
 	},
 	templateApiUtils: async ( {}, use ) =>
 		await use( new TemplateApiUtils( request ) ),
-	editorUtils: async ( { editor }, use ) => {
-		await use( new EditorUtils( editor ) );
+	editorUtils: async ( { editor, page }, use ) => {
+		await use( new EditorUtils( editor, page ) );
 	},
 	requestUtils: [
 		async ( {}, use, workerInfo ) => {

plugins/woocommerce-blocks/tests/e2e-pw/tests/products/products.block_theme.side_effects.spec.ts

@@ -26,11 +26,13 @@ const templates = {
 		templateTitle: 'Product Attribute',
 		slug: 'taxonomy-product_attribute',
 		frontendPage: '/product-attribute/color/',
+		legacyBlockName: 'woocommerce/legacy-template',
 	},
 	'taxonomy-product_cat': {
 		templateTitle: 'Product Category',
 		slug: 'taxonomy-product_cat',
 		frontendPage: '/product-category/music/',
+		legacyBlockName: 'woocommerce/legacy-template',
 	},
 	// We don't have products with tags in the test site. Uncomment this when we have products with tags.
 	// 'taxonomy-product_tag': {
@@ -42,11 +44,13 @@ const templates = {
 		templateTitle: 'Product Catalog',
 		slug: 'archive-product',
 		frontendPage: '/shop/',
+		legacyBlockName: 'woocommerce/legacy-template',
 	},
 	'product-search-results': {
 		templateTitle: 'Product Search Results',
 		slug: 'product-search-results',
 		frontendPage: '/?s=shirt&post_type=product',
+		legacyBlockName: 'woocommerce/legacy-template',
 	},
 };
 
@@ -110,14 +114,18 @@ test.describe( `${ blockData.name } Block `, () => {
 		await expect( inheritQueryFromTemplateOption ).toBeVisible();
 	} );
 } );
-for ( const { templateTitle, slug, frontendPage } of Object.values(
-	templates
-) ) {
-	test.afterAll( async ( { requestUtils } ) => {
-		await requestUtils.deleteAllTemplates( 'wp_template' );
-		await requestUtils.deleteAllTemplates( 'wp_template_part' );
-	} );
-	test.describe( `${ templateTitle } template`, () =>
+
+for ( const {
+	templateTitle,
+	slug,
+	frontendPage,
+	legacyBlockName,
+} of Object.values( templates ) ) {
+	test.describe( `${ templateTitle } template`, () => {
+		test.afterAll( async ( { requestUtils } ) => {
+			await requestUtils.deleteAllTemplates( 'wp_template' );
+			await requestUtils.deleteAllTemplates( 'wp_template_part' );
+		} );
 		test( 'Products block matches with classic template block', async ( {
 			admin,
 			editor,
@@ -132,17 +140,34 @@ for ( const { templateTitle, slug, frontendPage } of Object.values(
 			await editor.canvas.click( 'body' );
 			await editor.canvas.waitForLoadState( 'networkidle' );
 			const block = await editorUtils.getBlockByName( blockData.name );
+			const clientId = ( await block.getAttribute( 'data-block' ) ) ?? '';
+			const parentClientId =
+				( await editorUtils.getBlockRootClientId( clientId ) ) ?? '';
 			await editor.selectBlocks( block );
-			await editor.insertBlock( {
-				name: 'woocommerce/legacy-template',
-				attributes: {
-					template: slug,
-				},
-			} );
+			await editorUtils.insertBlock(
+				{ name: legacyBlockName },
+				undefined,
+				parentClientId
+			);
 
 			await editor.saveSiteEditorEntities();
 
-			await page.goto( frontendPage );
+			await page.waitForResponse( ( response ) =>
+				response.url().includes( 'wp-json/wp/v2/templates/' )
+			);
+
+			// @todo This is a workaround to wait for the save button to be enabled. It works only without Gutenberg enabled. We have to refactor this.
+			await page
+				.locator(
+					"button.edit-site-save-button__button[aria-label='Save'][aria-disabled='true']"
+				)
+				.waitFor( {
+					state: 'visible',
+				} );
+
+			await page.goto( frontendPage, {
+				waitUntil: 'load',
+			} );
 
 			const classicProducts = await getProductsNameFromClassicTemplate(
 				page
@@ -152,6 +177,6 @@ for ( const { templateTitle, slug, frontendPage } of Object.values(
 			);
 
 			expect( classicProducts ).toEqual( productQueryProducts );
-		} )
-	);
+		} );
+	} );
 }

plugins/woocommerce-blocks/tests/e2e-pw/utils/constants.ts

@@ -5,7 +5,6 @@ import path from 'path';
 
 export const BLOCK_THEME_SLUG = 'twentytwentythree';
 export const CLASSIC_THEME_SLUG = 'twentytwentyone';
-export const MIN_TIMEOUT = 10000;
 export const BASE_URL = 'http://localhost:8889';
 export const STORAGE_STATE_PATH = path.join(
 	process.cwd(),

plugins/woocommerce-blocks/tests/e2e-pw/utils/editor/EditorUtils.ts

@@ -1,18 +1,69 @@
 /**
  * External dependencies
  */
+import { Page } from '@playwright/test';
 import { Editor } from '@wordpress/e2e-test-utils-playwright';
+import { BlockRepresentation } from '@wordpress/e2e-test-utils-playwright/build-types/editor/insert-block';
 /**
  * Internal dependencies
  */
 
 export class EditorUtils {
 	editor: Editor;
-	constructor( editor: Editor ) {
+	page: Page;
+	constructor( editor: Editor, page: Page ) {
 		this.editor = editor;
+		this.page = page;
 	}
 
 	async getBlockByName( name: string ) {
 		return this.editor.canvas.locator( `[data-type="${ name }"]` );
 	}
+
+	// todo: Make a PR to @wordpress/e2e-test-utils-playwright to add this method.
+	/**
+	 * Inserts a block after a given client ID.
+	 *
+	 */
+	async insertBlock(
+		blockRepresentation: BlockRepresentation,
+		index?: string,
+		rootClientId?: string
+	) {
+		await this.page.evaluate(
+			( {
+				blockRepresentation: _blockRepresentation,
+				index: _index,
+				rootClientId: _rootClientId,
+			} ) => {
+				function recursiveCreateBlock( {
+					name,
+					attributes = {},
+					innerBlocks = [],
+				}: BlockRepresentation ): BlockRepresentation {
+					return window.wp.blocks.createBlock(
+						name,
+						attributes,
+						innerBlocks.map( ( innerBlock ) =>
+							recursiveCreateBlock( innerBlock )
+						)
+					);
+				}
+				const block = recursiveCreateBlock( _blockRepresentation );
+
+				window.wp.data
+					.dispatch( 'core/block-editor' )
+					.insertBlock( block, _index, _rootClientId );
+			},
+			{ blockRepresentation, index, rootClientId }
+		);
+	}
+
+	async getBlockRootClientId( clientId: string ) {
+		return this.page.evaluate< string | null, string >( ( id ) => {
+			return window.wp.data
+				.select( 'core/block-editor' )
+				.getBlockRootClientId( id );
+		}, clientId );
+	}
 }