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

<objective>
Add tests for menu and notification components: ConnectionDropMenu, Toast, and CostIndicator.

Purpose: Test UI feedback components for user interactions and status display.
Output: Test files covering menu rendering, toast notifications, and cost tracking display.
</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-06-SUMMARY.md

# Key source files:
@src/components/ConnectionDropMenu.tsx
@src/components/Toast.tsx
@src/components/CostIndicator.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 ConnectionDropMenu component tests</name>
  <files>src/components/__tests__/ConnectionDropMenu.test.tsx</files>
  <action>
Create comprehensive tests for ConnectionDropMenu:
- Basic rendering when visible (position at x, y)
- Hidden when not visible
- Node type options based on source handle type:
  - From image output: show image-accepting nodes (nanoBanana, generateVideo, annotation, output, llmGenerate)
  - From text output: show text-accepting nodes (nanoBanana, generateVideo, llmGenerate)
  - From reference output: show reference-accepting nodes (imageInput)
- Menu item click creating node and connection
- Click outside closing menu
- Escape key closing menu
- Menu positioning near viewport edges (adjust to stay visible)

Mock useWorkflowStore for: addNode, addEdge.
Mock useReactFlow for: screenToFlowPosition.
Pass props: x, y, sourceNodeId, sourceHandleId, sourceHandleType, onClose.
  </action>
  <verify>npm test -- --run src/components/__tests__/ConnectionDropMenu.test.tsx passes</verify>
  <done>ConnectionDropMenu tests cover rendering, node type filtering, and interactions</done>
</task>

<task type="auto">
  <name>Task 2: Add Toast and CostIndicator tests</name>
  <files>src/components/__tests__/Toast.test.tsx, src/components/__tests__/CostIndicator.test.tsx</files>
  <action>
**Create Toast.test.tsx:**
- Not rendered when message is null
- Renders with message text
- Type styling (info, success, warning, error)
- Type icons displayed correctly
- Close button click calls hide()
- Auto-hide after 4 seconds when not persistent
- Persistent toast stays visible (no auto-hide)
- Details section collapsed by default
- "Show details" button expands details
- "Hide details" button collapses details

Test useToast store hook: show() sets message, hide() clears message.

**Create CostIndicator.test.tsx:**
- Basic rendering with cost display
- Zero cost display ("$0.00")
- Non-zero cost formatted correctly
- Click opening CostDialog
- Cost updates when workflowCosts change

Mock useWorkflowStore for: workflowCosts, workflowId.
  </action>
  <verify>npm test -- --run src/components/__tests__/ passes Toast and CostIndicator tests</verify>
  <done>Toast and CostIndicator have full test coverage</done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] `npm test -- --run` passes all tests
- [ ] `npm run build` succeeds without errors
- [ ] ConnectionDropMenu node filtering logic tested
- [ ] Toast auto-hide and persistent modes tested
</verification>

<success_criteria>

- All tasks completed
- All verification checks pass
- No TypeScript errors
- ~20-25 new tests for menu and notification components
</success_criteria>

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