✅ test(metamask): Add E2E test for prepareExtension (#915)

.gitignore

@@ -22,6 +22,12 @@ types
 # Vitest
 coverage
 
+### Playwright
+
+test-results
+playwright-report
+playwright/.cache
+
 ### Synpress
 
 .cache-synpress

biome.json

@@ -8,6 +8,8 @@
       "**/dist",
       "**/types",
       "**/coverage",
+      "**/test-results",
+      "**/playwright-report",
       "**/.cache-synpress"
     ]
   },

wallets/metamask/environment.d.ts

@@ -0,0 +1,10 @@
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      CI: boolean
+      HEADLESS: boolean
+    }
+  }
+}
+
+export {}

wallets/metamask/package.json

@@ -23,13 +23,17 @@
     "clean": "rimraf dist types",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:headless": "HEADLESS=true playwright test",
     "test:watch": "vitest watch",
     "types:check": "tsc --noEmit"
   },
   "dependencies": {
     "core": "workspace:*"
   },
   "devDependencies": {
+    "@playwright/test": "^1.38.1",
+    "@types/node": "^20.8.0",
     "@vitest/coverage-v8": "1.0.0-beta.0",
     "rimraf": "^5.0.1",
     "tsconfig": "workspace:*",

wallets/metamask/playwright.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  // Look for test files in the "tests/e2e" directory, relative to this configuration file.
+  testDir: './test/e2e',
+
+  // Run all tests in parallel.
+  // TODO: Enable later once we have more tests.
+  fullyParallel: false,
+
+  // Fail the build on CI if you accidentally left test.only in the source code.
+  forbidOnly: !!process.env.CI,
+
+  // Opt out of parallel tests on CI.
+  workers: process.env.CI ? 1 : undefined,
+
+  // Concise 'dot' for CI, default 'html' when running locally. See https://playwright.dev/docs/test-reporters.
+  reporter: process.env.CI ? 'dot' : 'html',
+
+  // Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions.
+  use: {
+    // Collect traces for all failed tests. See https://playwright.dev/docs/trace-viewer.
+    trace: 'retain-on-failure'
+  },
+
+  // Configure projects for major browsers.
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    }
+  ]
+})

wallets/metamask/test/e2e/prepareExtension.spec.ts

@@ -0,0 +1,45 @@
+import { type Page, chromium, test as base } from '@playwright/test'
+import { prepareExtension } from '../../src/prepareExtension'
+
+const test = base.extend({
+  context: async ({ context: _ }, use) => {
+    const metamaskPath = await prepareExtension()
+
+    const browserArgs = [
+      `--disable-extensions-except=${metamaskPath}`,
+      `--load-extension=${metamaskPath}`
+    ]
+
+    if (process.env.HEADLESS) {
+      browserArgs.push('--headless=new')
+    }
+
+    const context = await chromium.launchPersistentContext('', {
+      headless: false,
+      args: browserArgs
+    })
+
+    try {
+      await context.waitForEvent('page', { timeout: 5000 })
+    } catch {
+      throw new Error('[FIXTURE] MetaMask extension did not load in time')
+    }
+
+    await use(context)
+  },
+  page: async ({ context }, use) => {
+    const metamaskOnboardingPage = context.pages()[1] as Page
+    await use(metamaskOnboardingPage)
+  }
+})
+
+const { describe, expect } = test
+
+describe('prepareExtension', () => {
+  test('onboarding page opens up', async ({ page }) => {
+    await expect(page).toHaveTitle('MetaMask')
+    await expect(
+      page.getByRole('heading', { name: "Let's get started" })
+    ).toBeVisible()
+  })
+})

wallets/metamask/test/prepareExtension.test.ts → wallets/metamask/test/unit/prepareExtension.test.ts

@@ -4,7 +4,7 @@ import {
   DEFAULT_METAMASK_VERSION,
   EXTENSION_DOWNLOAD_URL,
   prepareExtension
-} from '../src/prepareExtension'
+} from '../../src/prepareExtension'
 
 const MOCK_CACHE_DIR_PATH = 'mockCacheDirPath'
 const MOCK_EXTENSION_ARCHIVE_PATH = 'mockExtensionArchivePath'

wallets/metamask/tsconfig.json

@@ -1,10 +1,16 @@
 {
   "extends": "./tsconfig.build.json",
   "compilerOptions": {
-    "rootDir": "."
+    "rootDir": ".",
+    "exactOptionalPropertyTypes": false // Allows for `undefined` in `playwright.config.ts`
   },
   "include": [
     "src",
     "test"
+  ],
+  "files": [
+    "environment.d.ts",
+    "playwright.config.ts",
+    "vitest.config.ts",
   ]
 }

wallets/metamask/vitest.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    dir: 'test/unit'
+  }
+})