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

<objective>
Add tests for quickstart components: WelcomeModal, QuickstartInitialView, QuickstartTemplatesView, PromptWorkflowView, and QuickstartBackButton.

Purpose: Test the onboarding flow and quickstart template selection UI.
Output: Test files covering welcome flow, template browsing, and navigation.
</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-09-SUMMARY.md

# Key source files:
@src/components/quickstart/WelcomeModal.tsx
@src/components/quickstart/QuickstartInitialView.tsx
@src/components/quickstart/QuickstartTemplatesView.tsx
@src/components/quickstart/PromptWorkflowView.tsx
@src/components/quickstart/QuickstartBackButton.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 WelcomeModal and QuickstartInitialView tests</name>
  <files>src/components/__tests__/WelcomeModal.test.tsx, src/components/__tests__/QuickstartInitialView.test.tsx</files>
  <action>
**Create WelcomeModal.test.tsx:**
- Not rendered when isOpen is false
- Rendered with welcome message when isOpen is true
- "Get Started" or "Start Fresh" button
- "Use Template" button navigating to templates view
- Close button
- First-time user vs returning user content (if applicable)

**Create QuickstartInitialView.test.tsx:**
- Basic rendering with options
- "Create from Prompt" option click navigating to PromptWorkflowView
- "Browse Templates" option click navigating to TemplatesView
- "Start Blank" option click creating empty workflow
- View transitions handled correctly

Mock useWorkflowStore for: resetWorkflow, loadWorkflow.
Pass props for navigation callbacks: onNavigate, onClose.
  </action>
  <verify>npm test -- --run src/components/__tests__/WelcomeModal.test.tsx passes</verify>
  <done>WelcomeModal and QuickstartInitialView tests cover navigation and options</done>
</task>

<task type="auto">
  <name>Task 2: Add remaining quickstart component tests</name>
  <files>src/components/__tests__/QuickstartTemplatesView.test.tsx, src/components/__tests__/PromptWorkflowView.test.tsx, src/components/__tests__/QuickstartBackButton.test.tsx</files>
  <action>
**Create QuickstartTemplatesView.test.tsx:**
- Template cards rendering from TEMPLATES array
- Template card click loading workflow
- Category filtering (if applicable)
- Template preview/description display
- Loading state while loading template

**Create PromptWorkflowView.test.tsx:**
- Prompt input textarea rendering
- Submit button generating workflow from prompt
- Loading state during LLM generation
- Error state on generation failure
- Generated workflow preview
- "Use This" button loading generated workflow
- "Regenerate" button

**Create QuickstartBackButton.test.tsx:**
- Basic rendering with back arrow
- Click navigating to previous view
- Accessible label

Mock fetch for workflow generation endpoint.
  </action>
  <verify>npm test -- --run src/components/__tests__/ passes all quickstart tests</verify>
  <done>All quickstart components have test coverage</done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] `npm test -- --run` passes all tests
- [ ] `npm run build` succeeds without errors
- [ ] Template selection flow tested
- [ ] Prompt-to-workflow generation flow tested
</verification>

<success_criteria>

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

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