feat: add synpress and homepage test to builder and explorer

packages/builder/.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   env: {
     browser: true,
     es2021: true,
+    jest: true,
   },
   parser: "@typescript-eslint/parser",
   extends: ["airbnb", "airbnb-typescript", "prettier"],

packages/builder/fixtures.ts

@@ -0,0 +1,69 @@
+import { type BrowserContext, chromium, test as base } from "@playwright/test";
+import { initialSetup } from "@synthetixio/synpress/commands/metamask";
+import { setExpectInstance } from "@synthetixio/synpress/commands/playwright";
+import { resetState } from "@synthetixio/synpress/commands/synpress";
+import { prepareMetamask } from "@synthetixio/synpress/helpers";
+import { config } from "dotenv";
+
+export const test = base.extend<{
+  context: BrowserContext;
+}>({
+  // eslint-disable-next-line no-empty-pattern
+  context: async ({}, use) => {
+    config({
+      path: "./.env.local",
+    });
+
+    // required for synpress as it shares same expect instance as playwright
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    await setExpectInstance(expect);
+
+    // download metamask
+    const metamaskPath = await prepareMetamask(
+      process.env.METAMASK_VERSION || "10.25.0"
+    );
+
+    // prepare browser args
+    const browserArgs = [
+      `--disable-extensions-except=${metamaskPath}`,
+      `--load-extension=${metamaskPath}`,
+      "--remote-debugging-port=9222",
+    ];
+
+    if (process.env.CI) {
+      browserArgs.push("--disable-gpu");
+    }
+
+    if (process.env.HEADLESS_MODE) {
+      browserArgs.push("--headless=new");
+    }
+
+    // launch browser
+    const context = await chromium.launchPersistentContext("", {
+      headless: false,
+      args: browserArgs,
+    });
+
+    // wait for metamask
+    await context.pages()[0].waitForTimeout(3000);
+
+    // setup metamask
+    await initialSetup(chromium, {
+      secretWordsOrPrivateKey:
+        process.env.TEST_PRIVATE_KEY ??
+        "test test test test test test test test test test test junk",
+      network: "optimism",
+      password: "Tester@1234",
+      enableAdvancedSettings: true,
+    });
+
+    await use(context);
+
+    await context.close();
+
+    await resetState();
+  },
+});
+
+// eslint-disable-next-line prefer-destructuring
+export const expect = test.expect;

packages/builder/package.json

@@ -19,8 +19,10 @@
     "@heroicons/react": "^2.0.11",
     "@lagunovsky/redux-react-router": "^2.2.0",
     "@pinata/sdk": "^1.1.26",
+    "@playwright/test": "^1.41.1",
     "@rainbow-me/rainbowkit": "^0.12.18",
     "@redux-devtools/extension": "^3.2.3",
+    "@synthetixio/synpress": "3.7.2-beta.10",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.9",
     "@tanstack/query-core": "4.22.0",
@@ -125,6 +127,7 @@
     "@types/react-gtm-module": "^2.0.1",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",
+    "dotenv": "^16.4.1",
     "eslint": "^8.2.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",

packages/builder/playwright.config.js

@@ -0,0 +1,36 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  timeout: 60 * 1000,
+  expect: {
+    timeout: 5000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: 1,
+  reporter: "html",
+  use: {
+    actionTimeout: 0,
+    baseURL: "http://localhost:3000",
+    trace: "on-first-retry",
+    headless: false,
+  },
+  // start local web server before tests
+  webServer: [
+    {
+      command: "pnpm start",
+      url: "http://localhost:3000",
+      timeout: 5000,
+      reuseExistingServer: true,
+    },
+  ],
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  outputDir: "test-results",
+});

packages/builder/tests/homepage.test.ts

@@ -0,0 +1,14 @@
+import * as metamask from "@synthetixio/synpress/commands/metamask";
+import { test } from "../fixtures";
+
+test.beforeEach(async ({ page }) => {
+  // baseUrl is set in playwright.config.ts
+  await page.goto("/");
+});
+
+test("main page loads and wallet connects", async ({ page }) => {
+  await page.getByRole("navigation").getByTestId("rk-connect-button").click();
+  await page.getByText("Metamask").click();
+  await metamask.acceptAccess();
+  await page.getByText("My Projects").waitFor();
+});

packages/builder/tsconfig.json

@@ -17,5 +17,5 @@
     "jsx": "react-jsx",
     "sourceMap": true
   },
-  "include": ["src", "craco.config.js"]
+  "include": ["src", "craco.config.js", "fixtures.ts", "tests", "playwright.config.js", ".eslintrc.js"]
 }

packages/grant-explorer/fixtures.ts

@@ -0,0 +1,67 @@
+import { type BrowserContext, chromium, test as base } from "@playwright/test";
+import { initialSetup } from "@synthetixio/synpress/commands/metamask";
+import { setExpectInstance } from "@synthetixio/synpress/commands/playwright";
+import { resetState } from "@synthetixio/synpress/commands/synpress";
+import { prepareMetamask } from "@synthetixio/synpress/helpers";
+import { config } from "dotenv";
+
+export const test = base.extend<{
+  context: BrowserContext;
+}>({
+  // eslint-disable-next-line no-empty-pattern
+  context: async ({}, use) => {
+    config({
+      path: "./.env.local",
+    });
+
+    // required for synpress as it shares same expect instance as playwright
+    await setExpectInstance(expect);
+
+    // download metamask
+    const metamaskPath = await prepareMetamask(
+      process.env.METAMASK_VERSION || "10.25.0"
+    );
+
+    // prepare browser args
+    const browserArgs = [
+      `--disable-extensions-except=${metamaskPath}`,
+      `--load-extension=${metamaskPath}`,
+      "--remote-debugging-port=9222",
+    ];
+
+    if (process.env.CI) {
+      browserArgs.push("--disable-gpu");
+    }
+
+    if (process.env.HEADLESS_MODE) {
+      browserArgs.push("--headless=new");
+    }
+
+    // launch browser
+    const context = await chromium.launchPersistentContext("", {
+      headless: false,
+      args: browserArgs,
+    });
+
+    // wait for metamask
+    await context.pages()[0].waitForTimeout(3000);
+
+    // setup metamask
+    await initialSetup(chromium, {
+      secretWordsOrPrivateKey:
+        process.env.TEST_PRIVATE_KEY ??
+        "test test test test test test test test test test test junk",
+      network: "optimism",
+      password: "Tester@1234",
+      enableAdvancedSettings: true,
+    });
+
+    await use(context);
+
+    await context.close();
+
+    await resetState();
+  },
+});
+
+export const expect = test.expect;

packages/grant-explorer/package.json

@@ -43,11 +43,13 @@
     "@gitcoinco/passport-sdk-verifier": "^0.2.2",
     "@headlessui/react": "^1.7.4",
     "@heroicons/react": "^2.0.13",
+    "@playwright/test": "^1.41.1",
     "@rainbow-me/rainbowkit": "1.0.10",
     "@sentry/integrations": "^7.28.0",
     "@sentry/react": "^7.27.0",
     "@sentry/tracing": "^7.26.0",
     "@sentry/webpack-plugin": "^1.20.0",
+    "@synthetixio/synpress": "3.7.2-beta.10",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.9",
@@ -126,6 +128,7 @@
     "@types/testing-library__jest-dom": "^5.14.5",
     "@vitest/coverage-v8": "^0.34.2",
     "autoprefixer": "^10.4.7",
+    "dotenv": "^16.4.1",
     "dotenv-flow": "^3.3.0",
     "eslint-config-gitcoin": "workspace:*",
     "happy-dom": "^11.0.2",

packages/grant-explorer/playwright.config.js

@@ -0,0 +1,36 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  timeout: 60 * 1000,
+  expect: {
+    timeout: 5000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: 1,
+  reporter: "html",
+  use: {
+    actionTimeout: 0,
+    baseURL: "http://localhost:3000",
+    trace: "on-first-retry",
+    headless: false,
+  },
+  // start local web server before tests
+  webServer: [
+    {
+      command: "pnpm start",
+      url: "http://localhost:3000",
+      timeout: 5000,
+      reuseExistingServer: true,
+    },
+  ],
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  outputDir: "test-results",
+});

packages/grant-explorer/tests/homepage.test.ts

@@ -0,0 +1,14 @@
+import { test } from "../fixtures";
+import * as metamask from "@synthetixio/synpress/commands/metamask";
+
+test.beforeEach(async ({ page }) => {
+  // baseUrl is set in playwright.config.ts
+  await page.goto("/");
+});
+
+test("main page loads and wallet connects", async ({ page }) => {
+  await page.getByRole("navigation").getByTestId("rk-connect-button").click();
+  await page.getByText("Metamask").click();
+  await metamask.acceptAccess();
+  await page.getByText("Explore rounds").waitFor();
+});

packages/round-manager/tests/homepage.test.ts

@@ -0,0 +1,14 @@
+import { test } from "../fixtures";
+import * as metamask from "@synthetixio/synpress/commands/metamask";
+
+test.beforeEach(async ({ page }) => {
+  // baseUrl is set in playwright.config.ts
+  await page.goto("/");
+});
+
+test("main page loads and wallet connects", async ({ page }) => {
+  await page.getByRole("navigation").getByTestId("rk-connect-button").click();
+  await page.getByText("Metamask").click();
+  await metamask.acceptAccess();
+  await page.getByText("My Programs").waitFor();
+});

packages/round-manager/tsconfig.json

@@ -17,5 +17,5 @@
     "jsx": "react-jsx",
     "types": ["@testing-library/jest-dom", "jest", "node"]
   },
-  "include": ["src"]
+  "include": ["src", "tests", "fixtures.ts"]
 }