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

<objective>
Add comprehensive tests for core node components: BaseNode, PromptNode (extend existing), and ImageInputNode.

Purpose: Establish test coverage for the foundational node components that all other nodes build upon.
Output: Test files with full coverage of rendering, user interactions, and edge cases.
</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/STATE.md
@.planning/phases/15-test-infrastructure/15-01-SUMMARY.md
@.planning/phases/16-store-modularization/16-01-SUMMARY.md

# Key source files:
@src/components/nodes/BaseNode.tsx
@src/components/nodes/PromptNode.tsx
@src/components/nodes/ImageInputNode.tsx
@src/components/__tests__/PromptNode.test.tsx

# Test infrastructure:
@src/test/setup.ts
@vitest.config.ts

**Tech stack available:** Vitest, React Testing Library, jsdom
**Established patterns:** ReactFlowProvider wrapper, vi.mock for Zustand store, fireEvent for interactions
</context>

<tasks>

<task type="auto">
  <name>Task 1: Add BaseNode component tests</name>
  <files>src/components/__tests__/BaseNode.test.tsx</files>
  <action>
Create comprehensive tests for BaseNode component:
- Basic rendering (title, children, className)
- Title editing flow (click to edit, type, submit on Enter, cancel on Escape)
- Comment functionality (add comment, edit comment, tooltip on hover)
- Expand button rendering and click handler
- Run button rendering, click handler, and disabled state during execution
- Lock badge display when node is in locked group
- Node resizer visibility when selected
- Border styling for selected, executing, and error states

Mock useWorkflowStore to return: currentNodeId, groups, nodes.
Mock useReactFlow to return: getNodes, setNodes.
Use ReactFlowProvider wrapper for all tests.
  </action>
  <verify>npm test -- --run src/components/__tests__/BaseNode.test.tsx passes</verify>
  <done>BaseNode tests cover rendering, title editing, comments, buttons, and visual states</done>
</task>

<task type="auto">
  <name>Task 2: Extend PromptNode tests and add ImageInputNode tests</name>
  <files>src/components/__tests__/PromptNode.test.tsx, src/components/__tests__/ImageInputNode.test.tsx</files>
  <action>
**Extend PromptNode.test.tsx:**
- Add test for expand button opening modal (incrementModalCount called)
- Add test for keyboard shortcut handling (if applicable)

**Create ImageInputNode.test.tsx:**
- Basic rendering with empty state (drop zone visible)
- Image display when data.image is set
- File input change handler (mock FileReader, test updateNodeData called with base64)
- File validation (reject non-image types, reject files > 10MB)
- Remove button functionality (clears image, filename, dimensions)
- Drag and drop handling (onDrop triggers file processing)
- Handle rendering (reference handle on left, image handle on right)

Use same mock patterns as existing PromptNode tests.
  </action>
  <verify>npm test -- --run src/components/__tests__/ passes with all new tests</verify>
  <done>PromptNode extended with modal test, ImageInputNode has full test coverage</done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] `npm test -- --run` passes all tests
- [ ] `npm run build` succeeds without errors
- [ ] BaseNode tests cover: rendering, title editing, comments, buttons, visual states
- [ ] ImageInputNode tests cover: empty state, image display, file handling, validation
</verification>

<success_criteria>

- All tasks completed
- All verification checks pass
- No TypeScript errors
- ~15-20 new tests added for BaseNode and ImageInputNode
- Existing PromptNode tests still pass
</success_criteria>

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