You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
| phase |
plan |
type |
status |
| 17-component-tests |
3 |
summary |
complete |
Phase 17-03: Generate Node Component Tests - Summary
Completed Tasks
Task 1: Add GenerateImageNode component tests
- Commit:
24542ea
- File:
src/components/__tests__/GenerateImageNode.test.tsx
- Tests: 36 tests covering:
- Basic rendering with Gemini provider badge
- Model name display and selectedModel handling
- Image and text input handles, image output handle
- Handle labels (Image, Prompt, Image output)
- Idle state with "Run to generate" message
- Loading state with spinner (with and without output)
- Error state display (with and without output)
- Output image display and clear button
- Image history carousel navigation
- Run button functionality and disabled state
- Browse button opening ModelSearchDialog
- Provider badge display (Gemini, fal.ai, Replicate)
- Legacy data migration (model -> selectedModel)
- Dynamic input handles for external providers
- Custom title editing
- ModelParameters component rendering
- Fetch models behavior based on provider
Task 2: Add GenerateVideoNode component tests
- Commit:
be43bbc
- File:
src/components/__tests__/GenerateVideoNode.test.tsx
- Tests: 38 tests covering:
- Basic rendering with fal.ai provider badge (default)
- "Select model..." display when no model selected
- Model name display from selectedModel
- Image and text input handles, video output handle
- Handle labels (Image, Prompt, Video output)
- Provider selection excluding Gemini (key difference)
- Replicate provider badge when configured
- Idle state with placeholder
- Loading state with spinner
- Error state display
- Video output with controls, autoplay, loop, muted
- Video clear button functionality
- Video history carousel navigation
- Run button functionality
- Browse button opening ModelSearchDialog
- Dynamic input handles from schema
- Custom title editing
- ModelParameters rendering
- Video capabilities fetch (text-to-video, image-to-video)
Verification Results
| Check |
Status |
npm test -- --run passes all tests |
PASS (362 tests) |
npm run build succeeds without errors |
PASS |
| Provider selection logic tested for both components |
PASS |
| Gemini exclusion from video node verified |
PASS |
Test Statistics
| Metric |
Value |
| New test files created |
2 |
| New tests for GenerateImageNode |
36 |
| New tests for GenerateVideoNode |
38 |
| Total new tests |
74 |
| Total project tests |
362 |
Key Implementation Notes
Mock Patterns Established
- Workflow store mock: Handles both selector pattern
useWorkflowStore((s) => s.property) and destructuring pattern const { property } = useWorkflowStore()
- Fetch mock: Consistent mocking of
/api/models and /api/models/{modelId} endpoints
- React Flow mock: Includes
useReactFlow with setNodes, screenToFlowPosition
- Portal mock:
createPortal returns children directly for ModelSearchDialog testing
Testing Approach
- Provider badge identification via SVG viewBox attributes:
- Gemini:
viewBox="0 0 65 65"
- Replicate:
viewBox="0 0 1000 1000"
- fal.ai:
viewBox="0 0 1855 1855"
- Handle identification via
data-handletype and CSS class patterns
- Video element attributes tested: controls, autoplay, loop, muted
- Carousel controls visible only when history length > 1
Key Differences Between Components
| Feature |
GenerateImageNode |
GenerateVideoNode |
| Default provider |
gemini |
fal |
| Gemini available |
Yes |
No |
| Output type |
image |
video |
| Output handle type |
image |
video |
| Capabilities |
text-to-image, image-to-image |
text-to-video, image-to-video |
Deviations from Plan
None. All tasks completed as specified.
Files Created
/Users/willie/Documents/projects/node-banana/src/components/__tests__/GenerateImageNode.test.tsx (738 lines)/Users/willie/Documents/projects/node-banana/src/components/__tests__/GenerateVideoNode.test.tsx (738 lines)
