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

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