test: setup e2e tests

.env.example

@@ -56,7 +56,6 @@ NEXT_PUBLIC_FEEDBACK_URL=https://github.com/privacy-scaling-explorations/maci-rp
 # (leaving empty means anyone can do this)
 NEXT_PUBLIC_ADMIN_ADDRESS=
 
-
 # -----------------
 # EAS CONFIGURATION
 # -----------------
@@ -92,9 +91,6 @@ NEXT_PUBLIC_MACI_START_BLOCK=
 
 NEXT_PUBLIC_MACI_SUBGRAPH_URL=
 
-# Vercel Store token to store the application images
-BLOB_READ_WRITE_TOKEN=""
-
 # URL with tally-{pollId}.json hosted
 NEXT_PUBLIC_TALLY_URL=https://upblxu2duoxmkobt.public.blob.vercel-storage.com
 

.eslintignore

@@ -9,3 +9,6 @@ commitlint.config.js
 subgraph/generated
 public/mockServiceWorker.js
 zkeys
+playwright-report
+test-results
+next.config.js

.eslintrc.cjs → .eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
     "plugin:@typescript-eslint/stylistic-type-checked",
     "plugin:import/typescript",
     "plugin:react/recommended",
+    "plugin:playwright/playwright-test",
   ],
   plugins: ["json", "prettier", "unused-imports", "import", "@typescript-eslint", "react-hooks"],
   parser: "@typescript-eslint/parser",
@@ -38,7 +39,7 @@ module.exports = {
       typescript: {},
       node: {
         extensions: [".ts", ".js", ".tsx", ".jsx"],
-        moduleDirectory: ["node_modules", "src"],
+        moduleDirectory: ["node_modules", "src", "playwright"],
       },
     },
   },
@@ -62,7 +63,15 @@ module.exports = {
     "import/no-extraneous-dependencies": [
       "error",
       {
-        devDependencies: ["**/*.test.ts", "./src/test-msw.ts", "./src/test-setup.ts", "./src/lib/eas/*.ts"],
+        devDependencies: [
+          "**/*.test.ts",
+          "./src/test-msw.ts",
+          "./src/test-setup.ts",
+          "./src/lib/eas/*.ts",
+          "./playwright/**/*.ts",
+          "./playwright.config.ts",
+          "./vitest.config.ts",
+        ],
       },
     ],
     "no-debugger": isProduction ? "error" : "off",
@@ -172,5 +181,18 @@ module.exports = {
     ],
     "react/no-unused-prop-types": "error",
     "react/function-component-definition": ["error", { namedComponents: ["arrow-function"] }],
+
+    "playwright/prefer-lowercase-title": "error",
+    "playwright/prefer-to-be": "error",
+    "playwright/prefer-to-have-length": "error",
+    "playwright/prefer-strict-equal": "error",
+    "playwright/max-nested-describe": ["error", { max: 1 }],
+    "playwright/no-restricted-matchers": [
+      "error",
+      {
+        toBeFalsy: "Use `toBe(false)` instead.",
+        not: null,
+      },
+    ],
   },
 };

.github/workflows/e2e.yml

@@ -0,0 +1,118 @@
+name: E2E
+on:
+  workflow_dispatch:
+
+  schedule:
+    - cron: "0 9 * * *" # run every day at 9:00 UTC
+
+  push:
+    branches: [main]
+  pull_request:
+
+env:
+  NEXT_PUBLIC_CHAIN_NAME: ${{ vars.NEXT_PUBLIC_CHAIN_NAME }}
+  NEXT_PUBLIC_ADMIN_ADDRESS: ${{ vars.NEXT_PUBLIC_ADMIN_ADDRESS }}
+  NEXT_PUBLIC_APPROVAL_SCHEMA: ${{ vars.NEXT_PUBLIC_APPROVAL_SCHEMA }}
+  NEXT_PUBLIC_METADATA_SCHEMA: ${{ vars.NEXT_PUBLIC_METADATA_SCHEMA }}
+  NEXT_PUBLIC_ROUND_ID: ${{ vars.NEXT_PUBLIC_ROUND_ID }}
+  NEXT_PUBLIC_SKIP_APPROVED_VOTER_CHECK: false
+  NEXT_PUBLIC_MACI_ADDRESS: ${{ vars.NEXT_PUBLIC_MACI_ADDRESS }}
+  NEXT_PUBLIC_TALLY_URL: ${{ vars.NEXT_PUBLIC_TALLY_URL }}
+  NEXT_PUBLIC_WALLETCONNECT_ID: ${{ secrets.NEXT_PUBLIC_WALLETCONNECT_ID }}
+  NEXT_PUBLIC_FEEDBACK_URL: ${{ vars.NEXT_PUBLIC_FEEDBACK_URL }}
+  NEXT_PUBLIC_MACI_START_BLOCK: ${{ vars.NEXT_PUBLIC_MACI_START_BLOCK }}
+  NEXT_PUBLIC_MACI_SUBGRAPH_URL: ${{ vars.NEXT_PUBLIC_MACI_SUBGRAPH_URL }}
+  NEXT_PUBLIC_EAS_CONTRACT_ADDRESS: ${{ vars.NEXT_PUBLIC_EAS_CONTRACT_ADDRESS }}
+  NEXT_PUBLIC_EAS_SCHEMA_REGISTRY_ADDRESS: ${{ vars.NEXT_PUBLIC_EAS_SCHEMA_REGISTRY_ADDRESS }}
+  NEXT_PUBLIC_SIGN_STATEMENT: ${{ vars.NEXT_PUBLIC_SIGN_STATEMENT }}
+  NEXT_PUBLIC_TOKEN_NAME: ${{ vars.NEXT_PUBLIC_TOKEN_NAME }}
+  NEXT_PUBLIC_MAX_VOTES_TOTAL: ${{ vars.NEXT_PUBLIC_MAX_VOTES_TOTAL }}
+  NEXT_PUBLIC_MAX_VOTES_PROJECT: ${{ vars.NEXT_PUBLIC_MAX_VOTES_PROJECT }}
+  NEXT_PUBLIC_EASSCAN_URL: ${{ vars.NEXT_PUBLIC_EASSCAN_URL }}
+  BLOB_READ_WRITE_TOKEN: ${{ secrets.BLOB_READ_WRITE_TOKEN }}
+  NEXT_PUBLIC_ALCHEMY_ID: ${{ secrets.NEXT_PUBLIC_ALCHEMY_ID }}
+  NEXT_PUBLIC_START_DATE: ${{ vars.NEXT_PUBLIC_START_DATE }}
+  NEXT_PUBLIC_REGISTRATION_END_DATE: ${{ vars.NEXT_PUBLIC_REGISTRATION_END_DATE }}
+  NEXT_PUBLIC_REVIEW_END_DATE: ${{ vars.NEXT_PUBLIC_REVIEW_END_DATE }}
+  NEXT_PUBLIC_VOTING_END_DATE: ${{ vars.NEXT_PUBLIC_VOTING_END_DATE }}
+  NEXT_PUBLIC_RESULTS_DATE: ${{ vars.NEXT_PUBLIC_RESULTS_DATE }}
+  NEXT_PUBLIC_POLL_MODE: ${{ vars.NEXT_PUBLIC_POLL_MODE }}
+  TEST_MNEMONIC: ${{ secrets.TEST_MNEMONIC }}
+  WALLET_PRIVATE_KEY: ""
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: [20]
+
+    timeout-minutes: 120
+    runs-on: ubuntu-22.04
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 8
+
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "pnpm"
+
+      - name: Cache node modules
+        uses: actions/cache@v4
+        continue-on-error: true
+        with:
+          path: |
+            ~/.pnpm-store
+            node_modules
+            /home/runner/.cache/Cypress
+          key: ${{ runner.os }}-node-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Get installed Playwright version
+        id: playwright-version
+        run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package.json').devDependencies['@playwright/test'])")" >> $GITHUB_ENV
+
+      - name: Cache playwright binaries
+        uses: actions/cache@v4
+        id: playwright-cache
+        continue-on-error: true
+        with:
+          path: |
+            ~/.cache/ms-playwright
+            ms-playwright
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+
+      - name: Install dependencies
+        run: |-
+          pnpm install --frozen-lockfile --prefer-offline
+
+      - name: Install Playwright Browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: |-
+          pnpm run install:chromium
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Run Playwright tests
+        uses: coactions/setup-xvfb@v1
+        with:
+          run: pnpm run test:e2e
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        continue-on-error: true
+        with:
+          name: playwright-report
+          path: ./playwright-report/
+          retention-days: 30

.gitignore

@@ -7,6 +7,8 @@
 
 # testing
 /coverage
+/playwright-report
+/test-results
 
 # next.js
 /.next/

.npmrc

@@ -0,0 +1,4 @@
+public-hoist-pattern[]=@types*
+public-hoist-pattern[]=cypress*
+public-hoist-pattern[]=@testing-library/cypress
+public-hoist-pattern[]=@synthetixio/synpress

.prettierignore

@@ -9,3 +9,5 @@ CODEOWNERS
 .eslintignore
 zkeys
 public/mockServiceWorker.js
+playwright-report/
+test-results/

e2e/connectWallet.test.ts

@@ -0,0 +1,21 @@
+import { test, expect } from "../playwright/fixtures";
+
+test.describe("connect wallet", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+  });
+
+  test("should connect wallet using default metamask account", async ({ page }) => {
+    await page.getByText(/Connect wallet/).click();
+    await page.getByTestId("rk-wallet-option-io.metamask").click();
+
+    const metamask = await page.context().waitForEvent("page");
+    await metamask.getByText("Next").click();
+    await metamask.getByTestId("page-container-footer-next").click();
+
+    await metamask.waitForTimeout(2_000);
+    await metamask.getByTestId("page-container-footer-next").click();
+
+    await expect(page.getByText(/0xf3.+2266/)).toBeInViewport();
+  });
+});

next.config.js

@@ -2,10 +2,10 @@
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
  * for Docker builds.
  */
-await import("./src/env.js");
+require("./src/env");
 
 /** @type {import("next").NextConfig} */
-const config = {
+module.exports = {
   reactStrictMode: true,
 
   webpack: (config) => {
@@ -45,5 +45,3 @@ const config = {
     defaultLocale: "en",
   },
 };
-
-export default config;

package.json

@@ -2,7 +2,6 @@
   "name": "maci-rpgf",
   "version": "0.1.0",
   "private": true,
-  "type": "module",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
@@ -14,6 +13,8 @@
     "prettier:fix": "prettier -w .",
     "types": "tsc -p tsconfig.json --noEmit",
     "eas:registerSchemas": "npx tsx src/lib/eas/registerSchemas",
+    "install:chromium": "playwright install chromium",
+    "test:e2e": "playwright test --project=chromium",
     "prepare": "is-ci || husky"
   },
   "dependencies": {
@@ -73,6 +74,8 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@next/eslint-plugin-next": "^14.2.3",
+    "@playwright/test": "^1.45.0",
+    "@synthetixio/synpress": "^3.7.3",
     "@tailwindcss/typography": "^0.5.10",
     "@testing-library/jest-dom": "^6.4.5",
     "@types/eslint": "^8.56.2",
@@ -85,7 +88,7 @@
     "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.19.1",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.17",
     "dotenv": "^16.4.1",
     "eslint": "^8.57.0",
@@ -96,6 +99,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-json": "^4.0.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-playwright": "^1.6.2",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
@@ -116,9 +120,9 @@
     "prettier-plugin-tailwindcss": "^0.5.11",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
-    "vite": "^5.0.12",
-    "vite-tsconfig-paths": "^4.3.1",
-    "vitest": "^1.2.2",
+    "vite": "^5.3.1",
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^1.6.0",
     "vitest-mock-extended": "^1.3.1"
   },
   "ct3aMetadata": {

playwright.config.ts

@@ -0,0 +1,44 @@
+import { defineConfig, devices } from "@playwright/test";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./e2e",
+  timeout: process.env.CI ? 120_000 : 60_000,
+  expect: {
+    timeout: 15_000,
+  },
+  maxFailures: 2,
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: [["github"], ["list"], ["html", { open: "never" }]],
+  use: {
+    baseURL: process.env.DEMO_URL || "http://localhost:3000",
+    trace: "on-first-retry",
+    screenshot: "only-on-failure",
+    headless: false,
+  },
+
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  webServer: !process.env.DEMO_URL
+    ? [
+        {
+          command: "pnpm run start",
+          url: "http://localhost:3000",
+          timeout: 120 * 1000,
+          reuseExistingServer: !process.env.CI,
+        },
+      ]
+    : [],
+});

playwright/constants.ts

@@ -0,0 +1,14 @@
+import type { ChainConfig } from "@synthetixio/synpress/commands/metamask";
+
+export const NETWORKS: Record<string, ChainConfig> = {
+  optimismSepolia: {
+    chainId: 11155420,
+    name: "OP Sepolia",
+    rpcUrl: `https://opt-sepolia.g.alchemy.com/v2/${process.env.NEXT_PUBLIC_ALCHEMY_ID!}`,
+    symbol: "ETH",
+  },
+};
+
+// Don't use it for production, only for e2e testing
+export const TEST_MNEMONIC = "test test test test test test test test test test test junk";
+export const TEST_PASSWORD = "Tester@1234";