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

<objective>
Add tests for core modal components: ModelSearchDialog, ProjectSetupModal, and CostDialog.

Purpose: Test the primary modal dialogs for model browsing, project setup, and cost tracking.
Output: Test files covering modal rendering, form interactions, and data 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-07-SUMMARY.md

# Key source files:
@src/components/modals/ModelSearchDialog.tsx
@src/components/ProjectSetupModal.tsx
@src/components/CostDialog.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 ModelSearchDialog component tests</name>
  <files>src/components/__tests__/ModelSearchDialog.test.tsx</files>
  <action>
Create comprehensive tests for ModelSearchDialog:
- Not rendered when isOpen is false
- Rendered with title when isOpen is true
- Search input filters models by name
- Provider filter tabs (All, Replicate, fal.ai)
- Capability filter (text-to-image, image-to-image, text-to-video, image-to-video)
- Model card rendering (name, description, capabilities badges)
- Model selection calls onSelect with SelectedModel
- Close button calls onClose
- Escape key closes dialog
- Click outside closes dialog
- Loading state while fetching models
- Error state when fetch fails
- Empty state when no models match search

Mock fetch for /api/models endpoint.
Pass props: isOpen, onClose, onSelect, capabilities (filter), provider (optional filter).
  </action>
  <verify>npm test -- --run src/components/__tests__/ModelSearchDialog.test.tsx passes</verify>
  <done>ModelSearchDialog tests cover search, filtering, selection, and error states</done>
</task>

<task type="auto">
  <name>Task 2: Add ProjectSetupModal and CostDialog tests</name>
  <files>src/components/__tests__/ProjectSetupModal.test.tsx, src/components/__tests__/CostDialog.test.tsx</files>
  <action>
**Create ProjectSetupModal.test.tsx:**
- Not rendered when isOpen is false
- "New Project" mode: empty form, Create button
- "Settings" mode: pre-filled form with existing values
- Project name input validation (required)
- Save directory browse button opening system dialog
- API keys section (Replicate, fal.ai inputs)
- Save/Create button calls onSave with values
- Cancel button calls onClose
- Form validation errors displayed
- Provider settings saved to store

**Create CostDialog.test.tsx:**
- Not rendered when isOpen is false
- Rendered with cost breakdown table
- Per-model cost rows
- Total cost display
- Reset costs button
- Close button
- Empty state when no costs tracked

Mock useWorkflowStore for: providerSettings, setProviderSettings, workflowCosts, resetWorkflowCosts.
  </action>
  <verify>npm test -- --run src/components/__tests__/ passes modal tests</verify>
  <done>ProjectSetupModal and CostDialog have full test coverage</done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] `npm test -- --run` passes all tests
- [ ] `npm run build` succeeds without errors
- [ ] ModelSearchDialog search and filter logic tested
- [ ] ProjectSetupModal form validation tested
</verification>

<success_criteria>

- All tasks completed
- All verification checks pass
- No TypeScript errors
- ~25-30 new tests for core modals
</success_criteria>

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