test: add basic a test case using playwright

.github/workflows/test.yaml

@@ -0,0 +1,21 @@
+name: test
+on: [push]
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: true
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - run: pnpm lint
+      - run: pnpm playwright install
+      - run: pnpm t

package.json

@@ -6,8 +6,9 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview",
-    "lint": "eslint src"
+    "preview": "vite build && vite preview",
+    "lint": "eslint src",
+    "test": "playwright test -c tests/e2e"
   },
   "dependencies": {
     "@fontsource-variable/fredoka": "5.0.8",
@@ -50,6 +51,7 @@
     "@arianrhodsandlot/eslint-config": "0.8.0",
     "@iconify/json": "2.2.102",
     "@iconify/tailwind": "0.1.3",
+    "@playwright/test": "1.36.2",
     "@sergeymakinen/vite-plugin-html-minimize": "1.0.6",
     "@tailwindcss/typography": "0.5.9",
     "@types/emscripten": "1.39.7",

src/core/classes/emulator.ts

@@ -136,11 +136,11 @@ export class Emulator {
     this.core = core ?? ''
     this.canvas = document.createElement('canvas')
     this.canvas.id = 'canvas'
-    this.canvas.hidden = true
     this.canvas.width = 900
     this.canvas.height = 900
     this.previousActiveElement = document.activeElement
     this.canvas.tabIndex = 0
+    this.canvas.dataset.testid = 'emulator'
     updateStyle(this.canvas, {
       backgroundColor: 'black',
       backgroundImage:

src/views/components/setup-wizard/local-file-button.tsx

@@ -38,7 +38,7 @@ export function LocalFileButton() {
 
   return (
     <>
-      <BaseButton className='w-60' onClick={onClick}>
+      <BaseButton className='w-60' data-testid='select-a-rom' onClick={onClick}>
         <span className='icon-[mdi--zip-box-outline] h-5 w-5' />
         {state.loading ? (
           <>

tests/e2e/playwright.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from '@playwright/test'
+
+export default defineConfig({
+  testDir: '.',
+  snapshotDir: 'snapshots',
+  snapshotPathTemplate: '{snapshotDir}/{testFilePath}/{testName}-{arg}{ext}',
+  use: { baseURL: 'http://localhost:5173', trace: 'on-first-retry' },
+  webServer: { command: 'pnpm dev', url: 'http://127.0.0.1:5173', reuseExistingServer: true },
+})

tests/e2e/setup-wizard/single-rom.spec.ts

@@ -0,0 +1,14 @@
+import { expect, test } from '@playwright/test'
+
+test('play a single ROM file', async ({ page }) => {
+  await page.goto('/')
+  const fileChooserPromise = page.waitForEvent('filechooser')
+  await page.getByTestId('select-a-rom').click()
+  const fileChooser = await fileChooserPromise
+  await fileChooser.setFiles('tests/fixtures/roms/nes/240p Test Suite.zip')
+
+  const emulator = page.getByTestId('emulator')
+  await page.waitForLoadState('networkidle')
+  await expect(emulator).toBeVisible()
+  await expect(emulator).toHaveScreenshot('240p Test Suite.png')
+})