Fix E2E tests for the new checkout experience (#3117)

* Replace wcpay in variables/classes with wcstripe
* Remove deprecated version attribute from docker-compose files
* Add new checkout E2E tests

client/blocks/upe/upe-deferred-intent-creation/payment-processor.js

@@ -262,7 +262,7 @@ const PaymentProcessor = ( {
 			<PaymentElement
 				options={ getStripeElementOptions() }
 				onChange={ updatePaymentElementCompletionStatus }
-				className="wcpay-payment-element"
+				className="wcstripe-payment-element"
 			/>
 		</>
 	);

client/data/settings/__tests__/actions.js

@@ -37,8 +37,6 @@ describe( 'Settings actions tests', () => {
 		test( 'makes POST request with settings', () => {
 			const settingsMock = {
 				enabled_payment_method_ids: [ 'foo', 'bar' ],
-				// TODO Uncomment code below once settings data API is fully ported.
-				// is_wcpay_enabled: true,
 			};
 
 			select.mockReturnValue( {

client/styles/upe/index.js

@@ -212,10 +212,10 @@ const hiddenElementsForUPE = {
 		);
 
 		// Remove transitions & focus on hidden element.
-		const wcpayHiddenInput = document.querySelector(
+		const wcstripeHiddenInput = document.querySelector(
 			selectors.hiddenInput
 		);
-		wcpayHiddenInput.style.transition = 'none';
+		wcstripeHiddenInput.style.transition = 'none';
 	},
 
 	/**

docker-compose.yml

@@ -1,5 +1,3 @@
-version: "3"
-
 services:
   wordpress:
     build: ./docker/wordpress_xdebug

tests/e2e/env/docker-compose.yml

@@ -1,5 +1,3 @@
-version: "3"
-
 volumes:
   # Kludge for not having the ./docker directory bound recursively
   dockerdirectory:

tests/e2e/test-data/default.json

@@ -153,7 +153,7 @@
 			"label": "Visa ending in 0002",
 			"error": [
 				"The card was declined.",
-				"Your card has been declined."
+				"Your card was declined."
 			]
 		},
 		"declined-funds": {

tests/e2e/tests/_legacy-experience/woocommerce-blocks/card-failures.spec.js

@@ -7,7 +7,6 @@ const {
 	setupCart,
 	setupBlocksCheckout,
 	fillCreditCardDetailsLegacy,
-	isUpeCheckout,
 } = payments;
 
 test.beforeEach( async ( { page } ) => {
@@ -25,27 +24,15 @@ const testCard = async ( page, cardKey ) => {
 	await fillCreditCardDetailsLegacy( page, card );
 	await page.locator( 'text=Place order' ).click();
 
-	const isUpe = await isUpeCheckout( page );
-
 	/**
 	 * The invalid card error message is shown in the input field validation.
 	 * The customer isn't allowed to place the order for this type of card failure.
 	 */
-	let expected;
-	if ( isUpe && cardKey === 'cards.declined-incorrect' ) {
-		expected = await page
-			.frameLocator(
-				'.wc-block-gateway-container iframe[name^="__privateStripeFrame"]'
-			)
-			.locator( '#Field-numberError' )
-			.innerText();
-	} else {
-		expected = await page.innerText(
-			cardKey === 'cards.declined-incorrect'
-				? '.wc-card-number-element .wc-block-components-validation-error'
-				: '.wc-block-store-notice.is-error .wc-block-components-notice-banner__content'
-		);
-	}
+	const expected = await page.innerText(
+		cardKey === 'cards.declined-incorrect'
+			? '.wc-card-number-element .wc-block-components-validation-error'
+			: '.wc-block-store-notice.is-error .wc-block-components-notice-banner__content'
+	);
 	expect
 		.soft( expected )
 		.toMatch( new RegExp( `(?:${ card.error.join( '|' ) })`, 'i' ) );

tests/e2e/tests/checkout/blocks/card-failures.spec.js

@@ -0,0 +1,74 @@
+import { test, expect } from '@playwright/test';
+import config from 'config';
+import { payments } from '../../../utils';
+
+const {
+	emptyCart,
+	setupCart,
+	setupBlocksCheckout,
+	fillCreditCardDetails,
+} = payments;
+
+test.beforeEach( async ( { page } ) => {
+	await emptyCart( page );
+	await setupCart( page );
+	await setupBlocksCheckout(
+		page,
+		config.get( 'addresses.customer.billing' )
+	);
+} );
+
+const testCard = async ( page, cardKey ) => {
+	const card = config.get( cardKey );
+
+	await fillCreditCardDetails( page, card );
+	await page.locator( 'text=Place order' ).click();
+
+	/**
+	 * The invalid card error message is shown in the input field validation.
+	 * The customer isn't allowed to place the order for this type of card failure.
+	 */
+	let expected;
+	if ( cardKey === 'cards.declined-incorrect' ) {
+		expected = await page
+			.frameLocator(
+				'.wcstripe-payment-element iframe[name^="__privateStripeFrame"]'
+			)
+			.locator( '#Field-numberError' )
+			.innerText();
+	} else {
+		expected = await page.innerText(
+			'.wc-block-store-notice.is-error .wc-block-components-notice-banner__content'
+		);
+	}
+	expect
+		.soft( expected )
+		.toMatch( new RegExp( `(?:${ card.error.join( '|' ) })`, 'i' ) );
+};
+
+test.describe.configure( { mode: 'parallel' } );
+test.describe( 'customer cannot checkout with invalid cards @blocks', () => {
+	test( `a declined card shows the correct error message @smoke`, async ( {
+		page,
+	} ) => testCard( page, 'cards.declined' ) );
+
+	test( `a card with insufficient funds shows the correct error message`, async ( {
+		page,
+	} ) => testCard( page, 'cards.declined-funds' ) );
+
+	test( `a card with invalid number shows the correct error message`, async ( {
+		page,
+	} ) => testCard( page, 'cards.declined-incorrect' ) );
+
+	test( `an expired card shows the correct error message`, async ( {
+		page,
+	} ) => testCard( page, 'cards.declined-expired' ) );
+
+	test( `a card with incorrect CVC shows the correct error message @smoke`, async ( {
+		page,
+	} ) => testCard( page, 'cards.declined-cvc' ) );
+
+	test( `an error processing the card shows the correct error message`, async ( {
+		page,
+	} ) => testCard( page, 'cards.declined-processing' ) );
+} );

tests/e2e/tests/checkout/blocks/normal-card.spec.js

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+import config from 'config';
+import { payments } from '../../../utils';
+
+const {
+	emptyCart,
+	setupCart,
+	fillCreditCardDetails,
+	setupBlocksCheckout,
+} = payments;
+
+test( 'customer can checkout with a normal credit card @smoke @blocks', async ( {
+	page,
+} ) => {
+	await emptyCart( page );
+	await setupCart( page );
+	await setupBlocksCheckout(
+		page,
+		config.get( 'addresses.customer.billing' )
+	);
+
+	await fillCreditCardDetails( page, config.get( 'cards.basic' ) );
+	await page.locator( 'text=Place order' ).click();
+	await page.waitForNavigation();
+
+	await expect( page.locator( 'h1.entry-title' ) ).toHaveText(
+		'Order received'
+	);
+} );

tests/e2e/tests/checkout/blocks/saved-card.spec.js

@@ -0,0 +1,85 @@
+import { test, expect } from '@playwright/test';
+import config from 'config';
+import { payments, api, user } from '../../../utils';
+
+const {
+	emptyCart,
+	setupCart,
+	setupBlocksCheckout,
+	fillCreditCardDetails,
+} = payments;
+
+let username, userEmail;
+
+test.beforeAll( async () => {
+	// This allow multiple tests to run in parallel.
+	const randomString = Date.now();
+	userEmail = randomString + '+' + config.get( 'users.customer.email' );
+	username = randomString + '.' + config.get( 'users.customer.username' );
+
+	const user = {
+		...config.get( 'users.customer' ),
+		...config.get( 'addresses.customer' ),
+		email: userEmail,
+		username,
+	};
+
+	await api.create.customer( user );
+} );
+
+test( 'customer can checkout with a saved card @smoke @blocks', async ( {
+	page,
+} ) => {
+	await test.step( 'customer login', async () => {
+		await user.login(
+			page,
+			username,
+			config.get( 'users.customer.password' )
+		);
+	} );
+
+	await test.step( 'checkout and choose to save the card', async () => {
+		await emptyCart( page );
+		await setupCart( page );
+		await setupBlocksCheckout( page );
+		await fillCreditCardDetails( page, config.get( 'cards.basic' ) );
+
+		// check box to save payment method.
+		await page
+			.locator( '.wc-block-components-payment-methods__save-card-info' )
+			.click();
+
+		await page.locator( 'text=Place order' ).click();
+
+		await page.waitForNavigation();
+		await expect( page.locator( 'h1.entry-title' ) ).toHaveText(
+			'Order received'
+		);
+	} );
+
+	await test.step( 'checkout and pay with the saved card', async () => {
+		await emptyCart( page );
+		await setupCart( page );
+		await setupBlocksCheckout( page, null, true );
+
+		// check that there are saved payment methods.
+		await expect(
+			page.locator(
+				'input[id^="radio-control-wc-payment-method-saved-tokens-"]'
+			)
+		).toHaveCount( 1 );
+
+		await page
+			.locator(
+				'input[id^="radio-control-wc-payment-method-saved-tokens-"]'
+			)
+			.click();
+
+		await page.locator( 'text=Place order' ).click();
+
+		await page.waitForNavigation();
+		await expect( page.locator( 'h1.entry-title' ) ).toHaveText(
+			'Order received'
+		);
+	} );
+} );

tests/e2e/tests/checkout/blocks/sca-card.spec.js

@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/test';
+import config from 'config';
+import { payments } from '../../../utils';
+
+const {
+	emptyCart,
+	setupCart,
+	setupBlocksCheckout,
+	fillCreditCardDetails,
+} = payments;
+
+test( 'customer can checkout with a SCA card @smoke @blocks', async ( {
+	page,
+} ) => {
+	await emptyCart( page );
+	await setupCart( page );
+	await setupBlocksCheckout(
+		page,
+		config.get( 'addresses.customer.billing' )
+	);
+	await fillCreditCardDetails( page, config.get( 'cards.3ds' ) );
+	await page.locator( 'text=Place order' ).click();
+
+	// Wait until the SCA frame is available
+	while (
+		! page.frame( {
+			name: 'stripe-challenge-frame',
+		} )
+	) {
+		await page.waitForTimeout( 1000 );
+	}
+
+	await page
+		.frame( {
+			name: 'stripe-challenge-frame',
+		} )
+		.getByRole( 'button', { name: 'Complete' } )
+		.click();
+
+	await page.waitForNavigation();
+
+	await expect( page.locator( 'h1.entry-title' ) ).toHaveText(
+		'Order received'
+	);
+} );

tests/e2e/tests/checkout/blocks/subscription-product.spec.js

@@ -0,0 +1,54 @@
+import { test, expect } from '@playwright/test';
+import config from 'config';
+import { payments, api } from '../../../utils';
+
+const { setupBlocksCheckout, fillCreditCardDetails } = payments;
+
+let productId;
+
+test.beforeAll( async () => {
+	const product = {
+		...config.get( 'products.subscription' ),
+		regular_price: '9.99',
+		meta_data: [
+			{
+				key: '_subscription_period',
+				value: 'month',
+			},
+			{
+				key: '_subscription_period_interval',
+				value: '1',
+			},
+		],
+	};
+
+	productId = await api.create.product( product );
+} );
+
+test.afterAll( async () => {
+	await api.deletePost.product( productId );
+} );
+
+test( 'customer can purchase a subscription product @smoke @blocks @subscriptions', async ( {
+	page,
+} ) => {
+	await page.goto( `?p=${ productId }` );
+	await page.locator( 'button[name="add-to-cart"]' ).click();
+
+	// Subscriptions will create an account for this checkout, we need a random email.
+	const customerData = {
+		...config.get( 'addresses.customer.billing' ),
+		email:
+			Date.now() + '+' + config.get( 'addresses.customer.billing.email' ),
+	};
+
+	await setupBlocksCheckout( page, customerData );
+	await fillCreditCardDetails( page, config.get( 'cards.basic' ) );
+
+	await page.locator( 'text=Sign up now' ).click();
+	await page.waitForNavigation();
+
+	await expect( page.locator( 'h1.entry-title' ) ).toHaveText(
+		'Order received'
+	);
+} );