diff --git a/src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts b/src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts index e64acc1..8812434 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts +++ b/src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts @@ -68,7 +68,7 @@ export const NodeConnects = { phase: PhaseConnects, norm: NormConnects, goal: GoalConnects, - trigger: TriggerConnects, + trigger: TriggerConnects, } /** @@ -79,6 +79,7 @@ export const NodeConnects = { export const NodeDeletes = { start: () => false, end: () => false, + test: () => false, // Used for coverage of universal/ undefined nodes } /** @@ -91,4 +92,5 @@ export const NodesInPhase = { start: () => false, end: () => false, phase: () => false, + test: () => false, // Used for coverage of universal/ undefined nodes } \ No newline at end of file diff --git a/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx b/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx index 94ce1dd..9a41f06 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx @@ -47,7 +47,11 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP }); return ( -
+
{children}
); @@ -149,6 +153,7 @@ export function DndToolbar() { {/* Maps over all the nodes that are droppable, and puts them in the panel */} {droppableNodes.map(({type, data}) => ( ) { /** * Functionality for reducing this node into its more compact json program * @param node the node to reduce - * @param nodes all nodes present + * @param _nodes all nodes present * @returns Dictionary, {id: node.id} */ -export function EndReduce(node: Node, nodes: Node[]) { +export function EndReduce(node: Node, _nodes: Node[]) { // Replace this for nodes functionality - if (nodes.length <= -1) { - console.warn("Impossible nodes length in EndReduce") - } return { id: node.id } @@ -55,13 +52,9 @@ export function EndReduce(node: Node, nodes: Node[]) { /** * Any connection functionality that should get called when a connection is made to this node type (end) - * @param thisNode the node of which the functionality gets called - * @param otherNode the other node which has connected - * @param isThisSource whether this node is the one that is the source of the connection + * @param _thisNode the node of which the functionality gets called + * @param _otherNode the other node which has connected + * @param _isThisSource whether this node is the one that is the source of the connection */ -export function EndConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) { - // Replace this for connection logic - if (thisNode == undefined && otherNode == undefined && isThisSource == false) { - console.warn("Impossible node connection called in EndConnects") - } +export function EndConnects(_thisNode: Node, _otherNode: Node, _isThisSource: boolean) { } \ No newline at end of file diff --git a/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx b/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx index 6168f32..bbacdf0 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx @@ -76,13 +76,9 @@ export default function GoalNode({id, data}: NodeProps) { /** * Reduces each Goal, including its children down into its relevant data. * @param node: The Node Properties of this node. - * @param nodes: all the nodes in the graph + * @param _nodes: all the nodes in the graph */ -export function GoalReduce(node: Node, nodes: Node[]) { - // Replace this for nodes functionality - if (nodes.length <= -1) { - console.warn("Impossible nodes length in GoalReduce") - } +export function GoalReduce(node: Node, _nodes: Node[]) { const data = node.data as GoalNodeData; return { id: node.id, @@ -94,13 +90,10 @@ export function GoalReduce(node: Node, nodes: Node[]) { /** * This function is called whenever a connection is made with this node type (Goal) - * @param thisNode the node of this node type which function is called - * @param otherNode the other node which was part of the connection - * @param isThisSource whether this instance of the node was the source in the connection, true = yes. + * @param _thisNode the node of this node type which function is called + * @param _otherNode the other node which was part of the connection + * @param _isThisSource whether this instance of the node was the source in the connection, true = yes. */ -export function GoalConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) { +export function GoalConnects(_thisNode: Node, _otherNode: Node, _isThisSource: boolean) { // Replace this for connection logic - if (thisNode == undefined && otherNode == undefined && isThisSource == false) { - console.warn("Impossible node connection called in EndConnects") - } } \ No newline at end of file diff --git a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx index d2ca50d..31d92a5 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx @@ -61,13 +61,9 @@ export default function NormNode(props: NodeProps) { /** * Reduces each Norm, including its children down into its relevant data. * @param node: The Node Properties of this node. - * @param nodes: all the nodes in the graph + * @param _nodes: all the nodes in the graph */ -export function NormReduce(node: Node, nodes: Node[]) { - // Replace this for nodes functionality - if (nodes.length <= -1) { - console.warn("Impossible nodes length in NormReduce") - } +export function NormReduce(node: Node, _nodes: Node[]) { const data = node.data as NormNodeData; return { id: node.id, @@ -78,13 +74,9 @@ export function NormReduce(node: Node, nodes: Node[]) { /** * This function is called whenever a connection is made with this node type (Norm) - * @param thisNode the node of this node type which function is called - * @param otherNode the other node which was part of the connection - * @param isThisSource whether this instance of the node was the source in the connection, true = yes. + * @param _thisNode the node of this node type which function is called + * @param _otherNode the other node which was part of the connection + * @param _isThisSource whether this instance of the node was the source in the connection, true = yes. */ -export function NormConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) { - // Replace this for connection logic - if (thisNode == undefined && otherNode == undefined && isThisSource == false) { - console.warn("Impossible node connection called in EndConnects") - } +export function NormConnects(_thisNode: Node, _otherNode: Node, _isThisSource: boolean) { } \ No newline at end of file diff --git a/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx b/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx index 7234e34..56c762c 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx @@ -78,8 +78,10 @@ export function PhaseReduce(node: Node, nodes: Node[]) { .filter(([t]) => !nodesNotInPhase.includes(t)) .map(([t]) => t); - // children nodes - const childrenNodes = nodes.filter((node) => data.children.includes(node.id)); + // children nodes - make sure to check for empty arrays + let childrenNodes: Node[] = []; + if (data.children) + childrenNodes = nodes.filter((node) => data.children.includes(node.id)); // Build the result object const result: Record = { diff --git a/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx b/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx index 6d74c08..f994090 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx @@ -40,14 +40,11 @@ export default function StartNode(props: NodeProps) { /** * The reduce function for this node type. * @param node this node - * @param nodes all the nodes in the graph + * @param _nodes all the nodes in the graph * @returns a reduced structure of this node */ -export function StartReduce(node: Node, nodes: Node[]) { +export function StartReduce(node: Node, _nodes: Node[]) { // Replace this for nodes functionality - if (nodes.length <= -1) { - console.warn("Impossible nodes length in StartReduce") - } return { id: node.id } @@ -55,13 +52,9 @@ export function StartReduce(node: Node, nodes: Node[]) { /** * This function is called whenever a connection is made with this node type (start) - * @param thisNode the node of this node type which function is called - * @param otherNode the other node which was part of the connection - * @param isThisSource whether this instance of the node was the source in the connection, true = yes. + * @param _thisNode the node of this node type which function is called + * @param _otherNode the other node which was part of the connection + * @param _isThisSource whether this instance of the node was the source in the connection, true = yes. */ -export function StartConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) { - // Replace this for connection logic - if (thisNode == undefined && otherNode == undefined && isThisSource == false) { - console.warn("Impossible node connection called in EndConnects") - } +export function StartConnects(_thisNode: Node, _otherNode: Node, _isThisSource: boolean) { } \ No newline at end of file diff --git a/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx b/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx index 5c40aeb..2e7b732 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx @@ -80,14 +80,10 @@ export default function TriggerNode(props: NodeProps) { /** * Reduces each Trigger, including its children down into its core data. * @param node - The Trigger node to reduce. - * @param nodes - The list of all nodes in the current flow graph. + * @param _nodes - The list of all nodes in the current flow graph. * @returns A simplified object containing the node label and its list of triggers. */ -export function TriggerReduce(node: Node, nodes: Node[]) { - // Replace this for nodes functionality - if (nodes.length <= -1) { - console.warn("Impossible nodes length in TriggerReduce") - } +export function TriggerReduce(node: Node, _nodes: Node[]) { const data = node.data; switch (data.triggerType) { case "keywords": @@ -106,17 +102,13 @@ export function TriggerReduce(node: Node, nodes: Node[]) { } /** - * Handles logic that occurs when a connection is made involving a Trigger node. - * - * @param thisNode - The current Trigger node being connected. - * @param otherNode - The other node involved in the connection. - * @param isThisSource - Whether this node was the source of the connection. + * This function is called whenever a connection is made with this node type (trigger) + * @param _thisNode the node of this node type which function is called + * @param _otherNode the other node which was part of the connection + * @param _isThisSource whether this instance of the node was the source in the connection, true = yes. */ -export function TriggerConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) { - // Replace this for connection logic - if (thisNode == undefined && otherNode == undefined && isThisSource == false) { - console.warn("Impossible node connection called in EndConnects") - } +export function TriggerConnects(_thisNode: Node, _otherNode: Node, _isThisSource: boolean) { + } // Definitions for the possible triggers, being keywords and emotions diff --git a/test/components/Logging/Logging.test.tsx b/test/components/Logging/Logging.test.tsx index 03d4a92..a3b6d09 100644 --- a/test/components/Logging/Logging.test.tsx +++ b/test/components/Logging/Logging.test.tsx @@ -127,10 +127,10 @@ describe("Logging component", () => { render(); - expect(screen.getByText("Logs")).toBeInTheDocument(); - expect(screen.getByText("WARNING")).toBeInTheDocument(); - expect(screen.getByText("logging")).toBeInTheDocument(); - expect(screen.getByText("Ping")).toBeInTheDocument(); + expect(screen.getByText("Logs")).toBeDefined(); + expect(screen.getByText("WARNING")).toBeDefined(); + expect(screen.getByText("logging")).toBeDefined(); + expect(screen.getByText("Ping")).toBeDefined(); let timestamp = screen.queryByText("ABS TIME"); if (!timestamp) { @@ -141,7 +141,7 @@ describe("Logging component", () => { } await user.click(timestamp); - expect(screen.getByText("00:00:12.345")).toBeInTheDocument(); + expect(screen.getByText("00:00:12.345")).toBeDefined(); }); it("shows the scroll-to-bottom button after a manual scroll and scrolls when clicked", async () => { @@ -188,7 +188,7 @@ describe("Logging component", () => { logCell.set({...current, message: "Updated"}); }); - expect(screen.getByText("Updated")).toBeInTheDocument(); + expect(screen.getByText("Updated")).toBeDefined(); await waitFor(() => { expect(scrollSpy).toHaveBeenCalledTimes(1); }); diff --git a/test/pages/robot/Robot.test.tsx b/test/pages/robot/Robot.test.tsx new file mode 100644 index 0000000..bcebac8 --- /dev/null +++ b/test/pages/robot/Robot.test.tsx @@ -0,0 +1,167 @@ +import { render, screen, act, cleanup, fireEvent } from '@testing-library/react'; +import Robot from '../../../src/pages/Robot/Robot'; + +// Mock EventSource +const mockInstances: MockEventSource[] = []; +class MockEventSource { + url: string; + onmessage: ((event: MessageEvent) => void) | null = null; + closed = false; + + constructor(url: string) { + this.url = url; + mockInstances.push(this); + } + + sendMessage(data: string) { + this.onmessage?.({ data } as MessageEvent); + } + + close() { + this.closed = true; + } +} + +// Mock global EventSource +beforeAll(() => { + (globalThis as any).EventSource = jest.fn((url: string) => new MockEventSource(url)); +}); + +// Mock fetch +beforeEach(() => { + globalThis.fetch = jest.fn(() => + Promise.resolve({ + json: () => Promise.resolve({ reply: 'ok' }), + }) + ) as jest.Mock; +}); + +// Cleanup +afterEach(() => { + cleanup(); + jest.restoreAllMocks(); + mockInstances.length = 0; +}); + +describe('Robot', () => { + test('renders initial state', () => { + render(); + expect(screen.getByText('Robot interaction')).toBeInTheDocument(); + expect(screen.getByText('Force robot speech')).toBeInTheDocument(); + expect(screen.getByText('Listening 🔴')).toBeInTheDocument(); + expect(screen.getByPlaceholderText('Enter a message')).toBeInTheDocument(); + }); + + test('sends message via button', async () => { + render(); + const input = screen.getByPlaceholderText('Enter a message'); + const button = screen.getByText('Speak'); + + fireEvent.change(input, { target: { value: 'Hello' } }); + await act(async () => fireEvent.click(button)); + + expect(globalThis.fetch).toHaveBeenCalledWith( + 'http://localhost:8000/message', + expect.objectContaining({ + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ message: 'Hello' }), + }) + ); + }); + + test('sends message via Enter key', async () => { + render(); + const input = screen.getByPlaceholderText('Enter a message'); + fireEvent.change(input, { target: { value: 'Hi Enter' } }); + + await act(async () => + fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', charCode: 13 }) + ); + + expect(globalThis.fetch).toHaveBeenCalledWith( + 'http://localhost:8000/message', + expect.objectContaining({ + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ message: 'Hi Enter' }), + }) + ); + expect((input as HTMLInputElement).value).toBe(''); + }); + + test('handles fetch errors', async () => { + globalThis.fetch = jest.fn(() => Promise.reject('Network error')) as jest.Mock; + const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + + render(); + const input = screen.getByPlaceholderText('Enter a message'); + const button = screen.getByText('Speak'); + fireEvent.change(input, { target: { value: 'Error test' } }); + + await act(async () => fireEvent.click(button)); + + expect(consoleSpy).toHaveBeenCalledWith( + 'Error sending message: ', + 'Network error' + ); + }); + + test('updates conversation on SSE', async () => { + render(); + const eventSource = mockInstances[0]; + + await act(async () => { + eventSource.sendMessage(JSON.stringify({ voice_active: true })); + eventSource.sendMessage(JSON.stringify({ speech: 'User says hi' })); + eventSource.sendMessage(JSON.stringify({ llm_response: 'Assistant replies' })); + }); + + expect(screen.getByText('Listening 🟢')).toBeInTheDocument(); + expect(screen.getByText('User says hi')).toBeInTheDocument(); + expect(screen.getByText('Assistant replies')).toBeInTheDocument(); + }); + + test('handles invalid SSE JSON', async () => { + const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {}); + render(); + const eventSource = mockInstances[0]; + + await act(async () => eventSource.sendMessage('bad-json')); + + expect(logSpy).toHaveBeenCalledWith('Unparsable SSE message:', 'bad-json'); + }); + + test('resets conversation with Reset button', async () => { + render(); + const eventSource = mockInstances[0]; + + await act(async () => + eventSource.sendMessage(JSON.stringify({ speech: 'Hello' })) + ); + expect(screen.getByText('Hello')).toBeInTheDocument(); + + fireEvent.click(screen.getByText('Reset')); + expect(screen.queryByText('Hello')).not.toBeInTheDocument(); + }); + + test('toggles conversationIndex with Stop/Start button', () => { + render(); + const stopButton = screen.getByText('Stop'); + fireEvent.click(stopButton); + expect(screen.getByText('Start')).toBeInTheDocument(); + + fireEvent.click(screen.getByText('Start')); + expect(screen.getByText('Stop')).toBeInTheDocument(); + }); + + test('closes EventSource on unmount', () => { + const { unmount } = render(); + const eventSource = mockInstances[0]; + const closeSpy = jest.spyOn(eventSource, 'close'); + + unmount(); + expect(closeSpy).toHaveBeenCalled(); + expect(eventSource.closed).toBe(true); + }); +}); diff --git a/test/pages/visProgPage/visualProgrammingUI/components/DragDropSidebar.test.tsx b/test/pages/visProgPage/visualProgrammingUI/components/DragDropSidebar.test.tsx index 70087ee..486d41f 100644 --- a/test/pages/visProgPage/visualProgrammingUI/components/DragDropSidebar.test.tsx +++ b/test/pages/visProgPage/visualProgrammingUI/components/DragDropSidebar.test.tsx @@ -1,5 +1,106 @@ -describe('Not implemented', () => { - test('nothing yet', () => { - expect(true) - }); +import { getByTestId, render } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores'; +import VisProgPage from '../../../../../src/pages/VisProgPage/VisProg'; + + + +class ResizeObserver { + observe() {} + unobserve() {} + disconnect() {} +} +window.ResizeObserver = ResizeObserver; + +jest.mock('@neodrag/react', () => ({ + useDraggable: (ref: React.RefObject, options: any) => { + // We access the real useEffect from React to attach a listener + // This bridges the gap between the test's userEvent and the component's logic + const { useEffect } = jest.requireActual('react'); + + useEffect(() => { + const element = ref.current; + if (!element) return; + + // When the test fires a "pointerup" (end of click/drag), + // we manually trigger the library's onDragEnd callback. + const handlePointerUp = (e: PointerEvent) => { + if (options.onDragEnd) { + options.onDragEnd({ event: e }); + } + }; + + element.addEventListener('pointerup', handlePointerUp as EventListener); + return () => { + element.removeEventListener('pointerup', handlePointerUp as EventListener); + }; + }, [ref, options]); + }, +})); + +// We will mock @xyflow/react so we control screenToFlowPosition +jest.mock('@xyflow/react', () => { + const actual = jest.requireActual('@xyflow/react'); + return { + ...actual, + useReactFlow: () => ({ + screenToFlowPosition: ({ x, y }: { x: number; y: number }) => ({ + x: x - 100, + y: y - 100, + }), + }), + }; }); + +describe("Drag & drop node creation", () => { + + test("drops a phase node inside the canvas and adds it with transformed position", async () => { + const user = userEvent.setup(); + + const { container } = render(); + + // --- Mock ReactFlow bounding box --- + // Your DndToolbar checks these values: + const flowEl = container.querySelector('.react-flow'); + jest.spyOn(flowEl!, 'getBoundingClientRect').mockReturnValue({ + left: 0, + right: 800, + top: 0, + bottom: 600, + width: 800, + height: 600, + x: 0, + y: 0, + toJSON: () => {}, + }); + + + const phaseLabel = getByTestId(container, 'draggable-phase') + + await user.pointer([ + // touch the screen at element1 + {keys: '[TouchA>]', target: phaseLabel}, + // move the touch pointer to element2 + {pointerName: 'TouchA', coords: {x: 300, y: 250}}, + // release the touch pointer at the last position (element2) + {keys: '[/TouchA]'}, + ]); + + // Read the Zustand store + const { nodes } = useFlowStore.getState(); + + // --- Assertions --- + expect(nodes.length).toBe(1); + + const node = nodes[0]; + + expect(node.type).toBe("phase"); + expect(node.id).toBe("phase-1"); + + // screenToFlowPosition was mocked to subtract 100 + expect(node.position).toEqual({ + x: 200, + y: 150, + }); + }); +}); \ No newline at end of file diff --git a/test/pages/visProgPage/visualProgrammingUI/components/ScrollIntoView.test.tsx b/test/pages/visProgPage/visualProgrammingUI/components/ScrollIntoView.test.tsx new file mode 100644 index 0000000..2a91e85 --- /dev/null +++ b/test/pages/visProgPage/visualProgrammingUI/components/ScrollIntoView.test.tsx @@ -0,0 +1,14 @@ +import { render } from '@testing-library/react'; +import { act } from '@testing-library/react'; +import ScrollIntoView from '../../../../../src/components/ScrollIntoView'; + +test('scrolls the element into view on render', () => { + const scrollMock = jest.fn(); + HTMLElement.prototype.scrollIntoView = scrollMock; + + act(() => { + render(); + }); + + expect(scrollMock).toHaveBeenCalledWith({ behavior: 'smooth' }); +}); diff --git a/test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx b/test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx new file mode 100644 index 0000000..25c9947 --- /dev/null +++ b/test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx @@ -0,0 +1,744 @@ +import { describe, it, beforeEach } from '@jest/globals'; +import { screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { renderWithProviders } from '../.././/./../../test-utils/test-utils'; +import NormNode, { NormReduce, NormConnects, type NormNodeData } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode' +import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores'; +import type { Node } from '@xyflow/react'; +import '@testing-library/jest-dom' + + + +describe('NormNode', () => { + let user: ReturnType; + + beforeEach(() => { + user = userEvent.setup(); + }); + + describe('Rendering', () => { + it('should render the norm node with default data', () => { + const mockNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Test Norm', + droppable: true, + norm: '', + hasReduce: true, + }, + }; + + renderWithProviders( + + ); + + expect(screen.getByPlaceholderText('Pepper should ...')).toBeInTheDocument(); + }); + + it('should render with pre-populated norm text', () => { + const mockNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Test Norm', + droppable: true, + norm: 'Be respectful to humans', + hasReduce: true, + }, + }; + + renderWithProviders( + + ); + + const input = screen.getByDisplayValue('Be respectful to humans'); + expect(input).toBeInTheDocument(); + }); + + it('should render with selected state', () => { + const mockNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Test Norm', + droppable: true, + norm: '', + hasReduce: true, + }, + }; + + renderWithProviders( + + ); + + const norm = screen.getByText("Norm :") + expect(norm).toBeInTheDocument(); + }); + + it('should render with dragging state', () => { + const mockNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Test Norm', + droppable: true, + norm: 'Dragged norm', + hasReduce: true, + }, + }; + + renderWithProviders( + + ); + + const input = screen.getByDisplayValue('Dragged norm'); + expect(input).toBeInTheDocument(); + }); + }); + + describe('User Interactions', () => { + it('should update norm text when user types in the input field', async () => { + const mockNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Test Norm', + droppable: true, + norm: '', + hasReduce: true, + }, + }; + + useFlowStore.setState({ + nodes: [mockNode], + edges: [], + }); + + renderWithProviders( + + ); + + const input = screen.getByPlaceholderText('Pepper should ...'); + await user.type(input, 'Be polite to guests{enter}'); + + await waitFor(() => { + const state = useFlowStore.getState(); + const updatedNode = state.nodes.find(n => n.id === 'norm-1'); + expect(updatedNode?.data.norm).toBe('Be polite to guests'); + }); + }); + + it('should handle clearing the norm text', async () => { + const mockNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Test Norm', + droppable: true, + norm: 'Initial norm text', + hasReduce: true, + }, + }; + + useFlowStore.setState({ + nodes: [mockNode], + edges: [], + }); + + renderWithProviders( + + ); + + const input = screen.getByDisplayValue('Initial norm text') as HTMLInputElement; + + // clearing the norm text is the same as just deleting all characters one by one + // TODO: FIGURE OUT A MORE EFFICIENT WAY, I"M SORRY, user.clear() just doesn't work:/ + for (let a = 0; a < 'Initial norm text'.length; a++){ + await user.type(input, '{backspace}') + } + await user.type(input,'{enter}') + + await waitFor(() => { + const state = useFlowStore.getState(); + const updatedNode = state.nodes.find(n => n.id === 'norm-1'); + expect(updatedNode?.data.norm).toBe(''); + }); + }); + + it('should update norm text multiple times', async () => { + const mockNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Test Norm', + droppable: true, + norm: '', + hasReduce: true, + }, + }; + + useFlowStore.setState({ + nodes: [mockNode], + edges: [], + }); + + renderWithProviders( + + ); + + const input = screen.getByPlaceholderText('Pepper should ...'); + await user.type(input, 'First norm{enter}'); + await waitFor(() => { + expect(useFlowStore.getState().nodes[0].data.norm).toBe('First norm'); + }); + + + // TODO: FIGURE OUT A MORE EFFICIENT WAY, I"M SORRY, user.clear() just doesn't work:/ + for (let a = 0; a < 'First norm'.length; a++){ + await user.type(input, '{backspace}') + } + + await user.type(input, 'Second norm{enter}'); + await waitFor(() => { + expect(useFlowStore.getState().nodes[0].data.norm).toBe('Second norm'); + }); + }); + + it('should handle special characters in norm text', async () => { + const mockNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Test Norm', + droppable: true, + norm: '', + hasReduce: true, + }, + }; + + useFlowStore.setState({ + nodes: [mockNode], + edges: [], + }); + + renderWithProviders( + + ); + + const input = screen.getByPlaceholderText('Pepper should ...'); + await user.type(input, "Don't harm & be nice!{enter}" ); + + await waitFor(() => { + expect(useFlowStore.getState().nodes[0].data.norm).toBe("Don't harm & be nice!"); + }); + }); + + it('should handle long norm text', async () => { + const longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'; + const mockNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Test Norm', + droppable: true, + norm: '', + hasReduce: true, + }, + }; + + useFlowStore.setState({ + nodes: [mockNode], + edges: [], + }); + + renderWithProviders( + + ); + + const input = screen.getByPlaceholderText('Pepper should ...'); + await user.type(input, longText); + await user.type(input, "{enter}") + + await waitFor(() => { + expect(useFlowStore.getState().nodes[0].data.norm).toBe(longText); + }); + }); + }); + + describe('NormReduce Function', () => { + it('should reduce a norm node to its essential data', () => { + const normNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Safety Norm', + droppable: true, + norm: 'Never harm humans', + hasReduce: true, + }, + }; + + const allNodes: Node[] = [normNode]; + const result = NormReduce(normNode, allNodes); + + expect(result).toEqual({ + id: 'norm-1', + label: 'Safety Norm', + norm: 'Never harm humans', + }); + }); + + it('should reduce multiple norm nodes independently', () => { + const norm1: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Norm 1', + droppable: true, + norm: 'Be helpful', + hasReduce: true, + }, + }; + + const norm2: Node = { + id: 'norm-2', + type: 'norm', + position: { x: 100, y: 0 }, + data: { + label: 'Norm 2', + droppable: true, + norm: 'Be honest', + hasReduce: true, + }, + }; + + const allNodes: Node[] = [norm1, norm2]; + + const result1 = NormReduce(norm1, allNodes); + const result2 = NormReduce(norm2, allNodes); + + expect(result1.id).toBe('norm-1'); + expect(result1.norm).toBe('Be helpful'); + expect(result2.id).toBe('norm-2'); + expect(result2.norm).toBe('Be honest'); + }); + + it('should handle empty norm text', () => { + const normNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Empty Norm', + droppable: true, + norm: '', + hasReduce: true, + }, + }; + + const result = NormReduce(normNode, [normNode]); + + expect(result.norm).toBe(''); + expect(result.id).toBe('norm-1'); + }); + + it('should preserve node label in reduction', () => { + const normNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Custom Label', + droppable: false, + norm: 'Test norm', + hasReduce: false, + }, + }; + + const result = NormReduce(normNode, [normNode]); + + expect(result.label).toBe('Custom Label'); + }); + }); + + describe('NormConnects Function', () => { + it('should handle connection without errors', () => { + const normNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Test Norm', + droppable: true, + norm: 'Test', + hasReduce: true, + }, + }; + + const phaseNode: Node = { + id: 'phase-1', + type: 'phase', + position: { x: 100, y: 0 }, + data: { + label: 'Phase 1', + droppable: true, + children: [], + hasReduce: true, + }, + }; + + expect(() => { + NormConnects(normNode, phaseNode, true); + }).not.toThrow(); + }); + + it('should handle connection when norm is target', () => { + const normNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Test Norm', + droppable: true, + norm: 'Test', + hasReduce: true, + }, + }; + + const phaseNode: Node = { + id: 'phase-1', + type: 'phase', + position: { x: 100, y: 0 }, + data: { + label: 'Phase 1', + droppable: true, + children: [], + hasReduce: true, + }, + }; + + expect(() => { + NormConnects(normNode, phaseNode, false); + }).not.toThrow(); + }); + + it('should handle self-connection', () => { + const normNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Test Norm', + droppable: true, + norm: 'Test', + hasReduce: true, + }, + }; + + expect(() => { + NormConnects(normNode, normNode, true); + }).not.toThrow(); + }); + }); + + describe('Integration with Store', () => { + it('should properly update the store when editing norm text', async () => { + const mockNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Test Norm', + droppable: true, + norm: '', + hasReduce: true, + }, + }; + + useFlowStore.setState({ + nodes: [mockNode], + edges: [], + }); + + renderWithProviders( + + ); + + const input = screen.getByPlaceholderText('Pepper should ...'); + + // TODO: FIGURE OUT A MORE EFFICIENT WAY, I"M SORRY, user.clear() just doesn't work:/ + for (let a = 0; a < 20; a++){ + await user.type(input, '{backspace}') + } + await user.type(input, 'New norm value{enter}'); + + await waitFor(() => { + const state = useFlowStore.getState(); + expect(state.nodes).toHaveLength(1); + expect(state.nodes[0].id).toBe('norm-1'); + expect(state.nodes[0].data.norm).toBe('New norm value'); + }); + }); + + it('should not affect other nodes when updating one norm node', async () => { + const norm1: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Norm 1', + droppable: true, + norm: 'Original norm 1', + hasReduce: true, + }, + }; + + const norm2: Node = { + id: 'norm-2', + type: 'norm', + position: { x: 100, y: 0 }, + data: { + label: 'Norm 2', + droppable: true, + norm: 'Original norm 2', + hasReduce: true, + }, + }; + + useFlowStore.setState({ + nodes: [norm1, norm2], + edges: [], + }); + + renderWithProviders( + + ); + + const input = screen.getByDisplayValue('Original norm 1') as HTMLInputElement; + + + // TODO: FIGURE OUT A MORE EFFICIENT WAY, I"M SORRY, user.clear() just doesn't work:/ + for (let a = 0; a < 20; a++){ + await user.type(input, '{backspace}') + } + await user.type(input, 'Updated norm 1{enter}'); + + await waitFor(() => { + const state = useFlowStore.getState(); + const updatedNorm1 = state.nodes.find(n => n.id === 'norm-1'); + const unchangedNorm2 = state.nodes.find(n => n.id === 'norm-2'); + + expect(updatedNorm1?.data.norm).toBe('Updated norm 1'); + expect(unchangedNorm2?.data.norm).toBe('Original norm 2'); + }); + }); + + it('should maintain data consistency with multiple rapid updates', async () => { + const mockNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + label: 'Test Norm', + droppable: true, + norm: 'haa haa fuyaaah - link', + hasReduce: true, + }, + }; + + useFlowStore.setState({ + nodes: [mockNode], + edges: [], + }); + + renderWithProviders( + + ); + + const input = screen.getByPlaceholderText('Pepper should ...'); + + await user.type(input, 'a'); + await waitFor(() => { + expect(useFlowStore.getState().nodes[0].data.norm).toBe('haa haa fuyaaah - link'); + }); + + await user.type(input, 'b'); + await waitFor(() => { + expect(useFlowStore.getState().nodes[0].data.norm).toBe('haa haa fuyaaah - link'); + }); + + await user.type(input, 'c'); + await waitFor(() => { + expect(useFlowStore.getState().nodes[0].data.norm).toBe('haa haa fuyaaah - link'); + }, { timeout: 3000 }); + }); + }); +}); \ No newline at end of file diff --git a/test/pages/visProgPage/visualProgrammingUI/nodes/StartNode.test.tsx b/test/pages/visProgPage/visualProgrammingUI/nodes/StartNode.test.tsx new file mode 100644 index 0000000..c5ec43a --- /dev/null +++ b/test/pages/visProgPage/visualProgrammingUI/nodes/StartNode.test.tsx @@ -0,0 +1,98 @@ +import { describe, it } from '@jest/globals'; +import '@testing-library/jest-dom'; +import { screen } from '@testing-library/react'; +import type { Node } from '@xyflow/react'; +import { renderWithProviders } from '../.././/./../../test-utils/test-utils'; +import StartNode, { StartReduce, StartConnects } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode'; + + +describe('StartNode', () => { + + + describe('Rendering', () => { + it('renders the StartNode correctly', () => { + const mockNode: Node = { + id: 'start-1', + type: 'start', // TypeScript now knows this is a string + position: { x: 0, y: 0 }, + data: { + label: 'Start Node', + droppable: false, + hasReduce: true, + }, + }; + + renderWithProviders( + + ); + + + expect(screen.getByText('Start')).toBeInTheDocument(); + + // The handle should exist in the DOM + expect(document.querySelector('[data-handleid="source"]')).toBeInTheDocument(); + + }); + }); + + describe('StartReduce Function', () => { + it('reduces the StartNode to its minimal structure', () => { + const mockNode: Node = { + id: 'start-1', + type: 'start', + position: { x: 0, y: 0 }, + data: { + label: 'Start Node', + droppable: false, + hasReduce: true, + }, + }; + + const result = StartReduce(mockNode, [mockNode]); + expect(result).toEqual({ id: 'start-1' }); + }); + }); + + describe('StartConnects Function', () => { + it('handles connections without throwing', () => { + const startNode: Node = { + id: 'start-1', + type: 'start', + position: { x: 0, y: 0 }, + data: { + label: 'Start Node', + droppable: false, + hasReduce: true, + }, + }; + + const otherNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 100, y: 0 }, + data: { + label: 'Norm Node', + droppable: true, + norm: 'test', + hasReduce: true, + }, + }; + + expect(() => StartConnects(startNode, otherNode, true)).not.toThrow(); + expect(() => StartConnects(startNode, otherNode, false)).not.toThrow(); + }); + }); +}); diff --git a/test/pages/visProgPage/visualProgrammingUI/nodes/TriggerNode.test.tsx b/test/pages/visProgPage/visualProgrammingUI/nodes/TriggerNode.test.tsx new file mode 100644 index 0000000..55a46e3 --- /dev/null +++ b/test/pages/visProgPage/visualProgrammingUI/nodes/TriggerNode.test.tsx @@ -0,0 +1,246 @@ +import { describe, it, beforeEach } from '@jest/globals'; +import { screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { renderWithProviders } from '../.././/./../../test-utils/test-utils'; +import TriggerNode, { TriggerReduce, TriggerConnects, TriggerNodeCanConnect, type TriggerNodeData } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode'; +import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores'; +import type { Node } from '@xyflow/react'; +import '@testing-library/jest-dom'; + +describe('TriggerNode', () => { + let user: ReturnType; + + beforeEach(() => { + user = userEvent.setup(); + }); + + describe('Rendering', () => { + it('should render TriggerNode with keywords type', () => { + const mockNode: Node = { + id: 'trigger-1', + type: 'trigger', + position: { x: 0, y: 0 }, + data: { + label: 'Keyword Trigger', + droppable: true, + triggerType: 'keywords', + triggers: [], + hasReduce: true, + }, + }; + + renderWithProviders( + + ); + + expect(screen.getByText(/Triggers when the keyword is spoken/i)).toBeInTheDocument(); + expect(screen.getByPlaceholderText('...')).toBeInTheDocument(); + }); + + it('should render TriggerNode with emotion type', () => { + const mockNode: Node = { + id: 'trigger-2', + type: 'trigger', + position: { x: 0, y: 0 }, + data: { + label: 'Emotion Trigger', + droppable: true, + triggerType: 'emotion', + triggers: [], + hasReduce: true, + }, + }; + + renderWithProviders( + + ); + + expect(screen.getByText(/Emotion\?/i)).toBeInTheDocument(); + }); + }); + + describe('User Interactions', () => { + it('should add a new keyword', async () => { + const mockNode: Node = { + id: 'trigger-1', + type: 'trigger', + position: { x: 0, y: 0 }, + data: { + label: 'Keyword Trigger', + droppable: true, + triggerType: 'keywords', + triggers: [], + hasReduce: true, + }, + }; + + useFlowStore.setState({ nodes: [mockNode], edges: [] }); + + renderWithProviders( + + ); + + const input = screen.getByPlaceholderText('...'); + await user.type(input, 'hello{enter}'); + + await waitFor(() => { + const node = useFlowStore.getState().nodes.find(n => n.id === 'trigger-1') as Node | undefined; + expect(node?.data.triggers.length).toBe(1); + expect(node?.data.triggers[0].keyword).toBe('hello'); + }); + + }); + + it('should remove a keyword when cleared', async () => { + const mockNode: Node = { + id: 'trigger-1', + type: 'trigger', + position: { x: 0, y: 0 }, + data: { + label: 'Keyword Trigger', + droppable: true, + triggerType: 'keywords', + triggers: [{ id: 'kw1', keyword: 'hello' }], + hasReduce: true, + }, + }; + + useFlowStore.setState({ nodes: [mockNode], edges: [] }); + + renderWithProviders( + + ); + + const input = screen.getByDisplayValue('hello'); + for (let i = 0; i < 'hello'.length; i++) { + await user.type(input, '{backspace}'); + } + await user.type(input, '{enter}'); + + await waitFor(() => { + const node = useFlowStore.getState().nodes.find(n => n.id === 'trigger-1') as Node | undefined; + expect(node?.data.triggers.length).toBe(0); + }); + + }); + }); + + describe('TriggerReduce Function', () => { + it('should reduce a trigger node to its essential data', () => { + const triggerNode: Node = { + id: 'trigger-1', + type: 'trigger', + position: { x: 0, y: 0 }, + data: { + label: 'Keyword Trigger', + droppable: true, + triggerType: 'keywords', + triggers: [{ id: 'kw1', keyword: 'hello' }], + hasReduce: true, + }, + }; + + const allNodes: Node[] = [triggerNode]; + const result = TriggerReduce(triggerNode, allNodes); + + expect(result).toEqual({ + id: 'trigger-1', + type: 'keywords', + label: 'Keyword Trigger', + keywords: [{ id: 'kw1', keyword: 'hello' }], + }); + }); + }); + + + describe('TriggerConnects Function', () => { + it('should handle connection without errors', () => { + const node1: Node = { + id: 'trigger-1', + type: 'trigger', + position: { x: 0, y: 0 }, + data: { + label: 'Trigger 1', + droppable: true, + triggerType: 'keywords', + triggers: [], + hasReduce: true, + }, + }; + + const node2: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 100, y: 0 }, + data: { + label: 'Norm 1', + droppable: true, + norm: 'test', + hasReduce: true, + }, + }; + + expect(() => { + TriggerConnects(node1, node2, true); + TriggerConnects(node1, node2, false); + }).not.toThrow(); + }); + + it('should return true for TriggerNodeCanConnect if connection exists', () => { + const connection = { source: 'trigger-1', target: 'norm-1' }; + expect(TriggerNodeCanConnect(connection as any)).toBe(true); + }); + }); +}); diff --git a/test/pages/visProgPage/visualProgrammingUI/nodes/UniversalNodes.test.tsx b/test/pages/visProgPage/visualProgrammingUI/nodes/UniversalNodes.test.tsx new file mode 100644 index 0000000..7fb0709 --- /dev/null +++ b/test/pages/visProgPage/visualProgrammingUI/nodes/UniversalNodes.test.tsx @@ -0,0 +1,151 @@ +import { describe, beforeEach } from '@jest/globals'; +import { screen } from '@testing-library/react'; +import { renderWithProviders } from '../.././/./../../test-utils/test-utils'; +import type { XYPosition } from '@xyflow/react'; +import { NodeTypes, NodeDefaults, NodeConnects, NodeReduces, NodesInPhase } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/NodeRegistry'; +import '@testing-library/jest-dom' +import { createElement } from 'react'; +import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores'; + + +describe('NormNode', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + function createNode(id: string, type: string, position: XYPosition, data: Record, deletable?: boolean) { + const defaultData = NodeDefaults[type as keyof typeof NodeDefaults] + const newData = { + id: id, + type: type, + position: position, + data: data, + deletable: deletable, + } + return {...defaultData, ...newData} + } + + + /** + * Reduces the graph into its phases' information and recursively calls their reducing function + */ + function graphReducer() { + const { nodes } = useFlowStore.getState(); + return nodes + .filter((n) => n.type == 'phase') + .map((n) => { + const reducer = NodeReduces['phase']; + return reducer(n, nodes) + }); + } + + function getAllTypes() { + return Object.entries(NodeTypes).map(([t])=>t) + } + + describe('Rendering', () => { + test.each(getAllTypes())('it should render %s node with the default data', (nodeType) => { + const lengthBefore = screen.getAllByText(/.*/).length; + + const newNode = createNode(nodeType + "1", nodeType, {x: 200, y:200}, {}); + + const found = Object.entries(NodeTypes).find(([t]) => t === nodeType); + const uiElement = found ? found[1] : null; + + expect(uiElement).not.toBeNull(); + const props = { + id: newNode.id, + type: newNode.type as string, + data: newNode.data as any, + selected: false, + isConnectable: true, + zIndex: 0, + dragging: false, + selectable: true, + deletable: true, + draggable: true, + positionAbsoluteX: 0, + positionAbsoluteY: 0, + }; + + renderWithProviders(createElement(uiElement as React.ComponentType, props)); + const lengthAfter = screen.getAllByText(/.*/).length; + + expect(lengthBefore + 1 === lengthAfter); + }); + + }); + + + describe('Connecting', () => { + test.each(getAllTypes())('it should call the connect function when %s node is connected', (nodeType) => { + // Create two nodes - one of the current type and one to connect to + const sourceNode = createNode('source-1', nodeType, {x: 100, y: 100}, {}); + const targetNode = createNode('target-1', 'end', {x: 300, y: 100}, {}); + + // Add nodes to store + useFlowStore.setState({ nodes: [sourceNode, targetNode] }); + + // Spy on the connect functions + const sourceConnectSpy = jest.spyOn(NodeConnects, nodeType as keyof typeof NodeConnects); + const targetConnectSpy = jest.spyOn(NodeConnects, 'end'); + + // Simulate connection + useFlowStore.getState().onConnect({ + source: 'source-1', + target: 'target-1', + sourceHandle: null, + targetHandle: null, + }); + + // Verify the connect functions were called + expect(sourceConnectSpy).toHaveBeenCalledWith(sourceNode, targetNode, true); + expect(targetConnectSpy).toHaveBeenCalledWith(targetNode, sourceNode, false); + + sourceConnectSpy.mockRestore(); + targetConnectSpy.mockRestore(); + }); + }); + + describe('Reducing', () => { + test.each(getAllTypes())('it should correctly call/ not call the reduce function when %s node is in a phase', (nodeType) => { + // Create a phase node and a node of the current type + const phaseNode = createNode('phase-1', 'phase', {x: 200, y: 100}, { label: 'Test Phase', children: [] }); + const testNode = createNode('node-1', nodeType, {x: 100, y: 100}, {}); + + // Add the test node as a child of the phase + (phaseNode.data as any).children.push(testNode.id); + + // Add nodes to store + useFlowStore.setState({ nodes: [phaseNode, testNode] }); + + // Spy on the reduce functions + const phaseReduceSpy = jest.spyOn(NodeReduces, 'phase'); + const nodeReduceSpy = jest.spyOn(NodeReduces, nodeType as keyof typeof NodeReduces); + + // Simulate reducing - using the graphReducer + const result = graphReducer(); + + // Verify the reduce functions were called + expect(phaseReduceSpy).toHaveBeenCalledWith(phaseNode, [phaseNode, testNode]); + // Check if this node type is in NodesInPhase and returns false + const nodesInPhaseFunc = NodesInPhase[nodeType as keyof typeof NodesInPhase]; + if (nodesInPhaseFunc && nodesInPhaseFunc() === false && nodeType !== 'phase') { + // Node is NOT in phase, so it should NOT be called + expect(nodeReduceSpy).not.toHaveBeenCalled(); + } else { + // Node IS in phase, so it SHOULD be called + expect(nodeReduceSpy).toHaveBeenCalled(); + } + + // Verify the correct structure is present using NodesInPhase + expect(result).toHaveLength(nodeType !== 'phase' ? 1 : 2); + expect(result[0]).toHaveProperty('id', 'phase-1'); + expect(result[0]).toHaveProperty('label', 'Test Phase'); + + // Restore mocks + phaseReduceSpy.mockRestore(); + nodeReduceSpy.mockRestore(); + }); + }); +}); \ No newline at end of file diff --git a/test/test-utils/mocks.ts b/test/test-utils/mocks.ts new file mode 100644 index 0000000..21971c1 --- /dev/null +++ b/test/test-utils/mocks.ts @@ -0,0 +1,41 @@ +import { jest } from '@jest/globals'; +import React from 'react'; +import '@testing-library/jest-dom'; + +/** + * Mock for @xyflow/react + * Provides simplified versions of React Flow hooks and components + */ +jest.mock('@xyflow/react', () => ({ + useReactFlow: jest.fn(() => ({ + screenToFlowPosition: jest.fn((pos: any) => pos), + getNode: jest.fn(), + getNodes: jest.fn(() => []), + getEdges: jest.fn(() => []), + setNodes: jest.fn(), + setEdges: jest.fn(), + })), + ReactFlowProvider: ({ children }: { children: React.ReactNode }) => + React.createElement('div', { 'data-testid': 'react-flow-provider' }, children), + ReactFlow: ({ children, ...props }: any) => + React.createElement('div', { 'data-testid': 'react-flow', ...props }, children), + Handle: ({ type, position, id }: any) => + React.createElement('div', { 'data-testid': `handle-${type}-${id}`, 'data-position': position }), + Panel: ({ children, position }: any) => + React.createElement('div', { 'data-testid': 'panel', 'data-position': position }, children), + Controls: () => React.createElement('div', { 'data-testid': 'controls' }), + Background: () => React.createElement('div', { 'data-testid': 'background' }), +})); + +/** + * Mock for @neodrag/react + * Simplifies drag behavior for testing + */ +jest.mock('@neodrag/react', () => ({ + useDraggable: jest.fn((ref: any, options?: any) => { + // Store the options so we can trigger them in tests + if (ref && ref.current) { + (ref.current as any)._dragOptions = options; + } + }), +})); \ No newline at end of file diff --git a/test/test-utils/test-utils.tsx b/test/test-utils/test-utils.tsx new file mode 100644 index 0000000..2379d9c --- /dev/null +++ b/test/test-utils/test-utils.tsx @@ -0,0 +1,24 @@ +// __tests__/utils/test-utils.tsx +import { render, type RenderOptions } from '@testing-library/react'; +import { type ReactElement, type ReactNode } from 'react'; +import { ReactFlowProvider } from '@xyflow/react'; + +/** + * Custom render function that wraps components with necessary providers + * This ensures all components have access to ReactFlow context + */ +export function renderWithProviders( + ui: ReactElement, + options?: Omit +) { + function Wrapper({ children }: { children: ReactNode }) { + return {children}; + } + + return render(ui, { wrapper: Wrapper, ...options }); +} + + +// Re-export everything from testing library +//eslint-disable-next-line react-refresh/only-export-components +export * from '@testing-library/react';