feat(lab): add UI tests

.github/workflows/ui_tests.yml

@@ -0,0 +1,53 @@
+name: UI Tests
+
+on:
+  push:
+    branches: ['V3']
+    paths-ignore:
+      - '**.md'
+
+  pull_request:
+    branches: ['V3']
+    paths-ignore:
+      - '**.md'
+
+concurrency:
+  # Support push/pr as event types with different behaviors each:
+  # 1. push: queue up builds
+  # 2. pr: only allow one run per PR
+  group: ${{ github.workflow }}-${{ github.event.type }}${{ github.event.pull_request.number }}
+  # If there is already a workflow running for the same pull request, cancel it
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
+jobs:
+  ui_tests:
+    name: 'Playwright Tests'
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: checkout
+        uses: actions/checkout@v3
+      - name: setup-node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: 'npm'
+          cache-dependency-path: 'package-lock.json'
+      - name: install
+        run: npm ci
+      - name: build
+        run: npm run build
+      - name: Install Playwright Browsers
+        working-directory: ./apps/laboratory/
+        run: npm run playwright:install
+      - name: Run Playwright tests
+        env:
+          NEXT_PUBLIC_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_PROJECT_ID }}
+        working-directory: ./apps/laboratory/
+        run: npm run playwright:test
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: ./apps/laboratory/playwright-report/
+          retention-days: 7

.gitignore

@@ -8,3 +8,4 @@ lerna-debug.log
 .env.local
 .env
 .turbo
+playwright-report/

apps/laboratory/package.json

@@ -5,7 +5,11 @@
   "scripts": {
     "dev:laboratory": "next dev",
     "build:laboratory": "next build",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "playwright:start": "npm run build; npm run dev:laboratory",
+    "playwright:install": "npx playwright install --with-deps",
+    "playwright:test": "npx playwright test",
+    "playwright:debug": "npx playwright test --debug"
   },
   "dependencies": {
     "@chakra-ui/react": "2.8.2",
@@ -24,6 +28,8 @@
     "valtio": "1.11.2"
   },
   "devDependencies": {
+    "@playwright/test": "1.40.1",
+    "dotenv": "16.3.1",
     "ethers": "6.9.0"
   }
 }

apps/laboratory/playwright.config.ts

@@ -0,0 +1,73 @@
+import { defineConfig, devices } from '@playwright/test'
+import { LOCAL_LABS_URL } from './tests/shared/constants'
+
+import { config } from 'dotenv'
+config({ path: './.env.local' })
+
+export default defineConfig({
+  testDir: './tests',
+
+  fullyParallel: true,
+  retries: process.env['CI'] ? 2 : 0,
+  workers: process.env['CI'] ? 1 : undefined,
+  reporter: [['list'], ['html']],
+
+  expect: {
+    timeout: (process.env['CI'] ? 60 : 5) * 1000
+  },
+  timeout: 60 * 1000,
+
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: LOCAL_LABS_URL,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    video: process.env['CI'] ? 'off' : 'on-first-retry'
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] }
+    }
+
+    /* 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: 'npm run playwright:start',
+    url: LOCAL_LABS_URL,
+    reuseExistingServer: !process.env['CI']
+  }
+})

apps/laboratory/tests/basic-tests.spec.ts

@@ -0,0 +1,8 @@
+import { testM, expect } from './shared/fixtures/w3m-fixture'
+
+testM.describe('Modal only tests', () => {
+  testM('Should be able to open modal', async ({ modalPage }) => {
+    await modalPage.page.getByText('Connect Wallet').click()
+    await expect(modalPage.page.getByText('All Wallets')).toBeVisible()
+  })
+})

apps/laboratory/tests/shared/constants/index.ts

@@ -0,0 +1,2 @@
+// Allow localhost
+export const LOCAL_LABS_URL = 'http://localhost:3000/library/wagmi/'

apps/laboratory/tests/shared/fixtures/w3m-fixture.ts

@@ -0,0 +1,17 @@
+import { test as base } from '@playwright/test'
+import { ModalPage } from '../pages/ModalPage'
+
+// Declare the types of fixtures to use
+interface ModalFixture {
+  modalPage: ModalPage
+}
+
+// M -> test Modal
+export const testM = base.extend<ModalFixture>({
+  modalPage: async ({ page }, use) => {
+    const modalPage = new ModalPage(page)
+    await modalPage.load()
+    await use(modalPage)
+  }
+})
+export { expect } from '@playwright/test'

apps/laboratory/tests/shared/pages/ModalPage.ts

@@ -0,0 +1,12 @@
+import type { Page } from '@playwright/test'
+import { LOCAL_LABS_URL } from '../constants'
+
+export class ModalPage {
+  private readonly baseURL = LOCAL_LABS_URL
+
+  constructor(public readonly page: Page) {}
+
+  async load() {
+    await this.page.goto(this.baseURL)
+  }
+}

apps/laboratory/tsconfig.json

@@ -4,5 +4,5 @@
     "jsx": "preserve",
     "noEmit": true
   },
-  "include": ["next-env.d.ts", "src"]
+  "include": ["next-env.d.ts", "src", "tests", "playwright.config.ts"]
 }

dangerfile.ts

@@ -279,7 +279,7 @@ async function checkDevelopmentConstants() {
   for (const f of updated_files) {
     const diff = await diffForFile(f)
 
-    if (diff?.added.includes('localhost:')) {
+    if (diff?.added.includes('localhost:') && !diff?.added.includes('// Allow localhost')) {
       fail(`${f} uses localhost: which is likely a mistake`)
     }
   }