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

<objective>
Add tests for generate node components: GenerateImageNode and GenerateVideoNode.

Purpose: Test the core generation components that interface with AI providers.
Output: Test files covering provider selection, model browsing, parameter handling, and generation state.
</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-02-SUMMARY.md

# Key source files:
@src/components/nodes/GenerateImageNode.tsx
@src/components/nodes/GenerateVideoNode.tsx
@src/components/nodes/ModelParameters.tsx

**Tech stack available:** Vitest, React Testing Library, jsdom
**Established patterns:** ReactFlowProvider wrapper, vi.mock for Zustand store
**Key decisions:** Provider badges prepend node title, Gemini always enabled, fal.ai always available
</context>

<tasks>

<task type="auto">
  <name>Task 1: Add GenerateImageNode component tests</name>
  <files>src/components/__tests__/GenerateImageNode.test.tsx</files>
  <action>
Create comprehensive tests for GenerateImageNode:
- Basic rendering with provider badge (Gemini default)
- Model selector dropdown for Gemini models (nano-banana, nano-banana-pro)
- Provider switching (Gemini, fal.ai, Replicate if configured)
- Browse button opening ModelSearchDialog
- Aspect ratio selector rendering (only for Gemini)
- Resolution selector rendering (only for nano-banana-pro)
- Output image display when data.outputImage exists
- Image history carousel navigation (if history exists)
- Loading state during generation
- Error state display
- Handle rendering (image and text inputs on left, image output on right)
- Run button triggering executeWorkflow
- Legacy data migration (model → selectedModel)

Mock useWorkflowStore for: updateNodeData, providerSettings, executeWorkflow, generationsPath.
Mock fetch for /api/models endpoint.
  </action>
  <verify>npm test -- --run src/components/__tests__/GenerateImageNode.test.tsx passes</verify>
  <done>GenerateImageNode tests cover provider selection, model browsing, generation states</done>
</task>

<task type="auto">
  <name>Task 2: Add GenerateVideoNode component tests</name>
  <files>src/components/__tests__/GenerateVideoNode.test.tsx</files>
  <action>
Create comprehensive tests for GenerateVideoNode:
- Basic rendering (similar structure to GenerateImageNode)
- Provider badge display (fal.ai or Replicate only - Gemini excluded)
- Model selector for video-capable models
- Browse button opening ModelSearchDialog with video capabilities
- Video output display when data.outputVideo exists
- Video history carousel navigation
- Loading state during generation
- Error state display
- Handle rendering (image and text inputs on left, video output on right)
- Run button triggering executeWorkflow

Key difference from GenerateImageNode: No Gemini provider option (Gemini doesn't support video).

Mock patterns same as GenerateImageNode tests.
  </action>
  <verify>npm test -- --run src/components/__tests__/GenerateVideoNode.test.tsx passes</verify>
  <done>GenerateVideoNode tests cover video-specific providers and output handling</done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] `npm test -- --run` passes all tests
- [ ] `npm run build` succeeds without errors
- [ ] Provider selection logic tested for both components
- [ ] Gemini exclusion from video node verified
</verification>

<success_criteria>

- All tasks completed
- All verification checks pass
- No TypeScript errors
- ~20-25 new tests for generation components
</success_criteria>

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