Add tests

woocommerce · Jan 23, 2024 · bc4fd29 · bc4fd29
1 parent 4c3b58b
commit bc4fd29
Show file tree

Hide file tree

Showing 5 changed files with 272 additions and 0 deletions.
diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/templates/constants.ts b/plugins/woocommerce-blocks/tests/e2e/tests/templates/constants.ts
@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+import type { Page, Response } from '@playwright/test';
+import type { FrontendUtils } from '@woocommerce/e2e-utils';
+
+/**
+ * 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;
+	};
+};
+
+export const CUSTOMIZABLE_WC_TEMPLATES: TemplateCustomizationTest[] = [
+	{
+		visitPage: async ( { frontendUtils } ) =>
+			await frontendUtils.goToShop(),
+		templateName: 'Product Catalog',
+		templatePath: 'archive-product',
+		templateType: 'wp_template',
+	},
+	{
+		visitPage: async ( { page } ) =>
+			await page.goto( '/?s=shirt&post_type=product' ),
+		templateName: 'Product Search Results',
+		templatePath: 'product-search-results',
+		templateType: 'wp_template',
+	},
+	{
+		visitPage: async ( { page } ) => await page.goto( '/color/blue' ),
+		templateName: 'Products by Attribute',
+		templatePath: 'taxonomy-product_attribute',
+		templateType: 'wp_template',
+	},
+	{
+		visitPage: async ( { page } ) =>
+			await page.goto( '/product-category/clothing' ),
+		templateName: 'Products by Category',
+		templatePath: 'taxonomy-product_cat',
+		templateType: 'wp_template',
+	},
+	{
+		visitPage: async ( { page } ) =>
+			await page.goto( '/product-tag/recommended/' ),
+		templateName: 'Products by Tag',
+		templatePath: 'taxonomy-product_tag',
+		templateType: 'wp_template',
+	},
+	{
+		visitPage: async ( { page } ) => await page.goto( '/product/hoodie' ),
+		templateName: 'Single Product',
+		templatePath: 'single-product',
+		templateType: 'wp_template',
+	},
+	{
+		visitPage: async ( { frontendUtils } ) =>
+			await frontendUtils.goToCart(),
+		templateName: 'Page: Cart',
+		templatePath: 'page-cart',
+		templateType: 'wp_template',
+	},
+	{
+		visitPage: async ( { frontendUtils } ) => {
+			await frontendUtils.goToShop();
+			await frontendUtils.addToCart();
+			await frontendUtils.goToCheckout();
+		},
+		templateName: 'Page: Checkout',
+		templatePath: '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: 'order-confirmation',
+		templateType: 'wp_template',
+	},
+];
+
+export const WC_TEMPLATES_SLUG = 'woocommerce/woocommerce';
diff --git a/...-blocks/tests/e2e/tests/templates/template-customization.block_theme.side_effects.spec.ts b/...-blocks/tests/e2e/tests/templates/template-customization.block_theme.side_effects.spec.ts
@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import { test, expect } from '@woocommerce/e2e-playwright-utils';
+import { deleteAllTemplates } from '@wordpress/e2e-test-utils';
+import {
+	BLOCK_THEME_SLUG,
+	BLOCK_THEME_WITH_TEMPLATES_SLUG,
+	cli,
+} from '@woocommerce/e2e-utils';
+
+/**
+ * Internal dependencies
+ */
+import { CUSTOMIZABLE_WC_TEMPLATES, WC_TEMPLATES_SLUG } from './constants';
+
+const userText = 'Hello World in the template';
+const woocommerceTemplateUserText = 'Hello World in the WooCommerce template';
+
+CUSTOMIZABLE_WC_TEMPLATES.forEach( ( testData ) => {
+	test.describe( `${ testData.templateName } template`, async () => {
+		test( `user-modified ${ testData.templateName } template based on the theme template has priority over the user-modified template based on the default WooCommerce template`, async ( {
+			admin,
+			frontendUtils,
+			editorUtils,
+			page,
+		} ) => {
+			// Edit the WooCommerce default template
+			await admin.visitSiteEditor( {
+				postId: `${ WC_TEMPLATES_SLUG }//${ testData.templatePath }`,
+				postType: testData.templateType,
+			} );
+			await editorUtils.enterEditMode();
+			await editorUtils.closeWelcomeGuideModal();
+			await editorUtils.editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: woocommerceTemplateUserText },
+			} );
+			await editorUtils.saveTemplate();
+
+			await cli(
+				`npm run wp-env run tests-cli -- wp theme activate ${ BLOCK_THEME_WITH_TEMPLATES_SLUG }`
+			);
+
+			// 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();
+
+			// Verify the template is the one modified by the user based on the theme.
+			await testData.visitPage( { frontendUtils, page } );
+			await expect( page.getByText( userText ).first() ).toBeVisible();
+			await expect(
+				page.getByText( woocommerceTemplateUserText )
+			).toHaveCount( 0 );
+
+			// Revert edition and verify the user-modified WC template is used.
+			// Note: we need to revert it from the admin (instead of calling
+			// `deleteAllTemplates()`). This way, we verify there are no
+			// duplicate templates with the same name.
+			// See: https://github.com/woocommerce/woocommerce/issues/42220
+			await admin.visitAdminPage(
+				'site-editor.php',
+				`path=/${ testData.templateType }/all`
+			);
+			await editorUtils.revertTemplateCustomizations(
+				testData.templateName
+			);
+			await testData.visitPage( { frontendUtils, page } );
+
+			await expect(
+				page.getByText( woocommerceTemplateUserText ).first()
+			).toBeVisible();
+			await expect( page.getByText( userText ) ).toHaveCount( 0 );
+
+			await cli(
+				`npm run wp-env run tests-cli -- wp theme activate ${ BLOCK_THEME_SLUG }`
+			);
+			deleteAllTemplates( 'wp_template' );
+		} );
+	} );
+} );
diff --git a/...merce-blocks/tests/mocks/theme-with-woo-templates/block-templates/order-confirmation.html b/...merce-blocks/tests/mocks/theme-with-woo-templates/block-templates/order-confirmation.html
@@ -0,0 +1,57 @@
+<!-- wp:template-part {"slug":"header"} /-->
+
+<!-- wp:paragraph -->
+<p>Order Confirmation template loaded from theme</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:group {"tagName":"main","layout":{"inherit":true,"type":"constrained"}} -->
+<main class="wp-block-group"><!-- wp:woocommerce/order-confirmation-status {"fontSize":"large"} /-->
+
+	<!-- wp:woocommerce/order-confirmation-summary /-->
+
+	<!-- wp:woocommerce/order-confirmation-totals-wrapper {"align":"wide"} -->
+	<!-- wp:pattern {"slug":"woocommerce/order-confirmation-totals-heading"} /-->
+
+	<!-- wp:woocommerce/order-confirmation-totals {"lock":{"remove":true}} /-->
+	<!-- /wp:woocommerce/order-confirmation-totals-wrapper -->
+
+	<!-- wp:woocommerce/order-confirmation-downloads-wrapper {"align":"wide"} -->
+	<!-- wp:pattern {"slug":"woocommerce/order-confirmation-downloads-heading"} /-->
+
+	<!-- wp:woocommerce/order-confirmation-downloads {"lock":{"remove":true}} /-->
+	<!-- /wp:woocommerce/order-confirmation-downloads-wrapper -->
+
+	<!-- wp:columns {"align":"wide","className":"woocommerce-order-confirmation-address-wrapper"} -->
+	<div class="wp-block-columns alignwide woocommerce-order-confirmation-address-wrapper">
+		<!-- wp:column -->
+		<div class="wp-block-column">
+			<!-- wp:woocommerce/order-confirmation-shipping-wrapper {"align":"wide"} -->
+			<!-- wp:pattern {"slug":"woocommerce/order-confirmation-shipping-heading"} /-->
+
+			<!-- wp:woocommerce/order-confirmation-shipping-address {"lock":{"remove":true}} /-->
+			<!-- /wp:woocommerce/order-confirmation-shipping-wrapper -->
+		</div>
+		<!-- /wp:column -->
+
+		<!-- wp:column -->
+		<div class="wp-block-column">
+			<!-- wp:woocommerce/order-confirmation-billing-wrapper {"align":"wide"} -->
+			<!-- wp:pattern {"slug":"woocommerce/order-confirmation-billing-heading"} /-->
+
+			<!-- wp:woocommerce/order-confirmation-billing-address {"lock":{"remove":true}} /-->
+			<!-- /wp:woocommerce/order-confirmation-billing-wrapper -->
+		</div>
+		<!-- /wp:column -->
+	</div>
+	<!-- /wp:columns -->
+
+	<!-- wp:woocommerce/order-confirmation-additional-fields-wrapper {"align":"wide"} -->
+	<!-- wp:pattern {"slug":"woocommerce/order-confirmation-additional-fields-heading"} /-->
+	<!-- wp:woocommerce/order-confirmation-additional-fields /-->
+	<!-- /wp:woocommerce/order-confirmation-additional-fields-wrapper -->
+
+	<!-- wp:woocommerce/order-confirmation-additional-information /-->
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer"} /-->
diff --git a/...ns/woocommerce-blocks/tests/mocks/theme-with-woo-templates/block-templates/page-cart.html b/...ns/woocommerce-blocks/tests/mocks/theme-with-woo-templates/block-templates/page-cart.html
@@ -0,0 +1,13 @@
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:paragraph -->
+<p>Page: Cart template loaded from theme</p>
+<!-- /wp:paragraph -->
+<!-- wp:woocommerce/page-content-wrapper {"page":"cart"} -->
+<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
+<main class="wp-block-group">
+	<!-- wp:post-title {"align":"wide", "level":1} /-->
+	<!-- wp:post-content {"align":"wide"} /-->
+</main>
+<!-- /wp:group -->
+<!-- /wp:woocommerce/page-content-wrapper -->
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
diff --git a/...oocommerce-blocks/tests/mocks/theme-with-woo-templates/block-templates/page-checkout.html b/...oocommerce-blocks/tests/mocks/theme-with-woo-templates/block-templates/page-checkout.html
@@ -0,0 +1,12 @@
+<!-- wp:template-part {"slug":"checkout-header","theme":"woocommerce/woocommerce","tagName":"header"} /-->
+<!-- wp:paragraph -->
+<p>Page: Checkout template loaded from theme</p>
+<!-- /wp:paragraph -->
+<!-- wp:woocommerce/page-content-wrapper {"page":"checkout"} -->
+<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
+<main class="wp-block-group">
+	<!-- wp:post-title {"align":"wide", "level":1} /-->
+	<!-- wp:post-content {"align":"wide"} /-->
+</main>
+<!-- /wp:group -->
+<!-- /wp:woocommerce/page-content-wrapper -->