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