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

3.6 KiB
Raw Blame History

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

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

Task 1: Add Header component tests src/components/__tests__/Header.test.tsx 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. npm test -- --run src/components/tests/Header.test.tsx passes Header tests cover project state display, save/load buttons, modal triggers

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

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

<success_criteria>

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