Feat/e2e pipeline

.github/docs/dom-selectors.md

@@ -161,4 +161,6 @@
 | w3m-text           | `component-text`                 | W3M Text              | `<span>`   |
 | w3m-modal-content  | `component-modal-content`        | W3M Content           | `<main>`   |
 | w3m-modal-footer   | `component-modal-footer`         | W3M Footer            | `<footer>` |
-| w3m-modal-backcard   | `component-modal-backcard`         | W3M Backcard            | `<div>` |
+| w3m-modal-backcard   | `component-modal-backcard`         | W3M Backcard            | `<div>` |
+| w3m-modal-backcard   | `backcard-help`         | Help Button on Backcard | `<button>` |
+| w3m-modal-backcard   | `backcard-close`         | Close Button on Backcard           | `<buttong>` |

.github/workflows/pr_checks.yml

@@ -46,4 +46,4 @@ jobs:
       - name: install
         run: npm ci
       - name: check
-        run: npm run ${{ matrix.style-command }}
+        run: npm run ${{ matrix.style-command }}

.github/workflows/pr_e2e_tests.yml

@@ -0,0 +1,55 @@
+name: E2E tests
+
+on:
+  push:
+    branches:
+      - feat/e2e-pipeline
+
+jobs:
+  e2e_tests:
+      runs-on: ubuntu-latest
+      timeout-minutes: 30
+      permissions:
+        contents: read
+        deployments: write
+      steps:
+        - name: checkout
+          uses: actions/checkout@v3
+        - name: setup-node
+          uses: actions/setup-node@v3
+          with:
+            node-version: 18.x
+            cache: 'npm'
+            cache-dependency-path: 'package-lock.json'
+        - name: install deps
+          run: npm ci
+        - name: build
+          run: npm run build
+          env: 
+            NEXT_PUBLIC_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_PROJECT_ID }}
+        - name: Install Playwright Browsers
+          run: npx playwright install --with-deps
+        - name: cloudflare-preview-url
+          id: cloudflare_preview_url
+          uses: zentered/[email protected]
+          env:
+            CLOUDFLARE_API_TOKEN: ${{ secrets.CF_API_TOKEN }}
+            CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}
+          with:
+            cloudflare_project_id: ${{ secrets.CF_PROJECT_ID}}
+            wait_until_ready: true
+        - name: Get URL
+          run: echo "https://${{ steps.cloudflare_preview_url.outputs.preview_url }}"
+        - name: Run Playwright tests
+          working-directory: ./laboratory
+          run: npx playwright test
+          env:
+            LABS_URL: ${{ steps.cloudflare_preview_url.outputs.preview_url }}
+            WALLET_URL: "https://react-wallet.walletconnect.com/"
+            NEXT_PUBLIC_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_PROJECT_ID }}
+        - uses: actions/upload-artifact@v3
+          if: always()
+          with:
+            name: playwright-report
+            path: ./laboratory/playwright-report/
+            retention-days: 30

.gitignore

@@ -7,3 +7,6 @@ out
 lerna-debug.log
 .env.local
 .env
+/test-results/
+/playwright-report/
+/playwright/.cache/

laboratory/.env.local.example

@@ -1,3 +1,10 @@
 # Get your projectId at https://cloud.walletconnect.com
 NEXT_PUBLIC_PROJECT_ID=""
 NEXT_PUBLIC_SENTRY_DSN="" # OPTIONAL
+
+# E2E test vars (optional)
+LOCAL_LABS_URL="http://localhost:3000"
+LOCAL_WALLET_URL="http://localhost:3001"
+
+LABS_URL="https://labs.walletconnect.com"
+WALLET_URL="https://react-wallet.walletconnect.com/"

laboratory/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/

laboratory/package.json

@@ -4,14 +4,19 @@
   "private": true,
   "scripts": {
     "dev": "rm -rf .next; next dev",
-    "build": "next build"
+    "build": "next build",
+    "playwright:start": "next dev",
+    "playwright:install": "playwright install --with-deps",
+    "playwright:test": "playwright test",
+    "playwright:debug": "playwright test --debug"
   },
   "dependencies": {
     "@nextui-org/react": "1.0.0-beta.13",
     "@sentry/react": "7.60.0",
     "@sentry/tracing": "7.60.0",
     "@web3modal/ethereum": "2.7.1",
     "@web3modal/react": "2.7.1",
+    "dotenv": "^16.3.1",
     "next": "13.4.12",
     "react": "18.2.0",
     "react-dom": "18.2.0",

laboratory/playwright.config.ts

@@ -0,0 +1,75 @@
+import { defineConfig, devices } from '@playwright/test'
+
+import { config } from 'dotenv'
+config({ path: './.env.local' })
+
+export default defineConfig({
+  testDir: './tests',
+
+  fullyParallel: true,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'list',
+
+  expect: {
+    timeout: (process.env.CI ? 60 : 5) * 1000
+  },
+  timeout: 60 * 1000,
+
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: process.env.CI ? process.env.LABS_URL : process.env.LOCAL_LABS_URL,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    video: process.env.CI ? 'off' : 'on-first-retry'
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      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: 'npm run playwright:start',
+    url: process.env.CI ? process.env.LABS_URL : process.env.LOCAL_LABS_URL
+  }
+})

laboratory/src/components/NotificationModal.tsx

@@ -15,7 +15,9 @@ export function NotificationModal() {
       css={{ maxWidth: 900, margin: '0 auto' }}
     >
       <Modal.Header>
-        <Text h3>{title}</Text>
+        <Text h3 data-testid="notification-header">
+          {title}
+        </Text>
       </Modal.Header>
       <Modal.Body
         css={{
@@ -24,6 +26,7 @@ export function NotificationModal() {
           borderRadius: 16,
           padding: 0
         }}
+        data-testid="notification-body"
       >
         <pre>{body}</pre>
       </Modal.Body>

laboratory/src/components/WagmiWeb3ModalWidget.tsx

@@ -64,9 +64,13 @@ export default function WagmiWeb3ModalWidget() {
 
           {isConnected ? (
             <>
-              <Button onPress={onSignMessage}>Sign Message</Button>
+              <Button onPress={onSignMessage} data-testid="lab-sign">
+                Sign Message
+              </Button>
               <Spacer />
-              <Button onPress={onSignTypedData}>Sign Typed Data</Button>
+              <Button onPress={onSignTypedData} data-testid="lab-sign-typed">
+                Sign Typed Data
+              </Button>
             </>
           ) : (
             <>

laboratory/src/pages/index.tsx

@@ -14,6 +14,13 @@ const reactCards = [
     link: '/with-wagmi/react-themed',
     color: 'secondary',
     libraries: ['@web3modal/react', '@web3modal/ethereum', 'wagmi', 'viem']
+  },
+  {
+    title: 'With Ethers Wagmi',
+    description: 'Wagmi playground using older deps with Ethers',
+    link: '/with-wagmi/react-ethers',
+    color: 'secondary',
+    libraries: ['@web3modal/react', '@web3modal/ethereum', 'wagmi', 'ethers']
   }
 ] as const
 

laboratory/tests/basic-tests.spec.ts

@@ -0,0 +1,8 @@
+import { testM, expect } from './shared/fixtures/w3m-fixture'
+
+testM.describe('Modal only tests', () => {
+  testM('Should be able to open modal', async ({ modalPage }) => {
+    await modalPage.page.getByTestId('partial-core-connect-button').click()
+    await expect(modalPage.page.getByTestId('component-header-action-button')).toBeVisible()
+  })
+})

laboratory/tests/shared/constants/index.ts

@@ -0,0 +1,11 @@
+import type { SessionParams } from '../types'
+
+export const DEFAULT_SESSION_PARAMS: SessionParams = {
+  reqAccounts: ['1', '2'],
+  optAccounts: ['1', '2'],
+  accept: true
+}
+
+// Will be moved to env vars in the future
+export const LOCAL_LAB_URL = 'http://localhost:3000/with-wagmi/react'
+export const LOCAL_WALLET_URL = 'http://localhost:3001'

laboratory/tests/shared/fixtures/fixture.spec.ts

@@ -0,0 +1,6 @@
+import { testMW, expect } from './w3m-wallet-fixture'
+
+testMW('Open pages', ({ modalPage, walletPage }) => {
+  expect(modalPage).toBeDefined()
+  expect(walletPage).toBeDefined()
+})

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

@@ -0,0 +1,23 @@
+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
+export const testM = 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'

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'

laboratory/tests/shared/pages/ModalPage.ts

@@ -0,0 +1,48 @@
+import type { Locator, Page } from '@playwright/test'
+import { LOCAL_LAB_URL } from '../constants'
+
+export class ModalPage {
+  private readonly baseURL = LOCAL_LAB_URL
+
+  private readonly w3modal: Locator
+
+  constructor(public readonly page: Page) {
+    this.w3modal = this.page.getByTestId('partial-core-connect-button')
+  }
+
+  async load() {
+    await this.page.goto(this.baseURL)
+  }
+
+  async getUri() {
+    await this.page.goto(this.baseURL)
+    await this.w3modal.click()
+    await this.page.getByTestId('component-header-action-button').click()
+  }
+
+  async disconnect() {
+    await this.page.getByTestId('partial-account-address').click()
+    await this.page.getByTestId('view-account-disconnect-button').click()
+  }
+
+  async sign() {
+    await this.page.getByTestId('lab-sign').click()
+  }
+
+  async signTyped() {
+    await this.page.getByTestId('lab-sign-typed').click()
+  }
+
+  async switchChain({ chainName }: { chainName: string }) {
+    await this.page.getByTestId('partial-network-switch-button').click()
+    await this.page.getByText(new RegExp(chainName, 'u')).click()
+  }
+
+  async helpModal() {
+    await this.page.getByTestId('backcard-help').click()
+  }
+
+  async closeModal() {
+    await this.page.getByTestId('backcard-close').click()
+  }
+}