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

<objective>
Add tests for toolbar components: Header, FloatingActionBar, and MultiSelectToolbar.

Purpose: Test the main UI control surfaces for project management and node creation.
Output: Test files covering toolbar rendering, button interactions, and state-driven UI.
</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-04-SUMMARY.md

# Key source files:
@src/components/Header.tsx
@src/components/FloatingActionBar.tsx
@src/components/MultiSelectToolbar.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 Header component tests</name>
  <files>src/components/__tests__/Header.test.tsx</files>
  <action>
Create comprehensive tests for Header:
- Basic rendering with project name display
- "New Project" button opening ProjectSetupModal
- "Open" button triggering file input
- Save button enabled only when project is configured
- Save button disabled during isSaving state
- Last saved timestamp display
- Unsaved changes indicator (dot)
- Settings gear button opening modal in settings mode
- Open folder button (only visible when saveDirectoryPath set)
- CostIndicator component rendered

Mock useWorkflowStore for: workflowName, workflowId, saveDirectoryPath, hasUnsavedChanges, lastSavedAt, isSaving, setWorkflowMetadata, saveToFile, loadWorkflow.
  </action>
  <verify>npm test -- --run src/components/__tests__/Header.test.tsx passes</verify>
  <done>Header tests cover project state display, save/load buttons, modal triggers</done>
</task>

<task type="auto">
  <name>Task 2: Add FloatingActionBar and MultiSelectToolbar tests</name>
  <files>src/components/__tests__/FloatingActionBar.test.tsx, src/components/__tests__/MultiSelectToolbar.test.tsx</files>
  <action>
**Create FloatingActionBar.test.tsx:**
- Basic rendering with node type buttons (Prompt, Image, LLM, etc.)
- Node button click adding node via addNode
- Drag start setting dataTransfer with node type
- Generate combo button dropdown menu
- Provider icons (Replicate, fal.ai) based on API key configuration
- Provider icon click opening ModelSearchDialog

**Create MultiSelectToolbar.test.tsx:**
- Basic rendering when multiple nodes selected
- Hidden when less than 2 nodes selected
- Stack horizontal button click (arrangeNodes called with "horizontal")
- Stack vertical button click (arrangeNodes called with "vertical")
- Grid arrangement button
- Group selected button (createGroup called)
- Delete selected button
- Selected count display

Mock useWorkflowStore for: addNode, providerSettings.
Mock useReactFlow for: screenToFlowPosition, getNodes.
  </action>
  <verify>npm test -- --run src/components/__tests__/ passes all toolbar tests</verify>
  <done>FloatingActionBar and MultiSelectToolbar have full test coverage</done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] `npm test -- --run` passes all tests
- [ ] `npm run build` succeeds without errors
- [ ] Header save/load state logic tested
- [ ] FloatingActionBar node creation tested
- [ ] MultiSelectToolbar arrangement actions tested
</verification>

<success_criteria>

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

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