Add initial e2e tests to Checkout block frontend (https://github.com/woocommerce/woocommerce-blocks/pull/4004)

* Add initial e2e tests to Checkout block frontend

* Fix comment format

* Scroll to payment methods before checking if they are clickable

* Typos

* Implement caching in getBlockPagePermalink to improve e2e test performance

* Revert "Typos"

This reverts commit 1b544276056084f73d5bcdfa391d5438590e4782.

* Simplify product price definitions

* Move scrollTo function to utils

plugins/woocommerce-blocks/tests/e2e/config/jest.setup.js

@@ -11,7 +11,7 @@ import {
 	visitAdminPage,
 } from '@wordpress/e2e-test-utils';
 
-//Set the default test timeout to 30s
+// Set the default test timeout to 30s.
 let jestTimeoutInMilliSeconds = 30000;
 
 // When running test in the Development mode, the test timeout is increased to 2 minutes which allows for errors to be inspected.

plugins/woocommerce-blocks/tests/e2e/specs/backend/cart.test.js

@@ -106,7 +106,7 @@ describe( `${ block.name } Block`, () => {
 			);
 			// Simulate user scrolling up so the block toolbar doesn't cover
 			// the `Full Cart` button.
-			page.evaluate( () => {
+			await page.evaluate( () => {
 				document
 					.querySelector( '.wc-block-view-switch-control' )
 					.scrollIntoView( { block: 'center', inline: 'center' } );

plugins/woocommerce-blocks/tests/e2e/specs/frontend/cart.test.js

@@ -13,8 +13,11 @@ import { shopper } from '@woocommerce/e2e-utils';
 /**
  * Internal dependencies
  */
-import { visitPostOfType } from '../../../utils/visit-block-page';
-import { getBlockPagePermalink, getNormalPagePermalink } from '../../../utils';
+import {
+	getBlockPagePermalink,
+	getNormalPagePermalink,
+	visitPostOfType,
+} from '../../../utils';
 
 const block = {
 	name: 'Cart',
@@ -26,7 +29,7 @@ if ( process.env.WOOCOMMERCE_BLOCKS_PHASE < 2 )
 	// eslint-disable-next-line jest/no-focused-tests
 	test.only( `skipping ${ block.name } tests`, () => {} );
 
-describe( `${ block.name } Block`, () => {
+describe( `${ block.name } Block (frontend)`, () => {
 	let cartBlockPermalink;
 	let productPermalink;
 
@@ -42,6 +45,10 @@ describe( `${ block.name } Block`, () => {
 		await shopper.addToCart();
 	} );
 
+	afterAll( async () => {
+		await shopper.removeFromCart( 'Woo Single #1' );
+	} );
+
 	it( 'Adds a timestamp to localstorage when the cart is updated', async () => {
 		await jest.setTimeout( 60000 );
 		await page.goto( cartBlockPermalink );

plugins/woocommerce-blocks/tests/e2e/specs/frontend/checkout.test.js

@@ -0,0 +1,158 @@
+/**
+ * External dependencies
+ */
+import {
+	merchant,
+	createSimpleProduct,
+	setCheckbox,
+	settingsPageSaveChanges,
+	verifyCheckboxIsSet,
+} from '@woocommerce/e2e-utils';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getNormalPagePermalink,
+	scrollTo,
+	shopper,
+	visitPostOfType,
+} from '../../../utils';
+
+const block = {
+	name: 'Checkout',
+};
+
+const productPrice = 21.99;
+const simpleProductName = 'Woo Single #1';
+const singleProductPrice = `$${ productPrice }`;
+const twoProductPrice = `$${ productPrice * 2 }`;
+
+if ( process.env.WOOCOMMERCE_BLOCKS_PHASE < 2 )
+	// eslint-disable-next-line jest/no-focused-tests
+	test.only( `skipping ${ block.name } tests`, () => {} );
+
+describe( `${ block.name } Block (frontend)`, () => {
+	let productPermalink;
+
+	beforeAll( async () => {
+		await merchant.login();
+
+		// Go to general settings page
+		await merchant.openSettings( 'general' );
+
+		// Set base location with state CA.
+		await expect( page ).toSelect(
+			'select[name="woocommerce_default_country"]',
+			'United States (US) — California'
+		);
+		// Sell to all countries
+		await expect( page ).toSelect(
+			'#woocommerce_allowed_countries',
+			'Sell to all countries'
+		);
+		// Set currency to USD
+		await expect( page ).toSelect(
+			'#woocommerce_currency',
+			'United States (US) dollar ($)'
+		);
+		// Save
+		await settingsPageSaveChanges();
+
+		// Verify that settings have been saved
+		await Promise.all( [
+			expect( page ).toMatchElement( '#message', {
+				text: 'Your settings have been saved.',
+			} ),
+			expect( page ).toMatchElement(
+				'select[name="woocommerce_default_country"]',
+				{
+					text: 'United States (US) — California',
+				}
+			),
+			expect( page ).toMatchElement( '#woocommerce_allowed_countries', {
+				text: 'Sell to all countries',
+			} ),
+			expect( page ).toMatchElement( '#woocommerce_currency', {
+				text: 'United States (US) dollar ($)',
+			} ),
+		] );
+
+		// Enable BACS payment method
+		await merchant.openSettings( 'checkout', 'bacs' );
+		await setCheckbox( '#woocommerce_bacs_enabled' );
+		await settingsPageSaveChanges();
+
+		// Verify that settings have been saved
+		await verifyCheckboxIsSet( '#woocommerce_bacs_enabled' );
+
+		// Enable COD payment method
+		await merchant.openSettings( 'checkout', 'cod' );
+		await setCheckbox( '#woocommerce_cod_enabled' );
+		await settingsPageSaveChanges();
+
+		// Verify that settings have been saved
+		await verifyCheckboxIsSet( '#woocommerce_cod_enabled' );
+
+		// Enable PayPal payment method
+		await merchant.openSettings( 'checkout', 'paypal' );
+		await setCheckbox( '#woocommerce_paypal_enabled' );
+		await settingsPageSaveChanges();
+
+		// Verify that settings have been saved
+		await verifyCheckboxIsSet( '#woocommerce_paypal_enabled' );
+
+		// Get product page permalink.
+		await visitPostOfType( simpleProductName, 'product' );
+		productPermalink = await getNormalPagePermalink();
+
+		await merchant.logout();
+	} );
+
+	afterAll( async () => {
+		await shopper.removeFromCart( simpleProductName );
+	} );
+
+	it( 'should display cart items in order summary', async () => {
+		await page.goto( productPermalink );
+		await shopper.addToCart();
+		await shopper.goToCheckoutBlock();
+		await shopper.productIsInCheckoutBlock(
+			simpleProductName,
+			`1`,
+			singleProductPrice
+		);
+	} );
+
+	it( 'allows customer to choose available payment methods', async () => {
+		await page.goto( productPermalink );
+		await shopper.addToCart();
+		await shopper.goToCheckoutBlock();
+		await shopper.productIsInCheckoutBlock(
+			simpleProductName,
+			`2`,
+			twoProductPrice
+		);
+
+		await scrollTo( '.wc-block-components-radio-control__input' );
+
+		await expect( page ).toClick(
+			'.wc-block-components-payment-method-label',
+			{
+				alt: 'PayPal',
+			}
+		);
+		await expect( page ).toClick(
+			'.wc-block-components-payment-method-label',
+			{
+				text: 'Direct bank transfer',
+			}
+		);
+		await expect( page ).toClick(
+			'.wc-block-components-payment-method-label',
+			{
+				text: 'Cash on delivery',
+			}
+		);
+	} );
+} );

plugins/woocommerce-blocks/tests/utils/get-block-page-permalink.js

@@ -11,6 +11,8 @@ import {
  */
 import { visitBlockPage } from './visit-block-page';
 
+const blockPagePermalinks = {};
+
 /**
  * Gets the permalink of a page where the block editor is in use.
  *
@@ -18,6 +20,9 @@ import { visitBlockPage } from './visit-block-page';
  * @return {Promise<string>} Returns the permalink of the page.
  */
 export async function getBlockPagePermalink( blockPage ) {
+	if ( blockPagePermalinks[ blockPage ] ) {
+		return blockPagePermalinks[ blockPage ];
+	}
 	await visitBlockPage( blockPage );
 	await ensureSidebarOpened();
 	const panelButton = await findSidebarPanelToggleButtonWithTitle(
@@ -38,6 +43,7 @@ export async function getBlockPagePermalink( blockPage ) {
 	const link = await page.$eval( '.edit-post-post-link__link', ( el ) => {
 		return el.getAttribute( 'href' );
 	} );
+	blockPagePermalinks[ blockPage ] = link;
 	return link;
 }
 

plugins/woocommerce-blocks/tests/utils/index.js

@@ -1,4 +1,6 @@
+export { scrollTo } from './scroll-to.ts';
 export { findLabelWithText } from './find-label-with-text';
-export { visitBlockPage } from './visit-block-page';
+export { visitBlockPage, visitPostOfType } from './visit-block-page';
 export { getBlockPagePermalink } from './get-block-page-permalink';
 export { getNormalPagePermalink } from './get-normal-page-permalink';
+export { shopper } from './shopper';

plugins/woocommerce-blocks/tests/utils/scroll-to.ts

@@ -0,0 +1,13 @@
+/**
+ * Function that scrolls to an element after disabling smooth scrolling in the page.
+ */
+export const scrollTo = async ( selectorArg: string ): Promise< void > => {
+	await page.evaluate( ( selector ) => {
+		// Disable smooth scrolling so it scrolls instantly.
+		document.querySelector( 'html' ).style.scrollBehavior = 'auto';
+		document.querySelector( selector ).scrollIntoView( {
+			block: 'center',
+			inline: 'center',
+		} );
+	}, selectorArg );
+};

plugins/woocommerce-blocks/tests/utils/shopper.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { shopper as wcShopper } from '@woocommerce/e2e-utils';
+
+/**
+ * Internal dependencies
+ */
+import { getBlockPagePermalink } from './get-block-page-permalink';
+
+export const shopper = {
+	...wcShopper,
+
+	goToCheckoutBlock: async () => {
+		const checkoutBlockPermalink = await getBlockPagePermalink(
+			`Checkout Block`
+		);
+
+		await page.goto( checkoutBlockPermalink, {
+			waitUntil: 'networkidle0',
+		} );
+	},
+
+	productIsInCheckoutBlock: async ( productTitle, quantity, total ) => {
+		await expect( page ).toClick( '.wc-block-components-panel__button' );
+		await expect( page ).toMatchElement(
+			'.wc-block-components-product-name',
+			{
+				text: productTitle,
+			}
+		);
+		await expect( page ).toMatchElement(
+			'.wc-block-components-order-summary-item__quantity',
+			{
+				text: quantity,
+			}
+		);
+		await expect( page ).toMatchElement(
+			'.wc-block-components-product-price__value',
+			{
+				text: total,
+			}
+		);
+	},
+};