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:
25
tests/e2e/app.spec.ts
Normal file
25
tests/e2e/app.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
|
||||
test.describe("Mission Control App", () => {
|
||||
test("displays the main heading", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
|
||||
await expect(page.getByText("Mission Control")).toBeVisible();
|
||||
});
|
||||
|
||||
test("displays the tagline", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
|
||||
await expect(
|
||||
page.getByText("What should you be doing right now?")
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("has dark mode styling", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
|
||||
// Check that the page has dark background (zinc-900)
|
||||
const body = page.locator("body");
|
||||
await expect(body).toHaveClass(/bg-surface/);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user