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

<objective>
Add tests for display node components: OutputNode, SplitGridNode, and GroupNode.

Purpose: Test components that display generated content and manage node grouping.
Output: Test files covering rendering, content display logic, and user interactions.
</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-01-SUMMARY.md

# Key source files:
@src/components/nodes/OutputNode.tsx
@src/components/nodes/SplitGridNode.tsx
@src/components/nodes/GroupNode.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 OutputNode component tests</name>
  <files>src/components/__tests__/OutputNode.test.tsx</files>
  <action>
Create comprehensive tests for OutputNode:
- Empty state rendering ("Waiting for image or video" placeholder)
- Image content display (img element with correct src)
- Video content detection logic:
  - data.video present → video element
  - data.contentType === "video" → video element
  - data.image starts with "data:video/" → video element
  - data.image contains ".mp4" or ".webm" → video element
- Lightbox functionality (click opens fullscreen view, click outside closes)
- Download button for data URL content
- Download button for URL-based content (http/https)
- Video controls rendering (controls, loop, muted, autoPlay, playsInline)

Mock useWorkflowStore for updateNodeData.
  </action>
  <verify>npm test -- --run src/components/__tests__/OutputNode.test.tsx passes</verify>
  <done>OutputNode tests cover empty state, image/video detection, lightbox, download</done>
</task>

<task type="auto">
  <name>Task 2: Add SplitGridNode and GroupNode tests</name>
  <files>src/components/__tests__/SplitGridNode.test.tsx, src/components/__tests__/GroupNode.test.tsx</files>
  <action>
**Create SplitGridNode.test.tsx:**
- Basic rendering with title "Split Grid"
- Input handle rendering (image handle on left)
- Output handle rendering (reference handle on right)
- Settings button opening modal
- Grid cell count display when cells are detected
- Empty state when no input connected

**Create GroupNode.test.tsx:**
- Basic rendering with group color
- Group name display and editing
- Lock toggle functionality (toggleGroupLock called)
- Locked state visual indicator
- Delete button functionality
- Expand/collapse behavior
- Child node containment styling

Mock useWorkflowStore for: groups, toggleGroupLock, updateGroup, deleteGroup.
  </action>
  <verify>npm test -- --run src/components/__tests__/ passes all new tests</verify>
  <done>SplitGridNode and GroupNode have comprehensive test coverage</done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] `npm test -- --run` passes all tests
- [ ] `npm run build` succeeds without errors
- [ ] OutputNode video detection logic fully tested
- [ ] GroupNode lock/unlock functionality tested
</verification>

<success_criteria>

- All tasks completed
- All verification checks pass
- No TypeScript errors
- ~15-20 new tests added across 3 components
</success_criteria>

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