test: add test infrastructure with Vitest and Playwright

Set up comprehensive testing infrastructure for both unit and E2E tests:

Unit Testing (Vitest):
- vitest.config.ts: jsdom environment, globals enabled
  - Path alias @tauri-apps/api -> tests/mocks/tauri-api.ts
  - Excludes tests/e2e/** to prevent Playwright collision
  - V8 coverage configured for src/**/*.{ts,tsx}
- tests/setup.ts: @testing-library/jest-dom matchers

Tauri API Mocking:
- tests/mocks/tauri-api.ts: Mock implementation of @tauri-apps/api
  - invoke(): Returns configurable mock responses
  - listen()/emit(): Event system stubs
  - setMockResponse()/resetMocks(): Test helpers
  - Enables testing React components without Tauri runtime

Component Tests:
- tests/components/App.test.tsx: Verifies App shell renders
  - "Mission Control" heading
  - "What should you be doing right now?" tagline
  - "THE ONE THING will appear here" placeholder

E2E Testing (Playwright):
- playwright.config.ts: Chromium + WebKit (Tauri uses WebKit on macOS)
  - Runs Vite dev server before tests
  - HTML reporter, trace on retry
- tests/e2e/app.spec.ts: Smoke tests for deployed app
  - Heading visible, tagline visible, dark mode applied

This dual-layer testing strategy (Vitest for speed, Playwright for
integration) follows the testing trophy: many unit, fewer E2E.
This commit is contained in:
teernisse
2026-02-25 17:01:39 -05:00
parent bb1b608fbb
commit c8854e59e9
6 changed files with 228 additions and 0 deletions

30
vitest.config.ts Normal file
View File

@@ -0,0 +1,30 @@
/// <reference types="vitest" />
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
export default defineConfig({
plugins: [react()],
test: {
globals: true,
environment: "jsdom",
setupFiles: ["./tests/setup.ts"],
include: ["tests/**/*.{test,spec}.{ts,tsx}"],
exclude: ["tests/e2e/**", "**/node_modules/**"],
coverage: {
provider: "v8",
reporter: ["text", "json", "html"],
include: ["src/**/*.{ts,tsx}"],
exclude: ["src/main.tsx", "src/**/*.d.ts"],
},
// Mock Tauri APIs
alias: {
"@tauri-apps/api": path.resolve(__dirname, "./tests/mocks/tauri-api.ts"),
},
},
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});