3.7 KiB
| phase | plan | type |
|---|---|---|
| 17-component-tests | 11 | execute |
Purpose: Test supporting UI components for history browsing, group visualization, and parameter editing. Output: Test files covering component rendering, data display, and interactions.
<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-10-SUMMARY.mdKey source files:
@src/components/GlobalImageHistory.tsx @src/components/GroupsOverlay.tsx @src/components/nodes/ModelParameters.tsx
Tech stack available: Vitest, React Testing Library, jsdom Established patterns: ReactFlowProvider wrapper, vi.mock for Zustand store
Task 1: Add GlobalImageHistory component tests src/components/__tests__/GlobalImageHistory.test.tsx Create comprehensive tests for GlobalImageHistory: - Not rendered when closed/hidden - Rendered when opened (panel visible) - Toggle button to open/close - Image grid rendering with thumbnails - Empty state when no history - Image click selecting/previewing image - Delete image from history - Pagination or infinite scroll (if applicable) - Filter by type (image vs video) if applicable - Date grouping or sortingMock useWorkflowStore for: imageHistory, loadImageHistory, deleteFromHistory. Mock fetch for /api/load-generation endpoint. npm test -- --run src/components/tests/GlobalImageHistory.test.tsx passes GlobalImageHistory tests cover rendering, navigation, and deletion
Task 2: Add GroupsOverlay and ModelParameters tests src/components/__tests__/GroupsOverlay.test.tsx, src/components/__tests__/ModelParameters.test.tsx **Create GroupsOverlay.test.tsx:** - Renders group backgrounds for each group in groups object - Group color applied to background - Group position and size from group data - No rendering when no groups exist - Group selection highlighting - Z-index layering correct (below nodes)Create ModelParameters.test.tsx:
- Basic rendering with parameter list
- Different input types based on parameter schema:
- Number input for numeric params
- Text input for string params
- Select for enum params
- Checkbox for boolean params
- Slider for range params (min/max)
- Collapsed state (parameters hidden)
- Expanded state (parameters visible)
- Toggle collapse/expand
- Parameter value change calls onParameterChange
- Default values displayed
- Parameter descriptions/tooltips
Mock useWorkflowStore if needed. Pass props: parameters (schema), values, onChange, collapsed, onToggleCollapse. npm test -- --run src/components/tests/ passes utility component tests GroupsOverlay and ModelParameters have comprehensive test coverage
Before declaring plan complete: - [ ] `npm test -- --run` passes all tests - [ ] `npm run build` succeeds without errors - [ ] Image history navigation tested - [ ] ModelParameters input types tested<success_criteria>
- All tasks completed
- All verification checks pass
- No TypeScript errors
- ~15-20 new tests for utility components
- Phase 17 complete: all 34 components have test coverage </success_criteria>