Browse Source
- Create PromptNode.test.tsx with React Testing Library - Test textarea rendering and placeholder - Test initial prompt value display - Test updateNodeData callback on user input - Mock Zustand store and wrap with ReactFlowProvider Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>handoff-20260429-1057
1 changed files with 104 additions and 0 deletions
@ -0,0 +1,104 @@ |
|||||
|
import { describe, it, expect, vi, beforeEach } from "vitest"; |
||||
|
import { render, screen, fireEvent } from "@testing-library/react"; |
||||
|
import { PromptNode } from "@/components/nodes/PromptNode"; |
||||
|
import { ReactFlowProvider } from "@xyflow/react"; |
||||
|
|
||||
|
// Mock the workflow store
|
||||
|
const mockUpdateNodeData = vi.fn(); |
||||
|
const mockIncrementModalCount = vi.fn(); |
||||
|
const mockDecrementModalCount = vi.fn(); |
||||
|
|
||||
|
vi.mock("@/store/workflowStore", () => ({ |
||||
|
useWorkflowStore: vi.fn((selector) => { |
||||
|
const state = { |
||||
|
updateNodeData: mockUpdateNodeData, |
||||
|
incrementModalCount: mockIncrementModalCount, |
||||
|
decrementModalCount: mockDecrementModalCount, |
||||
|
currentNodeId: null, |
||||
|
groups: {}, |
||||
|
nodes: [], |
||||
|
}; |
||||
|
return selector(state); |
||||
|
}), |
||||
|
})); |
||||
|
|
||||
|
// Wrapper component for React Flow context
|
||||
|
function TestWrapper({ children }: { children: React.ReactNode }) { |
||||
|
return <ReactFlowProvider>{children}</ReactFlowProvider>; |
||||
|
} |
||||
|
|
||||
|
describe("PromptNode", () => { |
||||
|
beforeEach(() => { |
||||
|
vi.clearAllMocks(); |
||||
|
}); |
||||
|
|
||||
|
const defaultProps = { |
||||
|
id: "test-prompt-1", |
||||
|
type: "prompt" as const, |
||||
|
data: { |
||||
|
prompt: "", |
||||
|
}, |
||||
|
selected: false, |
||||
|
isConnectable: true, |
||||
|
positionAbsoluteX: 0, |
||||
|
positionAbsoluteY: 0, |
||||
|
zIndex: 0, |
||||
|
dragging: false, |
||||
|
deletable: true, |
||||
|
selectable: true, |
||||
|
parentId: undefined, |
||||
|
dragHandle: undefined, |
||||
|
}; |
||||
|
|
||||
|
it("should render the textarea with placeholder", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<PromptNode {...defaultProps} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
const textarea = screen.getByPlaceholderText("Describe what to generate..."); |
||||
|
expect(textarea).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should render with initial prompt value", () => { |
||||
|
const propsWithPrompt = { |
||||
|
...defaultProps, |
||||
|
data: { prompt: "Initial prompt text" }, |
||||
|
}; |
||||
|
|
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<PromptNode {...propsWithPrompt} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
const textarea = screen.getByDisplayValue("Initial prompt text"); |
||||
|
expect(textarea).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should call updateNodeData when typing in textarea", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<PromptNode {...defaultProps} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
const textarea = screen.getByPlaceholderText("Describe what to generate..."); |
||||
|
fireEvent.change(textarea, { target: { value: "New prompt text" } }); |
||||
|
|
||||
|
expect(mockUpdateNodeData).toHaveBeenCalledWith("test-prompt-1", { |
||||
|
prompt: "New prompt text", |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it("should render the Prompt title", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<PromptNode {...defaultProps} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
expect(screen.getByText("Prompt")).toBeInTheDocument(); |
||||
|
}); |
||||
|
}); |
||||
Loading…
Reference in new issue