7.0 KiB
| phase | plan | type |
|---|---|---|
| 22-generate-node-dynamic-input-tests | 1 | execute |
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.
<execution_context> ~/.claude/get-shit-done/workflows/execute-phase.md ~/.claude/get-shit-done/templates/summary.md </execution_context>
@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.mdExisting 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
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:
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" },
],
}),
});
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:
// 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" },
]
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:
// 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" },
]
<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>