Run E2E test on CI

.github/workflows/test.yml

@@ -28,8 +28,33 @@ jobs:
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           files: lcov.info
-
-  ts:
+  #   ts:
+  #     runs-on: ubuntu-latest
+  #     steps:
+  #       - uses: actions/checkout@v4
+  #       - uses: actions/setup-node@v4
+  #         with:
+  #           node-version: 20.x
+  #       - uses: actions/cache@v4
+  #         with:
+  #           path: ~/.pnpm-store
+  #           key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+  #           restore-keys: |
+  #             ${{ runner.os }}-pnpm-
+  #       - run: corepack enable pnpm
+  #       - uses: pnpm/action-setup@v4
+  #         id: pnpm-install
+  #         with:
+  #           version: 9.7.0
+  #           run_install: false
+  #       - run: pnpm install --frozen-lockfile
+  #       - run: pnpm test:ci --coverage
+  #       - uses: codecov/codecov-action@v3
+  #         with:
+  #           token: ${{ secrets.CODECOV_TOKEN }}
+  #           files: coverage/lcov.info
+  e2e:
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -42,15 +67,23 @@ jobs:
           key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-
-      - run: corepack enable pnpm
       - uses: pnpm/action-setup@v4
         id: pnpm-install
         with:
           version: 9.7.0
           run_install: false
       - run: pnpm install --frozen-lockfile
-      - run: pnpm test:ci --coverage
-      - uses: codecov/codecov-action@v3
+      - name: Install Playwright Browsers
+        run: pnpm example:next e2e:deps
+      - name: Run Playwright tests
+        run: |
+          cat <<EOF >examples/starknet-react-next/.env
+          BRANCH_NAME=${{ github.head_ref }}
+          EOF
+          pnpm e2e:ci
+      - uses: actions/upload-artifact@v4
+        if: always()
         with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          files: coverage/lcov.info
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

examples/starknet-react-next/package.json

@@ -5,8 +5,9 @@
   "scripts": {
     "dev": "next dev -p 3002",
     "build": "next build",
+    "e2e:deps": "pnpm playwright install --with-deps",
     "e2e": "playwright test",
-    "e2e:ui": "playwright test --ui",
+    "e2e:ui": "pnpm e2e --ui",
     "start": "next start -p 3002",
     "lint": "next lint",
     "format": "prettier --write ./src",
@@ -31,6 +32,7 @@
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "autoprefixer": "^10.4.18",
+    "dotenv": "^16.4.5",
     "eslint": "^8.23.0",
     "eslint-config-next": "^12.2.5",
     "postcss": "^8.4.35",

examples/starknet-react-next/playwright.config.ts

@@ -1,4 +1,12 @@
 import { defineConfig, devices } from "@playwright/test";
+import dotenv from "dotenv";
+import path from "path";
+
+dotenv.config({ path: path.resolve(__dirname, ".env") });
+
+const CI_BASE_URL = process.env.BRANCH_NAME
+  ? `https://cartridge-starknet-react-next-git-${process.env.BRANCH_NAME}.preview.cartridge.gg`
+  : "https://cartridge-starknet-react-next.preview.cartridge.gg";
 
 export default defineConfig({
   testDir: "./tests",
@@ -7,7 +15,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? "dot" : "list",
   use: {
-    baseURL: "http://localhost:3002",
+    baseURL: process.env.CI ? CI_BASE_URL : "http://localhost:3002",
     trace: "on-first-retry",
   },
   projects: [
@@ -31,5 +39,6 @@ export default defineConfig({
   //   reuseExistingServer: !process.env.CI,
   //   stdout: "pipe",
   //   stderr: "pipe",
+  //   timeout: 1000 * 60,
   // },
 });

examples/starknet-react-next/src/app/page.tsx

@@ -1,12 +1,21 @@
+"use client";
+
 import { TransferEth } from "components/TransferEth";
 import { ConnectWallet } from "components/ConnectWallet";
 import { InvalidTxn } from "components/InvalidTxn";
 import { SignMessage } from "components/SignMessage";
 import { DelegateAccount } from "components/DelegateAccount";
 import { ColorModeToggle } from "components/ColorModeToggle";
 import { Menu } from "components/Menu";
+import { KEYCHAIN_URL } from "components/providers/StarknetProvider";
+import { useEffect, useState } from "react";
 
 export default function Home() {
+  const [debug, setDebug] = useState(false);
+  useEffect(() => {
+    setDebug(!!new URLSearchParams(window.location.search).get("debug"));
+  }, []);
+
   return (
     <div className="flex flex-col p-4 gap-4">
       <div className="flex justify-between">
@@ -15,6 +24,24 @@ export default function Home() {
         </h2>
         <ColorModeToggle />
       </div>
+
+      {debug && (
+        <div>
+          <p>Keychain URL: {KEYCHAIN_URL}</p>
+          <p>
+            NEXT_PUBLIC_VERCEL_ENV: {String(process.env.NEXT_PUBLIC_VERCEL_ENV)}
+          </p>
+          <p>
+            NEXT_PUBLIC_VERCEL_BRANCH_URL:{" "}
+            {String(process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL)}
+          </p>
+          <p>
+            NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL:{" "}
+            {String(process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL)}
+          </p>
+        </div>
+      )}
+
       <ConnectWallet />
       <Menu />
       <TransferEth />

examples/starknet-react-next/src/components/providers/StarknetProvider.tsx

@@ -25,6 +25,17 @@ const ETH_TOKEN_ADDRESS =
 // const PAPER_TOKEN_ADDRESS =
 //   "0x0410466536b5ae074f7fea81e5533b8134a9fa08b3dd077dd9db08f64997d113";
 
+export const KEYCHAIN_URL =
+  !process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL ||
+  process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL.split(".")[0] ===
+    "cartridge-starknet-react-next"
+    ? process.env.XFRAME_URL
+    : "https://" +
+      (process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL ?? "").replace(
+        "cartridge-starknet-react-next",
+        "keychain",
+      );
+
 const cartridge = new CartridgeConnector({
   policies: [
     {
@@ -50,16 +61,7 @@ const cartridge = new CartridgeConnector({
       method: "allowance",
     },
   ],
-  url:
-    !process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL ||
-    process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL.split(".")[0] ===
-      "cartridge-starknet-react-next"
-      ? process.env.XFRAME_URL
-      : "https://" +
-        (process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL ?? "").replace(
-          "cartridge-starknet-react-next",
-          "keychain",
-        ),
+  url: KEYCHAIN_URL,
   rpc: process.env.NEXT_PUBLIC_RPC_SEPOLIA,
   paymaster: {
     caller: shortString.encodeShortString("ANY_CALLER"),

examples/starknet-react-next/tests/connect.spec.ts

@@ -12,7 +12,7 @@ test.beforeEach(async ({ page }) => {
   await webauthn.addVirtualAuthenticator();
 });
 
-test("Sign up -> Disconnect -> Log in", async ({ page }) => {
+test("Sign up -> Create session -> Disconnect -> Log in", async ({ page }) => {
   const keychain = new Keychain({ page });
 
   await keychain.signup();

package.json

@@ -8,8 +8,10 @@
     "dev": "turbo build:deps dev",
     "e2e": "turbo build:deps dev e2e",
     "e2e:ui": "turbo build:deps dev e2e:ui",
+    "e2e:ci": "turbo build:deps e2e",
     "lint": "turbo lint format:check",
     "format": "turbo format",
+    "format:check": "turbo format:check",
     "clean": "git clean -xdf && pnpm store prune",
     "release": "pnpm build && pnpm changeset publish",
     "keychain": "pnpm --filter @cartridge/keychain",
@@ -19,9 +21,7 @@
     "book": "pnpm --filter @cartridge/docs",
     "ui": "pnpm --filter @cartridge/ui",
     "ui:next": "pnpm --filter @cartridge/ui-next",
-    "example:next": "pnpm --filter starknet-react-next",
-    "test": "pnpm keychain test",
-    "test:ci": "pnpm keychain test:ci"
+    "example:next": "pnpm --filter starknet-react-next"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.2",

packages/keychain/package.json

@@ -4,13 +4,12 @@
   "private": true,
   "scripts": {
     "dev": "TARGET_ORIGIN=\"*\" next dev -p 3001",
+    "dev:ci": "TARGET_ORIGIN=\"*\" NEXT_PUBLIC_API_URL=\"https://integration.cartridge.gg/\" next dev -p 3001",
     "build": "TARGET_ORIGIN=\"https://x.cartridge.gg/\" next build",
     "start": "next start",
     "lint": "next lint",
     "format": "prettier --write ./src",
     "format:check": "prettier --check ./src",
-    "test": "jest --watch",
-    "test:ci": "jest --ci",
     "gen": "graphql-codegen --config codegen.yaml"
   },
   "dependencies": {
@@ -62,8 +61,6 @@
     "@types/react-dom": "^18.2.7",
     "eslint": "^8.23.0",
     "eslint-config-next": "^12.2.5",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
     "prettier": "^2.7.1",
     "typescript": "^5.4.5"
   },