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

3.2 KiB
Raw Blame History

phase plan type
17-component-tests 4 execute
Add tests for processing node components: LLMGenerateNode and AnnotationNode.

Purpose: Test components that process and transform content (text generation, image annotation). Output: Test files covering LLM provider selection, annotation canvas interactions, and state management.

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

Key source files:

@src/components/nodes/LLMGenerateNode.tsx @src/components/nodes/AnnotationNode.tsx

Tech stack available: Vitest, React Testing Library, jsdom Established patterns: ReactFlowProvider wrapper, vi.mock for Zustand store

Task 1: Add LLMGenerateNode component tests src/components/__tests__/LLMGenerateNode.test.tsx Create comprehensive tests for LLMGenerateNode: - Basic rendering with title "LLM" - Provider selector (Google, OpenAI options) - Model selector dropdown based on selected provider - System prompt textarea rendering and editing - Output text display when data.outputText exists - Copy output button functionality - Handle rendering (text and image inputs on left, text output on right) - Loading state during generation - Error state display - Run button triggering generation - Expand button opening PromptEditorModal

Mock useWorkflowStore for: updateNodeData, executeWorkflow. npm test -- --run src/components/tests/LLMGenerateNode.test.tsx passes LLMGenerateNode tests cover provider selection, prompts, output display

Task 2: Add AnnotationNode component tests src/components/__tests__/AnnotationNode.test.tsx Create comprehensive tests for AnnotationNode: - Basic rendering with title "Annotation" - Input image display when connected - Empty state ("Connect an image to annotate") - Edit button opening AnnotationModal - Output image display after annotation - Handle rendering (image input on left, image output on right) - Clear annotations button functionality - Annotation preview thumbnail

Note: Konva canvas testing is complex - focus on component shell and state management. Do NOT test internal Konva interactions (those require canvas mocking).

Mock useWorkflowStore for: updateNodeData, incrementModalCount, decrementModalCount. npm test -- --run src/components/tests/AnnotationNode.test.tsx passes AnnotationNode tests cover rendering, modal trigger, state management

Before declaring plan complete: - [ ] `npm test -- --run` passes all tests - [ ] `npm run build` succeeds without errors - [ ] LLM provider/model selection tested - [ ] Annotation modal trigger tested

<success_criteria>

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