feat(ui-tests): scaffolds basic test (#388)

.github/workflows/ui_test.yml

@@ -0,0 +1,44 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+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:
+  test:
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: yarn
+      - name: Install Playwright Browsers
+        run: yarn playwright:install
+      - name: Run Playwright tests
+        run: yarn playwright:test
+        env:
+          VITE_PROJECT_ID: ${{ secrets.VITE_DEV_PROJECT_ID }}
+          VITE_EXPLORER_API_URL: ${{ secrets.VITE_EXPLORER_API_URL }}
+          VITE_CI: true
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: test-results
+          path: test-results/
+          retention-days: 7

package.json

@@ -14,7 +14,9 @@
     "prettier": "prettier --check '**/*.{js,ts,jsx,tsx,scss}'",
     "prettier:write": "prettier --write '**/*.{js,ts,jsx,tsx,scss}'",
     "playwright:install": "playwright install --with-deps",
-    "playwright:test": "playwright test"
+    "playwright:test": "playwright test",
+    "playwright:start": "VITE_CI=true yarn dev",
+    "playwright:debug": "playwright test --debug"
   },
   "dependencies": {
     "@sentry/react": "^7.93.0",

playwright.config.ts

@@ -1,11 +1,5 @@
 import { defineConfig, devices } from '@playwright/test'
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
-
 const baseURL = 'http://localhost:5173'
 
 /**
@@ -18,20 +12,19 @@ export default defineConfig({
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  retries: 0,
+  /* Parallel tests currently blocked. */
+  workers: 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
   /* 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,
-
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
-
-    screenshot: 'only-on-failure'
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure'
   },
 
   /* Configure projects for major browsers */
@@ -40,41 +33,19 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] }
     },
-
     {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] }
     },
-
     {
       name: 'webkit',
       use: { ...devices['Desktop Safari'] }
     }
-
-    /* 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: 'yarn dev',
+    command: 'yarn playwright:start',
     url: baseURL,
     reuseExistingServer: !process.env.CI
   }

src/Modals.tsx

@@ -10,6 +10,7 @@ import NotificationPwaModal from '@/components/utils/NotificationPwaModal'
 import PwaModal from '@/components/utils/PwaModal'
 import W3iContext from '@/contexts/W3iContext/context'
 import { SignatureModal } from '@/pages/Login/SignatureModal'
+import { isCI } from '@/utils/env'
 import { useModals } from '@/utils/hooks'
 import { useNotificationPermissionState } from '@/utils/hooks/notificationHooks'
 import {
@@ -96,7 +97,7 @@ export const Modals = () => {
 
       {shouldShowPWAModal && <PwaModal />}
 
-      {isNotificationPwaModalOpen && <NotificationPwaModal />}
+      {!isCI && isNotificationPwaModalOpen && <NotificationPwaModal />}
 
       {shouldShowChangeBrowserModal && <ChangeBrowserModal />}
     </AnimatePresence>

src/routes.tsx

@@ -45,7 +45,6 @@ const ConfiguredRoutes: React.FC = () => {
             <Route path="/settings/appearance" element={<AppearanceSettings />} />
             <Route path="/settings/notification" element={<NotificationsSettings />} />
             <Route path="/settings/support" element={<SupportSettings />} />
-            {/* <Route path="/settings/privacy" element={<PrivacySettings />} /> */}
           </Route>
         ) : null}
       </Route>

src/utils/env.ts

@@ -0,0 +1 @@
+export const isCI = import.meta.env.VITE_CI === 'true'

src/utils/sentry.ts

@@ -7,7 +7,7 @@ export const initSentry = () => {
       new Sentry.BrowserTracing({
         tracePropagationTargets: ['https://web3inbox-dev-hidden.vercel.app']
       }),
-      new Sentry.Replay()
+      new Sentry.Replay(),
     ],
     tracesSampleRate: 0.2,
     replaysSessionSampleRate: 0.1,

tests/README.md

@@ -0,0 +1,20 @@
+# Functional Tests
+
+We use Playwright as our functional test runner. It's configured to try multiple permutations:
+
+- Browsers: Chromium/Firefox
+
+## Running Tests
+
+- `npx playwright test` to run in default mode (make sure your `.env` is set up)
+- `npm run playwright:debug` to step by step see what the tests are doing
+
+## Debugging
+
+For scenarios when tests pass locally but not remotely you can `await this.page.screenshot({ path: './screenshots/wallet.png' })` and the screenshot will be uploaded to GitHub Actions.
+
+## Running from GitHub Actions
+
+These tests can be run from GitHub Actions both from this and other repositories.
+
+You can tweak what's under test by setting the `BASE_URL` and `WALLET_URL` (default 'https://react-wallet.walletconnect.com/') environment variables.

tests/shared/constants/index.ts

@@ -0,0 +1,10 @@
+import type { SessionParams } from '../types'
+
+// Allow localhost
+export const BASE_URL = process.env['BASE_URL'] || 'http://localhost:5173/'
+export const WALLET_URL = process.env['WALLET_URL'] || 'https://react-wallet.walletconnect.com/'
+export const DEFAULT_SESSION_PARAMS: SessionParams = {
+  reqAccounts: ['1', '2'],
+  optAccounts: ['1', '2'],
+  accept: true
+}

tests/shared/fixtures/fixture.ts

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

tests/shared/fixtures/wallet-fixture.ts

@@ -0,0 +1,28 @@
+import { WalletPage } from '../pages/WalletPage'
+import { WalletValidator } from '../validators/WalletValidator'
+import { test as base } from './fixture'
+
+// Declare the types of fixtures to use
+interface ModalWalletFixture {
+  walletPage: WalletPage
+  walletValidator: WalletValidator
+}
+
+export const testWallet = base.extend<ModalWalletFixture>({
+  walletPage: async ({ context, browserName }, use) => {
+    // WalletPage needs clipboard permissions with chromium to paste URI
+    if (browserName === 'chromium') {
+      await context.grantPermissions(['clipboard-read', 'clipboard-write'])
+    }
+
+    // Use a new page, to open alongside the modal
+    const walletPage = new WalletPage(await context.newPage())
+    await walletPage.load()
+    await use(walletPage)
+  },
+  walletValidator: async ({ walletPage }, use) => {
+    const walletValidator = new WalletValidator(walletPage.page)
+    await use(walletValidator)
+  }
+})
+export { expect } from '@playwright/test'