feat(ui-test): connect flow

.github/workflows/ui_tests.yml

@@ -23,7 +23,7 @@ jobs:
   ui_tests:
     name: 'Playwright Tests'
     runs-on: ubuntu-latest
-    timeout-minutes: 10
+    timeout-minutes: 5
     steps:
       - name: checkout
         uses: actions/checkout@v3
@@ -51,3 +51,9 @@ jobs:
           name: playwright-report
           path: ./apps/laboratory/playwright-report/
           retention-days: 7
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: screenshots
+          path: ./apps/laboratory/screenshots/
+          retention-days: 7

.gitignore

@@ -9,3 +9,4 @@ lerna-debug.log
 .env
 .turbo
 playwright-report/
+screenshots/

apps/laboratory/tests/README.md

@@ -0,0 +1,3 @@
+# 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.

apps/laboratory/tests/connect.spec.ts

@@ -0,0 +1,14 @@
+import { DEFAULT_SESSION_PARAMS } from './shared/constants'
+import { testMW } from './shared/fixtures/w3m-wallet-fixture'
+
+// Initialize the connection
+testMW.beforeEach(async ({ modalPage, walletPage }) => {
+  await modalPage.copyConnectUriToClipboard()
+  await walletPage.connect()
+  await walletPage.handleSessionProposal(DEFAULT_SESSION_PARAMS)
+})
+
+testMW('Should connect', async ({ modalValidator, walletValidator }) => {
+  await modalValidator.expectConnected()
+  await walletValidator.expectConnected()
+})

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

@@ -1,2 +1,10 @@
+import type { SessionParams } from '../types'
+
 // Allow localhost
 export const LOCAL_LABS_URL = 'http://localhost:3000/library/wagmi/'
+export const WALLET_URL = 'https://react-wallet.walletconnect.com/'
+export const DEFAULT_SESSION_PARAMS: SessionParams = {
+  reqAccounts: ['1', '2'],
+  optAccounts: ['1', '2'],
+  accept: true
+}

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

@@ -1,9 +1,11 @@
 import { test as base } from '@playwright/test'
 import { ModalPage } from '../pages/ModalPage'
+import { ModalValidator } from '../validators/ModalValidator'
 
 // Declare the types of fixtures to use
 interface ModalFixture {
   modalPage: ModalPage
+  modalValidator: ModalValidator
 }
 
 // M -> test Modal
@@ -12,6 +14,10 @@ export const testM = base.extend<ModalFixture>({
     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'

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

@@ -0,0 +1,29 @@
+import { testM as base } from './w3m-fixture'
+import { WalletPage } from '../pages/WalletPage'
+import { WalletValidator } from '../validators/WalletValidator'
+
+// Declare the types of fixtures to use
+interface ModalWalletFixture {
+  walletPage: WalletPage
+  walletValidator: WalletValidator
+}
+
+// MW -> test Modal + Wallet
+export const testMW = 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'

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

@@ -1,12 +1,24 @@
-import type { Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 import { LOCAL_LABS_URL } from '../constants'
 
 export class ModalPage {
   private readonly baseURL = LOCAL_LABS_URL
 
-  constructor(public readonly page: Page) {}
+  private readonly connectButton: Locator
+
+  constructor(public readonly page: Page) {
+    this.connectButton = this.page.getByText('Connect Wallet')
+  }
 
   async load() {
     await this.page.goto(this.baseURL)
   }
+
+  async copyConnectUriToClipboard() {
+    await this.page.goto(this.baseURL)
+    await this.connectButton.click()
+    await this.page.getByText('WalletConnect').click()
+    await this.page.waitForTimeout(2000)
+    await this.page.getByText('Copy link').click()
+  }
 }

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

@@ -0,0 +1,47 @@
+/* eslint-disable no-await-in-loop */
+import type { Locator, Page } from '@playwright/test'
+import { WALLET_URL } from '../constants'
+import type { SessionParams } from '../types'
+
+export class WalletPage {
+  private readonly baseURL = WALLET_URL
+
+  private readonly gotoHome: Locator
+
+  constructor(public readonly page: Page) {
+    this.gotoHome = this.page.getByTestId('wc-connect')
+  }
+
+  async load() {
+    await this.page.goto(this.baseURL)
+  }
+
+  async connect() {
+    await this.gotoHome.click()
+
+    await this.page.getByTestId('uri-input').click()
+
+    // Paste clipboard
+    const isMac = process.platform === 'darwin'
+    const modifier = isMac ? 'Meta' : 'Control'
+    await this.page.keyboard.press(`${modifier}+KeyV`)
+    await this.page.getByTestId('uri-connect-button').click()
+  }
+
+  /**
+   * Handle a session proposal event in the wallet
+   * @param reqAccounts - required account numbers to select ex/ ['1', '2']
+   * @param optAccounts - optional account numbers to select ex/ ['1', '2']
+   * @param accept - accept or reject the session
+   */
+  async handleSessionProposal(opts: SessionParams) {
+    const variant = opts.accept ? `approve` : `reject`
+    await this.page.getByTestId(`session-${variant}-button`).focus()
+    await this.page.keyboard.press('Space')
+  }
+
+  async handleRequest({ accept }: { accept: boolean }) {
+    const variant = accept ? `approve` : `reject`
+    await this.page.getByTestId(`request-button-${variant}`).click()
+  }
+}

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

@@ -0,0 +1,5 @@
+export interface SessionParams {
+  reqAccounts: string[]
+  optAccounts: string[]
+  accept: boolean
+}

apps/laboratory/tests/shared/validators/ModalValidator.ts

@@ -0,0 +1,10 @@
+import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+
+export class ModalValidator {
+  constructor(public readonly page: Page) {}
+
+  async expectConnected() {
+    await expect(this.page.getByText('Sign Message')).toBeVisible()
+  }
+}

apps/laboratory/tests/shared/validators/WalletValidator.ts

@@ -0,0 +1,16 @@
+import { expect } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
+
+export class WalletValidator {
+  private readonly gotoSessions: Locator
+
+  constructor(public readonly page: Page) {
+    this.gotoSessions = this.page.getByTestId('sessions')
+  }
+
+  async expectConnected() {
+    await this.page.reload()
+    await this.gotoSessions.click()
+    await expect(this.page.getByTestId('session-card')).toBeVisible()
+  }
+}