docs(09): create phase plan
Phase 09: CI Pipeline Hardening - 4 plan(s) in 3 wave(s) - Wave 1: Infrastructure setup (09-01) - Wave 2: Tests in parallel (09-02, 09-03) - Wave 3: CI integration (09-04) - Ready for execution Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Thomas Richter
182
.planning/phases/09-ci-pipeline/09-01-PLAN.md
Normal file
182
.planning/phases/09-ci-pipeline/09-01-PLAN.md
Normal file
@@ -0,0 +1,182 @@
|
||||
---
|
||||
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>
|
||||
Reference in New Issue
Block a user