feat: tests

.github/workflows/ui_test.yml

@@ -0,0 +1,29 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+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 }}
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

playwright.config.ts

@@ -1,8 +1,9 @@
 import { defineConfig, devices } from '@playwright/test'
+import { config } from 'dotenv'
+
 import { BASE_URL } from './tests/shared/constants'
+import type { ModalFixture } from './tests/shared/fixtures/fixture'
 
-import { config } from 'dotenv'
-import type { ModalFixture } from './tests/shared/fixtures/w3m-fixture'
 config({ path: './.env' })
 
 export default defineConfig<ModalFixture>({
@@ -32,22 +33,12 @@ export default defineConfig<ModalFixture>({
   projects: [
     {
       name: 'chromium/wagmi',
-      use: { ...devices['Desktop Chrome'], library: 'wagmi' }
+      use: { ...devices['Desktop Chrome'] }
     },
 
     {
       name: 'firefox/wagmi',
-      use: { ...devices['Desktop Firefox'], library: 'wagmi' }
-    },
-
-    {
-      name: 'chromium/ethers',
-      use: { ...devices['Desktop Chrome'], library: 'ethers' }
-    },
-
-    {
-      name: 'firefox/ethers',
-      use: { ...devices['Desktop Firefox'], library: 'ethers' }
+      use: { ...devices['Desktop Firefox'] }
     }
   ],
 

src/constants/projects.ts

@@ -35,7 +35,8 @@ export const COMING_SOON_PROJECTS: Array<INotifyApp> = [
   {
     id: 'chainspot',
     name: 'Chainspot',
-    description: 'Bridge&swap across 27 chains at the best rates and research data about 100+ Web3 products.',
+    description:
+      'Bridge&swap across 27 chains at the best rates and research data about 100+ Web3 products.',
     url: 'https://app.chainspot.io/',
     isComingSoon: true,
     isVerified: false,

src/contexts/W3iContext/hooks/notifyHooks.ts

@@ -51,15 +51,15 @@ export const useNotifyState = (w3iProxy: Web3InboxProxy, proxyReady: boolean) =>
    * load in progress state using interval until it is
    */
   useEffect(() => {
-    if(watchSubscriptionsComplete) {
-      return noop;
+    if (watchSubscriptionsComplete) {
+      return noop
     }
     // Account for sync init
     const intervalId = setInterval(() => {
-    if (notifyClient?.hasFinishedInitialLoad()) {
-      setWatchSubscriptionsComplete(true)
-      return noop;
-    }
+      if (notifyClient?.hasFinishedInitialLoad()) {
+        setWatchSubscriptionsComplete(true)
+        return noop
+      }
       refreshNotifyState()
     }, 100)
 

tests/shared/fixtures/fixture.ts

@@ -0,0 +1,25 @@
+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>({
+  library: ['wagmi', { option: true }],
+  modalPage: async ({ page, library }, 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/w3m-wallet-fixture.ts → tests/shared/fixtures/wallet-fixture.ts

@@ -1,32 +1,14 @@
-import { testM as base, testMSiwe as siwe } from './w3m-fixture'
 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
 }
 
-// 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 const testMWSiwe = siwe.extend<ModalWalletFixture>({
+export const testWallet = base.extend<ModalWalletFixture>({
   walletPage: async ({ context, browserName }, use) => {
     // WalletPage needs clipboard permissions with chromium to paste URI
     if (browserName === 'chromium') {

tests/shared/pages/InboxPage.ts

@@ -0,0 +1,58 @@
+import type { Locator, Page } from '@playwright/test'
+
+import { BASE_URL } from '../constants'
+
+export class ModalPage {
+  private readonly baseURL = BASE_URL
+
+  private readonly connectButton: Locator
+
+  constructor(public readonly page: Page) {
+    this.connectButton = this.page.getByRole('button', { name: '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.getByTestId('wallet-selector-walletconnect').click()
+    await this.page.waitForTimeout(2000)
+    await this.page.getByTestId('copy-wc2-uri').click()
+  }
+
+  async disconnect() {
+    await this.page.getByTestId('account-button').click()
+    await this.page.getByTestId('disconnect-button').click()
+  }
+
+  async promptSiwe() {
+    await this.page.getByRole('button', { name: 'Sign in with wallet' }).click()
+  }
+
+  async subscribe(nth: number) {
+    await this.page.locator('.AppCard__body > .AppCard__body__subscribe').nth(nth).click()
+  }
+
+  async unsubscribe() {
+    await this.page.getByRole('button', { name: 'Subscribed' }).click()
+    await this.page.getByRole('button', { name: 'Subscribed' }).isHidden()
+    await this.page.getByRole('button').first().click()
+    await this.page.getByRole('button', { name: 'Unsubscribe' }).click()
+    await this.page.getByRole('button', { name: 'Unsubscribe' }).nth(1).click()
+    await this.page.waitForTimeout(2000)
+  }
+
+  async cancelSiwe() {
+    await this.page.getByTestId('w3m-connecting-siwe-cancel').click()
+  }
+
+  async switchNetwork(network: string) {
+    await this.page.getByTestId('account-button').click()
+    await this.page.getByTestId('w3m-account-select-network').click()
+    await this.page.getByTestId(`w3m-network-switch-${network}`).click()
+    await this.page.getByTestId(`w3m-header-close`).click()
+  }
+}

tests/shared/pages/WalletPage.ts

@@ -1,5 +1,6 @@
 /* eslint-disable no-await-in-loop */
 import type { Locator, Page } from '@playwright/test'
+
 import { WALLET_URL } from '../constants'
 import type { SessionParams } from '../types'