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-03-PLAN.md

3.7 KiB
Raw Blame History

phase plan type
17-component-tests 3 execute
Add tests for generate node components: GenerateImageNode and GenerateVideoNode.

Purpose: Test the core generation components that interface with AI providers. Output: Test files covering provider selection, model browsing, parameter handling, and generation state.

<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-02-SUMMARY.md

Key source files:

@src/components/nodes/GenerateImageNode.tsx @src/components/nodes/GenerateVideoNode.tsx @src/components/nodes/ModelParameters.tsx

Tech stack available: Vitest, React Testing Library, jsdom Established patterns: ReactFlowProvider wrapper, vi.mock for Zustand store Key decisions: Provider badges prepend node title, Gemini always enabled, fal.ai always available

Task 1: Add GenerateImageNode component tests src/components/__tests__/GenerateImageNode.test.tsx Create comprehensive tests for GenerateImageNode: - Basic rendering with provider badge (Gemini default) - Model selector dropdown for Gemini models (nano-banana, nano-banana-pro) - Provider switching (Gemini, fal.ai, Replicate if configured) - Browse button opening ModelSearchDialog - Aspect ratio selector rendering (only for Gemini) - Resolution selector rendering (only for nano-banana-pro) - Output image display when data.outputImage exists - Image history carousel navigation (if history exists) - Loading state during generation - Error state display - Handle rendering (image and text inputs on left, image output on right) - Run button triggering executeWorkflow - Legacy data migration (model → selectedModel)

Mock useWorkflowStore for: updateNodeData, providerSettings, executeWorkflow, generationsPath. Mock fetch for /api/models endpoint. npm test -- --run src/components/tests/GenerateImageNode.test.tsx passes GenerateImageNode tests cover provider selection, model browsing, generation states

Task 2: Add GenerateVideoNode component tests src/components/__tests__/GenerateVideoNode.test.tsx Create comprehensive tests for GenerateVideoNode: - Basic rendering (similar structure to GenerateImageNode) - Provider badge display (fal.ai or Replicate only - Gemini excluded) - Model selector for video-capable models - Browse button opening ModelSearchDialog with video capabilities - Video output display when data.outputVideo exists - Video history carousel navigation - Loading state during generation - Error state display - Handle rendering (image and text inputs on left, video output on right) - Run button triggering executeWorkflow

Key difference from GenerateImageNode: No Gemini provider option (Gemini doesn't support video).

Mock patterns same as GenerateImageNode tests. npm test -- --run src/components/tests/GenerateVideoNode.test.tsx passes GenerateVideoNode tests cover video-specific providers and output handling

Before declaring plan complete: - [ ] `npm test -- --run` passes all tests - [ ] `npm run build` succeeds without errors - [ ] Provider selection logic tested for both components - [ ] Gemini exclusion from video node verified

<success_criteria>

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