Add GitHub Workflow Example

Disabled testing on FireFox and Safari to get a low-key GitHub CI setup.

Author: rombrom

.env

@@ -1 +1,3 @@
 NEXT_PUBLIC_TESTNET_WALLET_KEY=0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80
+FORK_BLOCK_NUMBER=16391695
+FORK_URL=https://eth-archival-rpc.gateway.pokt.network

.github/workflows/ci.yaml

@@ -0,0 +1,53 @@
+name: Continuous Integration
+
+env:
+  FOUNDRY_CACHE_PATH: ${{ github.workspace }}/.foundry/cache
+  PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/ms-playwright
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  pipeline:
+    runs-on: ubuntu-latest
+    steps:
+      # Install deps
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          cache: npm
+          node-version: 18
+      - uses: foundry-rs/foundry-toolchain@v1
+        with:
+          version: nightly
+      - run: npm ci
+
+      # Playwright caching
+      # For Playwright it's wise to cache the browsers on the
+      # OS used + the installed Playwright version.
+      # We need to find the version ourselves though...
+      # https://playwright.dev/docs/ci#caching-browsers
+      - run: |
+          echo "PLAYWRIGHT_VERSION=$(node -e "process.stdout.write(require('@playwright/test/package.json').version)")" >> $GITHUB_OUTPUT
+        id: playwright-version
+      - uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}
+          path: ${{ env.PLAYWRIGHT_BROWSERS_PATH }}
+      - run: npm run e2e install
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+      # Foundry's `anvil` caches things as well. Notably: testnet forks!
+      - uses: actions/cache@v3
+        with:
+          key: ${{ runner.os }}-foundry
+          path: ${{ env.FOUNDRY_CACHE_PATH }}
+
+      # Run CI
+      - run: npm run lint
+      - run: npm run e2e test
+      - run: npm run build

README.md

@@ -12,7 +12,11 @@ Requirements: recent-ish [`node`](https://nodejs.org/), `anvil` from [Foundry](h
 
 - Run `npm install`
 - Run `npm run e2e test` or see it live (it's _fast_)
-  `npm run e2e test --headed`
+  `npm run e2e test -- --headed`
 
 Note: you might need to install the Playwright browsers with
 `npx playwright install`
+
+## GitHub Workflow
+
+An example GitHub workflow has been implemented in [`.github/workflows/ci.yaml`](https://github.com/re-nft/dapp-e2e-example/blob/main/.github/workflows/ci.yaml)

package-lock.json

@@ -18,6 +18,7 @@
     "wagmi": "^0.9.0"
   },
   "devDependencies": {
+    "@next/env": "^13.1.1",
     "@playwright/test": "^1.29.2",
     "@types/node": "^17.0.35",
     "@types/react": "^18.0.9",

package.json

@@ -14,8 +14,7 @@ import { providers, Wallet } from 'ethers';
 
 const TESTNET_URL =
   process.env.NEXT_PUBLIC_TESTNET_URL || 'http://localhost:8545';
-const TESTNET_WALLET_KEY =
-  process.env.NEXT_PUBLIC_TESTNET_WALLET_KEY || undefined;
+const TESTNET_WALLET_KEY = process.env.NEXT_PUBLIC_TESTNET_WALLET_KEY;
 
 const signer = TESTNET_WALLET_KEY
   ? new Wallet(TESTNET_WALLET_KEY, new providers.JsonRpcProvider(TESTNET_URL))

pages/_app.tsx

@@ -1,11 +1,14 @@
 import type { PlaywrightTestConfig } from '@playwright/test';
 import { devices } from '@playwright/test';
+import { loadEnvConfig } from '@next/env';
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
+// The Playwright config doesn't like @next/env's Env type.
+const env: Record<string, string> = Object.entries(
+  loadEnvConfig(process.cwd()).combinedEnv
+).reduce(
+  (env, [key, value]) => ({ ...env, ...(value && { [key]: value }) }),
+  {}
+);
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -51,19 +54,19 @@ const config: PlaywrightTestConfig = {
       },
     },
 
-    {
-      name: 'firefox',
-      use: {
-        ...devices['Desktop Firefox'],
-      },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: {
+    //     ...devices['Desktop Firefox'],
+    //   },
+    // },
 
-    {
-      name: 'webkit',
-      use: {
-        ...devices['Desktop Safari'],
-      },
-    },
+    // {
+    //   name: 'webkit',
+    //   use: {
+    //     ...devices['Desktop Safari'],
+    //   },
+    // },
 
     /* Test against mobile viewports. */
     // {
@@ -100,11 +103,17 @@ const config: PlaywrightTestConfig = {
   /* Run your local dev server before starting the tests */
   webServer: [
     {
-      command: 'anvil',
+      command: [
+        `anvil`,
+        `--fork-block-number=${env.FORK_BLOCK_NUMBER}`,
+        `--fork-url=${env.FORK_URL}`,
+      ].join(' '),
+      env,
       port: 8545,
     },
     {
       command: 'npm run dev',
+      env,
       port: 3000,
     },
   ],