---
phase: 22-generate-node-dynamic-input-tests
plan: 01
type: execute
---

<objective>
Add comprehensive tests for dynamic input handling in generate nodes, covering schema-driven handle rendering, ModelParameters component, and input validation.

Purpose: Ensure generate nodes correctly render dynamic inputs from provider schemas and pass validated inputs to API calls.
Output: Complete test coverage for dynamic input flows in GenerateImageNode, GenerateVideoNode, and ModelParameters.
</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

**Existing test files to extend:**
@src/components/__tests__/GenerateImageNode.test.tsx
@src/components/__tests__/GenerateVideoNode.test.tsx

**Component being tested:**
@src/components/nodes/GenerateImageNode.tsx (lines 464-580 for dynamic handles)
@src/components/nodes/GenerateVideoNode.tsx
@src/components/nodes/ModelParameters.tsx

**Prior Phase Summary (provides test patterns):**
@.planning/phases/17-component-tests/17-03-SUMMARY.md

**Tech stack available:** Vitest, React Testing Library, ReactFlowProvider wrapper
**Established patterns:** Zustand store mocking, fetch mocking, createPortal mocking for modals

**Constraining decisions:**
- Phase 17: ReactFlowProvider wrapper for component tests using @xyflow/react hooks
- Phase 17: Zustand store mocking with vi.mock pattern returning mocked functions
- Phase 18: API payload tests for dynamicInputs already covered in route tests
</context>

<tasks>

<task type="auto">
  <name>Task 1: Add ModelParameters component tests</name>
  <files>src/components/__tests__/ModelParameters.test.tsx</files>
  <action>
Create comprehensive tests for ModelParameters component:

**Schema Loading:**
- Should fetch schema when modelId and non-gemini provider are set
- Should not fetch schema for gemini provider
- Should not fetch schema when modelId is empty
- Should call onInputsLoaded with inputs from schema response
- Should handle fetch errors gracefully
- Should show loading state while fetching

**Parameter Handling:**
- Should render parameter inputs based on schema
- Should call onParametersChange when parameter value changes
- Should remove parameter from object when value is cleared
- Should render number inputs for integer/number types
- Should render select inputs for enum types
- Should render boolean toggle for boolean types

**Collapse/Expand:**
- Should call onExpandChange when toggled
- Should start expanded by default
- Should show parameter count in header

Mock fetch for schema endpoint:
```typescript
mockFetch.mockResolvedValueOnce({
  ok: true,
  json: () => Promise.resolve({
    parameters: [
      { name: "seed", type: "integer", description: "Random seed" },
      { name: "guidance_scale", type: "number", default: 7.5 },
    ],
    inputs: [
      { name: "prompt", type: "text", required: true, label: "Prompt" },
      { name: "image_url", type: "image", required: false, label: "Image" },
    ],
  }),
});
```
  </action>
  <verify>npm test -- src/components/__tests__/ModelParameters.test.tsx</verify>
  <done>ModelParameters tests pass covering schema loading, parameter handling, and collapse behavior</done>
</task>

<task type="auto">
  <name>Task 2: Extend GenerateImageNode dynamic handle tests</name>
  <files>src/components/__tests__/GenerateImageNode.test.tsx</files>
  <action>
Add tests to existing "Dynamic Input Handles" describe block:

**Multiple Image Inputs:**
- Should render multiple image handles with indexed IDs (image-0, image-1)
- Should position multiple image handles correctly (spaced evenly)
- Should show labels for each image input from schema

**Multiple Text Inputs:**
- Should render multiple text handles with indexed IDs (text-0, text-1)
- Should show labels for each text input from schema

**Placeholder Handle Variations:**
- Should show dimmed image handle (opacity 0.3) when schema has only text inputs
- Should show dimmed text handle when schema has only image inputs
- Should show "Not used by this model" description for placeholder handles

**Handle Ordering:**
- Should render image handles before text handles
- Should maintain gap between image and text handle groups

Test data patterns:
```typescript
// Multiple image inputs
inputSchema: [
  { name: "first_frame", type: "image", required: true, label: "First Frame" },
  { name: "last_frame", type: "image", required: false, label: "Last Frame" },
  { name: "prompt", type: "text", required: true, label: "Prompt" },
]

// Text-only model (placeholder image handle)
inputSchema: [
  { name: "prompt", type: "text", required: true, label: "Prompt" },
  { name: "negative_prompt", type: "text", required: false, label: "Negative" },
]
```
  </action>
  <verify>npm test -- src/components/__tests__/GenerateImageNode.test.tsx --testNamePattern="Dynamic"</verify>
  <done>GenerateImageNode tests cover all dynamic handle variations and placeholder scenarios</done>
</task>

<task type="auto">
  <name>Task 3: Extend GenerateVideoNode dynamic handle tests</name>
  <files>src/components/__tests__/GenerateVideoNode.test.tsx</files>
  <action>
Mirror the GenerateImageNode dynamic handle tests for video nodes:

**Multiple Image Inputs (common for video):**
- Should render multiple image handles for multi-frame video models
- Should show labels like "Start Frame", "End Frame" from schema

**Placeholder Handles:**
- Should show dimmed image handle when video model only needs text
- Should show dimmed text handle when video model only needs images

**Schema Integration:**
- Should update handles when inputSchema changes (model change)

Use similar test patterns as Task 2 but with video-specific schemas:
```typescript
// Image-to-video model
inputSchema: [
  { name: "start_image", type: "image", required: true, label: "Start Image" },
  { name: "end_image", type: "image", required: false, label: "End Image" },
  { name: "prompt", type: "text", required: true, label: "Motion Prompt" },
]
```
  </action>
  <verify>npm test -- src/components/__tests__/GenerateVideoNode.test.tsx --testNamePattern="Dynamic"</verify>
  <done>GenerateVideoNode tests match GenerateImageNode coverage for dynamic handles</done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] `npm test -- src/components/__tests__/ModelParameters.test.tsx` passes
- [ ] `npm test -- src/components/__tests__/GenerateImageNode.test.tsx` passes
- [ ] `npm test -- src/components/__tests__/GenerateVideoNode.test.tsx` passes
- [ ] No TypeScript errors
- [ ] Schema loading tested
- [ ] Dynamic handle variations tested
- [ ] Placeholder handles tested
</verification>

<success_criteria>
- All tasks completed
- All verification checks pass
- ModelParameters component fully tested
- Dynamic input handle rendering fully tested
- Placeholder handle behavior fully tested
- Phase 22 complete
</success_criteria>

<output>
After completion, create `.planning/phases/22-generate-node-dynamic-input-tests/22-01-SUMMARY.md`
</output>