weitao
/
popiart-node-canvas
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
279 Commits
29 Branches
0 Tags
1.2 GiB
 
 
Tree: 4c83d72245
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '4c83d72245'
${ noResults }
popiart-node-canvas/.planning/phases/17-component-tests/17-02-PLAN.md

3.4 KiB
Raw Blame History

phase plan type
17-component-tests 2 execute
Add tests for display node components: OutputNode, SplitGridNode, and GroupNode.

Purpose: Test components that display generated content and manage node grouping. Output: Test files covering rendering, content display logic, and user 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-01-SUMMARY.md

Key source files:

@src/components/nodes/OutputNode.tsx @src/components/nodes/SplitGridNode.tsx @src/components/nodes/GroupNode.tsx

Tech stack available: Vitest, React Testing Library, jsdom Established patterns: ReactFlowProvider wrapper, vi.mock for Zustand store

Task 1: Add OutputNode component tests src/components/__tests__/OutputNode.test.tsx Create comprehensive tests for OutputNode: - Empty state rendering ("Waiting for image or video" placeholder) - Image content display (img element with correct src) - Video content detection logic: - data.video present → video element - data.contentType === "video" → video element - data.image starts with "data:video/" → video element - data.image contains ".mp4" or ".webm" → video element - Lightbox functionality (click opens fullscreen view, click outside closes) - Download button for data URL content - Download button for URL-based content (http/https) - Video controls rendering (controls, loop, muted, autoPlay, playsInline)

Mock useWorkflowStore for updateNodeData. npm test -- --run src/components/tests/OutputNode.test.tsx passes OutputNode tests cover empty state, image/video detection, lightbox, download

Task 2: Add SplitGridNode and GroupNode tests src/components/__tests__/SplitGridNode.test.tsx, src/components/__tests__/GroupNode.test.tsx **Create SplitGridNode.test.tsx:** - Basic rendering with title "Split Grid" - Input handle rendering (image handle on left) - Output handle rendering (reference handle on right) - Settings button opening modal - Grid cell count display when cells are detected - Empty state when no input connected

Create GroupNode.test.tsx:

  • Basic rendering with group color
  • Group name display and editing
  • Lock toggle functionality (toggleGroupLock called)
  • Locked state visual indicator
  • Delete button functionality
  • Expand/collapse behavior
  • Child node containment styling

Mock useWorkflowStore for: groups, toggleGroupLock, updateGroup, deleteGroup. npm test -- --run src/components/tests/ passes all new tests SplitGridNode and GroupNode have comprehensive test coverage

Before declaring plan complete: - [ ] `npm test -- --run` passes all tests - [ ] `npm run build` succeeds without errors - [ ] OutputNode video detection logic fully tested - [ ] GroupNode lock/unlock functionality tested

<success_criteria>

  • All tasks completed
  • All verification checks pass
  • No TypeScript errors
  • ~15-20 new tests added across 3 components </success_criteria>
After completion, create `.planning/phases/17-component-tests/17-02-SUMMARY.md`