Add E2E Tests for Currency Switch at Checkout (#10348)

changelog/add-4606-e2e-for-currency-switch-at-checkout

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add E2E tests for currency switching at checkout.

tests/e2e-pw/specs/wcpay/shopper/multi-currency-checkout.spec.ts

@@ -5,14 +5,19 @@ import { test, expect, Page } from '@playwright/test';
 /**
  * Internal dependencies
  */
+import { config } from '../../../config/default';
 import { getMerchant, getShopper } from '../../../utils/helpers';
 import {
 	activateMulticurrency,
 	addCurrency,
 	deactivateMulticurrency,
+	disablePaymentMethods,
+	enablePaymentMethods,
 	restoreCurrencies,
+	setDefaultCurrency,
 } from '../../../utils/merchant';
-import { emptyCart, placeOrderWithCurrency } from '../../../utils/shopper';
+import { goToWooCommerceSettings } from '../../../utils/merchant-navigation';
+import * as shopper from '../../../utils/shopper';
 import * as navigation from '../../../utils/shopper-navigation';
 
 test.describe( 'Multi-currency checkout', () => {
@@ -34,7 +39,7 @@ test.describe( 'Multi-currency checkout', () => {
 
 	test.afterAll( async () => {
 		await restoreCurrencies( merchantPage );
-		await emptyCart( shopperPage );
+		await shopper.emptyCart( shopperPage );
 
 		if ( ! wasMulticurrencyEnabled ) {
 			await deactivateMulticurrency( merchantPage );
@@ -45,7 +50,9 @@ test.describe( 'Multi-currency checkout', () => {
 		Object.keys( currenciesOrders ).forEach( ( currency: string ) => {
 			test( `checkout with ${ currency }`, async () => {
 				await test.step( `pay with ${ currency }`, async () => {
-					currenciesOrders[ currency ] = await placeOrderWithCurrency(
+					currenciesOrders[
+						currency
+					] = await shopper.placeOrderWithCurrency(
 						shopperPage,
 						currency
 					);
@@ -97,4 +104,105 @@ test.describe( 'Multi-currency checkout', () => {
 			}
 		} );
 	} );
+
+	test.describe( 'Available payment methods', () => {
+		let originalCurrency = 'USD';
+
+		test.beforeAll( async () => {
+			await goToWooCommerceSettings( merchantPage, 'general' );
+			originalCurrency = await merchantPage
+				.locator( '#woocommerce_currency' )
+				.inputValue();
+
+			await enablePaymentMethods( merchantPage, [ 'bancontact' ] );
+		} );
+
+		test.afterAll( async () => {
+			await disablePaymentMethods( merchantPage, [ 'bancontact' ] );
+			await setDefaultCurrency( merchantPage, originalCurrency );
+		} );
+
+		test.beforeEach( async () => {
+			await shopper.emptyCart( shopperPage );
+		} );
+
+		test( 'should display EUR payment methods when switching to EUR and default is USD', async () => {
+			await setDefaultCurrency( merchantPage, 'USD' );
+
+			// Shopper switch to USD.
+			await shopper.addToCartFromShopPage(
+				shopperPage,
+				config.products.simple,
+				'USD'
+			);
+			await navigation.goToCheckout( shopperPage );
+			await shopper.fillBillingAddress(
+				shopperPage,
+				config.addresses[ 'upe-customer' ].billing.be
+			);
+			await expect(
+				shopperPage.getByText( 'Bancontact' )
+			).not.toBeVisible();
+
+			// Shopper switch to EUR.
+			await navigation.goToCheckout( shopperPage, {
+				currency: 'EUR',
+			} );
+			await shopper.fillBillingAddress(
+				shopperPage,
+				config.addresses[ 'upe-customer' ].billing.be
+			);
+			await expect( shopperPage.getByText( 'Bancontact' ) ).toBeVisible();
+
+			// Shopper checkout with Bancontact.
+			await shopperPage.getByText( 'Bancontact' ).click();
+			await shopper.focusPlaceOrderButton( shopperPage );
+			await shopper.placeOrder( shopperPage );
+			await shopperPage
+				.getByRole( 'link', {
+					name: 'Authorize Test Payment',
+				} )
+				.click();
+			await expect(
+				shopperPage.getByText( 'Order received' ).first()
+			).toBeVisible();
+		} );
+
+		test( 'should display USD payment methods when switching to USD and default is EUR', async () => {
+			await setDefaultCurrency( merchantPage, 'EUR' );
+
+			// Shopper switch to EUR.
+			await shopper.addToCartFromShopPage(
+				shopperPage,
+				config.products.simple,
+				'EUR'
+			);
+			await navigation.goToCheckout( shopperPage );
+			await shopper.fillBillingAddress(
+				shopperPage,
+				config.addresses[ 'upe-customer' ].billing.be
+			);
+			await expect( shopperPage.getByText( 'Bancontact' ) ).toBeVisible();
+
+			// Shopper switch to USD.
+			await navigation.goToCheckout( shopperPage, {
+				currency: 'USD',
+			} );
+			await shopper.fillBillingAddress(
+				shopperPage,
+				config.addresses[ 'upe-customer' ].billing.be
+			);
+			await expect(
+				shopperPage.getByText( 'Bancontact' )
+			).not.toBeVisible();
+
+			// Shopper checkout with CC.
+			await shopper.fillCardDetails( shopperPage );
+			await shopper.focusPlaceOrderButton( shopperPage );
+			await shopper.placeOrder( shopperPage );
+			await expect(
+				shopperPage.getByText( 'Order received' ).first()
+			).toBeVisible();
+		} );
+	} );
 } );

tests/e2e-pw/utils/merchant.ts

@@ -288,6 +288,30 @@ export const removeCurrency = async ( page: Page, currencyCode: string ) => {
 	).toBeHidden();
 };
 
+export const setDefaultCurrency = async (
+	page: Page,
+	currencyCode: string
+) => {
+	await navigation.goToWooCommerceSettings( page );
+
+	// Determine if the currency is already set as default.
+	const currentCurrencyCode = await page
+		.locator( '#woocommerce_currency' )
+		.inputValue();
+	if ( currentCurrencyCode === currencyCode ) {
+		return false;
+	}
+
+	// Set default currency.
+	await page.locator( '#woocommerce_currency' ).selectOption( currencyCode );
+	await page.getByRole( 'button', { name: 'Save changes' } ).click();
+	await expect(
+		page.getByText( 'Your settings have been saved.' )
+	).toBeVisible();
+
+	return true;
+};
+
 export const editCurrency = async ( page: Page, currencyCode: string ) => {
 	await navigation.goToMultiCurrencySettings( page );
 	await page

tests/e2e-pw/utils/shopper-navigation.ts

@@ -37,8 +37,17 @@ export const goToCart = async ( page: Page ) => {
 	await isUIUnblocked( page );
 };
 
-export const goToCheckout = async ( page: Page ) => {
-	await page.goto( '/checkout/', { waitUntil: 'load' } );
+export const goToCheckout = async (
+	page: Page,
+	{ currency }: { currency?: string } = {}
+) => {
+	let url = '/checkout/';
+
+	if ( currency ) {
+		url += `?currency=${ currency }`;
+	}
+
+	await page.goto( url, { waitUntil: 'load' } );
 	await isUIUnblocked( page );
 };