diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index 252f8521..afe6f024 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -219,7 +219,7 @@ Plans: - [x] 17-01: Core Nodes (BaseNode, PromptNode, ImageInputNode) - [x] 17-02: Display Nodes (OutputNode, SplitGridNode, GroupNode) - [x] 17-03: Generate Nodes (GenerateImageNode, GenerateVideoNode) -- [ ] 17-04: Processing Nodes (LLMGenerateNode, AnnotationNode) +- [x] 17-04: Processing Nodes (LLMGenerateNode, AnnotationNode) - [ ] 17-05: Toolbars (Header, FloatingActionBar, MultiSelectToolbar) - [ ] 17-06: Canvas & Edges (WorkflowCanvas, EditableEdge, ReferenceEdge, EdgeToolbar) - [ ] 17-07: Menus & Notifications (ConnectionDropMenu, Toast, CostIndicator) @@ -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 | 3/11 | In progress | - | +| 17. Component Tests | v1.2 | 4/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 25b83280..f0d57e5b 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: 3 of 11 in current phase +Plan: 4 of 11 in current phase Status: In progress -Last activity: 2026-01-13 - Completed 17-03-PLAN.md +Last activity: 2026-01-13 - Completed 17-04-PLAN.md -Progress: ████████░░ 83% +Progress: ████████░░ 84% ## Performance Metrics @@ -126,6 +126,6 @@ Recent decisions affecting current work: ## Session Continuity Last session: 2026-01-13 -Stopped at: Completed 17-03-PLAN.md +Stopped at: Completed 17-04-PLAN.md Resume file: None -Next action: Execute Phase 17 Plan 04 (run /gsd:execute-plan .planning/phases/17-component-tests/17-04-PLAN.md) +Next action: Execute Phase 17 Plan 05 (run /gsd:execute-plan .planning/phases/17-component-tests/17-05-PLAN.md) diff --git a/.planning/phases/17-component-tests/17-04-SUMMARY.md b/.planning/phases/17-component-tests/17-04-SUMMARY.md new file mode 100644 index 00000000..59d3d805 --- /dev/null +++ b/.planning/phases/17-component-tests/17-04-SUMMARY.md @@ -0,0 +1,113 @@ +--- +phase: 17-component-tests +plan: 04 +type: summary +status: complete +--- + +# Phase 17-04: Processing Node Component Tests - Summary + +## Completed Tasks + +### Task 1: Add LLMGenerateNode component tests +- **Commit**: `6669ee0` +- **File**: `src/components/__tests__/LLMGenerateNode.test.tsx` +- **Tests**: 25 tests covering: + - Basic rendering with title "LLM Generate" + - Text input handle on left (for prompt connections) + - Image input handle on left (for vision capabilities) + - Text output handle on right + - Provider selector with Google and OpenAI options + - Model selector dropdown based on selected provider: + - Google: Gemini 3 Flash, Gemini 2.5 Flash, Gemini 3.0 Pro + - OpenAI: GPT-4.1 Mini, GPT-4.1 Nano + - Provider change updates model to first available + - Temperature slider rendering and editing + - Idle state with "Run to generate" message + - Loading state with spinner + - Error state display with fallback "Failed" message + - Output text display with regenerate and clear buttons + - Regenerate button disabled when workflow is running + - Clear button resets output, status, and error + - Custom title editing functionality + - Model fallback when current model is invalid for provider + +### Task 2: Add AnnotationNode component tests +- **Commit**: `1084931` +- **File**: `src/components/__tests__/AnnotationNode.test.tsx` +- **Tests**: 24 tests covering: + - Basic rendering with title "Annotate" + - Image input handle on left + - Image output handle on right + - Empty state with "Drop, click, or connect" message + - Drop zone with dashed border when no image + - Source image display + - Output image display (prefers output over source) + - "Add annotations" hint when no annotations + - Annotation count display ("Edit (N)") + - Modal opening via image click + - Existing annotations passed to modal + - Remove button clears sourceImage, outputImage, annotations + - Hidden file input for manual upload + - Click triggers file input dialog + - File upload with FileReader processing + - Format validation (PNG, JPG, WebP only) + - Size validation (<10MB limit) + - Drag and drop handling + - Custom title editing functionality + +## Verification Results + +| Check | Status | +|-------|--------| +| `npm test -- --run` passes all tests | PASS (411 tests) | +| `npm run build` succeeds without errors | PASS | +| LLM provider/model selection tested | PASS | +| Annotation modal trigger tested | PASS | + +## Test Statistics + +| Metric | Value | +|--------|-------| +| New test files created | 2 | +| New tests for LLMGenerateNode | 25 | +| New tests for AnnotationNode | 24 | +| **Total new tests** | **49** | +| Total project tests | 411 | + +## Key Implementation Notes + +### Mock Patterns Used + +1. **Workflow store mock**: Selector pattern with `mockUseWorkflowStore.mockImplementation` +2. **Annotation store mock**: Separate mock for `useAnnotationStore` (only used by AnnotationNode) +3. **Global mocks**: `alert`, `DataTransfer`, `FileReader` for file handling tests +4. **ReactFlowProvider wrapper**: Required for all node components + +### LLMGenerateNode Specifics +- Provider-model relationship: Changing provider auto-selects first model for that provider +- Model fallback logic: Invalid model for current provider falls back to first available +- Temperature stored as float, displayed with 1 decimal place +- Output text preserved across regenerations until cleared + +### AnnotationNode Specifics +- Uses separate `useAnnotationStore` for modal state management +- `openModal(nodeId, image, annotations)` is the interface to annotation modal +- Display priority: outputImage > sourceImage +- Clear operation resets all three: sourceImage, outputImage, annotations +- Tests focus on component shell per plan guidance (no Konva internals) + +### Testing Approach +- Handle identification via `data-handletype` and CSS class patterns (`target`/`source`) +- Button identification via title attribute or SVG path patterns +- File validation messages tested via mock alert +- Remove button hidden with opacity-0 but still clickable in tests + +## Deviations from Plan + +None. All tasks completed as specified. + +## Files Created + +1. `/Users/willie/Documents/projects/node-banana/src/components/__tests__/LLMGenerateNode.test.tsx` (403 lines) +2. `/Users/willie/Documents/projects/node-banana/src/components/__tests__/AnnotationNode.test.tsx` (514 lines)