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.
280 Commits
30 Branches
0 Tags
1.2 GiB
 
 
Tree: e73dce47cd
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'e73dce47cd'
${ noResults }
popiart-node-canvas/.planning/phases/17-component-tests/17-08-PLAN.md

3.6 KiB
Raw Blame History

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

<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-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

Task 1: Add ModelSearchDialog component tests src/components/__tests__/ModelSearchDialog.test.tsx 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). npm test -- --run src/components/tests/ModelSearchDialog.test.tsx passes ModelSearchDialog tests cover search, filtering, selection, and error states

Task 2: Add ProjectSetupModal and CostDialog tests src/components/__tests__/ProjectSetupModal.test.tsx, src/components/__tests__/CostDialog.test.tsx **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. npm test -- --run src/components/tests/ passes modal tests ProjectSetupModal and CostDialog have full test coverage

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

<success_criteria>

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