Add Playwright e2e tests

davidmyersdev · davidmyersdev · commit 7c9d94a414a8 · 2023-12-25T16:07:23.000-05:00
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -19,6 +19,18 @@ jobs:
       - uses: ./.github/actions/install-dependencies
       - name: Run the linter
         run: pnpm lint
+  test-e2e:
+    needs:
+      - install-dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/install-dependencies
+      - run: pnpm build:core
+      - run: pnpm build:shims
+      - run: pnpm build:banner
+      - run: pnpm playwright install --with-deps
+      - run: pnpm -r test
   test-unit:
     needs:
       - install-dependencies
@@ -29,7 +41,7 @@ jobs:
       - run: pnpm build:core
       - run: pnpm build:shims
       - run: pnpm build:banner
-      - run: pnpm test
+      - run: pnpm test:build
   typecheck:
     needs:
       - install-dependencies
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,10 @@
 *.log
 .DS_Store
+.cache
+/*.tgz
+blob-report
 dist
 node_modules
-package.tgz
+playwright-report
+test-results
+tmp
diff --git a/examples/vanilla/index.html b/examples/vanilla/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Test</title>
+    <title>Example (Vanilla)</title>
   </head>
   <body>
     <script type="module" src="/src/main.ts"></script>
diff --git a/examples/vanilla/package.json b/examples/vanilla/package.json
@@ -4,12 +4,17 @@
   "scripts": {
     "build": "vite build",
     "dev": "vite",
+    "test": "CI=true run-p test:build test:dev",
+    "test:build": "VITE_COMMAND=build WEB_SERVER_COMMAND='vite build && vite preview --port 5174' WEB_SERVER_URL='http://localhost:5174' playwright test",
+    "test:dev": "VITE_COMMAND=dev WEB_SERVER_COMMAND='vite dev' WEB_SERVER_URL='http://localhost:5173' playwright test",
     "typecheck": "tsc"
   },
   "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^18.18.8",
     "lodash-es": "^4.17.21",
     "memfs": "^4.6.0",
+    "npm-run-all": "^4.1.5",
     "ohmyfetch": "^0.4.21",
     "typescript": "^5.2.2",
     "vite": "^4.5.0",
diff --git a/examples/vanilla/playwright.config.ts b/examples/vanilla/playwright.config.ts
@@ -0,0 +1,29 @@
+import { defineConfig, devices } from '@playwright/test'
+
+const webServerCommand = process.env.WEB_SERVER_COMMAND || 'pnpm dev'
+const webServerUrl = process.env.WEB_SERVER_URL || 'http://localhost:5173'
+
+// https://playwright.dev/docs/test-configuration
+export default defineConfig({
+  forbidOnly: !!process.env.CI,
+  fullyParallel: true,
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  reporter: 'html',
+  retries: process.env.CI ? 2 : 0,
+  testDir: './test/e2e',
+  use: {
+    baseURL: webServerUrl,
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: webServerCommand,
+    stdout: 'ignore',
+    url: webServerUrl,
+  },
+  workers: process.env.CI ? 1 : undefined,
+})
diff --git a/examples/vanilla/src/main.ts b/examples/vanilla/src/main.ts
@@ -22,7 +22,7 @@ console.log(resolve('.'))
 console.log(process)
 console.log(process.env)
 console.log(globalThis.Array)
-console.log(Buffer.from([0x00, 0x00, 0x00, 0x00, 0xFF, 0xFF, 0xFF, 0xFF]).readBigUInt64BE(0))
+console.log(Buffer.from([0x00, 0x00, 0x00, 0x00, 0xFF, 0xFF, 0xFF, 0xFF]).readBigUInt64BE(0).toString())
 console.log(Buffer.from([0x62, 0x75, 0x66, 0x66, 0x65, 0x72]))
 console.log(Array)
 console.log(readFileSync('./test.txt', 'utf-8'))
diff --git a/examples/vanilla/test/e2e/main.spec.ts b/examples/vanilla/test/e2e/main.spec.ts
@@ -0,0 +1,59 @@
+import { expect, test } from '@playwright/test'
+import { isBuild, isDev } from '/test/utils'
+
+test('sets the page title', async ({ page }) => {
+  await page.goto('/')
+
+  await expect(page).toHaveTitle('Example (Vanilla)')
+})
+
+test('logs the correct values', async ({ page }) => {
+  const errors = []
+  const logs = []
+
+  page.on('console', (message) => {
+    logs.push(message.text())
+  })
+
+  page.on('pageerror', (error) => {
+    errors.push(error.message)
+  })
+
+  await page.goto('/')
+
+  expect(errors).toEqual([])
+
+  if (isBuild) {
+    expect(logs).toEqual([
+      '{Volume: , vol: Volume, createFsFromVolume: , fs: Object, memfs: }',
+      'function fetch() { [native code] }',
+      '/',
+      'Module',
+      '{}',
+      'function Array() { [native code] }',
+      '4294967295',
+      'Uint8Array(6)',
+      'function Array() { [native code] }',
+      'Hello from fs!',
+      '{some: true, else: 1, inner: Object}',
+    ])
+  }
+
+  if (isDev) {
+    expect(logs).toEqual([
+      '[vite] connecting...',
+      '[vite] connected.',
+      '{Volume: , vol: _Volume, createFsFromVolume: , fs: Object, memfs: }',
+      'function fetch() { [native code] }',
+      '/',
+      '{nextTick: , title: browser, browser: true, env: Object, argv: Array(0)}',
+      '{}',
+      'function Array() { [native code] }',
+      '4294967295',
+      'Uint8Array(6)',
+      'function Array() { [native code] }',
+      'Hello from fs!',
+      '{some: true, else: 1, inner: Object}',
+    ])
+  }
+})
diff --git a/examples/vanilla/test/utils/index.ts b/examples/vanilla/test/utils/index.ts
@@ -0,0 +1,2 @@
+export const isBuild = process.env.VITE_COMMAND === 'build'
+export const isDev = process.env.VITE_COMMAND === 'dev'
diff --git a/examples/vanilla/tsconfig.json b/examples/vanilla/tsconfig.json
@@ -1,8 +1,12 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "noEmit": true,
+    "paths": {
+      "/*": ["./*"]
+    },
     "skipLibCheck": true
   }
 }
diff --git a/examples/vanilla/vite.config.ts b/examples/vanilla/vite.config.ts
@@ -4,6 +4,9 @@ import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  build: {
+    minify: false,
+  },
   plugins: [
     nodePolyfills({
       globals: {
diff --git a/package.json b/package.json
@@ -88,6 +88,7 @@
     "node-stdlib-browser": "^1.2.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.40.1",
     "@types/node": "^18.18.8",
     "buffer": "6.0.3",
     "esbuild": "^0.19.8",
@@ -108,7 +109,8 @@
   },
   "pnpm": {
     "overrides": {
-      "buffer": "6.0.3"
+      "buffer": "6.0.3",
+      "vite": "^5.0.2"
     },
     "patchedDependencies": {
       "buffer@6.0.3": "patches/buffer@6.0.3.patch"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export const isBuild = process.env.VITE_COMMAND === 'build'`
	`2`	`+export const isDev = process.env.VITE_COMMAND === 'dev'`
Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,12 @@`
`1`	`1`	`{`
`2`	`2`	`"compilerOptions": {`
	`3`	`+ "baseUrl": ".",`
`3`	`4`	`"module": "ESNext",`
`4`	`5`	`"moduleResolution": "Bundler",`
`5`	`6`	`"noEmit": true,`
	`7`	`+ "paths": {`
	`8`	`+ "/": ["./"]`
	`9`	`+ },`
`6`	`10`	`"skipLibCheck": true`
`7`	`11`	`}`
`8`	`12`	`}`