weitao
/
popiart-node-canvas
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
272 Commits
29 Branches
0 Tags
1.2 GiB
 
 
Tree: dfd3d2e4d8
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'dfd3d2e4d8'
${ noResults }
popiart-node-canvas/.planning/phases/17-component-tests/17-10-PLAN.md

3.8 KiB
Raw Blame History

phase plan type
17-component-tests 10 execute
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.

<execution_context> ~/.claude/get-shit-done/workflows/execute-phase.md ~/.claude/get-shit-done/templates/summary.md </execution_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

Task 1: Add WelcomeModal and QuickstartInitialView tests src/components/__tests__/WelcomeModal.test.tsx, src/components/__tests__/QuickstartInitialView.test.tsx **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. npm test -- --run src/components/tests/WelcomeModal.test.tsx passes WelcomeModal and QuickstartInitialView tests cover navigation and options

Task 2: Add remaining quickstart component tests src/components/__tests__/QuickstartTemplatesView.test.tsx, src/components/__tests__/PromptWorkflowView.test.tsx, src/components/__tests__/QuickstartBackButton.test.tsx **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. npm test -- --run src/components/tests/ passes all quickstart tests All quickstart components have test coverage

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

<success_criteria>

  • All tasks completed
  • All verification checks pass
  • No TypeScript errors
  • ~20-25 new tests for quickstart components </success_criteria>
After completion, create `.planning/phases/17-component-tests/17-10-SUMMARY.md`