Add automated tests to verify specific product block templates are rendered (#44363)

* Add automated tests to verify specific product templates are rendered

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme.spec.ts

@@ -3,16 +3,69 @@
  */
 import { test, expect } from '@woocommerce/e2e-playwright-utils';
 
-// Sunglasses are defined as requering password in /bin/scripts/products.sh.
-const productWithPasswordPermalink = '/product/sunglasses/';
-
 test.describe( 'Single Product template', async () => {
 	test( 'shows password form in products protected with password', async ( {
 		page,
 	} ) => {
-		await page.goto( productWithPasswordPermalink );
+		// Sunglasses are defined as requiring password in /bin/scripts/products.sh.
+		await page.goto( '/product/sunglasses/' );
 		await expect(
 			page.getByText( 'This content is password protected.' ).first()
 		).toBeVisible();
 	} );
+
+	test( 'loads the Single Product template for a specific product', async ( {
+		admin,
+		editorUtils,
+		page,
+	} ) => {
+		const testData = {
+			productName: 'Belt',
+			permalink: '/product/belt',
+			templateName: 'Product: Belt',
+			templatePath: 'single-product-belt',
+			templateType: 'wp_template',
+		};
+		const userText = 'Hello World in the Belt template';
+
+		// Create the specific product template.
+		await admin.visitAdminPage(
+			'site-editor.php',
+			`path=/${ testData.templateType }`
+		);
+		await page.getByLabel( 'Add New Template' ).click();
+		await page
+			.getByRole( 'button', { name: 'Single item: Product' } )
+			.click();
+		await page
+			.getByPlaceholder( 'Search products' )
+			.fill( testData.productName );
+		await page
+			.getByRole( 'option', { name: testData.productName } )
+			.click();
+		await editorUtils.closeWelcomeGuideModal();
+		await page.getByLabel( 'Fallback content' ).click();
+
+		// Edit the template.
+		await editorUtils.editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: userText },
+		} );
+		await editorUtils.saveTemplate();
+
+		// Verify edits are visible.
+		await page.goto( testData.permalink );
+		await expect( page.getByText( userText ).first() ).toBeVisible();
+
+		// Revert edition.
+		await admin.visitAdminPage(
+			'site-editor.php',
+			`path=/${ testData.templateType }/all`
+		);
+		await editorUtils.revertTemplateCreation( testData.templateName );
+		await page.goto( testData.permalink );
+
+		// Verify the edits are no longer visible.
+		await expect( page.getByText( userText ) ).toHaveCount( 0 );
+	} );
 } );

plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme_with_templates.spec.ts

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import { test, expect } from '@woocommerce/e2e-playwright-utils';
+import { BLOCK_THEME_WITH_TEMPLATES_SLUG } from '@woocommerce/e2e-utils';
+
+const testData = {
+	permalink: '/product/belt',
+	templateName: 'Product: Belt',
+	templatePath: 'single-product-belt',
+	templateType: 'wp_template',
+};
+
+const userText = 'Hello World in the Belt template';
+const themeTemplateText = 'Single Product Belt template loaded from theme';
+
+test.describe( 'Single Product Template', async () => {
+	test( 'loads the theme template for a specific product using the product slug and it can be customized', async ( {
+		admin,
+		editorUtils,
+		page,
+	} ) => {
+		// Edit the theme template.
+		await admin.visitSiteEditor( {
+			postId: `${ BLOCK_THEME_WITH_TEMPLATES_SLUG }//${ testData.templatePath }`,
+			postType: testData.templateType,
+		} );
+		await editorUtils.enterEditMode();
+		await editorUtils.closeWelcomeGuideModal();
+		await editorUtils.editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: userText },
+		} );
+		await editorUtils.saveTemplate();
+		await page.goto( testData.permalink );
+
+		// Verify edits are visible in the frontend.
+		await expect(
+			page.getByText( themeTemplateText ).first()
+		).toBeVisible();
+		await expect( page.getByText( userText ).first() ).toBeVisible();
+
+		// Revert edition and verify the template from the theme is used.
+		await admin.visitAdminPage(
+			'site-editor.php',
+			`path=/${ testData.templateType }/all`
+		);
+		await editorUtils.revertTemplateCustomizations( testData.templateName );
+		await page.goto( testData.permalink );
+
+		await expect(
+			page.getByText( themeTemplateText ).first()
+		).toBeVisible();
+		await expect( page.getByText( userText ) ).toHaveCount( 0 );
+	} );
+} );

plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts

@@ -372,6 +372,27 @@ export class EditorUtils {
 			.waitFor();
 	}
 
+	async revertTemplateCreation( templateName: string ) {
+		const templateRow = this.page.getByRole( 'row', {
+			name: templateName,
+		} );
+		templateRow.getByRole( 'button', { name: 'Actions' } ).click();
+		await this.page
+			.getByRole( 'menuitem', {
+				name: 'Delete',
+			} )
+			.click();
+		await this.page
+			.getByRole( 'button', {
+				name: 'Delete',
+			} )
+			.click();
+		await this.page
+			.getByRole( 'button', { name: 'Dismiss this notice' } )
+			.getByText( `"${ templateName }" deleted.` )
+			.waitFor();
+	}
+
 	async revertTemplateCustomizations( templateName: string ) {
 		const templateRow = this.page.getByRole( 'row', {
 			name: templateName,

plugins/woocommerce-blocks/tests/mocks/theme-with-woo-templates/block-templates/single-product-belt.html

@@ -0,0 +1,10 @@
+<!-- wp:template-part {"slug":"header"} /-->
+<!-- wp:paragraph -->
+<p>Single Product Belt template loaded from theme</p>
+<!-- /wp:paragraph -->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group">
+	<!-- wp:woocommerce/legacy-template {"template":"single-product"} /-->
+</div>
+<!-- /wp:group -->
+<!-- wp:template-part {"slug":"footer"} /-->

plugins/woocommerce/changelog/44363-fix-44354-specific-product-templates-tests

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+Comment: Add automated tests to verify specific product block templates are rendered
+