feat(functional-tests): Add payments-next coverage for checkout

.circleci/config.yml

@@ -923,6 +923,9 @@ jobs:
           environment:
             NODE_ENV: test
             MYSQL_CONFIG__HOST: 127.0.0.1
+            STRAPI_CLIENT_CONFIG__GRAPHQL_API_URI: ${STRAPI_CLIENT_GRAPHQL_API_URI}
+            STRAPI_CLIENT_CONFIG__API_KEY: ${STRAPI_CLIENT_API_KEY_PAYMENTS}
+            STRIPE_CONFIG__API_KEY: ${SUBHUB_STRIPE_APIKEY}
           no_output_timeout: 20m
       - run-playwright-tests:
           project: << parameters.project >>

packages/functional-tests/lib/fixtures/payments.ts

@@ -0,0 +1,19 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { test as standardTest, expect } from './standard';
+import { create as createPaymentPages } from '../../pages/payments';
+
+export type PaymentPOMS = ReturnType<typeof createPaymentPages>;
+
+export { expect };
+
+export const test = standardTest.extend<{
+  paymentPages: PaymentPOMS;
+}>({
+  paymentPages: async ({ target, page }, use) => {
+    const paymentPages = createPaymentPages(page, target);
+    await use(paymentPages);
+  },
+});

packages/functional-tests/lib/stripe-test-cards.ts

@@ -9,7 +9,7 @@
 
 export const StripeTestCards = {
   SUCCESS: '4242424242424242',
-  THREE_DS_REQUIRED: '4000002760003184',
+  THREE_DS_AUTHENTICATE: '4000000000003220',
   DECLINED: '4000000000000002',
   INSUFFICIENT_FUNDS: '4000000000009995',
   EXPIRED: '4000000000000069',

packages/functional-tests/pages/payments/base.ts

@@ -0,0 +1,71 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Page, expect } from '@playwright/test';
+import { BaseTarget } from '../../lib/targets/base';
+
+/**
+ * Shared locators and actions used by both CheckoutPage and UpgradePage.
+ * These map to DOM elements that appear on multiple payment flow pages
+ * (consent checkbox, success/error sections).
+ */
+export class BasePaymentPage {
+  constructor(
+    public page: Page,
+    readonly target: BaseTarget
+  ) {}
+
+  // Consent checkbox (shared CheckoutForm component)
+
+  get consentCheckbox() {
+    return this.page.locator(
+      'input[type="checkbox"][name="confirm"][aria-required]'
+    );
+  }
+
+  // Success page
+
+  get successHeading() {
+    return this.page.locator('#subscription-confirmation-heading');
+  }
+
+  get invoiceNumber() {
+    return this.page.getByText(/Invoice #/);
+  }
+
+  get successActionButton() {
+    return this.page
+      .locator('section[aria-labelledby="subscription-confirmation-heading"]')
+      .locator('a[role="button"]');
+  }
+
+  // Error page
+
+  get errorHeading() {
+    return this.page.locator('#page-information-heading');
+  }
+
+  get errorButton() {
+    return this.page.getByRole('link', {
+      name: /Contact Support|Manage my subscription|Try again/i,
+    });
+  }
+
+  // Shared actions
+
+  /**
+   * Check the consent checkbox. Waits for it to become interactive
+   * before clicking.
+   */
+  async checkConsent() {
+    await expect(this.consentCheckbox).toBeVisible({ timeout: 10_000 });
+    await expect(this.consentCheckbox).not.toHaveAttribute(
+      'aria-disabled',
+      'true',
+      { timeout: 10_000 }
+    );
+    await this.consentCheckbox.click();
+    await expect(this.consentCheckbox).toBeChecked();
+  }
+}