Browse Source
Phase 22: Generate Node Dynamic Input Tests - 1 plan created (22-01-PLAN.md) - 3 tasks defined: ModelParameters tests, GenerateImageNode/GenerateVideoNode dynamic handle tests - Ready for executionhandoff-20260429-1057
3 changed files with 200 additions and 6 deletions
@ -0,0 +1,194 @@ |
|||
--- |
|||
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> |
|||
Loading…
Reference in new issue