[CM-1017][CM-986] feat: Simplify widget e2e (#2346)

.github/workflows/pr.yaml

@@ -71,48 +71,12 @@ jobs:
       - name: Setup playwright
         uses: ./.github/actions/setup-playwright
 
-      - name: Prepare widgets bundle for Checkout Widgets example app
+      - name: Prepare widgets bundle for @examples/sdk-load-widgets-with-nextjs
         run: yarn workspace @imtbl/checkout-widgets prepare:examplewidgets
 
       - name: Test examples
         run: yarn test:examples
 
-  build-lint-test-example-widgets-with-sdk:
-    name: Build, Lint & Test Example Widgets with latest SDK
-    runs-on: ubuntu-latest-8-cores
-    env:
-      NODE_OPTIONS: --max-old-space-size=14366
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.ref }}
-          fetch-depth: 0
-
-      - name: setup
-        uses: ./.github/actions/setup
-
-      - name: Setup playwright
-        uses: ./.github/actions/setup-playwright
-
-      - name: Install SDK at current version
-        run: yarn workspace @examples/sdk-load-widgets-with-nextjs add @imtbl/sdk@$(npm view @imtbl/sdk version)
-
-      - name: Build next app
-        run: yarn workspace @examples/sdk-load-widgets-with-nextjs build
-
-      - name: Build everything
-        run: yarn build
-
-      - name: Lint examples
-        run: yarn workspace @examples/sdk-load-widgets-with-nextjs lint
-
-      - name: Prepare widgets bundle for Checkout Widgets example app
-        run: yarn workspace @imtbl/checkout-widgets prepare:examplewidgets
-
-      - name: Test Widget example
-        run: yarn workspace @examples/sdk-load-widgets-with-nextjs test
-
   func-tests:
     name: Functional tests
     runs-on: ubuntu-latest-8-cores
@@ -155,5 +119,17 @@ jobs:
       - name: Prepare tests
         run: yarn prepare:tests
 
+      - name: Install SDK at current version for @tests/checkout-widgets-nextjs
+        run: yarn workspace @tests/checkout-widgets-nextjs add @imtbl/sdk@$(npm view @imtbl/sdk version)
+
+      - name: Build @tests/checkout-widgets-nextjs
+        run: yarn workspace @tests/checkout-widgets-nextjs build
+
+      - name: Prepare widgets bundle for @tests/checkout-widgets-nextjs
+        run: yarn workspace @imtbl/checkout-widgets prepare:testwidgets
+
+      - name: Setup playwright
+        uses: ./.github/actions/setup-playwright
+
       - name: Run functional tests
         run: FORCE_COLOR=1 yarn workspaces foreach -Apt --include='@tests/**' run func-test:ci

.gitignore

@@ -31,4 +31,8 @@ nx-cloud.env
 dep-graph.json
 examples/**/.env
 examples/**/playwright-report/
-examples/**/test-results/
+examples/**/test-results/
+
+tests/**/.env
+tests/**/playwright-report/
+tests/**/test-results/

examples/checkout/sdk-load-widgets-with-nextjs/tests/utils/intercept-checkout-config.ts

@@ -0,0 +1,29 @@
+import { Page } from "@playwright/test";
+
+export type CheckoutVersionConfig = {
+  compatibleVersionMarkers: string[];
+};
+
+export const interceptCheckoutVersionConfig = async (page: Page, checkoutWidgetsVersion: CheckoutVersionConfig) => {
+  return page.route('https://checkout-api.sandbox.immutable.com/v1/config', async (route) => {
+    const response = await route.fetch();
+    const json = await response.json();
+
+    // Modify the compatibleVersionMarkers
+    json.checkoutWidgetsVersion = checkoutWidgetsVersion;
+
+    // Fulfill the request with the modified JSON
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(json),
+    });
+
+    console.log(`
+    Checkout config successfully intercepted:
+    Request:    ${route.request().url()}
+    Modified:   checkoutWidgetsVersion = ${JSON.stringify(checkoutWidgetsVersion)}
+    ------------------------------
+    `);
+  });
+};

examples/checkout/sdk-load-widgets-with-nextjs/tests/version.spec.ts

@@ -1,13 +1,26 @@
 import { test, expect } from "@playwright/test";
 import { interceptWidgets } from "./utils/intercept-widgets";
+import { CheckoutVersionConfig, interceptCheckoutVersionConfig } from "./utils/intercept-checkout-config";
 
 const USE_REMOTE_WIDGETS = process.env.USE_REMOTE_WIDGETS === 'true';
 
+const INTERCEPT_CHECKOUT_VERSION_CONFIG = process.env.INTERCEPT_CHECKOUT_VERSION_CONFIG;
+
+
+
 test.beforeEach(async ({ page }) => {
+
   if (!USE_REMOTE_WIDGETS) {
     await interceptWidgets(page);
   }
 
+  if (INTERCEPT_CHECKOUT_VERSION_CONFIG) {
+    const checkoutWidgetsVersion: CheckoutVersionConfig = {
+      compatibleVersionMarkers: [INTERCEPT_CHECKOUT_VERSION_CONFIG]
+    };
+    await interceptCheckoutVersionConfig(page, checkoutWidgetsVersion);
+  }
+
   await page.goto("/widgets");
 });
 

packages/checkout/widgets-lib/package.json

@@ -104,11 +104,12 @@
     "build": "yarn clean && NODE_ENV=production rollup --config rollup.config.js",
     "build:analyse": "yarn build --plugin visualizer",
     "build:local": "yarn clean && yarn build && mkdir -p ../widgets-sample-app/public/lib/js && cp dist/*.js ../widgets-sample-app/public/lib/js/",
-    "prepare:examplewidgets": "yarn workspace @examples/sdk-load-widgets-with-nextjs exec mkdir -p tests/utils/local-widgets-js/ && cp $(yarn workspace @imtbl/sdk exec pwd)/dist/browser/checkout/*.js $(yarn workspace @examples/sdk-load-widgets-with-nextjs exec pwd)/tests/utils/local-widgets-js/",
     "clean": "rimraf ./dist",
     "d": "rollup --config rollup.config.js",
     "lint": "eslint ./src --ext .ts,.jsx,.tsx --max-warnings=0",
     "lint:fix": "eslint ./src --ext .ts,.jsx,.tsx --max-warnings=0 --fix",
+    "prepare:examplewidgets": "yarn workspace @examples/sdk-load-widgets-with-nextjs exec mkdir -p tests/utils/local-widgets-js/ && cp $(yarn workspace @imtbl/sdk exec pwd)/dist/browser/checkout/*.js $(yarn workspace @examples/sdk-load-widgets-with-nextjs exec pwd)/tests/utils/local-widgets-js/",
+    "prepare:testwidgets": "yarn workspace @tests/checkout-widgets-nextjs exec mkdir -p tests/utils/local-widgets-js/ && cp $(yarn workspace @imtbl/sdk exec pwd)/dist/browser/checkout/*.js $(yarn workspace @tests/checkout-widgets-nextjs exec pwd)/tests/utils/local-widgets-js/",
     "start": "yarn clean && NODE_ENV=development rollup --config rollup.config.js --watch",
     "test": "jest test --passWithNoTests",
     "test:watch": "jest test --passWithNoTests --watch",

tests/func-tests/checkout/widgets-nextjs/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_PUBLISHABLE_KEY=

tests/func-tests/checkout/widgets-nextjs/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "next/core-web-vitals"
+}

tests/func-tests/checkout/widgets-nextjs/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+/tests/utils/local-widgets-js
+/playwright-report/
+/test-results
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

tests/func-tests/checkout/widgets-nextjs/README.md

@@ -0,0 +1,66 @@
+# Checkout SDK Widgets Auto Updating Testing
+
+This test covers autoupdating of the Checkout SDK's Widgets.
+See https://immutable.atlassian.net/wiki/spaces/PR/pages/2796814550/Checkout+Widgets+Auto-Updating+Docs
+
+## Getting Started
+
+Install your dependencies:
+
+```bash
+yarn install
+```
+
+Copy over the `.env.example` file to `.env` and fill in the required environment variables.
+
+## Required Environment Variables
+
+- NEXT_PUBLIC_PUBLISHABLE_KEY // replace with your publishable API key from Hub
+
+## Running locally
+
+```bash
+yarn dev
+```
+
+## E2E Testing
+
+There are tests covering the auto updating of the Checkout Widget.
+
+Build the app:
+
+```bash
+yarn build
+```
+
+Run tests with latest compatible remote bundle of the widgets:
+
+```bash
+yarn test:remotewidgets
+```
+
+To run these tests using a local bundle of the widgets, first build the entire Checkout SDK from the root of `ts-immutable-sdk`:
+
+```bash
+yarn build
+```
+
+Copy over the created widgets bundle to use for testing:
+
+```bash
+yarn workspace @examples/sdk-load-widgets-with-nextjs prepare:widgets
+```
+
+Run tests against the local bundle:
+
+```bash
+yarn test
+```
+
+### Validating Widget Breaking Changes
+
+We can inject a Checkout Widgets Version Config into the app to validate auto updating.
+
+```bash
+INTERCEPT_CHECKOUT_VERSION_CONFIG=1.58.0 yarn workspace @examples/sdk-load-widgets-with-nextjs test
+```

tests/func-tests/checkout/widgets-nextjs/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

tests/func-tests/checkout/widgets-nextjs/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@tests/checkout-widgets-nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "func-test:ci": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:remotewidgets": "USE_REMOTE_WIDGETS=true playwright test"
+  },
+  "dependencies": {
+    "@biom3/react": "^0.25.21",
+    "@ethersproject/providers": "^5.7.2",
+    "@imtbl/sdk": "latest",
+    "next": "14.2.7",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.45.3",
+    "@types/node": "^20",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.7",
+    "typescript": "^5.6.2"
+  }
+}

tests/func-tests/checkout/widgets-nextjs/playwright.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: "80%",
+  reporter: "html",
+
+  use: {
+    baseURL: "http://localhost:3000",
+    trace: "on-first-retry",
+  },
+
+  projects: [
+    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
+    { name: "firefox", use: { ...devices["Desktop Firefox"] } },
+    { name: "webkit", use: { ...devices["Desktop Safari"] } },
+
+    { name: "Mobile Chrome", use: { ...devices["Pixel 5"] } },
+    { name: "Mobile Safari", use: { ...devices["iPhone 12"] } },
+  ],
+
+  webServer: {
+    command: "yarn start",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+  },
+});

tests/func-tests/checkout/widgets-nextjs/src/app/globals.css

@@ -0,0 +1,18 @@
+html, body {
+    height: 100%;
+}
+body {
+    margin: 0;
+}
+.flex-container {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mb-1 {
+    margin-bottom: 1rem;
+}

tests/func-tests/checkout/widgets-nextjs/src/app/layout.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import AppWrapper from "./utils/wrapper";
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Checkout SDK - Load and Mount Widgets",
+  description: "Examples of how mount Checkout SDK Widgets",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <AppWrapper>
+          {children}
+        </AppWrapper>
+      </body>
+    </html>
+  );
+}