Browse Source

test(15-01): add sample component test for PromptNode

- 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
shrimbly 6 months ago
parent
commit
5dfc5cf0c5
  1. 104
      src/components/__tests__/PromptNode.test.tsx

104
src/components/__tests__/PromptNode.test.tsx

@ -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…
Cancel
Save