SimpleFinanceDash/.planning/phases/03-interaction-quality-and-completeness/03-00-PLAN.md

---
phase: 03-interaction-quality-and-completeness
plan: 00
type: execute
wave: 0
depends_on: []
files_modified:
  - frontend/src/components/BudgetSetup.test.tsx
  - frontend/src/pages/CategoriesPage.test.tsx
  - frontend/src/pages/DashboardPage.test.tsx
  - frontend/src/components/BillsTracker.test.tsx
autonomous: true
requirements: [IXTN-01, IXTN-05, STATE-01, STATE-02, STATE-03]

must_haves:
  truths:
    - "All 4 test stub files exist and can be loaded by vitest"
    - "Each stub contains at least one pending/skipped test describing the target behavior"
  artifacts:
    - path: "frontend/src/components/BudgetSetup.test.tsx"
      provides: "Test stub for budget form spinner (IXTN-01)"
      contains: "BudgetSetup"
    - path: "frontend/src/pages/CategoriesPage.test.tsx"
      provides: "Test stubs for delete confirmation (IXTN-05) and empty state (STATE-02)"
      contains: "CategoriesPage"
    - path: "frontend/src/pages/DashboardPage.test.tsx"
      provides: "Test stub for dashboard empty state (STATE-01)"
      contains: "DashboardPage"
    - path: "frontend/src/components/BillsTracker.test.tsx"
      provides: "Test stub for tinted skeleton (STATE-03)"
      contains: "BillsTracker"
  key_links: []
---

<objective>
Create Wave 0 test stub files for the 4 components that lack test coverage. Each stub imports the component, renders it with minimal props, and contains skipped (it.skip) test cases describing the behaviors that Plans 01-03 will implement.

Purpose: Satisfy Nyquist compliance — every task in Plans 01-03 must have a runnable test file in its verify command. Wave 0 ensures those files exist before execution begins.
Output: 4 new test files with pending test stubs.
</objective>

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

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md
@.planning/phases/03-interaction-quality-and-completeness/03-CONTEXT.md
@.planning/phases/03-interaction-quality-and-completeness/03-VALIDATION.md

<interfaces>
From frontend/src/components/BudgetSetup.tsx:
```typescript
interface Props {
  existingBudgets: Budget[]
  onCreated: () => void
  onCancel: () => void
}
export function BudgetSetup({ existingBudgets, onCreated, onCancel }: Props)
```

From frontend/src/pages/CategoriesPage.tsx:
```typescript
// Default export, no props — uses hooks internally (useTranslation, etc.)
export default function CategoriesPage()
```

From frontend/src/pages/DashboardPage.tsx:
```typescript
// Default export, no props — uses hooks internally
export default function DashboardPage()
```

From frontend/src/components/BillsTracker.tsx:
```typescript
interface Props {
  budget: BudgetDetail
  onUpdate: (itemId: string, data: { actual_amount?: number; budgeted_amount?: number }) => Promise<void>
}
export function BillsTracker({ budget, onUpdate }: Props)
```
</interfaces>
</context>

<tasks>

<task type="auto">
  <name>Task 1: Create 4 test stub files with pending test cases</name>
  <files>frontend/src/components/BudgetSetup.test.tsx, frontend/src/pages/CategoriesPage.test.tsx, frontend/src/pages/DashboardPage.test.tsx, frontend/src/components/BillsTracker.test.tsx</files>
  <action>
    Create each test file with the following structure: import vitest globals (describe, it, expect), import @testing-library/react (render, screen), import the component, wrap tests in a describe block, and add `it.skip` stubs for the behaviors that will be implemented in Plans 01-03.

    **BudgetSetup.test.tsx:**
    - Import `BudgetSetup` from `@/components/BudgetSetup`
    - Mock `@/lib/api` (budgets.create) and `react-i18next` (useTranslation returns t = key passthrough)
    - `it.skip('shows spinner in create button when saving')` — IXTN-01
    - `it.skip('disables create button when saving')` — IXTN-01
    - Add one basic `it('renders without crashing')` test that renders BudgetSetup with minimal props: `existingBudgets: [], onCreated: vi.fn(), onCancel: vi.fn()` — this validates the stub file works.

    **CategoriesPage.test.tsx:**
    - Import `CategoriesPage` from `@/pages/CategoriesPage`
    - Mock `@/lib/api` (categories.list returns [], categories.delete) and `react-i18next`
    - `it.skip('opens confirmation dialog when delete button clicked')` — IXTN-05
    - `it.skip('executes delete on confirm and shows spinner')` — IXTN-05
    - `it.skip('shows error inline when delete fails')` — IXTN-05
    - `it.skip('shows empty state when no categories exist')` — STATE-02
    - Add one basic `it('renders without crashing')` that renders CategoriesPage inside a MemoryRouter (it uses routing).

    **DashboardPage.test.tsx:**
    - Import `DashboardPage` from `@/pages/DashboardPage`
    - Mock `@/lib/api` (budgets.list returns []) and `react-i18next`
    - `it.skip('shows empty state with CTA when no budgets')` — STATE-01
    - `it.skip('shows loading skeleton while fetching')` — STATE-03
    - Add one basic `it('renders without crashing')` that renders DashboardPage inside a MemoryRouter.

    **BillsTracker.test.tsx:**
    - Import `BillsTracker` from `@/components/BillsTracker`
    - Mock `react-i18next`
    - `it.skip('shows tinted skeleton when no bill items')` — STATE-03
    - `it.skip('flashes row green on successful inline save')` — IXTN-03
    - `it.skip('flashes row red on failed inline save')` — IXTN-03
    - Add one basic `it('renders without crashing')` that renders BillsTracker with a minimal budget fixture (empty items array) and `onUpdate: vi.fn()`.

    For components needing MemoryRouter (page-level components with routing), wrap in `<MemoryRouter>` from `react-router-dom`.

    Pattern for all mocks:
    ```typescript
    vi.mock('react-i18next', () => ({
      useTranslation: () => ({ t: (key: string) => key, i18n: { language: 'en' } }),
    }))
    ```

    Each file MUST have at least one non-skipped test that passes to confirm the stub is valid.
  </action>
  <verify>
    <automated>cd /home/jean-luc-makiola/Development/projects/SimpleFinanceDash/frontend && bun vitest run src/components/BudgetSetup.test.tsx src/pages/CategoriesPage.test.tsx src/pages/DashboardPage.test.tsx src/components/BillsTracker.test.tsx</automated>
  </verify>
  <done>All 4 test stub files exist, each has at least one passing basic test and multiple it.skip stubs describing target behaviors. Vitest runs all 4 files without errors.</done>
</task>

</tasks>

<verification>
- `cd frontend && bun vitest run` — full test suite passes (new stubs + existing tests)
- All 4 files importable by vitest
- Each file has at least one non-skipped passing test
</verification>

<success_criteria>
- BudgetSetup.test.tsx, CategoriesPage.test.tsx, DashboardPage.test.tsx, BillsTracker.test.tsx all exist
- Each file has skip-marked stubs for the behaviors Plans 01-03 will implement
- Each file has at least one passing smoke test
- Full test suite remains green
</success_criteria>

<output>
After completion, create `.planning/phases/03-interaction-quality-and-completeness/03-00-SUMMARY.md`
</output>