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

<objective>
Add tests for processing node components: LLMGenerateNode and AnnotationNode.

Purpose: Test components that process and transform content (text generation, image annotation).
Output: Test files covering LLM provider selection, annotation canvas interactions, and state 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-03-SUMMARY.md

# Key source files:
@src/components/nodes/LLMGenerateNode.tsx
@src/components/nodes/AnnotationNode.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 LLMGenerateNode component tests</name>
  <files>src/components/__tests__/LLMGenerateNode.test.tsx</files>
  <action>
Create comprehensive tests for LLMGenerateNode:
- Basic rendering with title "LLM"
- Provider selector (Google, OpenAI options)
- Model selector dropdown based on selected provider
- System prompt textarea rendering and editing
- Output text display when data.outputText exists
- Copy output button functionality
- Handle rendering (text and image inputs on left, text output on right)
- Loading state during generation
- Error state display
- Run button triggering generation
- Expand button opening PromptEditorModal

Mock useWorkflowStore for: updateNodeData, executeWorkflow.
  </action>
  <verify>npm test -- --run src/components/__tests__/LLMGenerateNode.test.tsx passes</verify>
  <done>LLMGenerateNode tests cover provider selection, prompts, output display</done>
</task>

<task type="auto">
  <name>Task 2: Add AnnotationNode component tests</name>
  <files>src/components/__tests__/AnnotationNode.test.tsx</files>
  <action>
Create comprehensive tests for AnnotationNode:
- Basic rendering with title "Annotation"
- Input image display when connected
- Empty state ("Connect an image to annotate")
- Edit button opening AnnotationModal
- Output image display after annotation
- Handle rendering (image input on left, image output on right)
- Clear annotations button functionality
- Annotation preview thumbnail

Note: Konva canvas testing is complex - focus on component shell and state management.
Do NOT test internal Konva interactions (those require canvas mocking).

Mock useWorkflowStore for: updateNodeData, incrementModalCount, decrementModalCount.
  </action>
  <verify>npm test -- --run src/components/__tests__/AnnotationNode.test.tsx passes</verify>
  <done>AnnotationNode tests cover rendering, modal trigger, state management</done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] `npm test -- --run` passes all tests
- [ ] `npm run build` succeeds without errors
- [ ] LLM provider/model selection tested
- [ ] Annotation modal trigger tested
</verification>

<success_criteria>

- All tasks completed
- All verification checks pass
- No TypeScript errors
- ~12-15 new tests for processing components
</success_criteria>

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