feat(ui-tests): cover ethers (#1646)

apps/laboratory/playwright.config.ts

@@ -1,10 +1,11 @@
 import { defineConfig, devices } from '@playwright/test'
-import { LOCAL_LABS_URL } from './tests/shared/constants'
+import { BASE_URL } from './tests/shared/constants'
 
 import { config } from 'dotenv'
+import type { ModalFixture } from './tests/shared/fixtures/w3m-fixture'
 config({ path: './.env.local' })
 
-export default defineConfig({
+export default defineConfig<ModalFixture>({
   testDir: './tests',
 
   fullyParallel: true,
@@ -19,7 +20,7 @@ export default defineConfig({
 
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: LOCAL_LABS_URL,
+    baseURL: BASE_URL,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -30,20 +31,30 @@ export default defineConfig({
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] }
+      name: 'chromium/wagmi',
+      use: { ...devices['Desktop Chrome'], library: 'wagmi' }
     },
 
     {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] }
+      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' }
     }
   ],
 
   /* Run your local dev server before starting the tests */
   webServer: {
     command: 'npm run playwright:start',
-    url: LOCAL_LABS_URL,
+    url: BASE_URL,
     reuseExistingServer: !process.env['CI']
   }
 })

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

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

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

@@ -3,15 +3,17 @@ import { ModalPage } from '../pages/ModalPage'
 import { ModalValidator } from '../validators/ModalValidator'
 
 // Declare the types of fixtures to use
-interface ModalFixture {
+export interface ModalFixture {
   modalPage: ModalPage
   modalValidator: ModalValidator
+  library: string
 }
 
 // M -> test Modal
 export const testM = base.extend<ModalFixture>({
-  modalPage: async ({ page }, use) => {
-    const modalPage = new ModalPage(page)
+  library: ['wagmi', { option: true }],
+  modalPage: async ({ page, library }, use) => {
+    const modalPage = new ModalPage(page, library)
     await modalPage.load()
     await use(modalPage)
   },

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

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

dangerfile.ts

@@ -278,8 +278,9 @@ checkSdkVersion()
 async function checkDevelopmentConstants() {
   for (const f of updated_files) {
     const diff = await diffForFile(f)
+    const fileContent = await danger.github.utils.fileContents(f)
 
-    if (diff?.added.includes('localhost:') && !diff?.added.includes('// Allow localhost')) {
+    if (diff?.added.includes('localhost:') && !fileContent.includes('// Allow localhost')) {
       fail(`${f} uses localhost: which is likely a mistake`)
     }
   }