add Playwright and Vitest for testing

.github/workflows/ci.yml

@@ -0,0 +1,40 @@
+name: CI
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v7
+      - name: Set up Node.js
+        uses: actions/setup-node@v7
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Lint
+        run: npm run lint
+      - name: Check formatting
+        run: npm run format:check
+      - name: Typecheck
+        run: npm run typecheck
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+      - name: Unit tests (Vitest node project)
+        run: npm run test
+      - name: Component tests (Vitest browser project)
+        run: npm run test:browser
+      - name: E2E tests (Playwright)
+        run: npm run test:e2e
+      - name: Upload Playwright report
+        if: failure()
+        uses: actions/upload-artifact@v7
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7

.gitignore

@@ -3,3 +3,5 @@
 dist
 build
 build-types
+/playwright-report
+/test-results

.nvmrc

@@ -0,0 +1 @@
+24

.oxlintrc.json

@@ -1,15 +1,11 @@
 {
   "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "plugins": [
-    "typescript",
-    "unicorn",
-    "oxc"
-  ],
+  "plugins": ["typescript", "unicorn", "oxc"],
   "categories": {
     "correctness": "error"
   },
   "rules": {},
   "env": {
     "builtin": true
   }
-}
+}

README.md

@@ -18,6 +18,8 @@ See [docs/spec.md](docs/spec.md) for the full architecture documentation (contex
 - Tailwind CSS 4
 - Vite 8
 - TypeScript
+- Vitest 5 (node and Browser Mode projects) and Playwright for testing
+- oxlint and oxfmt for linting and formatting
 
 ## Project structure
 
@@ -27,13 +29,28 @@ See [docs/spec.md](docs/spec.md) for the full architecture documentation (contex
 
 ## Getting started
 
+Requires Node 24 (see `.nvmrc`).
+
 ```sh
 npm install
-npm run dev         # start the Vite dev server
-npm run build       # production build (static assets under build/client)
-npm run typecheck   # generate route types and run tsc
+npm run dev           # start the Vite dev server
+npm run build         # production build (static assets under build/client)
+npm run typecheck     # generate route types and run tsc
+npm run lint          # oxlint
+npm run format:check  # oxfmt --check
+```
+
+## Testing
+
+```sh
+npx playwright install chromium  # once; browser for Browser Mode and E2E
+npm run test          # Vitest node project (loaders, actions, API client)
+npm run test:browser  # Vitest Browser Mode project (rendered components)
+npm run test:e2e      # Playwright E2E specs in tests/e2e (backend mocked via page.route())
 ```
 
+Pass `--reporter=list` to `npm run test:e2e --` for terminal output instead of the HTML report.
+
 ## Related repos
 
 - [`secvisogram`](https://github.com/secvisogram/secvisogram) — the embedded CSAF editor, developed and released independently by design (backend-free)

app/testing/browserProject.test.tsx

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest'
+import { render } from 'vitest-browser-react'
+
+// Infra proof, not route coverage: route logic is covered by Playwright E2E specs instead.
+describe('vitest browser project', () => {
+  it('renders a component in a real browser and queries it via the locator API', async () => {
+    const screen = await render(<button>Click me</button>)
+
+    await expect
+      .element(screen.getByRole('button', { name: 'Click me' }))
+      .toBeVisible()
+  })
+})

app/testing/nodeProject.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest'
+
+// Infra proof, not route coverage: route logic is covered by Playwright E2E specs instead.
+describe('vitest node project', () => {
+  it('runs in a plain node environment with no DOM/browser boot', () => {
+    expect(typeof window).toBe('undefined')
+  })
+})