[ECO-2262] Fix playwright tests (#294)

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

.github/workflows/playwright.yaml → .github/workflows/frontend-e2e.yaml

@@ -3,7 +3,7 @@ jobs:
   test:
     defaults:
       run:
-        working-directory: 'src/typescript/frontend'
+        working-directory: 'src/typescript'
     runs-on: 'ubuntu-latest'
     steps:
     - uses: 'actions/checkout@v4'
@@ -15,22 +15,31 @@ jobs:
     - env:
         GITHUB_ACCESS_TOKEN: '${{ secrets.TRADING_VIEW_REPO_ACCESS_TOKEN }}'
         TRADING_VIEW_REPO_OWNER: '${{ secrets.TRADING_VIEW_REPO_OWNER }}'
-      name: 'Prepare CI env'
-      run: 'pnpm run playwright-preps'
+      name: 'Test'
+      run: 'echo -n $TRADING_VIEW_REPO_OWNER | wc -c'
+    - env:
+        GITHUB_ACCESS_TOKEN: '${{ secrets.TRADING_VIEW_REPO_ACCESS_TOKEN }}'
+        TRADING_VIEW_REPO_OWNER: '${{ secrets.TRADING_VIEW_REPO_OWNER }}'
+      name: 'Clone submodule'
+      run: 'pnpm run submodule'
+    - name: 'Run pnpm i'
+      run: 'pnpm i'
     - name: 'Install Playwright Browsers'
-      run: 'pnpm exec playwright install --with-deps'
+      run: 'pnpm run playwright:install'
     - name: 'Copy env file'
-      run: 'cp ../env.ci .env'
+      run: 'cp ci.env .env'
+    - name: 'Copy docker env file'
+      run: 'cp ../docker/example.local.env ../docker/.env'
     - name: 'Run Playwright tests'
-      run: 'pnpm exec playwright test'
+      run: 'pnpm run e2e:frontend'
     - if: 'always()'
       uses: 'actions/upload-artifact@v4'
       with:
         name: 'playwright-report'
         path: 'playwright-report/'
         retention-days: 30
     timeout-minutes: 60
-name: 'Playwright Tests'
+name: 'Run the Playwright E2E tests'
 "on":
   pull_request:
     branches:

cfg/cspell-frontend-dictionary.txt

@@ -49,3 +49,4 @@ ipinfo
 localstorage
 vpnapi
 ctrls
+dockerenv

src/docker/compose.yaml

@@ -93,17 +93,20 @@ services:
     - '${PROCESSOR_WS_PORT}:${PROCESSOR_WS_PORT}'
 
   frontend:
+    extra_hosts:
+    - 'host.docker.internal:host-gateway'
     build:
       context: '../..'
       dockerfile: 'src/docker/frontend/Dockerfile'
       args:
         HASH_SEED: '${HASH_SEED}'
+        EMOJICOIN_INDEXER_URL: 'http://localhost:3000'
         NEXT_PUBLIC_APTOS_NETWORK: '${APTOS_NETWORK}'
         NEXT_PUBLIC_INTEGRATOR_ADDRESS: '${EMOJICOIN_INTEGRATOR_ADDRESS}'
         NEXT_PUBLIC_INTEGRATOR_FEE_RATE_BPS: '${FEE_RATE_BPS}'
         NEXT_PUBLIC_IS_ALLOWLIST_ENABLED: 'false'
         NEXT_PUBLIC_MODULE_ADDRESS: '${EMOJICOIN_MODULE_ADDRESS}'
-        NEXT_PUBLIC_MQTT_URL: 'ws://localhost:${BROKER_PORT}'
+        NEXT_PUBLIC_BROKER_URL: 'ws://localhost:${BROKER_PORT}'
         NEXT_PUBLIC_REWARDS_MODULE_ADDRESS: >-
           ${EMOJICOIN_REWARDS_MODULE_ADDRESS}
         REVALIDATION_TIME: '${REVALIDATION_TIME}'
@@ -113,12 +116,13 @@ services:
     - 'frontend'
     environment:
       HASH_SEED: '${HASH_SEED}'
+      EMOJICOIN_INDEXER_URL: 'http://localhost:3000'
       NEXT_PUBLIC_APTOS_NETWORK: '${APTOS_NETWORK}'
       NEXT_PUBLIC_INTEGRATOR_ADDRESS: '${EMOJICOIN_INTEGRATOR_ADDRESS}'
       NEXT_PUBLIC_INTEGRATOR_FEE_RATE_BPS: '${FEE_RATE_BPS}'
       NEXT_PUBLIC_IS_ALLOWLIST_ENABLED: 'false'
       NEXT_PUBLIC_MODULE_ADDRESS: '${EMOJICOIN_MODULE_ADDRESS}'
-      NEXT_PUBLIC_MQTT_URL: 'ws://localhost:${BROKER_PORT}'
+      NEXT_PUBLIC_BROKER_URL: 'ws://localhost:${BROKER_PORT}'
       NEXT_PUBLIC_REWARDS_MODULE_ADDRESS: '${EMOJICOIN_REWARDS_MODULE_ADDRESS}'
       REVALIDATION_TIME: '${REVALIDATION_TIME}'
     healthcheck:

src/docker/example.local.env

@@ -77,6 +77,3 @@ FEE_RATE_BPS="100"
 
 # Secret hash seed.
 HASH_SEED="some random string that is not public"
-
-# The URL for the indexer's `postgrest` REST API.
-EMOJICOIN_INDEXER_URL="http://localhost:3000"

src/docker/frontend/Dockerfile

@@ -8,7 +8,7 @@ RUN ["mv", "/root/.local/share/pnpm/pnpm", "/usr/local/bin"]
 
 COPY . /
 
-WORKDIR /src/typescript/frontend
+WORKDIR /src/typescript
 
 ARG HASH_SEED \
     NEXT_PUBLIC_APTOS_NETWORK \
@@ -19,8 +19,7 @@ ARG HASH_SEED \
     NEXT_PUBLIC_REWARDS_MODULE_ADDRESS \
     NEXT_PUBLIC_BROKER_URL \
     REVALIDATION_TIME \
-    EMOJICOIN_INDEXER_URL \
-    EMOJICOIN_INDEXER_API_KEY
+    EMOJICOIN_INDEXER_URL
 ENV HASH_SEED=$HASH_SEED \
     NEXT_PUBLIC_APTOS_NETWORK=$NEXT_PUBLIC_APTOS_NETWORK \
     NEXT_PUBLIC_INTEGRATOR_ADDRESS=$NEXT_PUBLIC_INTEGRATOR_ADDRESS \
@@ -30,9 +29,8 @@ ENV HASH_SEED=$HASH_SEED \
     NEXT_PUBLIC_REWARDS_MODULE_ADDRESS=$NEXT_PUBLIC_REWARDS_MODULE_ADDRESS \
     NEXT_PUBLIC_BROKER_URL=$NEXT_PUBLIC_BROKER_URL \
     REVALIDATION_TIME=$REVALIDATION_TIME \
-    EMOJICOIN_INDEXER_URL=$EMOJICOIN_INDEXER_URL \
-    EMOJICOIN_INDEXER_API_KEY=${EMOJICOIN_INDEXER_API_KEY}
+    EMOJICOIN_INDEXER_URL=$EMOJICOIN_INDEXER_URL
 
 RUN ["bash", "-c", "pnpm install && pnpm run build"]
 
-CMD ["pnpm", "run", "start", "-H", "0.0.0.0"]
+CMD ["bash", "-c", "pnpm run start -- -H 0.0.0.0"]

src/typescript/ci.env

@@ -1,3 +1,4 @@
+APTOS_NETWORK="local"
 NEXT_PUBLIC_APTOS_NETWORK="local"
 NEXT_PUBLIC_BROKER_URL="ws://localhost:3009"
 NEXT_PUBLIC_MODULE_ADDRESS="0xf000d910b99722d201c6cf88eb7d1112b43475b9765b118f289b5d65d919000d"

src/typescript/frontend/.eslintignore

@@ -2,3 +2,4 @@ build/
 dist/
 .next/
 public/static/
+tests/e2e/global.*.ts

src/typescript/frontend/package.json

@@ -90,19 +90,20 @@
     "build:debug": "BUILD_DEBUG=true next build --no-lint --no-mangling --debug",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm -rf .next",
     "dev": "NODE_OPTIONS='--inspect' next dev --turbo --port 3001",
-    "e2e": "playwright test",
     "e2e-chromium": "playwright test --project=chromium",
     "e2e-firefox": "playwright test --project=firefox",
     "e2e-webkit": "playwright test --project=webkit",
+    "e2e:frontend": "playwright test --project=firefox",
     "format": "pnpm _format --write",
     "format:check": "pnpm _format --check",
     "lint": "eslint -c .eslintrc.js --ext .js,.jsx,.ts,.tsx .",
     "lint:fix": "pnpm run lint --fix",
-    "playwright-preps": "./submodule.sh && pnpm i && pnpm exec playwright install",
+    "playwright:install": "playwright install --with-deps",
     "pre-commit": "pnpm run pre-commit:install && pnpm run pre-commit:run",
     "pre-commit:install": "pre-commit install -c ../../../cfg/pre-commit-config.yaml",
     "pre-commit:run": "pre-commit run --all-files -c ../../../cfg/pre-commit-config.yaml",
     "start": "next start --port 3001",
+    "submodule": "./submodule.sh",
     "vercel-install": "./submodule.sh && pnpm i"
   },
   "version": "0.0.1-alpha"

src/typescript/frontend/playwright.config.ts

@@ -1,12 +1,5 @@
 import { defineConfig, devices } from "@playwright/test";
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// import dotenv from 'dotenv';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
-
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -21,59 +14,50 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: "html",
+  reporter: process.env.GITHUB_ACTIONS ? "github" : "list",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL: "http://127.0.0.1:3001",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
+
+    launchOptions: {
+      env: {
+        ...process.env,
+        NODE_OPTIONS: `${process.env.NODE_OPTIONS || ""} --conditions=react-server`,
+      },
+    },
   },
 
   /* Configure projects for major browsers */
   projects: [
+    {
+      name: "setup",
+      testMatch: /global\.setup\.ts/,
+      teardown: "teardown",
+    },
+    {
+      name: "teardown",
+      testMatch: /global\.teardown\.ts/,
+    },
     {
       name: "chromium",
       use: { ...devices["Desktop Chrome"] },
+      dependencies: ["setup"],
     },
 
     {
       name: "firefox",
       use: { ...devices["Desktop Firefox"] },
+      dependencies: ["setup"],
     },
 
     {
       name: "webkit",
       use: { ...devices["Desktop Safari"] },
+      dependencies: ["setup"],
     },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
   ],
-
-  /* Run your local dev server before starting the tests */
-  webServer: {
-    command: "pnpm run build && pnpm run start",
-    url: "http://127.0.0.1:3001/",
-    reuseExistingServer: false,
-    timeout: 120 * 1000,
-  },
 });

src/typescript/frontend/src/app/pools/api/route.ts

@@ -23,6 +23,12 @@ export async function GET(request: Request) {
   // The liquidity `provider`, aka the account to search for in the user liquidity pools.
   const provider = searchParams.get("account");
 
-  const data = await getPoolData(page, sortBy, orderBy, searchEmojis, provider ?? undefined);
-  return new Response(stringifyJSON(data));
+  let res: Awaited<ReturnType<typeof getPoolData>> = [];
+
+  try {
+    res = await getPoolData(page, sortBy, orderBy, searchEmojis, provider ?? undefined);
+  } catch (e) {
+    console.error(e);
+  }
+  return new Response(stringifyJSON(res));
 }

src/typescript/frontend/src/app/test/route.ts

@@ -1,15 +1,15 @@
-import { REVALIDATE_TEST } from "const";
 import { getAptos } from "lib/utils/aptos-client";
 import { NextResponse } from "next/server";
 
-export const revalidate = REVALIDATE_TEST;
+export const revalidate = 2;
+export const fetchCache = "default-cache";
 
 export async function GET() {
   const aptos = getAptos();
   try {
     const version = await aptos.getLedgerInfo().then((res) => res.ledger_version);
     return new NextResponse(version.toString());
-  } catch {
-    return new NextResponse("", { status: 500 });
+  } catch (e) {
+    return new NextResponse(JSON.stringify(e), { status: 500 });
   }
 }

src/typescript/frontend/src/lib/env.ts

@@ -25,7 +25,7 @@ const IS_ALLOWLIST_ENABLED: boolean = process.env.NEXT_PUBLIC_IS_ALLOWLIST_ENABL
 
 if (process.env.NEXT_PUBLIC_APTOS_NETWORK) {
   const network = process.env.NEXT_PUBLIC_APTOS_NETWORK;
-  if (["mainnet", "testnet", "devnet", "local", "custom"].includes(network)) {
+  if (["mainnet", "testnet", "devnet", "local", "custom", "docker"].includes(network)) {
     APTOS_NETWORK = network as Network;
   } else {
     throw new Error(`Invalid network: ${network}`);

src/typescript/frontend/src/lib/utils/aptos-client.ts

@@ -1,12 +1,25 @@
 /* eslint-disable import/no-unused-modules */ // Used in the frontend repo.
+/* eslint-disable @typescript-eslint/no-var-requires */
 import { NetworkToFaucetAPI, NetworkToIndexerAPI, NetworkToNodeAPI } from "@aptos-labs/ts-sdk";
 import { Aptos, AptosConfig, NetworkToNetworkName } from "@aptos-labs/ts-sdk";
 import { APTOS_NETWORK } from "lib/env";
 
+const toDockerUrl = (url: string) => url.replace("127.0.0.1", "host.docker.internal");
+
 // Get an Aptos config based off of the network environment variables.
 export const getAptosConfig = (): AptosConfig => {
-  // Check if it's a valid network.
   const networkString = APTOS_NETWORK;
+  if (networkString === "local" && typeof window === "undefined") {
+    const fs = require("node:fs");
+    if (fs.existsSync("/.dockerenv")) {
+      return new AptosConfig({
+        network: NetworkToNetworkName["local"],
+        fullnode: toDockerUrl(NetworkToNodeAPI["local"]),
+        indexer: toDockerUrl(NetworkToIndexerAPI["local"]),
+        faucet: toDockerUrl(NetworkToFaucetAPI["local"]),
+      });
+    }
+  }
   const network = NetworkToNetworkName[networkString ?? APTOS_NETWORK];
   const fullnode = NetworkToNodeAPI[network];
   const indexer = NetworkToIndexerAPI[network];

src/typescript/frontend/tests/e2e/global.setup.ts

@@ -0,0 +1,11 @@
+import { test as setup } from "@playwright/test";
+import { DockerTestHarness } from "../../../sdk/src/utils/test/docker/docker-test-harness";
+
+setup("setup the Docker containers", async ({}) => {
+  // Five minute timeout.
+  setup.setTimeout(300_000);
+  const startDockerServices = process.env.APTOS_NETWORK === "local";
+  if (startDockerServices) {
+    await DockerTestHarness.run(true);
+  }
+});

src/typescript/frontend/tests/e2e/global.teardown.ts

@@ -0,0 +1,6 @@
+/* eslint-disable no-underscore-dangle */
+import { DockerTestHarness } from "../../../sdk/src/utils/test/docker/docker-test-harness";
+
+export default async function postTest() {
+  await DockerTestHarness.stop();
+}

src/typescript/package.json

@@ -24,20 +24,23 @@
     "dev:debug": "pnpm dotenv -v FETCH_DEBUG=true -- pnpm run dev",
     "dev:debug-verbose": "pnpm dotenv -v FETCH_DEBUG_VERBOSE=true -- pnpm run dev",
     "down": "pnpm run prune",
-    "e2e:testnet": "turbo run e2e:testnet",
+    "e2e:frontend": "pnpm run load-env:e2e-frontend -- turbo run e2e:frontend",
     "format": "turbo run format -- --write",
     "format:check": "turbo run format -- --check",
     "full-clean": "pnpm run clean && rm -rf node_modules && rm -rf sdk/node_modules && rm -rf frontend/node_modules",
     "lint": "turbo run lint",
     "lint:fix": "turbo run lint -- --fix",
     "load-env": "dotenv -e .env.local -e .env -e .env.example -e ../docker/example.local.env -e ../docker/.env",
+    "load-env:e2e-frontend": "dotenv -e .env.local -e .env -e .env.example -e ../docker/example.local.env -e ../docker/.env -e ci.env -v NODE_ENV=test",
     "load-env:test": "dotenv -e .env.local -e .env -e .env.example -e ../docker/example.local.env -e ../docker/.env -e ci.env",
     "load-env:test-debug": "dotenv -e .env.local -e .env -e .env.example -e ../docker/example.local.env -e ../docker/.env -e ci.env -v FETCH_DEBUG=true",
     "load-env:test-verbose": "dotenv -e .env.local -e .env -e .env.example -e ../docker/example.local.env -e ../docker/.env -e ci.env -v FETCH_DEBUG=true VERBOSE_TEST_LOGS=true",
     "load-env:unit-test": "dotenv -e .env.local -e .env -e .env.example -e ../docker/example.local.env -e ../docker/.env -e ci.env -v NO_TEST_SETUP=true",
+    "playwright:install": "turbo run playwright:install",
     "prune": "../docker/utils/prune.sh --reset-localnet --yes",
     "restart": "pnpm run down && pnpm run up",
     "start": "dotenv -e .env.local -e .env -- turbo run start",
+    "submodule": "turbo run submodule",
     "test": "pnpm run load-env:test -- turbo run test --force",
     "test:debug": "pnpm run load-env:test-debug -- turbo run test --force",
     "test:frontend": "pnpm run load-env:test -- turbo run test --filter @econia-labs/emojicoin-frontend --log-prefix none",