pepperplus/pepperplus-ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merging dev into main #49

Merged
8464960 merged 260 commits from dev into main 2026-01-28 10:48:52 +00:00
Conversation 3 Commits 260 Files Changed 145 +1641 -83
18 changed files with 1641 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 80aa1fca2b - Show all commits

4
src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts
View File

@@ -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
}

7
src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx
View File

@@ -47,7 +47,11 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP
});
return (
<div className={className} ref={draggableRef}>
<div className={className}
ref={draggableRef}
id={`draggable-${nodeType}`}
data-testid={`draggable-${nodeType}`}
>
{children}
</div>
);
@@ -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}) => (
<DraggableNode
key={type}
className={styles[`draggable-node-${type}`]} // Our current style signature for nodes
nodeType={type}
onDrop={handleNodeDrop}

19
src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx
View File

@@ -40,14 +40,11 @@ export default function EndNode(props: NodeProps<EndNode>) {
/**
* 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) {
}

19
src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx
View File

@@ -76,13 +76,9 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
/**
* 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")
}
}

20
src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx
View File

@@ -61,13 +61,9 @@ export default function NormNode(props: NodeProps<NormNode>) {
/**
* 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) {
}

6
src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx
View File

@@ -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<string, unknown> = {

19
src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx
View File

@@ -40,14 +40,11 @@ export default function StartNode(props: NodeProps<StartNode>) {
/**
* 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) {
}

24
src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx
View File

@@ -80,14 +80,10 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
/**
* 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

12
test/components/Logging/Logging.test.tsx
View File

@@ -127,10 +127,10 @@ describe("Logging component", () => {
render(<Logging/>);
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);
});

167
test/pages/robot/Robot.test.tsx Normal file
View File

@@ -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(<Robot />);
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(<Robot />);
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(<Robot />);
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(<Robot />);
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(<Robot />);
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(<Robot />);
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(<Robot />);
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(<Robot />);
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(<Robot />);
const eventSource = mockInstances[0];
const closeSpy = jest.spyOn(eventSource, 'close');
unmount();
expect(closeSpy).toHaveBeenCalled();
expect(eventSource.closed).toBe(true);
});
});

109
test/pages/visProgPage/visualProgrammingUI/components/DragDropSidebar.test.tsx
View File

@@ -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<HTMLElement>, 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(<VisProgPage />);
// --- 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,
});
});
});

14
test/pages/visProgPage/visualProgrammingUI/components/ScrollIntoView.test.tsx Normal file
View File

@@ -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(<ScrollIntoView />);
});
expect(scrollMock).toHaveBeenCalledWith({ behavior: 'smooth' });
});

744
test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx Normal file
View File

@@ -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<typeof userEvent.setup>;
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(
<NormNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
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(
<NormNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
const input = screen.getByDisplayValue('Be respectful to humans');
expect(input).toBeInTheDocument();
});
it('should render with selected state', () => {
const mockNode: Node<NormNodeData> = {
id: 'norm-1',
type: 'norm',
position: { x: 0, y: 0 },
data: {
label: 'Test Norm',
droppable: true,
norm: '',
hasReduce: true,
},
};
renderWithProviders(
<NormNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
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(
<NormNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
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(
<NormNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
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(
<NormNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
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(
<NormNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
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(
<NormNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
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(
<NormNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
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(
<NormNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
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(
<NormNode
id={norm1.id}
type={norm1.type as string}
data={norm1.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
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(
<NormNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
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 });
});
});
});

98
test/pages/visProgPage/visualProgrammingUI/nodes/StartNode.test.tsx Normal file
View File

@@ -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(
<StartNode
id={mockNode.id}
type={mockNode.type!} // <--- fix here
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={false}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
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();
});
});
});

246
test/pages/visProgPage/visualProgrammingUI/nodes/TriggerNode.test.tsx Normal file
View File

@@ -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<typeof userEvent.setup>;
beforeEach(() => {
user = userEvent.setup();
});
describe('Rendering', () => {
it('should render TriggerNode with keywords type', () => {
const mockNode: Node<TriggerNodeData> = {
id: 'trigger-1',
type: 'trigger',
position: { x: 0, y: 0 },
data: {
label: 'Keyword Trigger',
droppable: true,
triggerType: 'keywords',
triggers: [],
hasReduce: true,
},
};
renderWithProviders(
<TriggerNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
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<TriggerNodeData> = {
id: 'trigger-2',
type: 'trigger',
position: { x: 0, y: 0 },
data: {
label: 'Emotion Trigger',
droppable: true,
triggerType: 'emotion',
triggers: [],
hasReduce: true,
},
};
renderWithProviders(
<TriggerNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
expect(screen.getByText(/Emotion\?/i)).toBeInTheDocument();
});
});
describe('User Interactions', () => {
it('should add a new keyword', async () => {
const mockNode: Node<TriggerNodeData> = {
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(
<TriggerNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
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<TriggerNodeData> | 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<TriggerNodeData> = {
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(
<TriggerNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
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<TriggerNodeData> | 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);
});
});
});

151
test/pages/visProgPage/visualProgrammingUI/nodes/UniversalNodes.test.tsx Normal file
View File

@@ -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<string, unknown>, 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<any>, 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();
});
});
});

41
test/test-utils/mocks.ts Normal file
View File

@@ -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;
}
}),
}));

24
test/test-utils/test-utils.tsx Normal file
View File

@@ -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<RenderOptions, 'wrapper'>
) {
function Wrapper({ children }: { children: ReactNode }) {
return <ReactFlowProvider>{children}</ReactFlowProvider>;
}
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';