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