From 51e90b2c101b245bddeb47361006caec6028c121 Mon Sep 17 00:00:00 2001 From: Chris Smith Date: Thu, 15 Feb 2024 16:19:34 -0500 Subject: [PATCH 1/6] fix: improve UI tests --- .github/workflows/ci_canary.yml | 2 +- Dockerfile => Dockerfile.canary | 0 apps/laboratory/package.json | 8 ++++---- apps/laboratory/playwright.config.ts | 2 +- apps/laboratory/tests/README.md | 5 +++-- apps/laboratory/tests/canary.spec.ts | 20 +++---------------- .../tests/shared/pages/ModalPage.ts | 12 +++++++++-- readme.md | 12 +++++------ 8 files changed, 27 insertions(+), 34 deletions(-) rename Dockerfile => Dockerfile.canary (100%) diff --git a/.github/workflows/ci_canary.yml b/.github/workflows/ci_canary.yml index 80830037e8..e56c6ff91d 100644 --- a/.github/workflows/ci_canary.yml +++ b/.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 diff --git a/Dockerfile b/Dockerfile.canary similarity index 100% rename from Dockerfile rename to Dockerfile.canary diff --git a/apps/laboratory/package.json b/apps/laboratory/package.json index 5b2b304610..dc560c849b 100644 --- a/apps/laboratory/package.json +++ b/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", diff --git a/apps/laboratory/playwright.config.ts b/apps/laboratory/playwright.config.ts index b8c54932e1..0501797eb5 100644 --- a/apps/laboratory/playwright.config.ts +++ b/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 diff --git a/apps/laboratory/tests/README.md b/apps/laboratory/tests/README.md index f33c233623..5877cd8302 100644 --- a/apps/laboratory/tests/README.md +++ b/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 diff --git a/apps/laboratory/tests/canary.spec.ts b/apps/laboratory/tests/canary.spec.ts index 195a82bbda..18cecdb074 100644 --- a/apps/laboratory/tests/canary.spec.ts +++ b/apps/laboratory/tests/canary.spec.ts @@ -8,12 +8,8 @@ const REGION = process.env['REGION'] || 'eu-central-1' let startTime = 0 testMW.beforeEach( - async ({ modalPage, walletPage, modalValidator, walletValidator, browserName }) => { + async ({ modalPage, walletPage, modalValidator, walletValidator }) => { 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) @@ -22,11 +18,7 @@ testMW.beforeEach( } ) -testMW.afterEach(async ({ modalPage, modalValidator, walletValidator, browserName }) => { - // Canary doesn't need all platforms - if (browserName !== 'chromium' || modalPage.library !== 'ethers') { - return - } +testMW.afterEach(async ({ modalPage, modalValidator, walletValidator }) => { await modalPage.disconnect() await modalValidator.expectDisconnected() await walletValidator.expectDisconnected() @@ -34,13 +26,7 @@ testMW.afterEach(async ({ modalPage, modalValidator, walletValidator, browserNam 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 - } + async ({ modalPage, walletPage, modalValidator, walletValidator }) => { await modalPage.sign() await walletValidator.expectReceivedSign({}) await walletPage.handleRequest({ accept: true }) diff --git a/apps/laboratory/tests/shared/pages/ModalPage.ts b/apps/laboratory/tests/shared/pages/ModalPage.ts index 95db31f3ce..05c3748335 100644 --- a/apps/laboratory/tests/shared/pages/ModalPage.ts +++ b/apps/laboratory/tests/shared/pages/ModalPage.ts @@ -26,13 +26,21 @@ export class ModalPage { await this.page.goto(this.url) } + assertDefined(value: T | undefined | null): T { + expect(value).toBeDefined() + return value! + } + async getConnectUri(): Promise { 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 + const qrCode = this.page.locator('wui-qr-code') + await expect(qrCode).toBeVisible() + + return this.assertDefined(await qrCode.getAttribute('uri')) } async loginWithEmail(email: string) { diff --git a/readme.md b/readme.md index 0ba04bbc59..52aae95cad 100644 --- a/readme.md +++ b/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 From 1d0cc119f1665aababb416974d80d1f944027ed9 Mon Sep 17 00:00:00 2001 From: Chris Smith Date: Thu, 15 Feb 2024 16:23:36 -0500 Subject: [PATCH 2/6] fix: prettier --- apps/laboratory/tests/canary.spec.ts | 53 +++++++++++++--------------- 1 file changed, 24 insertions(+), 29 deletions(-) diff --git a/apps/laboratory/tests/canary.spec.ts b/apps/laboratory/tests/canary.spec.ts index 18cecdb074..f50855cae4 100644 --- a/apps/laboratory/tests/canary.spec.ts +++ b/apps/laboratory/tests/canary.spec.ts @@ -7,16 +7,14 @@ const REGION = process.env['REGION'] || 'eu-central-1' let startTime = 0 -testMW.beforeEach( - async ({ modalPage, walletPage, modalValidator, walletValidator }) => { - 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.beforeEach(async ({ modalPage, walletPage, modalValidator, walletValidator }) => { + 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() @@ -24,24 +22,21 @@ testMW.afterEach(async ({ modalPage, modalValidator, walletValidator }) => { await walletValidator.expectDisconnected() }) -testMW( - 'it should sign', - async ({ modalPage, walletPage, modalValidator, walletValidator }) => { - 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 + ) } -) +}) From c717e1d4886493bbb42e6fce7b5ffd2407f61eea Mon Sep 17 00:00:00 2001 From: Chris Smith Date: Thu, 15 Feb 2024 16:34:27 -0500 Subject: [PATCH 3/6] fix: lint --- .eslintrc.json | 3 ++- apps/laboratory/tests/shared/pages/ModalPage.ts | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index 218f0cc648..d2c9f8167b 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -21,7 +21,8 @@ ".turbo", "exbamples", "coverage", - ".changeset" + ".changeset", + "playwright-report" ], "rules": { // Core diff --git a/apps/laboratory/tests/shared/pages/ModalPage.ts b/apps/laboratory/tests/shared/pages/ModalPage.ts index 05c3748335..eb51de26ea 100644 --- a/apps/laboratory/tests/shared/pages/ModalPage.ts +++ b/apps/laboratory/tests/shared/pages/ModalPage.ts @@ -28,6 +28,8 @@ export class ModalPage { assertDefined(value: T | undefined | null): T { expect(value).toBeDefined() + + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion return value! } From aa5eb0826c1f725074535a66ebc6bf56dbe76cef Mon Sep 17 00:00:00 2001 From: Chris Smith Date: Thu, 15 Feb 2024 17:06:48 -0500 Subject: [PATCH 4/6] fix: env var name --- apps/laboratory/tests/canary.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/laboratory/tests/canary.spec.ts b/apps/laboratory/tests/canary.spec.ts index f50855cae4..7ff0c1b236 100644 --- a/apps/laboratory/tests/canary.spec.ts +++ b/apps/laboratory/tests/canary.spec.ts @@ -2,7 +2,7 @@ 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 From a3ab7d00e2ea42a3bce4dd96e464da7d7d2f8d85 Mon Sep 17 00:00:00 2001 From: Chris Smith Date: Thu, 15 Feb 2024 19:35:47 -0500 Subject: [PATCH 5/6] fix: increase timeout because canary runs in a minimal resource environment --- apps/laboratory/tests/canary.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/laboratory/tests/canary.spec.ts b/apps/laboratory/tests/canary.spec.ts index 7ff0c1b236..2688202cd7 100644 --- a/apps/laboratory/tests/canary.spec.ts +++ b/apps/laboratory/tests/canary.spec.ts @@ -8,6 +8,8 @@ const REGION = process.env['REGION'] || 'eu-central-1' let startTime = 0 testMW.beforeEach(async ({ modalPage, walletPage, modalValidator, walletValidator }) => { + testMW.setTimeout(120_000) // give us extra time in a potentially slow canary deployment + startTime = Date.now() const uri = await modalPage.getConnectUri() await walletPage.connectWithUri(uri) From 29531c7c2c7bd8f63d025881355f2012e32d8f5f Mon Sep 17 00:00:00 2001 From: Chris Smith Date: Fri, 16 Feb 2024 09:28:36 -0500 Subject: [PATCH 6/6] fix: lint --- apps/laboratory/tests/canary.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/laboratory/tests/canary.spec.ts b/apps/laboratory/tests/canary.spec.ts index 2688202cd7..f0d861496a 100644 --- a/apps/laboratory/tests/canary.spec.ts +++ b/apps/laboratory/tests/canary.spec.ts @@ -8,7 +8,8 @@ const REGION = process.env['REGION'] || 'eu-central-1' let startTime = 0 testMW.beforeEach(async ({ modalPage, walletPage, modalValidator, walletValidator }) => { - testMW.setTimeout(120_000) // give us extra time in a potentially slow canary deployment + // Give us extra time in a potentially slow canary deployment + testMW.setTimeout(120_000) startTime = Date.now() const uri = await modalPage.getConnectUri()