Browser UI テスト層（mockElectronBridge + Playwright chromium）

Electron を起動せず、vite dev サーバー + chromium だけで管理画面 UI を検証する軽量テスト層。

実行方法

corepack yarn test:browser        # テスト実行（vite dev は自動起動、port 3110）
corepack yarn dev:mock            # 手動確認用: mock データ付きでブラウザ起動 (port 3010)

初回のみ: npx playwright install chromium

テスト 3 層の保証マップ

層	実行環境	保証するもの	保証しないもの	実行タイミング
Unit (Vitest)	Node + jsdom	パーサ・統計・hooks・コンポーネント単体のロジック	画面間の結合、実 IPC、実 DB	push 前チェック + CI（毎回）
Browser UI（この層）	chromium + vite dev + mockElectronBridge	レンダラー内の配線（タブ遷移・フォーム・表示・store↔UI 結合）	IPC ハンドラ・SQL・main プロセス・preload。green でも「動く」保証にはならない	ローカル開発ループ（ビルド不要・秒起動）
Electron E2E	Playwright + electron-dist + 実 DB	実 IPC・better-sqlite3・起動時インポートまで通した end-to-end	—	GitHub Actions / まとめて実行

層の選び方（1 シナリオ 1 層の原則）

• レンダラーだけで壊れうる（表示・操作・レイアウト）→ Browser UI
• IPC ハンドラ・SQL・main のサービスを通らないと壊れが見えない（起動時インポート、ログ監視→DB 保存、戦績取得）→ Electron E2E
• どちらでもない純ロジック → Unit

同じシナリオを Browser UI と Electron E2E の両方に書かない。Electron E2E は「起動スモーク + データ経路」に絞り、UI 操作の網羅は Browser UI 側で持つ。

mock の設計と false-green 対策

• mock 本体: src/dev/mockElectronBridge.ts、fixture: src/dev/mockFixtures.ts
• fixture は MatchWithDetails / Profile の実型で型注釈して定義する。実 API と形がズレたら tsc が落ちる。手書きの別型・as キャストで型を誤魔化すのは禁止。
• 実装するのは読み取り系の主要メソッドのみ。未実装メソッドは undefined を返し、src/utils/electronAPI/ ラッパーの既存 degradation（warn + デフォルト値）に乗せる。未知プロパティへのアクセスは console.warn で可視化される。
• mock は VITE_MOCK_IPC=1 かつ import.meta.env.DEV かつ window.electronAPI 不在のときのみ注入される。prod bundle には含まれない。実 Electron 上では絶対に上書きしない。

PR ルールとの関係

• UI 変更の PR 必須要件（E2E + スクショ）は、純レンダラー変更なら Browser UI シナリオ + そのスクショで満たしてよい。
• IPC / DB / main プロセスに触れる変更は従来どおり Electron E2E（tests/e2e/scenarios/）が必須。

運用メモ

• テスト命名は tests/browser-ui/*.spec.ts（Vitest の *.test.ts / Electron E2E の *.e2e.ts と衝突しない）
• スクショは「証拠要素」を要素スクショで撮る（ページ全体だと一覧が fold 下に隠れる）
• vite dev の初回ロードはモジュール変換で数十秒かかる。2 回目以降は node_modules/.vite のキャッシュで数秒