e2e tests for cart and checkout templates

tests/e2e-pw/tests/classic-template/classic-template.block_theme.side_effects.spec.ts

@@ -24,12 +24,12 @@ const templates = {
 		slug: 'single-product',
 		frontendPage: '/product/single/',
 	},
-	'taxonomy-product_attribute': {
-		templateTitle: 'Product Attribute',
-		slug: 'taxonomy-product_attribute',
-		frontendPage: '/product-attribute/color/',
-	},
-
+	// This test is disabled because archives are disabled for attributes by default. This can be uncommented when this is toggled on.
+	//'taxonomy-product_attribute': {
+	//	templateTitle: 'Product Attribute',
+	//	slug: 'taxonomy-product_attribute',
+	//	frontendPage: '/product-attribute/color/',
+	//},
 	'taxonomy-product_cat': {
 		templateTitle: 'Product Category',
 		slug: 'taxonomy-product_cat',
@@ -49,7 +49,7 @@ const templates = {
 	'product-search-results': {
 		templateTitle: 'Product Search Results',
 		slug: 'product-search-results',
-		frontendPage: '/?s=single&post_type=product',
+		frontendPage: '/?s=s&post_type=product',
 	},
 };
 
@@ -100,9 +100,9 @@ for ( const { templateTitle, slug, frontendPage } of Object.values(
 
 			await page.goto( frontendPage );
 
-			const helloWorldText = await page.getByText( 'Hello World' );
-
-			expect( helloWorldText ).not.toBeNull();
+			await expect(
+				page.getByText( 'Hello World' ).first()
+			).toBeVisible();
 		} );
 
 		test.afterAll( async ( { requestUtils } ) => {

tests/e2e-pw/tests/permalink-settings/permalink-settings.block_theme.spec.ts

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import { test, expect } from '@woocommerce/e2e-playwright-utils';
+import { cli } from '@woocommerce/e2e-utils';
+
+/**
+ * Internal dependencies
+ */
+import { goToShop, addToCart } from '../../utils';
+
+test.describe(
+	'Tests permalink settings for the cart and checkout templates',
+	async () => {
+		test.afterAll( async () => {
+			await cli(
+				'npm run wp-env run tests-cli "wp option update woocommerce_cart_page_endpoint cart"'
+			);
+			await cli(
+				'npm run wp-env run tests-cli "wp option update woocommerce_checkout_page_endpoint checkout"'
+			);
+		} );
+
+		test.describe( 'Settings page', () => {
+			test( 'Load advanced settings', async ( { page } ) => {
+				await page.goto(
+					'/wp-admin/admin.php?page=wc-settings&tab=advanced'
+				);
+				const title = page
+					.locator( 'div.wrap.woocommerce > form > h2' )
+					.first();
+				await expect( title ).toHaveText( 'Page setup' );
+			} );
+			test( 'Permlink settings exist', async ( { page } ) => {
+				await page.goto(
+					'/wp-admin/admin.php?page=wc-settings&tab=advanced'
+				);
+				const cartInput = page.locator(
+					'tr:has-text("Cart page "):has-text("cart template") input'
+				);
+				const checkoutInput = page.locator(
+					'tr:has-text("Checkout page "):has-text("checkout template") input'
+				);
+
+				await expect( cartInput ).toBeVisible();
+				await expect( checkoutInput ).toBeVisible();
+			} );
+		} );
+
+		test.describe( 'Frontend templates are updated', () => {
+			test.beforeEach( async ( { page } ) => {
+				await goToShop( page );
+				await addToCart( page );
+			} );
+
+			test( 'Changing cart permalink works', async ( { page } ) => {
+				await page.goto(
+					'/wp-admin/admin.php?page=wc-settings&tab=advanced'
+				);
+				const cartInput = page.locator(
+					'tr:has-text("Cart page "):has-text("cart template") input'
+				);
+				cartInput.fill( 'updated-cart-permalink' );
+				await page.click( 'button[name="save"]' );
+				await page.waitForLoadState( 'networkidle' );
+
+				// Visit the updated page.
+				await page.goto( '/updated-cart-permalink' );
+				const cartText = await page.getByText( 'Proceed to checkout' );
+				expect( cartText ).toBeVisible();
+			} );
+
+			test( 'Changing checkout permalink works', async ( { page } ) => {
+				await page.goto(
+					'/wp-admin/admin.php?page=wc-settings&tab=advanced'
+				);
+				const checkoutInput = page.locator(
+					'tr:has-text("Checkout page "):has-text("checkout template") input'
+				);
+				checkoutInput.fill( 'updated-checkout-permalink' );
+				await page.click( 'button[name="save"]' );
+				await page.waitForLoadState( 'networkidle' );
+
+				// Visit the updated page.
+				await page.goto( '/updated-checkout-permalink' );
+				const cartText = await page.getByText( 'Place Order' );
+				expect( cartText ).toBeVisible();
+			} );
+		} );
+	}
+);

tests/e2e-pw/tests/products/products.block_theme.side_effects.spec.ts

@@ -22,11 +22,12 @@ const blockData: BlockData = {
 };
 
 const templates = {
-	'taxonomy-product_attribute': {
-		templateTitle: 'Product Attribute',
-		slug: 'taxonomy-product_attribute',
-		frontendPage: '/product-attribute/color/',
-	},
+	// This test is disabled because archives are disabled for attributes by default. This can be uncommented when this is toggled on.
+	//'taxonomy-product_attribute': {
+	//	templateTitle: 'Product Attribute',
+	//	slug: 'taxonomy-product_attribute',
+	//	frontendPage: '/product-attribute/color/',
+	//},
 	'taxonomy-product_cat': {
 		templateTitle: 'Product Category',
 		slug: 'taxonomy-product_cat',

tests/e2e-pw/tests/templates/cart-template.block_theme.spec.ts

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { test, expect } from '@woocommerce/e2e-playwright-utils';
+
+const permalink = '/cart';
+const templatePath = 'woocommerce/woocommerce//cart';
+const templateType = 'wp_template';
+
+test.describe( 'Test the cart template', async () => {
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllTemplates( 'wp_template' );
+		await requestUtils.deleteAllTemplates( 'wp_template_part' );
+	} );
+
+	test( 'Template can be opened in the site editor', async ( { page } ) => {
+		await page.goto( '/wp-admin/site-editor.php' );
+		await page.click( 'text=Templates' );
+		await page.click( 'text=Cart' );
+		await page.getByRole( 'button', { name: /Edit/i } ).click();
+
+		await expect(
+			page
+				.frameLocator( 'iFrame' )
+				.locator( 'button:has-text("Proceed to checkout")' )
+				.first()
+		).toBeVisible();
+	} );
+
+	test( 'Template can be modified', async ( { page, admin, editor } ) => {
+		await admin.visitSiteEditor( {
+			postId: templatePath,
+			postType: templateType,
+		} );
+		await editor.canvas.click( 'body' );
+		await editor.canvas.waitForLoadState( 'networkidle' );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Hello World' },
+		} );
+		await editor.saveSiteEditorEntities();
+		await page.goto( permalink );
+
+		await expect( page.getByText( 'Hello World' ).first() ).toBeVisible();
+	} );
+} );

tests/e2e-pw/tests/templates/checkout-header-template-part.block_theme.spec.ts

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { test, expect } from '@woocommerce/e2e-playwright-utils';
+
+const permalink = '/checkout';
+const templatePath = 'woocommerce/woocommerce//checkout-header';
+const templateType = 'wp_template_part';
+
+test.afterAll( async ( { requestUtils } ) => {
+	await requestUtils.deleteAllTemplates( 'wp_template' );
+	await requestUtils.deleteAllTemplates( 'wp_template_part' );
+} );
+
+test.describe( 'Test the checkout header template part', async () => {
+	test( 'Template can be opened in the site editor', async ( { page } ) => {
+		await page.goto( '/wp-admin/site-editor.php' );
+		await page.click( 'text=Template Parts' );
+		await page.click( 'text=Checkout Header' );
+
+		const editButton = page.getByRole( 'button', { name: /Edit/i } );
+		await expect( editButton ).toBeVisible();
+	} );
+
+	test( 'Template can be modified', async ( { page, admin, editor } ) => {
+		await admin.visitSiteEditor( {
+			postId: templatePath,
+			postType: templateType,
+		} );
+		await editor.canvas.click( 'body' );
+		await editor.canvas.waitForLoadState( 'networkidle' );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Hello World' },
+		} );
+		await editor.saveSiteEditorEntities();
+
+		await page.goto( permalink );
+
+		await expect( page.getByText( 'Hello World' ).first() ).toBeVisible();
+	} );
+} );

tests/e2e-pw/tests/templates/checkout-template.block_theme.spec.ts

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { test, expect } from '@woocommerce/e2e-playwright-utils';
+
+const permalink = '/checkout';
+const templatePath = 'woocommerce/woocommerce//checkout';
+const templateType = 'wp_template';
+
+test.describe( 'Test the checkout template', async () => {
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllTemplates( 'wp_template' );
+		await requestUtils.deleteAllTemplates( 'wp_template_part' );
+	} );
+
+	test( 'Template can be opened in the site editor', async ( { page } ) => {
+		await page.goto( '/wp-admin/site-editor.php' );
+		await page.click( 'text=Templates' );
+		await page.click( 'text=Checkout' );
+		await page.getByRole( 'button', { name: /Edit/i } ).click();
+
+		await expect(
+			page
+				.frameLocator( 'iFrame' )
+				.locator( 'button:has-text("Place order")' )
+				.first()
+		).toBeVisible();
+	} );
+
+	test( 'Template can be modified', async ( { page, admin, editor } ) => {
+		await admin.visitSiteEditor( {
+			postId: templatePath,
+			postType: templateType,
+		} );
+		await editor.canvas.click( 'body' );
+		await editor.canvas.waitForLoadState( 'networkidle' );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Hello World' },
+		} );
+		await editor.saveSiteEditorEntities();
+		await page.goto( permalink );
+
+		await expect( page.getByText( 'Hello World' ).first() ).toBeVisible();
+	} );
+} );

tests/e2e-pw/tests/templates/order-confirmation.block_theme.spec.ts

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { test, expect } from '@woocommerce/e2e-playwright-utils';
+
+const permalink = '/checkout/order-received';
+const templatePath = 'woocommerce/woocommerce//order-confirmation';
+const templateType = 'wp_template';
+
+test.describe( 'Test the order confirmation template', async () => {
+	test( 'Template can be opened in the site editor', async ( { page } ) => {
+		await page.goto( '/wp-admin/site-editor.php' );
+		await page.click( 'text=Templates' );
+		await page.click( 'text=Order confirmation' );
+		await page.getByRole( 'button', { name: /Edit/i } ).click();
+
+		await expect(
+			page
+				.frameLocator( 'iFrame' )
+				.locator(
+					'p:has-text("Thank you. Your order has been received.")'
+				)
+				.first()
+		).toBeVisible();
+	} );
+
+	test( 'Template can be modified', async ( { page, admin, editor } ) => {
+		await admin.visitSiteEditor( {
+			postId: templatePath,
+			postType: templateType,
+		} );
+		await editor.canvas.click( 'body' );
+		await editor.canvas.waitForLoadState( 'networkidle' );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Hello World' },
+		} );
+		await editor.saveSiteEditorEntities();
+		await page.goto( permalink );
+
+		await expect( page.getByText( 'Hello World' ).first() ).toBeVisible();
+	} );
+} );

tests/e2e-pw/utils/editor/EditorUtils.ts

@@ -2,9 +2,6 @@
  * External dependencies
  */
 import { Editor } from '@wordpress/e2e-test-utils-playwright';
-/**
- * Internal dependencies
- */
 
 export class EditorUtils {
 	editor: Editor;

tests/e2e-pw/utils/frontend/add-to-cart.ts

@@ -0,0 +1,9 @@
+/**
+ * External dependencies
+ */
+import { Page } from '@playwright/test';
+
+export const addToCart = async ( page: Page ) => {
+	await page.click( 'text=Add to cart' );
+	await page.waitForLoadState( 'networkidle' );
+};

tests/e2e-pw/utils/frontend/go-to-shop.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import { Page } from '@playwright/test';
+
+// Navigate to the shop page.
+export const goToShop = ( page: Page ) => {
+	page.goto( '/shop', {
+		waitUntil: 'networkidle',
+	} );
+};

tests/e2e-pw/utils/frontend/index.ts

@@ -1 +1,3 @@
 export * from './get-block-by-name';
+export * from './go-to-shop';
+export * from './add-to-cart';