fix: improve UI tests (#1932)

.eslintrc.json

@@ -21,7 +21,8 @@
     ".turbo",
     "exbamples",
     "coverage",
-    ".changeset"
+    ".changeset",
+    "playwright-report"
   ],
   "rules": {
     // Core

.github/workflows/ci_canary.yml

@@ -49,7 +49,7 @@ jobs:
           IMAGE_TAG: V4
         with:
           context: .
-          file: Dockerfile
+          file: Dockerfile.canary
           push: true
           tags: ${{ env.ECR_REGISTRY }}/${{ env.ECR_REPOSITORY }}:${{ env.IMAGE_TAG }}
           cache-from: type=local,src=/tmp/.buildx-cache

apps/laboratory/package.json

@@ -8,12 +8,12 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "playwright:start": "npm run dev:laboratory",
     "playwright:install": "npx playwright install --with-deps",
-    "playwright:test": "npx playwright test --grep-invert canary.spec.ts",
+    "playwright:test": "npx playwright test",
     "playwright:test:wallet": "npx playwright test --grep connect.spec.ts",
-    "playwright:test:canary": "npx playwright test --grep canary.spec.ts",
-    "playwright:debug": "npx playwright test --debug --grep-invert canary.spec.ts",
+    "playwright:test:canary": "npx playwright test --grep canary.spec.ts --project='Desktop Chrome/wagmi'",
+    "playwright:debug": "npx playwright test --debug",
     "playwright:debug:wallet": "npx playwright test --debug --grep connect.spec.ts",
-    "playwright:debug:canary": "npx playwright test --debug --grep canary.spec.ts"
+    "playwright:debug:canary": "npx playwright test --debug --grep canary.spec.ts --project='Desktop Chrome/wagmi'"
   },
   "dependencies": {
     "@chakra-ui/react": "2.8.2",

apps/laboratory/playwright.config.ts

@@ -4,7 +4,7 @@ import { BASE_URL } from './tests/shared/constants'
 import { config } from 'dotenv'
 import type { ModalFixture } from './tests/shared/fixtures/w3m-fixture'
 import { getAvailableDevices } from './tests/shared/utils/device'
-config({ path: './.env' })
+config({ path: './.env.local' })
 const availableDevices = getAvailableDevices()
 
 const LIBRARIES = ['wagmi', 'ethers'] as const

apps/laboratory/tests/README.md

@@ -7,12 +7,13 @@ We use Playwright as our functional test runner. It's configured to try multiple
 
 ## Setup
 
-- Make sure your `.env` is set up (see `.env.example` for reference)
+- Make sure your `.env.local` is set up (see `.env.example` for reference)
 - Run `npm run playwright:install` to install the browsers required to run the tests
+- Build Web3Modal by running `npm run build` in the root directory
 
 ## Running Tests
 
-- `npx playwright test` to run in default mode.
+- `npm run playwright:test` to run in default mode.
 - `npm run playwright:debug` to step by step see what the tests are doing
 
 ## Debugging

apps/laboratory/tests/canary.spec.ts

@@ -2,60 +2,44 @@ import { DEFAULT_SESSION_PARAMS } from './shared/constants'
 import { testMW } from './shared/fixtures/w3m-wallet-fixture'
 import { uploadCanaryResultsToCloudWatch } from './shared/utils/metrics'
 
-const ENV = process.env['ENV'] || 'dev'
+const ENV = process.env['ENVIRONMENT'] || 'dev'
 const REGION = process.env['REGION'] || 'eu-central-1'
 
 let startTime = 0
 
-testMW.beforeEach(
-  async ({ modalPage, walletPage, modalValidator, walletValidator, browserName }) => {
-    startTime = Date.now()
-    // Canary doesn't need all platforms
-    if (browserName !== 'chromium' || modalPage.library !== 'ethers') {
-      return
-    }
-    const uri = await modalPage.getConnectUri()
-    await walletPage.connectWithUri(uri)
-    await walletPage.handleSessionProposal(DEFAULT_SESSION_PARAMS)
-    await modalValidator.expectConnected()
-    await walletValidator.expectConnected()
-  }
-)
+testMW.beforeEach(async ({ modalPage, walletPage, modalValidator, walletValidator }) => {
+  // Give us extra time in a potentially slow canary deployment
+  testMW.setTimeout(120_000)
 
-testMW.afterEach(async ({ modalPage, modalValidator, walletValidator, browserName }) => {
-  // Canary doesn't need all platforms
-  if (browserName !== 'chromium' || modalPage.library !== 'ethers') {
-    return
-  }
+  startTime = Date.now()
+  const uri = await modalPage.getConnectUri()
+  await walletPage.connectWithUri(uri)
+  await walletPage.handleSessionProposal(DEFAULT_SESSION_PARAMS)
+  await modalValidator.expectConnected()
+  await walletValidator.expectConnected()
+})
+
+testMW.afterEach(async ({ modalPage, modalValidator, walletValidator }) => {
   await modalPage.disconnect()
   await modalValidator.expectDisconnected()
   await walletValidator.expectDisconnected()
 })
 
-testMW(
-  'it should sign',
-  async ({ modalPage, walletPage, modalValidator, walletValidator, browserName }) => {
-    // Canary doesn't need all platforms
-    if (browserName !== 'chromium' || modalPage.library !== 'ethers') {
-      testMW.skip()
-
-      return
-    }
-    await modalPage.sign()
-    await walletValidator.expectReceivedSign({})
-    await walletPage.handleRequest({ accept: true })
-    await modalValidator.expectAcceptedSign()
+testMW('it should sign', async ({ modalPage, walletPage, modalValidator, walletValidator }) => {
+  await modalPage.sign()
+  await walletValidator.expectReceivedSign({})
+  await walletPage.handleRequest({ accept: true })
+  await modalValidator.expectAcceptedSign()
 
-    if (ENV !== 'dev') {
-      const duration: number = Date.now() - startTime
-      await uploadCanaryResultsToCloudWatch(
-        ENV,
-        REGION,
-        'https://lab.web3modal.com/',
-        'HappyPath.sign',
-        true,
-        duration
-      )
-    }
+  if (ENV !== 'dev') {
+    const duration: number = Date.now() - startTime
+    await uploadCanaryResultsToCloudWatch(
+      ENV,
+      REGION,
+      'https://lab.web3modal.com/',
+      'HappyPath.sign',
+      true,
+      duration
+    )
   }
-)
+})

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

@@ -26,13 +26,23 @@ export class ModalPage {
     await this.page.goto(this.url)
   }
 
+  assertDefined<T>(value: T | undefined | null): T {
+    expect(value).toBeDefined()
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return value!
+  }
+
   async getConnectUri(): Promise<string> {
     await this.page.goto(this.url)
     await this.connectButton.click()
     await this.page.getByTestId('wallet-selector-walletconnect').click()
-    await this.page.waitForTimeout(1500)
 
-    return (await this.page.getByTestId('wui-qr-code').getAttribute('uri')) || ''
+    // Using getByTestId() doesn't work on my machine, I'm guessing because this element is inside of a <slot>
+    const qrCode = this.page.locator('wui-qr-code')
+    await expect(qrCode).toBeVisible()
+
+    return this.assertDefined(await qrCode.getAttribute('uri'))
   }
 
   async loginWithEmail(email: string) {

readme.md

@@ -17,13 +17,7 @@ Your on-ramp to web3 multichain. Web3Modal is a versatile library that makes it
 
 # Dev setup
 
-1. Create `apps/laboratory/env.local` file with following contents
-
-```zsh
-NEXT_PUBLIC_PROJECT_ID="your_project_id"
-NEXTAUTH_SECRET="your_session_secret"
-NEXTAUTH_URL=""
-```
+1. Create `apps/laboratory/.env.local` file using the template from `apps/laboratory/.env.example`
 
 2. In each of the `examples` create `.env.local` file with following contents
 
@@ -69,3 +63,7 @@ npm run changeset pre enter [tag]
 11. Check `Set as the last release` and publish release.
 12. Update Web3Modal for https://web3modal.com/ (https://github.com/WalletConnect/www-web3modal) and create a PR
 13. Update Web3Modal for https://app.web3inbox.com (https://github.com/WalletConnect/web3inbox) and create a PR
+
+### Running tests
+
+See <app/laboratory/tests/README.md>