[NO CHANGELOG][Checkout Widget][CM-904] feat: E2E Testing for Checkou…

…t Widget Auto Updating (#2282)

Co-authored-by: zaidarain1 <[email protected]>

.github/workflows/pr.yaml

@@ -71,9 +71,47 @@ jobs:
       - name: Setup playwright
         uses: ./.github/actions/setup-playwright
 
+      - name: Prepare widgets bundle for Checkout Widgets example app
+        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

examples/checkout/sdk-load-widgets-with-nextjs/.env.example

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

examples/checkout/sdk-load-widgets-with-nextjs/.eslintrc.json

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

examples/checkout/sdk-load-widgets-with-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

examples/checkout/sdk-load-widgets-with-nextjs/README.md

@@ -0,0 +1,62 @@
+# Checkout SDK Widgets Example App
+
+This example app shows how to use the Checkout Widget, loaded from the Checkout SDK. It will cover scenarios including mounting, executing flows, and handling events.
+
+**Example App implementation progress:**
+- [x] Mounting Checkout Widget
+- [ ] Executing different flows
+- [ ] Events
+
+## 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
+```

examples/checkout/sdk-load-widgets-with-nextjs/next.config.mjs

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

examples/checkout/sdk-load-widgets-with-nextjs/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@examples/sdk-load-widgets-with-nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:remotewidgets": "USE_LOCAL_BUNDLE=false 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"
+  }
+}

examples/checkout/sdk-load-widgets-with-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,
+  },
+});

examples/checkout/sdk-load-widgets-with-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;
+}

examples/checkout/sdk-load-widgets-with-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>
+  );
+}

examples/checkout/sdk-load-widgets-with-nextjs/src/app/page.tsx

@@ -0,0 +1,20 @@
+'use client';
+import { Button, Heading } from '@biom3/react';
+import NextLink from 'next/link';
+
+export default function Home() {
+  return (<>
+    <Heading
+      size="medium"
+      className="mb-1">
+      Checkout SDK Widgets
+    </Heading>
+
+    <Button
+      className="mb-1"
+      size="medium"
+      rc={<NextLink href="/widgets" />}>
+      Mount Checkout Widgets
+    </Button>
+  </>);
+}

examples/checkout/sdk-load-widgets-with-nextjs/src/app/utils/setupCustom.ts

@@ -0,0 +1,22 @@
+// Import the checkout and config modules from the Immutable SDK package
+import { checkout, config } from '@imtbl/sdk';
+
+// Create a new Immutable SDK configuration
+
+// Replace with your Publishable Key from the Immutable Hub
+const PUBLISHABLE_KEY = process.env.NEXT_PUBLIC_PUBLISHABLE_KEY ?? '' 
+
+// Set the environment to SANDBOX for testnet or PRODUCTION for mainnet
+const baseConfig = {
+  environment: config.Environment.SANDBOX,
+  publishableKey: PUBLISHABLE_KEY,
+};
+
+// Instantiate the Checkout SDKs with the default configurations
+export const checkoutSDK = new checkout.Checkout({
+  baseConfig,
+  bridge: { enable: true },
+  onRamp: { enable: true },
+  swap: { enable: true },
+  // passport: <optionally add Passport instance>
+});

examples/checkout/sdk-load-widgets-with-nextjs/src/app/utils/setupDefault.ts

@@ -0,0 +1,5 @@
+// Import the checkout module from the Immutable SDK package
+import { checkout } from '@imtbl/sdk';
+
+// Instantiate the Checkout SDKs with the default configurations
+export const checkoutSDK = new checkout.Checkout();

examples/checkout/sdk-load-widgets-with-nextjs/src/app/utils/wrapper.tsx

@@ -0,0 +1,18 @@
+'use client';
+import { BiomeCombinedProviders, Stack } from '@biom3/react';
+
+export default function AppWrapper({
+    children,
+  }: Readonly<{
+    children: React.ReactNode;
+  }>) {
+    return (
+      <div className="flex-container">
+          <BiomeCombinedProviders>
+          <Stack alignItems="center">
+          { children }
+           </Stack>
+          </BiomeCombinedProviders>
+    </div>
+    );
+}

examples/checkout/sdk-load-widgets-with-nextjs/src/app/widgets/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { Box } from '@biom3/react';
+import { checkout } from '@imtbl/sdk';
+import { CheckoutFlowType, Widget, WidgetType } from '@imtbl/sdk/checkout';
+import { useEffect, useState } from 'react';
+
+const checkoutSDK = new checkout.Checkout();
+
+function Widgets() {
+
+  const [widget, setWidget] = useState<Widget<WidgetType.CHECKOUT>>();
+
+  useEffect(() => {
+
+    const loadWidgets = async () => {
+      const widgetsFactory = await checkoutSDK.widgets({ config: {} });
+
+      const widget = widgetsFactory.create(WidgetType.CHECKOUT, {})
+      setWidget(widget);
+    }
+
+    loadWidgets();
+  }, []);
+
+
+  useEffect(() => {
+    if (widget) {
+      widget.mount("widget-root", {
+        flow: CheckoutFlowType.WALLET,
+      });
+    }
+  }, [widget]);
+
+
+  return (
+    <div>
+      <Box
+        id="widget-root"
+        sx={{
+          minw: "430px",
+          minh: "650px",
+          bg: "base.color.translucent.standard.300",
+          brad: "base.borderRadius.x5",
+        }}
+      />
+    </div>
+  )
+}
+
+export default Widgets;