3.6 KiB
| phase | plan | type |
|---|---|---|
| 17-component-tests | 7 | execute |
Purpose: Test UI feedback components for user interactions and status display. Output: Test files covering menu rendering, toast notifications, and cost tracking display.
<execution_context> ~/.claude/get-shit-done/workflows/execute-phase.md ~/.claude/get-shit-done/templates/summary.md </execution_context>
@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/phases/17-component-tests/17-06-SUMMARY.mdKey source files:
@src/components/ConnectionDropMenu.tsx @src/components/Toast.tsx @src/components/CostIndicator.tsx
Tech stack available: Vitest, React Testing Library, jsdom Established patterns: ReactFlowProvider wrapper, vi.mock for Zustand store
Task 1: Add ConnectionDropMenu component tests src/components/__tests__/ConnectionDropMenu.test.tsx Create comprehensive tests for ConnectionDropMenu: - Basic rendering when visible (position at x, y) - Hidden when not visible - Node type options based on source handle type: - From image output: show image-accepting nodes (nanoBanana, generateVideo, annotation, output, llmGenerate) - From text output: show text-accepting nodes (nanoBanana, generateVideo, llmGenerate) - From reference output: show reference-accepting nodes (imageInput) - Menu item click creating node and connection - Click outside closing menu - Escape key closing menu - Menu positioning near viewport edges (adjust to stay visible)Mock useWorkflowStore for: addNode, addEdge. Mock useReactFlow for: screenToFlowPosition. Pass props: x, y, sourceNodeId, sourceHandleId, sourceHandleType, onClose. npm test -- --run src/components/tests/ConnectionDropMenu.test.tsx passes ConnectionDropMenu tests cover rendering, node type filtering, and interactions
Task 2: Add Toast and CostIndicator tests src/components/__tests__/Toast.test.tsx, src/components/__tests__/CostIndicator.test.tsx **Create Toast.test.tsx:** - Not rendered when message is null - Renders with message text - Type styling (info, success, warning, error) - Type icons displayed correctly - Close button click calls hide() - Auto-hide after 4 seconds when not persistent - Persistent toast stays visible (no auto-hide) - Details section collapsed by default - "Show details" button expands details - "Hide details" button collapses detailsTest useToast store hook: show() sets message, hide() clears message.
Create CostIndicator.test.tsx:
- Basic rendering with cost display
- Zero cost display ("$0.00")
- Non-zero cost formatted correctly
- Click opening CostDialog
- Cost updates when workflowCosts change
Mock useWorkflowStore for: workflowCosts, workflowId. npm test -- --run src/components/tests/ passes Toast and CostIndicator tests Toast and CostIndicator have full test coverage
Before declaring plan complete: - [ ] `npm test -- --run` passes all tests - [ ] `npm run build` succeeds without errors - [ ] ConnectionDropMenu node filtering logic tested - [ ] Toast auto-hide and persistent modes tested<success_criteria>
- All tasks completed
- All verification checks pass
- No TypeScript errors
- ~20-25 new tests for menu and notification components </success_criteria>