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-01-PLAN.md

3.8 KiB
Raw Blame History

phase plan type
17-component-tests 1 execute
Add comprehensive tests for core node components: BaseNode, PromptNode (extend existing), and ImageInputNode.

Purpose: Establish test coverage for the foundational node components that all other nodes build upon. Output: Test files with full coverage of rendering, user interactions, and edge cases.

<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/STATE.md @.planning/phases/15-test-infrastructure/15-01-SUMMARY.md @.planning/phases/16-store-modularization/16-01-SUMMARY.md

Key source files:

@src/components/nodes/BaseNode.tsx @src/components/nodes/PromptNode.tsx @src/components/nodes/ImageInputNode.tsx @src/components/tests/PromptNode.test.tsx

Test infrastructure:

@src/test/setup.ts @vitest.config.ts

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

Task 1: Add BaseNode component tests src/components/__tests__/BaseNode.test.tsx Create comprehensive tests for BaseNode component: - Basic rendering (title, children, className) - Title editing flow (click to edit, type, submit on Enter, cancel on Escape) - Comment functionality (add comment, edit comment, tooltip on hover) - Expand button rendering and click handler - Run button rendering, click handler, and disabled state during execution - Lock badge display when node is in locked group - Node resizer visibility when selected - Border styling for selected, executing, and error states

Mock useWorkflowStore to return: currentNodeId, groups, nodes. Mock useReactFlow to return: getNodes, setNodes. Use ReactFlowProvider wrapper for all tests. npm test -- --run src/components/tests/BaseNode.test.tsx passes BaseNode tests cover rendering, title editing, comments, buttons, and visual states

Task 2: Extend PromptNode tests and add ImageInputNode tests src/components/__tests__/PromptNode.test.tsx, src/components/__tests__/ImageInputNode.test.tsx **Extend PromptNode.test.tsx:** - Add test for expand button opening modal (incrementModalCount called) - Add test for keyboard shortcut handling (if applicable)

Create ImageInputNode.test.tsx:

  • Basic rendering with empty state (drop zone visible)
  • Image display when data.image is set
  • File input change handler (mock FileReader, test updateNodeData called with base64)
  • File validation (reject non-image types, reject files > 10MB)
  • Remove button functionality (clears image, filename, dimensions)
  • Drag and drop handling (onDrop triggers file processing)
  • Handle rendering (reference handle on left, image handle on right)

Use same mock patterns as existing PromptNode tests. npm test -- --run src/components/tests/ passes with all new tests PromptNode extended with modal test, ImageInputNode has full test coverage

Before declaring plan complete: - [ ] `npm test -- --run` passes all tests - [ ] `npm run build` succeeds without errors - [ ] BaseNode tests cover: rendering, title editing, comments, buttons, visual states - [ ] ImageInputNode tests cover: empty state, image display, file handling, validation

<success_criteria>

  • All tasks completed
  • All verification checks pass
  • No TypeScript errors
  • ~15-20 new tests added for BaseNode and ImageInputNode
  • Existing PromptNode tests still pass </success_criteria>
After completion, create `.planning/phases/17-component-tests/17-01-SUMMARY.md`