taskplaner/.planning/phases/09-ci-pipeline/09-01-PLAN.md

---
phase: 09-ci-pipeline
plan: 01
type: execute
wave: 1
depends_on: []
files_modified:
  - package.json
  - vite.config.ts
  - vitest-setup-client.ts
  - src/lib/utils/filterEntries.test.ts
autonomous: true

must_haves:
  truths:
    - "npm run test:unit executes Vitest and reports pass/fail"
    - "Vitest browser mode runs component tests in real Chromium"
    - "Vitest node mode runs server/utility tests"
    - "SvelteKit modules ($app/*) are mocked in test environment"
  artifacts:
    - path: "vite.config.ts"
      provides: "Multi-project Vitest configuration"
      contains: "projects:"
    - path: "vitest-setup-client.ts"
      provides: "SvelteKit module mocks for browser tests"
      contains: "vi.mock('$app/"
    - path: "package.json"
      provides: "Test scripts"
      contains: "test:unit"
    - path: "src/lib/utils/filterEntries.test.ts"
      provides: "Sample unit test proving setup works"
      min_lines: 15
  key_links:
    - from: "vite.config.ts"
      to: "vitest-setup-client.ts"
      via: "setupFiles configuration"
      pattern: "setupFiles.*vitest-setup"
---

<objective>
Configure Vitest test infrastructure with multi-project setup for SvelteKit.

Purpose: Establish the test runner foundation that all subsequent test plans build upon. This enables unit tests (node mode) and component tests (browser mode) with proper SvelteKit module mocking.

Output: Working Vitest configuration with browser mode for Svelte 5 components and node mode for server code, plus a sample test proving the setup works.
</objective>

<execution_context>
@/home/tho/.claude/get-shit-done/workflows/execute-plan.md
@/home/tho/.claude/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/phases/09-ci-pipeline/09-RESEARCH.md

@vite.config.ts
@package.json
@playwright.config.ts
</context>

<tasks>

<task type="auto">
  <name>Task 1: Install Vitest dependencies and configure multi-project setup</name>
  <files>package.json, vite.config.ts</files>
  <action>
Install Vitest and browser mode dependencies:
```bash
npm install -D vitest @vitest/browser vitest-browser-svelte @vitest/browser-playwright @vitest/coverage-v8
npx playwright install chromium
```

Update vite.config.ts with multi-project Vitest configuration:
- Import `playwright` from `@vitest/browser-playwright`
- Add `test` config with `coverage` (provider: v8, include src/**/*, thresholds with autoUpdate: true initially)
- Configure two projects:
  1. `client`: browser mode with Playwright provider, include `*.svelte.{test,spec}.ts`, setupFiles pointing to vitest-setup-client.ts
  2. `server`: node environment, include `*.{test,spec}.ts`, exclude `*.svelte.{test,spec}.ts`

Update package.json scripts:
- Add `"test": "vitest"`
- Add `"test:unit": "vitest run"`
- Add `"test:unit:watch": "vitest"`
- Add `"test:coverage": "vitest run --coverage"`

Keep existing scripts (test:e2e, test:e2e:docker) unchanged.
  </action>
  <verify>
Run `npm run test:unit` - should execute (may show "no tests found" initially, but Vitest runs without config errors)
Run `npx vitest --version` - confirms Vitest is installed
  </verify>
  <done>Vitest installed with multi-project config. npm run test:unit executes without configuration errors.</done>
</task>

<task type="auto">
  <name>Task 2: Create SvelteKit module mocks in setup file</name>
  <files>vitest-setup-client.ts</files>
  <action>
Create vitest-setup-client.ts in project root with:

1. Add TypeScript reference directives:
   - `/// <reference types="@vitest/browser/matchers" />`
   - `/// <reference types="@vitest/browser/providers/playwright" />`

2. Mock `$app/navigation`:
   - goto: vi.fn returning Promise.resolve()
   - invalidate: vi.fn returning Promise.resolve()
   - invalidateAll: vi.fn returning Promise.resolve()
   - beforeNavigate: vi.fn()
   - afterNavigate: vi.fn()

3. Mock `$app/stores`:
   - page: writable store with URL, params, route, status, error, data, form
   - navigating: writable(null)
   - updated: { check: vi.fn(), subscribe: writable(false).subscribe }

4. Mock `$app/environment`:
   - browser: true
   - dev: true
   - building: false

Import writable from 'svelte/store' and vi from 'vitest'.

Note: Use simple mocks, do NOT use importOriginal with SvelteKit modules (causes SSR issues per research).
  </action>
  <verify>
File exists at vitest-setup-client.ts with all required mocks.
TypeScript compilation succeeds: `npx tsc --noEmit vitest-setup-client.ts` (or no TS errors shown in editor)
  </verify>
  <done>SvelteKit module mocks created. Browser-mode tests can import $app/* without errors.</done>
</task>

<task type="auto">
  <name>Task 3: Write sample test to verify infrastructure</name>
  <files>src/lib/utils/filterEntries.test.ts</files>
  <action>
Create src/lib/utils/filterEntries.test.ts as a node-mode unit test:

1. Import { describe, it, expect } from 'vitest'
2. Import filterEntries function from './filterEntries'
3. Read filterEntries.ts to understand the function signature and behavior

Write tests for filterEntries covering:
- Empty entries array returns empty array
- Filter by tag returns matching entries
- Filter by search term matches title/content
- Combined filters (tag + search) work together
- Type filter (task vs thought) works if applicable

This proves the server/node project runs correctly.

Note: This is a real test, not just a placeholder. Aim for thorough coverage of filterEntries.ts functionality.
  </action>
  <verify>
Run `npm run test:unit` - filterEntries tests execute and pass
Run `npm run test:coverage` - shows coverage report including filterEntries.ts
  </verify>
  <done>Sample unit test passes. Vitest infrastructure is verified working for node-mode tests.</done>
</task>

</tasks>

<verification>
1. `npm run test:unit` executes without errors
2. `npm run test:coverage` produces coverage report
3. filterEntries.test.ts tests pass
4. vite.config.ts contains multi-project test configuration
5. vitest-setup-client.ts contains $app/* mocks
</verification>

<success_criteria>
- CI-01 requirement satisfied: Vitest installed and configured
- Multi-project setup distinguishes client (browser) and server (node) tests
- At least one unit test passes proving the infrastructure works
- Coverage reporting functional (threshold enforcement comes in Plan 02)
</success_criteria>

<output>
After completion, create `.planning/phases/09-ci-pipeline/09-01-SUMMARY.md`
</output>