From fb6dddd4627b6f9023bd307d416e435a0a409875 Mon Sep 17 00:00:00 2001 From: shrimbly Date: Tue, 13 Jan 2026 10:00:05 +1300 Subject: [PATCH] docs(17-03): complete generate nodes component tests plan Tasks completed: 2/2 - Add GenerateImageNode component tests (36 tests) - Add GenerateVideoNode component tests (38 tests) SUMMARY: .planning/phases/17-component-tests/17-03-SUMMARY.md --- .planning/ROADMAP.md | 4 +- .planning/STATE.md | 10 +- .../17-component-tests/17-03-SUMMARY.md | 110 ++++++++++++++++++ 3 files changed, 117 insertions(+), 7 deletions(-) create mode 100644 .planning/phases/17-component-tests/17-03-SUMMARY.md diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index cce51c10..252f8521 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -218,7 +218,7 @@ Plans: Plans: - [x] 17-01: Core Nodes (BaseNode, PromptNode, ImageInputNode) - [x] 17-02: Display Nodes (OutputNode, SplitGridNode, GroupNode) -- [ ] 17-03: Generate Nodes (GenerateImageNode, GenerateVideoNode) +- [x] 17-03: Generate Nodes (GenerateImageNode, GenerateVideoNode) - [ ] 17-04: Processing Nodes (LLMGenerateNode, AnnotationNode) - [ ] 17-05: Toolbars (Header, FloatingActionBar, MultiSelectToolbar) - [ ] 17-06: Canvas & Edges (WorkflowCanvas, EditableEdge, ReferenceEdge, EdgeToolbar) @@ -281,7 +281,7 @@ Phases execute in numeric order: 1 → 2 → ... → 14 → 15 → 16 → 17 → | 14. Fix Drag-Connect Node Creation Bugs | v1.1 | 1/1 | Complete | 2026-01-12 | | 15. Test Infrastructure | v1.2 | 1/1 | Complete | 2026-01-12 | | 16. Store Modularization | v1.2 | 1/1 | Complete | 2026-01-12 | -| 17. Component Tests | v1.2 | 2/11 | In progress | - | +| 17. Component Tests | v1.2 | 3/11 | In progress | - | | 18. API Route Tests | v1.2 | 0/? | Not started | - | | 19. Type Refactoring | v1.2 | 0/? | Not started | - | | 20. Integration Tests | v1.2 | 0/? | Not started | - | diff --git a/.planning/STATE.md b/.planning/STATE.md index f844f69f..25b83280 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -10,11 +10,11 @@ See: .planning/PROJECT.md (updated 2026-01-09) ## Current Position Phase: 17 of 20 (Component Tests) -Plan: 2 of 11 in current phase +Plan: 3 of 11 in current phase Status: In progress -Last activity: 2026-01-13 - Completed 17-02-PLAN.md +Last activity: 2026-01-13 - Completed 17-03-PLAN.md -Progress: ████████░░ 82% +Progress: ████████░░ 83% ## Performance Metrics @@ -126,6 +126,6 @@ Recent decisions affecting current work: ## Session Continuity Last session: 2026-01-13 -Stopped at: Completed 17-02-PLAN.md +Stopped at: Completed 17-03-PLAN.md Resume file: None -Next action: Execute Phase 17 Plan 03 (run /gsd:execute-plan .planning/phases/17-component-tests/17-03-PLAN.md) +Next action: Execute Phase 17 Plan 04 (run /gsd:execute-plan .planning/phases/17-component-tests/17-04-PLAN.md) diff --git a/.planning/phases/17-component-tests/17-03-SUMMARY.md b/.planning/phases/17-component-tests/17-03-SUMMARY.md new file mode 100644 index 00000000..80a4ba70 --- /dev/null +++ b/.planning/phases/17-component-tests/17-03-SUMMARY.md @@ -0,0 +1,110 @@ +--- +phase: 17-component-tests +plan: 03 +type: summary +status: 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 +1. **Workflow store mock**: Handles both selector pattern `useWorkflowStore((s) => s.property)` and destructuring pattern `const { property } = useWorkflowStore()` +2. **Fetch mock**: Consistent mocking of `/api/models` and `/api/models/{modelId}` endpoints +3. **React Flow mock**: Includes `useReactFlow` with `setNodes`, `screenToFlowPosition` +4. **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 + +1. `/Users/willie/Documents/projects/node-banana/src/components/__tests__/GenerateImageNode.test.tsx` (738 lines) +2. `/Users/willie/Documents/projects/node-banana/src/components/__tests__/GenerateVideoNode.test.tsx` (738 lines)