---
phase: 17-component-tests
plan: 09
type: execute
---

<objective>
Add tests for editor modal components: PromptEditorModal, SplitGridSettingsModal, and AnnotationModal.

Purpose: Test specialized editor modals for content editing and configuration.
Output: Test files covering modal rendering, editor interactions, and settings management.
</objective>

<execution_context>
~/.claude/get-shit-done/workflows/execute-phase.md
~/.claude/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/phases/17-component-tests/17-08-SUMMARY.md

# Key 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
</context>

<tasks>

<task type="auto">
  <name>Task 1: Add PromptEditorModal component tests</name>
  <files>src/components/__tests__/PromptEditorModal.test.tsx</files>
  <action>
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 styling

Mock incrementModalCount/decrementModalCount calls on open/close.
Pass props: isOpen, initialPrompt, onSave, onClose.
  </action>
  <verify>npm test -- --run src/components/__tests__/PromptEditorModal.test.tsx passes</verify>
  <done>PromptEditorModal tests cover editing flow and save/cancel actions</done>
</task>

<task type="auto">
  <name>Task 2: Add SplitGridSettingsModal and AnnotationModal tests</name>
  <files>src/components/__tests__/SplitGridSettingsModal.test.tsx, src/components/__tests__/AnnotationModal.test.tsx</files>
  <action>
**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.
  </action>
  <verify>npm test -- --run src/components/__tests__/ passes editor modal tests</verify>
  <done>SplitGridSettingsModal and AnnotationModal have test coverage for UI shell</done>
</task>

</tasks>

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

<success_criteria>

- All tasks completed
- All verification checks pass
- No TypeScript errors
- ~15-20 new tests for editor modals
</success_criteria>

<output>
After completion, create `.planning/phases/17-component-tests/17-09-SUMMARY.md`
</output>