3.5 KiB
| phase | plan | type |
|---|---|---|
| 17-component-tests | 9 | execute |
Purpose: Test specialized editor modals for content editing and configuration. Output: Test files covering modal rendering, editor interactions, and settings management.
<execution_context> ~/.claude/get-shit-done/workflows/execute-phase.md ~/.claude/get-shit-done/templates/summary.md </execution_context>
@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/phases/17-component-tests/17-08-SUMMARY.mdKey source files:
@src/components/modals/PromptEditorModal.tsx @src/components/SplitGridSettingsModal.tsx @src/components/AnnotationModal.tsx
Tech stack available: Vitest, React Testing Library, jsdom Established patterns: ReactFlowProvider wrapper, vi.mock for Zustand store
Task 1: Add PromptEditorModal component tests src/components/__tests__/PromptEditorModal.test.tsx Create comprehensive tests for PromptEditorModal: - Not rendered when isOpen is false - Rendered with title when isOpen is true - Textarea with initial prompt value - Textarea updates on typing - Save button calls onSave with updated prompt - Cancel button calls onClose without saving - Escape key closes without saving - Character count display (if applicable) - Fullscreen/expanded textarea stylingMock incrementModalCount/decrementModalCount calls on open/close. Pass props: isOpen, initialPrompt, onSave, onClose. npm test -- --run src/components/tests/PromptEditorModal.test.tsx passes PromptEditorModal tests cover editing flow and save/cancel actions
Task 2: Add SplitGridSettingsModal and AnnotationModal tests src/components/__tests__/SplitGridSettingsModal.test.tsx, src/components/__tests__/AnnotationModal.test.tsx **Create SplitGridSettingsModal.test.tsx:** - Not rendered when isOpen is false - Grid size inputs (rows, columns) - Preview of grid overlay on image - Apply button saves settings - Cancel button closes without saving - Input validation (min 1, max reasonable limit) - Auto-detect grid button (if applicable)Create AnnotationModal.test.tsx:
- Not rendered when isOpen is false
- Canvas element rendered when open
- Tool selector buttons (brush, eraser, shapes)
- Color picker interaction
- Brush size slider
- Clear all button
- Save button exports canvas to image
- Cancel button closes without saving
Note: Konva canvas internals cannot be easily tested in jsdom. Focus on modal shell, tool buttons, and callbacks - not actual drawing.
Mock canvas context if needed (getContext returns mock). Mock useWorkflowStore for modal count tracking. npm test -- --run src/components/tests/ passes editor modal tests SplitGridSettingsModal and AnnotationModal have test coverage for UI shell
Before declaring plan complete: - [ ] `npm test -- --run` passes all tests - [ ] `npm run build` succeeds without errors - [ ] PromptEditorModal save/cancel flow tested - [ ] Modal tool buttons render correctly<success_criteria>
- All tasks completed
- All verification checks pass
- No TypeScript errors
- ~15-20 new tests for editor modals </success_criteria>