Convert Shopper Multi Currency Widget spec to Playwright (#10204)

changelog/dev-10067-convert-shopper-multi-currency-widget-spec

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Convert shopper-multi-currency-widget spec from Puppeteer to Playwright

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

@@ -10,7 +10,7 @@ import {
 	activateMulticurrency,
 	addCurrency,
 	deactivateMulticurrency,
-	removeCurrency,
+	restoreCurrencies,
 } from '../../utils/merchant';
 import { emptyCart, placeOrderWithCurrency } from '../../utils/shopper';
 import * as navigation from '../../utils/shopper-navigation';
@@ -33,7 +33,7 @@ test.describe( 'Multi-currency checkout', () => {
 	} );
 
 	test.afterAll( async () => {
-		await removeCurrency( merchantPage, 'EUR' );
+		await restoreCurrencies( merchantPage );
 		await emptyCart( shopperPage );
 
 		if ( ! wasMulticurrencyEnabled ) {

tests/e2e-pw/specs/shopper/shopper-bnpls-checkout.spec.ts

@@ -18,16 +18,26 @@ const bnplProviders = [ 'Affirm', 'Afterpay' ];
 test.describe( 'BNPL checkout', () => {
 	let merchantPage: Page;
 	let shopperPage: Page;
+	let wasMulticurrencyEnabled: boolean;
 
 	test.beforeAll( async ( { browser } ) => {
 		shopperPage = ( await getShopper( browser ) ).shopperPage;
 		merchantPage = ( await getMerchant( browser ) ).merchantPage;
+		wasMulticurrencyEnabled = await merchant.isMulticurrencyEnabled(
+			merchantPage
+		);
 
 		await merchant.enablePaymentMethods( merchantPage, bnplProviders );
+		if ( wasMulticurrencyEnabled ) {
+			await merchant.deactivateMulticurrency( merchantPage );
+		}
 	} );
 
 	test.afterAll( async () => {
 		await merchant.disablePaymentMethods( merchantPage, bnplProviders );
+		if ( wasMulticurrencyEnabled ) {
+			await merchant.activateMulticurrency( merchantPage );
+		}
 	} );
 
 	for ( const ctpEnabled of cardTestingProtectionStates ) {

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

@@ -0,0 +1,126 @@
+/**
+ * External dependencies
+ */
+import { test, expect, Page } from '@playwright/test';
+/**
+ * Internal dependencies
+ */
+import * as merchant from '../../utils/merchant';
+import * as shopper from '../../utils/shopper';
+import * as navigation from '../../utils/shopper-navigation';
+import { goToOrder } from '../../utils/merchant-navigation';
+import RestAPI from '../../utils/rest-api';
+import { getMerchant, getShopper } from '../../utils/helpers';
+
+test.describe( 'Shopper Multi-Currency widget', () => {
+	let merchantPage: Page;
+	let shopperPage: Page;
+	let wasMulticurrencyEnabled: boolean;
+
+	test.beforeAll( async ( { browser } ) => {
+		shopperPage = ( await getShopper( browser ) ).shopperPage;
+		merchantPage = ( await getMerchant( browser ) ).merchantPage;
+		wasMulticurrencyEnabled = await merchant.activateMulticurrency(
+			merchantPage
+		);
+		await merchant.restoreCurrencies( merchantPage );
+	} );
+
+	test.afterAll( async () => {
+		if ( ! wasMulticurrencyEnabled ) {
+			await merchant.deactivateMulticurrency( merchantPage );
+		}
+	} );
+
+	test( 'should display currency switcher widget if multi-currency is enabled', async () => {
+		await merchant.addMulticurrencyWidget( merchantPage );
+
+		await navigation.goToShop( shopperPage );
+		await expect(
+			shopperPage.locator( '.widget select[name=currency]' )
+		).toBeVisible();
+	} );
+
+	test( 'should not display currency switcher widget if multi-currency is disabled', async () => {
+		await merchant.deactivateMulticurrency( merchantPage );
+
+		await navigation.goToShop( shopperPage );
+		await expect(
+			shopperPage.locator( '.widget select[name=currency]' )
+		).not.toBeVisible();
+
+		await merchant.activateMulticurrency( merchantPage );
+	} );
+
+	test.describe( 'Should allow shopper to switch currency', () => {
+		test.afterEach( async () => {
+			await shopperPage.selectOption(
+				'.widget select[name=currency]',
+				'EUR'
+			);
+			await expect( shopperPage ).toHaveURL( /.*currency=EUR/ );
+
+			// Change it back to USD for the other tests.
+			await navigation.goToShopWithCurrency( shopperPage, 'USD' );
+		} );
+
+		test( 'at the product page', async () => {
+			await navigation.goToProductPageBySlug( shopperPage, 'beanie' );
+		} );
+
+		test( 'at the cart page', async () => {
+			await navigation.goToCart( shopperPage );
+		} );
+
+		test( 'at the checkout page', async () => {
+			await navigation.goToCheckout( shopperPage );
+		} );
+	} );
+
+	test.describe( 'Should not affect prices', () => {
+		let orderId: string;
+
+		test.afterEach( async () => {
+			await shopperPage.selectOption(
+				'.widget select[name=currency]',
+				'EUR'
+			);
+
+			await expect(
+				shopperPage.getByText( '$18.00 USD' ).first()
+			).toBeVisible();
+
+			await navigation.goToShopWithCurrency( shopperPage, 'USD' );
+		} );
+
+		test( 'at the order received page', async () => {
+			orderId = await shopper.placeOrderWithCurrency(
+				shopperPage,
+				'USD'
+			);
+		} );
+
+		test( 'at My account > Orders', async () => {
+			await navigation.goToOrders( shopperPage );
+			await expect(
+				shopperPage.getByLabel( `View order number ${ orderId }` )
+			).toBeVisible();
+		} );
+	} );
+
+	test( 'should not display currency switcher on pay for order page', async ( {}, {
+		project,
+	} ) => {
+		const restApi = new RestAPI( project.use.baseURL );
+		const orderId = await restApi.createOrder();
+
+		await goToOrder( merchantPage, orderId );
+		await merchantPage
+			.getByRole( 'link', { name: 'Customer payment page' } )
+			.click();
+
+		await expect(
+			merchantPage.locator( '.widget select[name=currency]' )
+		).not.toBeVisible();
+	} );
+} );

tests/e2e-pw/utils/merchant.ts

@@ -93,14 +93,16 @@ export const deactivateMulticurrency = async ( page: Page ) => {
 export const addMulticurrencyWidget = async ( page: Page ) => {
 	await navigation.goToWidgets( page );
 	// Wait for all widgets to load. This is important to prevent flakiness.
+	await page.locator( '.components-spinner' ).first().waitFor();
 	await expect( page.locator( '.components-spinner' ) ).toHaveCount( 0 );
 
 	if ( await page.getByRole( 'button', { name: 'Close' } ).isVisible() ) {
 		await page.getByRole( 'button', { name: 'Close' } ).click();
 	}
 
 	const isWidgetAdded = await page
-		.getByRole( 'heading', { name: 'Currency Switcher Widget' } )
+		.locator( 'iframe[srcdoc*=currency]' )
+		.first()
 		.isVisible();
 
 	if ( ! isWidgetAdded ) {

tests/e2e-pw/utils/rest-api.ts

@@ -9,6 +9,7 @@ import { HTTPClientFactory } from '@woocommerce/api';
 import { config } from '../config/default';
 
 const userEndpoint = '/wp/v2/users';
+const ordersEndpoint = '/wc/v3/orders';
 
 class RestAPI {
 	private baseUrl: string;
@@ -63,6 +64,21 @@ class RestAPI {
 			}
 		}
 	}
+
+	async createOrder(): Promise< string > {
+		const client = this.getAdminClient();
+
+		const order = await client.post( ordersEndpoint, {
+			line_items: [
+				{
+					product_id: 16,
+					quantity: 1,
+				},
+			],
+		} );
+
+		return `${ order.data.id }`;
+	}
 }
 
 export default RestAPI;