fix(03): revise plans based on checker feedback
This commit is contained in:
@@ -0,0 +1,161 @@
|
||||
---
|
||||
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>
|
||||
Reference in New Issue
Block a user