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

phase, plan, type, wave, depends_on, files_modified, autonomous, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	must_haves
09-ci-pipeline	01	execute	1		package.json vite.config.ts vitest-setup-client.ts src/lib/utils/filterEntries.test.ts	true	truths artifacts key_links 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 path provides contains vite.config.ts Multi-project Vitest configuration projects: path provides contains vitest-setup-client.ts SvelteKit module mocks for browser tests vi.mock('$app/ path provides contains package.json Test scripts test:unit path provides min_lines src/lib/utils/filterEntries.test.ts Sample unit test proving setup works 15 from to via pattern vite.config.ts vitest-setup-client.ts setupFiles configuration setupFiles.*vitest-setup

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.

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

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

@vite.config.ts @package.json @playwright.config.ts

Task 1: Install Vitest dependencies and configure multi-project setup package.json, vite.config.ts 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. 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 Vitest installed with multi-project config. npm run test:unit executes without configuration errors.

Task 2: Create SvelteKit module mocks in setup file vitest-setup-client.ts 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). 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) SvelteKit module mocks created. Browser-mode tests can import $app/* without errors.

Task 3: Write sample test to verify infrastructure src/lib/utils/filterEntries.test.ts 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. Run npm run test:unit - filterEntries tests execute and pass Run npm run test:coverage - shows coverage report including filterEntries.ts Sample unit test passes. Vitest infrastructure is verified working for node-mode tests.

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

<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>

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