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.
280 Commits
30 Branches
0 Tags
1.2 GiB
 
 
Tree: e73dce47cd
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'e73dce47cd'
${ noResults }
popiart-node-canvas/.planning/phases/17-component-tests/17-06-PLAN.md

3.7 KiB
Raw Blame History

phase plan type
17-component-tests 6 execute
Add tests for canvas and edge components: WorkflowCanvas, EditableEdge, ReferenceEdge, and EdgeToolbar.

Purpose: Test the core canvas rendering and edge interaction components. Output: Test files covering canvas setup, edge rendering, and edge toolbar 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-05-SUMMARY.md

Key source files:

@src/components/WorkflowCanvas.tsx @src/components/edges/EditableEdge.tsx @src/components/edges/ReferenceEdge.tsx @src/components/EdgeToolbar.tsx

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

Task 1: Add WorkflowCanvas component tests src/components/__tests__/WorkflowCanvas.test.tsx Create tests for WorkflowCanvas (focus on testable aspects): - Basic rendering with ReactFlow component - Node types registration (all 8 node types available) - Edge types registration (default, reference) - Minimap rendering - Controls rendering - Background pattern rendering - onConnect callback (addEdge called) - onNodesChange callback (applies node changes) - onEdgesChange callback (applies edge changes) - Drop handler for node creation from FloatingActionBar drag - Connection validation logic (isValidConnection): - Same type handles can connect - Different type handles cannot connect - Self-connections blocked

Note: Complex interaction flows (drag-drop sequences, multi-node selection) are better suited for E2E tests.

Mock useWorkflowStore for: nodes, edges, onNodesChange, onEdgesChange, addEdge, addNode. npm test -- --run src/components/tests/WorkflowCanvas.test.tsx passes WorkflowCanvas tests cover basic rendering and connection validation

Task 2: Add edge component tests src/components/__tests__/EditableEdge.test.tsx, src/components/__tests__/ReferenceEdge.test.tsx, src/components/__tests__/EdgeToolbar.test.tsx **Create EditableEdge.test.tsx:** - Basic rendering with path - Pause toggle button visibility on hover/selection - Pause toggle click (toggles edge pause state) - Edge styling for paused vs active state - Label display when edge has label

Create ReferenceEdge.test.tsx:

  • Basic rendering with dashed path style
  • Gray color for reference edges
  • No interactive elements (read-only visual link)

Create EdgeToolbar.test.tsx:

  • Rendering when edge selected
  • Hidden when no edge selected
  • Delete button click (removes edge)
  • Pause toggle button
  • Add label button/input

Mock useWorkflowStore for: edges, updateEdge, removeEdge. Mock edge props: id, sourceX, sourceY, targetX, targetY, selected. npm test -- --run src/components/tests/ passes all edge tests Edge components have test coverage for rendering and interactions

Before declaring plan complete: - [ ] `npm test -- --run` passes all tests - [ ] `npm run build` succeeds without errors - [ ] Connection validation logic tested - [ ] Edge pause toggle tested

<success_criteria>

  • All tasks completed
  • All verification checks pass
  • No TypeScript errors
  • ~15-20 new tests for canvas and edge components </success_criteria>
After completion, create `.planning/phases/17-component-tests/17-06-SUMMARY.md`