---
phase: 17-component-tests
plan: 06
type: execute
---

<objective>
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.
</objective>

<execution_context>
~/.claude/get-shit-done/workflows/execute-phase.md
~/.claude/get-shit-done/templates/summary.md
</execution_context>

<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
</context>

<tasks>

<task type="auto">
  <name>Task 1: Add WorkflowCanvas component tests</name>
  <files>src/components/__tests__/WorkflowCanvas.test.tsx</files>
  <action>
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.
  </action>
  <verify>npm test -- --run src/components/__tests__/WorkflowCanvas.test.tsx passes</verify>
  <done>WorkflowCanvas tests cover basic rendering and connection validation</done>
</task>

<task type="auto">
  <name>Task 2: Add edge component tests</name>
  <files>src/components/__tests__/EditableEdge.test.tsx, src/components/__tests__/ReferenceEdge.test.tsx, src/components/__tests__/EdgeToolbar.test.tsx</files>
  <action>
**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.
  </action>
  <verify>npm test -- --run src/components/__tests__/ passes all edge tests</verify>
  <done>Edge components have test coverage for rendering and interactions</done>
</task>

</tasks>

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

<success_criteria>

- All tasks completed
- All verification checks pass
- No TypeScript errors
- ~15-20 new tests for canvas and edge components
</success_criteria>

<output>
After completion, create `.planning/phases/17-component-tests/17-06-SUMMARY.md`
</output>