Move Cart, Checkout and Order Confirmation template customization tests to the parameterized tests file (#43992)

* Move Cart, Checkout and Order Confirmation template customization tests to the parameterized tests file

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

* Clean up order-confirmation.block_theme.spec.ts file

---------

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

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

@@ -6,7 +6,6 @@ import { test, expect } from '@woocommerce/e2e-playwright-utils';
 const permalink = '/cart';
 const templatePath = 'woocommerce/woocommerce//page-cart';
 const templateType = 'wp_template';
-const userText = 'Hello World in the template';
 
 test.describe( 'Test the cart template', async () => {
 	test( 'Template can be opened in the site editor', async ( {
@@ -98,24 +97,4 @@ test.describe( 'Test editing the cart template', async () => {
 				.first()
 		).toBeVisible();
 	} );
-
-	test( 'Template can be modified', async ( {
-		admin,
-		editorUtils,
-		page,
-	} ) => {
-		await admin.visitSiteEditor( {
-			postId: templatePath,
-			postType: templateType,
-		} );
-		await editorUtils.enterEditMode();
-		await editorUtils.closeWelcomeGuideModal();
-		await editorUtils.editor.insertBlock( {
-			name: 'core/paragraph',
-			attributes: { content: userText },
-		} );
-		await editorUtils.saveTemplate();
-		await page.goto( permalink, { waitUntil: 'domcontentloaded' } );
-		await expect( page.getByText( userText ).first() ).toBeVisible();
-	} );
 } );

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

@@ -6,7 +6,6 @@ import { test, expect } from '@woocommerce/e2e-playwright-utils';
 const permalink = '/checkout';
 const templatePath = 'woocommerce/woocommerce//page-checkout';
 const templateType = 'wp_template';
-const userText = 'Hello World in the template';
 
 test.describe( 'Test the checkout template', async () => {
 	test( 'Template can be opened in the site editor', async ( {
@@ -100,29 +99,4 @@ test.describe( 'Test editing the checkout template', async () => {
 			editor.canvas.locator( 'button:has-text("Place order")' ).first()
 		).toBeVisible();
 	} );
-
-	test( 'Template can be modified', async ( {
-		admin,
-		editorUtils,
-		frontendUtils,
-	} ) => {
-		await admin.visitSiteEditor( {
-			postId: templatePath,
-			postType: templateType,
-		} );
-		await editorUtils.enterEditMode();
-		await editorUtils.closeWelcomeGuideModal();
-		await editorUtils.editor.insertBlock( {
-			name: 'core/paragraph',
-			attributes: { content: userText },
-		} );
-		await editorUtils.saveTemplate();
-		await frontendUtils.goToShop();
-		await frontendUtils.emptyCart();
-		await frontendUtils.addToCart();
-		await frontendUtils.goToCheckout();
-		await expect(
-			frontendUtils.page.getByText( userText ).first()
-		).toBeVisible();
-	} );
 } );

plugins/woocommerce-blocks/tests/e2e/tests/templates/order-confirmation.block_theme.spec.ts

@@ -1,30 +1,7 @@
 /**
  * External dependencies
  */
-import { test as base, expect } from '@woocommerce/e2e-playwright-utils';
+import { test, expect } from '@woocommerce/e2e-playwright-utils';
-
-/**
- * Internal dependencies
- */
-import { CheckoutPage } from '../checkout/checkout.page';
-import {
-	FREE_SHIPPING_NAME,
-	FREE_SHIPPING_PRICE,
-	SIMPLE_PHYSICAL_PRODUCT_NAME,
-} from '../checkout/constants';
-
-const test = base.extend< { pageObject: CheckoutPage } >( {
-	pageObject: async ( { page }, use ) => {
-		const pageObject = new CheckoutPage( {
-			page,
-		} );
-		await use( pageObject );
-	},
-} );
-
-const templatePath = 'woocommerce/woocommerce//order-confirmation';
-const templateType = 'wp_template';
-const userText = 'Hello World in the template';
 
 test.describe( 'Test the order confirmation template', async () => {
 	test( 'Template can be opened in the site editor', async ( {
@@ -85,37 +62,4 @@ test.describe( 'Test the order confirmation template', async () => {
 				} )
 		).toBeVisible();
 	} );
-
-	test( 'Template can be modified', async ( {
-		page,
-		admin,
-		editorUtils,
-		frontendUtils,
-		pageObject,
-	} ) => {
-		await admin.visitSiteEditor( {
-			postId: templatePath,
-			postType: templateType,
-		} );
-		await editorUtils.enterEditMode();
-		await editorUtils.editor.insertBlock( {
-			name: 'core/paragraph',
-			attributes: { content: userText },
-		} );
-		await editorUtils.saveTemplate();
-		await frontendUtils.emptyCart();
-		await frontendUtils.goToShop();
-		await frontendUtils.addToCart( SIMPLE_PHYSICAL_PRODUCT_NAME );
-		await frontendUtils.goToCheckout();
-		await expect(
-			await pageObject.selectAndVerifyShippingOption(
-				FREE_SHIPPING_NAME,
-				FREE_SHIPPING_PRICE
-			)
-		).toBe( true );
-		await pageObject.fillInCheckoutWithTestData();
-		await pageObject.placeOrder();
-
-		await expect( page.getByText( userText ).first() ).toBeVisible();
-	} );
 } );

plugins/woocommerce-blocks/tests/e2e/tests/templates/template-user-customization.block_theme.spec.ts

@@ -2,22 +2,46 @@
  * External dependencies
  */
 import { test, expect } from '@woocommerce/e2e-playwright-utils';
+import type { Page, Response } from '@playwright/test';
+import type { FrontendUtils } from '@woocommerce/e2e-utils';
 
-const templateUserCustomizationTests = [
+/**
+ * Internal dependencies
+ */
+import { SIMPLE_VIRTUAL_PRODUCT_NAME } from '../checkout/constants';
+import { CheckoutPage } from '../checkout/checkout.page';
+
+type TemplateCustomizationTest = {
+	visitPage: ( props: {
+		frontendUtils: FrontendUtils;
+		page: Page;
+	} ) => Promise< void | Response | null >;
+	templateName: string;
+	templatePath: string;
+	templateType: string;
+	defaultTemplate?: {
+		templateName: string;
+		templatePath: string;
+	};
+};
+
+const templateUserCustomizationTests: TemplateCustomizationTest[] = [
 	{
-		permalink: '/shop',
+		visitPage: async ( { frontendUtils } ) =>
+			await frontendUtils.goToShop(),
 		templateName: 'Product Catalog',
 		templatePath: 'woocommerce/woocommerce//archive-product',
 		templateType: 'wp_template',
 	},
 	{
-		permalink: '/?s=shirt&post_type=product',
+		visitPage: async ( { page } ) =>
+			await page.goto( '/?s=shirt&post_type=product' ),
 		templateName: 'Product Search Results',
 		templatePath: 'woocommerce/woocommerce//product-search-results',
 		templateType: 'wp_template',
 	},
 	{
-		permalink: '/color/blue',
+		visitPage: async ( { page } ) => await page.goto( '/color/blue' ),
 		templateName: 'Products by Attribute',
 		templatePath: 'woocommerce/woocommerce//taxonomy-product_attribute',
 		templateType: 'wp_template',
@@ -27,7 +51,8 @@ const templateUserCustomizationTests = [
 		},
 	},
 	{
-		permalink: '/product-category/clothing',
+		visitPage: async ( { page } ) =>
+			await page.goto( '/product-category/clothing' ),
 		templateName: 'Products by Category',
 		templatePath: 'woocommerce/woocommerce//taxonomy-product_cat',
 		templateType: 'wp_template',
@@ -37,7 +62,8 @@ const templateUserCustomizationTests = [
 		},
 	},
 	{
-		permalink: '/product-tag/recommended/',
+		visitPage: async ( { page } ) =>
+			await page.goto( '/product-tag/recommended/' ),
 		templateName: 'Products by Tag',
 		templatePath: 'woocommerce/woocommerce//taxonomy-product_tag',
 		templateType: 'wp_template',
@@ -47,11 +73,41 @@ const templateUserCustomizationTests = [
 		},
 	},
 	{
-		permalink: '/product/hoodie',
+		visitPage: async ( { page } ) => await page.goto( '/product/hoodie' ),
 		templateName: 'Single Product',
 		templatePath: 'woocommerce/woocommerce//single-product',
 		templateType: 'wp_template',
 	},
+	{
+		visitPage: async ( { frontendUtils } ) =>
+			await frontendUtils.goToCart(),
+		templateName: 'Page: Cart',
+		templatePath: 'woocommerce/woocommerce//page-cart',
+		templateType: 'wp_template',
+	},
+	{
+		visitPage: async ( { frontendUtils } ) => {
+			await frontendUtils.goToShop();
+			await frontendUtils.addToCart();
+			await frontendUtils.goToCheckout();
+		},
+		templateName: 'Page: Checkout',
+		templatePath: 'woocommerce/woocommerce//page-checkout',
+		templateType: 'wp_template',
+	},
+	{
+		visitPage: async ( { frontendUtils, page } ) => {
+			const checkoutPage = new CheckoutPage( { page } );
+			await frontendUtils.goToShop();
+			await frontendUtils.addToCart( SIMPLE_VIRTUAL_PRODUCT_NAME );
+			await frontendUtils.goToCheckout();
+			await checkoutPage.fillInCheckoutWithTestData();
+			await checkoutPage.placeOrder();
+		},
+		templateName: 'Order Confirmation',
+		templatePath: 'woocommerce/woocommerce//order-confirmation',
+		templateType: 'wp_template',
+	},
 ];
 const userText = 'Hello World in the template';
 const defaultTemplateUserText = 'Hello World in the default template';
@@ -60,6 +116,7 @@ templateUserCustomizationTests.forEach( ( testData ) => {
 	test.describe( `${ testData.templateName } template`, async () => {
 		test( 'can be modified and reverted', async ( {
 			admin,
+			frontendUtils,
 			editorUtils,
 			page,
 		} ) => {
@@ -75,7 +132,7 @@ templateUserCustomizationTests.forEach( ( testData ) => {
 				attributes: { content: userText },
 			} );
 			await editorUtils.saveTemplate();
-			await page.goto( testData.permalink );
+			await testData.visitPage( { frontendUtils, page } );
 			await expect( page.getByText( userText ).first() ).toBeVisible();
 
 			// Verify the edition can be reverted.
@@ -86,19 +143,20 @@ templateUserCustomizationTests.forEach( ( testData ) => {
 			await editorUtils.revertTemplateCustomizations(
 				testData.templateName
 			);
-			await page.goto( testData.permalink );
+			await testData.visitPage( { frontendUtils, page } );
 			await expect( page.getByText( userText ) ).toHaveCount( 0 );
 		} );
 
 		if ( testData.defaultTemplate ) {
 			test( `defaults to the ${ testData.defaultTemplate.templateName } template`, async ( {
 				admin,
+				frontendUtils,
 				editorUtils,
 				page,
 			} ) => {
 				// Edit default template and verify changes are visible.
 				await admin.visitSiteEditor( {
-					postId: testData.defaultTemplate.templatePath,
+					postId: testData.defaultTemplate?.templatePath || '',
 					postType: testData.templateType,
 				} );
 				await editorUtils.enterEditMode();
@@ -110,7 +168,7 @@ templateUserCustomizationTests.forEach( ( testData ) => {
 					},
 				} );
 				await editorUtils.saveTemplate();
-				await page.goto( testData.permalink );
+				await testData.visitPage( { frontendUtils, page } );
 				await expect(
 					page.getByText( defaultTemplateUserText ).first()
 				).toBeVisible();
@@ -121,9 +179,9 @@ templateUserCustomizationTests.forEach( ( testData ) => {
 					`path=/${ testData.templateType }/all`
 				);
 				await editorUtils.revertTemplateCustomizations(
-					testData.defaultTemplate.templateName
+					testData.defaultTemplate?.templateName || ''
 				);
-				await page.goto( testData.permalink );
+				await testData.visitPage( { frontendUtils, page } );
 				await expect(
 					page.getByText( defaultTemplateUserText )
 				).toHaveCount( 0 );

plugins/woocommerce/changelog/43992-update-cart-checkout-order-confirmation-templates-to-parameterized-tests

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+Comment: Move Cart, Checkout and Order Confirmation template customization tests to the parameterized tests file
+