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>
2026-02-03 23:23:27 +01:00
parent 036a81b6de
commit 49e1c90f37
5 changed files with 837 additions and 4 deletions
--- a/.planning/phases/09-ci-pipeline/09-03-PLAN.md
+++ b/.planning/phases/09-ci-pipeline/09-03-PLAN.md
@@ -0,0 +1,219 @@
+---
+phase: 09-ci-pipeline
+plan: 03
+type: execute
+wave: 2
+depends_on: ["09-01"]
+files_modified:
+  - playwright.config.ts
+  - tests/e2e/fixtures/db.ts
+  - tests/e2e/user-journeys.spec.ts
+  - tests/e2e/index.ts
+autonomous: true
+
+must_haves:
+  truths:
+    - "E2E tests run against the application with seeded test data"
+    - "User journeys cover create, edit, search, organize, and delete workflows"
+    - "Tests run on both desktop and mobile viewports"
+    - "Screenshots are captured on test failure"
+  artifacts:
+    - path: "playwright.config.ts"
+      provides: "E2E configuration with multi-viewport and screenshot settings"
+      contains: "screenshot: 'only-on-failure'"
+    - path: "tests/e2e/fixtures/db.ts"
+      provides: "Database seeding fixture using drizzle-seed"
+      contains: "drizzle-seed"
+    - path: "tests/e2e/user-journeys.spec.ts"
+      provides: "Core user journey E2E tests"
+      min_lines: 100
+    - path: "tests/e2e/index.ts"
+      provides: "Custom test function with fixtures"
+      contains: "base.extend"
+  key_links:
+    - from: "tests/e2e/user-journeys.spec.ts"
+      to: "tests/e2e/fixtures/db.ts"
+      via: "test import with seededDb fixture"
+      pattern: "import.*test.*from.*fixtures"
+---
+
+<objective>
+Create comprehensive E2E test suite with database fixtures and multi-viewport testing.
+
+Purpose: Establish E2E tests that verify full user journeys work correctly. These tests catch integration issues that unit tests miss and provide confidence that the deployed application works as expected.
+
+Output: E2E test suite covering core user workflows, database seeding fixture for consistent test data, multi-viewport testing for desktop and mobile.
+</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/phases/09-ci-pipeline/09-RESEARCH.md
+@.planning/phases/09-ci-pipeline/09-01-SUMMARY.md
+
+@playwright.config.ts
+@tests/docker-deployment.spec.ts
+@src/lib/server/db/schema.ts
+@src/routes/+page.svelte
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Update Playwright configuration for E2E requirements</name>
+  <files>playwright.config.ts</files>
+  <action>
+Update playwright.config.ts with E2E requirements from user decisions:
+
+1. Set `testDir: './tests/e2e'` (separate from existing docker test)
+2. Set `fullyParallel: false` (shared database)
+3. Set `workers: 1` (avoid database race conditions)
+4. Configure `reporter`:
+   - `['html', { open: 'never' }]`
+   - `['github']` for CI annotations
+
+5. Configure `use`:
+   - `baseURL: process.env.BASE_URL || 'http://localhost:5173'`
+   - `trace: 'on-first-retry'`
+   - `screenshot: 'only-on-failure'` (per user decision: screenshots, no video)
+   - `video: 'off'`
+
+6. Add two projects:
+   - `chromium-desktop`: using `devices['Desktop Chrome']`
+   - `chromium-mobile`: using `devices['Pixel 5']`
+
+7. Configure `webServer`:
+   - `command: 'npm run build && npm run preview'`
+   - `port: 4173`
+   - `reuseExistingServer: !process.env.CI`
+
+Move existing docker-deployment.spec.ts to tests/e2e/ or keep in tests/ with separate config.
+  </action>
+  <verify>
+Run `npx playwright test --list` - shows test files found
+Configuration is valid (no syntax errors)
+  </verify>
+  <done>Playwright configured for E2E with desktop/mobile viewports, screenshots on failure, single worker for database safety.</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Create database seeding fixture</name>
+  <files>tests/e2e/fixtures/db.ts, tests/e2e/index.ts</files>
+  <action>
+First, install drizzle-seed:
+```bash
+npm install -D drizzle-seed
+```
+
+Create tests/e2e/fixtures/db.ts:
+1. Import test base from @playwright/test
+2. Import db from src/lib/server/db
+3. Import schema from src/lib/server/db/schema
+4. Import seed and reset from drizzle-seed
+
+Create a fixture that:
+- Seeds database with known test data before test
+- Provides seeded entries (tasks, thoughts) with predictable IDs and content
+- Cleans up after test using reset()
+
+Create tests/e2e/index.ts:
+- Re-export extended test with seededDb fixture
+- Re-export expect from @playwright/test
+
+Test data should include:
+- At least 5 entries with various states (tasks vs thoughts, completed vs pending)
+- Entries with tags for testing filter/search
+- Entries with images (if applicable to schema)
+- Entries with different dates for sorting tests
+
+Note: Read the actual schema.ts to understand the exact model structure before writing seed logic.
+  </action>
+  <verify>
+TypeScript compiles without errors
+Fixture can be imported in test file
+  </verify>
+  <done>Database fixture created. Tests can import { test, expect } from './fixtures' to get seeded database.</done>
+</task>
+
+<task type="auto">
+  <name>Task 3: Write E2E tests for core user journeys</name>
+  <files>tests/e2e/user-journeys.spec.ts</files>
+  <action>
+Create tests/e2e/user-journeys.spec.ts using the custom test with fixtures:
+
+```typescript
+import { test, expect } from './index';
+```
+
+Write tests for each user journey (per CONTEXT.md decisions):
+
+**Create workflow:**
+- Navigate to home page
+- Use quick capture to create a new entry
+- Verify entry appears in list
+- Verify entry persists after page reload
+
+**Edit workflow:**
+- Find an existing entry (from seeded data)
+- Click to open/edit
+- Modify content
+- Save changes
+- Verify changes persisted
+
+**Search workflow:**
+- Use search bar to find entry by text
+- Verify matching entries shown
+- Verify non-matching entries hidden
+- Test search with tags filter
+
+**Organize workflow:**
+- Add tag to entry
+- Filter by tag
+- Verify filtered results
+- Pin an entry (if applicable)
+- Verify pinned entry appears first
+
+**Delete workflow:**
+- Select an entry
+- Delete it
+- Verify entry removed from list
+- Verify entry not found after reload
+
+Use `test.describe()` to group related tests.
+Each test should use `seededDb` fixture for consistent starting state.
+Use page object pattern if tests get complex (optional - can keep simple for now).
+  </action>
+  <verify>
+Run `npm run test:e2e` with app running locally (or let webServer start it)
+All E2E tests pass
+Screenshots are generated in test-results/ for any failures
+  </verify>
+  <done>E2E test suite covers all core user journeys. Tests run on both desktop and mobile viewports.</done>
+</task>
+
+</tasks>
+
+<verification>
+1. `npm run test:e2e` executes E2E tests
+2. Tests run on both chromium-desktop and chromium-mobile projects
+3. Database is seeded with test data before each test
+4. All 5 user journeys (create, edit, search, organize, delete) have tests
+5. Screenshots captured on failure (can test by making a test fail temporarily)
+6. Tests pass consistently (no flaky tests)
+</verification>
+
+<success_criteria>
+- CI-04 requirement satisfied: E2E tests ready for pipeline
+- User journeys cover create/edit/search/organize/delete as specified in CONTEXT.md
+- Multi-viewport testing (desktop + mobile) per CONTEXT.md decision
+- Database fixtures provide consistent, isolated test data
+- Screenshot on failure configured (no video per CONTEXT.md decision)
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/09-ci-pipeline/09-03-SUMMARY.md`
+</output>