Fix e2e tests and rename SPE to OC (#4287)

* Fix e2e tests and rename SPE to OC

Author: malithsen

.github/workflows/e2e-tests.yml

@@ -14,7 +14,7 @@ jobs:
       fail-fast: false
       max-parallel: 10
       matrix:
-        checkout: [ 'Default', 'Legacy', 'SPE' ]
+        checkout: [ 'Default', 'Legacy', 'OptimizedCheckout' ]
 
     name: ${{ matrix.checkout }} WP=latest, WC=latest, PHP=7.4
     steps:
@@ -88,8 +88,8 @@ jobs:
         run: |
           if [ "${{ matrix.checkout }}" = "Legacy" ]; then
             npm run test:e2e-legacy
-          elif [ "${{ matrix.checkout }}" = "SPE" ]; then
-            npm run test:e2e-spe
+          elif [ "${{ matrix.checkout }}" = "OptimizedCheckout" ]; then
+            npm run test:e2e-oc
           else
             npm run test:e2e
           fi

.github/workflows/run-e2e-tests.yml

@@ -20,7 +20,7 @@ jobs:
       fail-fast: false
       max-parallel: 10
       matrix:
-        project: [ 'default', 'legacy', 'acss', 'spe' ]
+        project: [ 'default', 'legacy', 'acss', 'optimized-checkout' ]
 
     name: E2E - ${{ matrix.project }} (WP=${{ inputs.wp-version }}, WC=${{ inputs.wc-version }}, PHP=${{ inputs.php-version }})
     steps:

package.json

@@ -163,8 +163,8 @@
     "test:e2e-legacy-debug": "npm run test:e2e-legacy -- --debug",
     "test:e2e-lpm-acss": "./tests/e2e/bin/run-tests.sh --project=acss",
     "test:e2e-lpm-acss-debug": "npm run test:e2e-lpm-acss -- --debug",
-    "test:e2e-spe": "./tests/e2e/bin/run-tests.sh --project=spe",
-    "test:e2e-spe-debug": "npm run test:e2e-spe -- --debug",
+    "test:e2e-oc": "./tests/e2e/bin/run-tests.sh --project=optimized-checkout",
+    "test:e2e-oc-debug": "npm run test:e2e-oc -- --debug",
     "changelog": "node bin/changelog.js"
   },
   "engines": {

tests/e2e/bin/setup.sh

@@ -143,8 +143,8 @@ redirect_output cli wp option update _wcstripe_feature_lpm_ach 'yes'
 echo " - Enabling the ACSS feature flag"
 redirect_output cli wp option update _wcstripe_feature_lpm_acss 'yes'
 
-echo " - Enabling the SPE feature flag"
-redirect_output cli wp option update _wcstripe_feature_spe 'yes'
+echo " - Enabling the Optimized Checkout feature flag"
+redirect_output cli wp option update _wcstripe_feature_oc 'yes'
 
 step "Installing Woo Subscriptions"
 echo " - Fetching latest version"

tests/e2e/config/playwright.config.js

@@ -83,7 +83,7 @@ const config = {
 			testIgnore: [
 				'**/_legacy-experience/**',
 				'**/acss.spec.js',
-				'**/spe.spec.js',
+				'**/optimized-checkout.spec.js',
 			],
 			dependencies: [ 'default-setup' ],
 			use: { ...devices[ 'Desktop Chrome' ] },
@@ -111,14 +111,14 @@ const config = {
 			use: { ...devices[ 'Desktop Chrome' ] },
 		},
 		{
-			name: 'spe-setup',
-			testMatch: '/spe.setup.js',
+			name: 'oc-setup',
+			testMatch: '/optimized-checkout.setup.js',
 			use: { ...devices[ 'Desktop Chrome' ] },
 		},
 		{
-			name: 'spe',
-			testMatch: '**/spe.spec.js',
-			dependencies: [ 'spe-setup' ],
+			name: 'optimized-checkout',
+			testMatch: '**/optimized-checkout.spec.js',
+			dependencies: [ 'oc-setup' ],
 			use: { ...devices[ 'Desktop Chrome' ] },
 		},
 	],

tests/e2e/tests/checkout/blocks/spe.spec.js renamed to tests/e2e/tests/checkout/blocks/optimized-checkout.spec.js

@@ -6,13 +6,13 @@ import { payments, api, user } from '../../../utils';
 const {
 	emptyCart,
 	setupCart,
+	setupOptimizedCheckout,
 	setupBlocksCheckout,
-	setupSPECheckout,
-	fillSPEDetails,
+	fillOCDetails,
 	clickPlaceOrder,
 } = payments;
 
-test.describe( 'SPE payment tests @blocks', () => {
+test.describe( 'Optimized Checkout payment tests @blocks', () => {
 	let username, userEmail;
 
 	test.describe.configure( { mode: 'serial' } );
@@ -36,17 +36,19 @@ test.describe( 'SPE payment tests @blocks', () => {
 		} );
 	} );
 
-	test( 'customer can pay with SPE @smoke', async ( { page } ) => {
-		await setupSPECheckout( page, 'blocks' );
-		await fillSPEDetails( page, config.get( 'cards.basic' ) );
+	test( 'customer can pay with Optimized Checkout @smoke', async ( {
+		page,
+	} ) => {
+		await setupOptimizedCheckout( page, 'blocks' );
+		await fillOCDetails( page, config.get( 'cards.basic' ) );
 		await clickPlaceOrder( page );
 		await page.waitForURL( '**/checkout/order-received/**' );
 		await expect( page.locator( 'h1.entry-title' ) ).toHaveText(
 			'Order received'
 		);
 	} );
 
-	test( 'customer can save and reuse SPE payment method @smoke', async ( {
+	test( 'customer can save and reuse Optimized Checkout payment method @smoke', async ( {
 		page,
 	} ) => {
 		// First order - Save the payment method.
@@ -58,9 +60,9 @@ test.describe( 'SPE payment tests @blocks', () => {
 					username,
 					config.get( 'users.customer.password' )
 				);
-				await setupSPECheckout( page, 'blocks' );
+				await setupOptimizedCheckout( page, 'blocks' );
 				await page.getByLabel( 'Save payment information' ).click();
-				await fillSPEDetails( page, config.get( 'cards.basic' ) );
+				await fillOCDetails( page, config.get( 'cards.basic' ) );
 				await clickPlaceOrder( page );
 				await page.waitForURL( '**/checkout/order-received/**' );
 				await expect( page.locator( 'h1.entry-title' ) ).toHaveText(

tests/e2e/tests/checkout/shortcode/spe.spec.js renamed to tests/e2e/tests/checkout/shortcode/optimized-checkout.spec.js

@@ -7,12 +7,12 @@ const {
 	emptyCart,
 	setupCart,
 	setupShortcodeCheckout,
-	setupSPECheckout,
-	fillSPEDetails,
+	setupOptimizedCheckout,
+	fillOCDetails,
 	clickPlaceOrder,
 } = payments;
 
-test.describe( 'SPE payment tests @shortcode', () => {
+test.describe( 'Optimized Checkout payment tests @shortcode', () => {
 	let username, userEmail;
 
 	test.describe.configure( { mode: 'serial' } );
@@ -36,17 +36,19 @@ test.describe( 'SPE payment tests @shortcode', () => {
 		} );
 	} );
 
-	test( 'customer can pay with SPE @smoke', async ( { page } ) => {
-		await setupSPECheckout( page, 'shortcode' );
-		await fillSPEDetails( page, config.get( 'cards.basic' ), 'shortcode' );
+	test( 'customer can pay with Optimized Checkout @smoke', async ( {
+		page,
+	} ) => {
+		await setupOptimizedCheckout( page, 'shortcode' );
+		await fillOCDetails( page, config.get( 'cards.basic' ), 'shortcode' );
 		await clickPlaceOrder( page );
 		await page.waitForURL( '**/checkout/order-received/**' );
 		await expect( page.locator( 'h1.entry-title' ) ).toHaveText(
 			'Order received'
 		);
 	} );
 
-	test( 'customer can save and reuse SPE payment method @smoke', async ( {
+	test( 'customer can save and reuse Optimized Checkout payment method @smoke', async ( {
 		page,
 	} ) => {
 		// First order - Save the payment method.
@@ -58,8 +60,8 @@ test.describe( 'SPE payment tests @shortcode', () => {
 					username,
 					config.get( 'users.customer.password' )
 				);
-				await setupSPECheckout( page, 'shortcode' );
-				await fillSPEDetails(
+				await setupOptimizedCheckout( page, 'shortcode' );
+				await fillOCDetails(
 					page,
 					config.get( 'cards.basic' ),
 					'shortcode'
@@ -70,7 +72,7 @@ test.describe( 'SPE payment tests @shortcode', () => {
 					} )
 					.check( { force: true } );
 				await clickPlaceOrder( page );
-				await fillSPEDetails(
+				await fillOCDetails(
 					page,
 					config.get( 'cards.basic' ),
 					'shortcode'

tests/e2e/tests/optimized-checkout.setup.js

@@ -0,0 +1,35 @@
+import { test as setup, expect } from '@playwright/test';
+
+setup(
+	'Configure store for Optimized Checkout tests',
+	async ( { browser } ) => {
+		const adminContext = await browser.newContext( {
+			storageState: process.env.ADMINSTATE,
+		} );
+
+		const page = await adminContext.newPage();
+
+		// Enable SPE in the admin.
+		await page.goto(
+			'/wp-admin/admin.php?page=wc-settings&tab=checkout&section=stripe&panel=settings'
+		);
+
+		const checkbox = page.getByTestId( 'single-payment-element-checkbox' );
+		const isChecked = await checkbox.isChecked();
+
+		if ( ! isChecked ) {
+			await checkbox.click();
+			await page.click( 'text=Save changes' );
+			await expect(
+				page.locator(
+					'.components-snackbar__content:has-text("Settings saved.")'
+				)
+			).toBeVisible();
+			await expect(
+				page.getByTestId( 'single-payment-element-checkbox' )
+			).toBeChecked();
+		}
+
+		await adminContext.close();
+	}
+);

tests/e2e/tests/spe.setup.js

@@ -528,7 +528,7 @@ export const setupACSSCheckout = async ( page, checkoutType = 'blocks' ) => {
 };
 
 /**
- * Set up the checkout page for Stripe Payment Element (SPE).
+ * Set up the checkout page for Optimized Checkout (OC).
  *
  * @param {Page} page Playwright page fixture.
  * @param {string} checkoutType The type of checkout ('blocks' or 'shortcode').
@@ -538,7 +538,7 @@ export const setupACSSCheckout = async ( page, checkoutType = 'blocks' ) => {
  * @returns {Promise<void>} Resolves when setup is complete.
  * @throws {Error} If iframe cannot be found or initialization fails.
  */
-export const setupSPECheckout = async (
+export const setupOptimizedCheckout = async (
 	page,
 	checkoutType = 'blocks',
 	options = { timeout: 10000, skipCartSetup: false }
@@ -605,7 +605,9 @@ export const setupSPECheckout = async (
 		// Select the card payment method
 		await paymentFrame.getByRole( 'button', { name: 'Card' } ).click();
 	} catch ( error ) {
-		throw new Error( `Failed to set up SPE checkout: ${ error.message }` );
+		throw new Error(
+			`Failed to set up Optimized Checkout: ${ error.message }`
+		);
 	}
 };
 
@@ -745,13 +747,13 @@ export async function handleCheckoutCashAppPay(
 }
 
 /**
- * Fill in the payment details for Stripe Payment Element (SPE) checkout.
+ * Fill in the payment details for Optimized Checkout (OC).
  *
  * @param {Page} page Playwright page fixture.
  * @param {Object} card The CC info in the format provided on the test-data.
  * @param {string} checkoutType The type of checkout ('blocks' or 'shortcode').
  */
-export const fillSPEDetails = async ( page, card, checkoutType = 'blocks' ) => {
+export const fillOCDetails = async ( page, card, checkoutType = 'blocks' ) => {
 	// Determine the appropriate iframe selector based on checkout type
 	const iframeSelector =
 		checkoutType === 'blocks'