test(frontend): vitest framework bootstrap + hot-path coverage gate (#536)

* test(frontend): vitest framework bootstrap + hot-path file coverage gate

Adds the harness for component, hook and store tests on top of the existing
util tests in src/utils/. Mirrors the backend rust-tests rollout: jsdom env,
v8 coverage, soft hot-path file gate, dedicated CI workflow.

What's in:
- vitest.config.ts: jsdom environment, v8 coverage, alias @ -> src
- src/test/setup.ts: jest-dom, @testing-library cleanup, vi.mock for
  @tauri-apps/api/{core,event} + plugin-shell, Map-backed Storage polyfill
  for Node 25 + jsdom 26 (both ship a broken native localStorage)
- src/test/mocks/tauri.ts: programmable onInvoke() / emitTauriEvent() helpers,
  auto-reset between tests
- src/test/helpers/factories.ts: makeTrack / makeTracks
- src/test/helpers/renderWithProviders.tsx: render() wrapped with
  MemoryRouter + I18nextProvider
- src/test/README.md: conventions doc (where tests go, how to mock Tauri,
  what to never mock)

Sample tests showing the patterns:
- src/components/CoverLightbox.test.tsx: component, queries by role
- src/store/previewStore.test.ts: store characterization, event handlers
  + stopPreview (startPreview deferred until the cross-store provider
  strategy is decided)

CI:
- .github/workflows/frontend-tests.yml: jobs for vitest, tsc, coverage +
  hot-path gate. coverage job carries continue-on-error: true (soft).
- .github/frontend-hot-path-files.txt: initial list (3 utils at >=70%).
  playerStore + the unfinished half of previewStore are deferred until
  Phase 1 coverage work lands.
- scripts/check-frontend-hot-path-coverage.sh: mirror of the rust gate.

npm scripts:
- test: one-shot run (unchanged)
- test vitest in watch mode
- test:coverage: v8 coverage + html / lcov / json-summary reports

57 / 57 tests pass; tsc --noEmit clean.

* chore(nix): sync npmDepsHash with package-lock.json

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Frank Stellmacher
2026-05-11 12:25:48 +02:00
committed by GitHub
parent 1cc43dc669
commit 02d533e949
15 changed files with 1893 additions and 4 deletions
+100
View File
@@ -0,0 +1,100 @@
import '@testing-library/jest-dom/vitest';
import { afterEach, vi } from 'vitest';
import { cleanup } from '@testing-library/react';
// ─────────────────────────────────────────────────────────────────────────────
// Node 25 ships a native `localStorage` global that is broken on this
// platform — `typeof localStorage === 'object'` but `localStorage.getItem`
// is `undefined`. jsdom 26 simply forwards to it, so both globalThis and
// window expose a non-functional storage. Any code that runs
// `localStorage.getItem(...)` at module load (e.g. `i18n.ts`, `authStore.ts`)
// crashes before tests start.
//
// Fix: install a Map-backed polyfill that conforms to the DOM Storage
// interface, on both globalThis and window. Per-test isolation comes from
// the `afterEach(() => store.clear())` hook below.
// ─────────────────────────────────────────────────────────────────────────────
class MemoryStorage implements Storage {
private map = new Map<string, string>();
get length(): number {
return this.map.size;
}
key(index: number): string | null {
return Array.from(this.map.keys())[index] ?? null;
}
getItem(key: string): string | null {
return this.map.has(key) ? (this.map.get(key) as string) : null;
}
setItem(key: string, value: string): void {
this.map.set(String(key), String(value));
}
removeItem(key: string): void {
this.map.delete(String(key));
}
clear(): void {
this.map.clear();
}
}
const memLocal = new MemoryStorage();
const memSession = new MemoryStorage();
function installStorage(globalKey: 'localStorage' | 'sessionStorage', store: Storage) {
try {
Object.defineProperty(globalThis, globalKey, {
configurable: true,
writable: true,
value: store,
});
} catch {
/* ignore — non-configurable global */
}
if (typeof window !== 'undefined') {
try {
Object.defineProperty(window, globalKey, {
configurable: true,
writable: true,
value: store,
});
} catch {
/* ignore */
}
}
}
installStorage('localStorage', memLocal);
installStorage('sessionStorage', memSession);
// ─────────────────────────────────────────────────────────────────────────────
// Global Tauri mocks.
//
// Every test file that imports `@tauri-apps/api/core` or `@tauri-apps/api/event`
// gets these stubs. They start as bare `vi.fn()`s; the helpers in
// `src/test/mocks/tauri.ts` attach programmable implementations the first time
// they are imported by a test file. Tests that don't need Tauri can ignore
// the helpers entirely.
//
// We mock here (in setupFiles) rather than per-test-file so individual tests
// don't have to repeat `vi.mock('@tauri-apps/api/core', …)` boilerplate.
// ─────────────────────────────────────────────────────────────────────────────
vi.mock('@tauri-apps/api/core', () => ({
invoke: vi.fn(),
convertFileSrc: vi.fn((p: string) => `tauri://localhost/${p}`),
}));
vi.mock('@tauri-apps/api/event', () => ({
listen: vi.fn(),
emit: vi.fn(),
once: vi.fn(),
}));
// Linker for Tauri shell / dialog / store plugins — same idea. Extend as needed.
vi.mock('@tauri-apps/plugin-shell', () => ({
open: vi.fn(async () => {}),
}));
afterEach(() => {
cleanup();
memLocal.clear();
memSession.clear();
});