From 9b3414ba986da6277a33ae337c698f5b0a6ba1a5 Mon Sep 17 00:00:00 2001 From: "Gerla, J. (Justin)" Date: Tue, 6 Jan 2026 15:12:00 +0000 Subject: [PATCH 1/2] fix: incorrect phase reduction order --- src/pages/VisProgPage/VisProg.tsx | 7 +- .../visualProgrammingUI/EditorUndoRedo.ts | 4 +- .../visualProgrammingUI/VisProgStores.tsx | 31 ++- .../components/CustomNodeHandles.tsx | 30 +++ .../visualProgrammingUI/nodes/EndNode.tsx | 10 +- .../nodes/PhaseNode.default.ts | 2 + .../visualProgrammingUI/nodes/PhaseNode.tsx | 89 ++++++-- .../visualProgrammingUI/nodes/StartNode.tsx | 10 +- src/utils/orderPhaseNodes.ts | 40 ++++ .../EditorUndoRedo.test.ts | 3 + .../nodes/PhaseNode.test.tsx | 199 +++++++++++++++++- .../nodes/UniversalNodes.test.tsx | 64 +++--- test/utils/orderPhaseNodes.test.ts | 110 ++++++++++ 13 files changed, 520 insertions(+), 79 deletions(-) create mode 100644 src/pages/VisProgPage/visualProgrammingUI/components/CustomNodeHandles.tsx create mode 100644 src/utils/orderPhaseNodes.ts create mode 100644 test/utils/orderPhaseNodes.test.ts diff --git a/src/pages/VisProgPage/VisProg.tsx b/src/pages/VisProgPage/VisProg.tsx index 1a3720b..7c1fa3a 100644 --- a/src/pages/VisProgPage/VisProg.tsx +++ b/src/pages/VisProgPage/VisProg.tsx @@ -9,8 +9,10 @@ import { import '@xyflow/react/dist/style.css'; import {useEffect} from "react"; import {useShallow} from 'zustand/react/shallow'; +import orderPhaseNodeArray from "../../utils/orderPhaseNodes.ts"; import useProgramStore from "../../utils/programStore.ts"; import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx'; +import type {PhaseNode} from "./visualProgrammingUI/nodes/PhaseNode.tsx"; import useFlowStore from './visualProgrammingUI/VisProgStores.tsx'; import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx'; import styles from './VisProg.module.css' @@ -165,14 +167,15 @@ function runProgram() { */ function graphReducer() { const { nodes } = useFlowStore.getState(); - return nodes - .filter((n) => n.type == 'phase') + return orderPhaseNodeArray(nodes.filter((n) => n.type == 'phase') as PhaseNode []) .map((n) => { const reducer = NodeReduces['phase']; return reducer(n, nodes) }); } + + /** * houses the entire page, so also UI elements * that are not a part of the Visual Programming UI diff --git a/src/pages/VisProgPage/visualProgrammingUI/EditorUndoRedo.ts b/src/pages/VisProgPage/visualProgrammingUI/EditorUndoRedo.ts index 70c4c01..6ad705d 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/EditorUndoRedo.ts +++ b/src/pages/VisProgPage/visualProgrammingUI/EditorUndoRedo.ts @@ -39,10 +39,10 @@ export const UndoRedo = ( * @param {BaseFlowState} state - the current state of the editor * @returns {FlowSnapshot} - returns a snapshot of the current editor state */ - const getSnapshot = (state : BaseFlowState) : FlowSnapshot => ({ + const getSnapshot = (state : BaseFlowState) : FlowSnapshot => (structuredClone({ nodes: state.nodes, edges: state.edges - }); + })); const initialState = config(set, get, api); diff --git a/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx b/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx index 0847945..25736cd 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx @@ -28,33 +28,28 @@ import { UndoRedo } from "./EditorUndoRedo.ts"; * @param deletable - Optional flag to indicate if the node can be deleted (can be deleted by default). * @returns A fully initialized Node object ready to be added to the flow. */ -function createNode(id: string, type: string, position: XYPosition, data: Record, deletable?: boolean) { - const defaultData = NodeDefaults[type as keyof typeof NodeDefaults] - return { - id, - type, - position, - deletable, - data: { - ...defaultData, - ...data, - }, - } +function createNode(id: string, type: string, position: XYPosition, data: Record, deletable? : boolean) { + const defaultData = NodeDefaults[type as keyof typeof NodeDefaults] + + return { + id: id, + type: type, + position: position, + data: {...defaultData, ...data}, + deletable: deletable } +} //* Initial nodes, created by using createNode. */ const initialNodes : Node[] = [ createNode('start', 'start', {x: 100, y: 100}, {label: "Start"}, false), createNode('end', 'end', {x: 500, y: 100}, {label: "End"}, false), - createNode('phase-1', 'phase', {x:200, y:100}, {label: "Phase 1", children : []}), - createNode('norms-1', 'norm', {x:-200, y:100}, {label: "Initial Norms", normList: ["Be a robot", "get good"], critical:false}), + createNode('phase-1', 'phase', {x:200, y:100}, {label: "Phase 1", children : [], isFirstPhase: false, nextPhaseId: null}), + createNode('norms-1', 'norm', {x:-200, y:100}, {label: "Initial Norms", normList: ["Be a robot", "get good"], critical:false}), ]; // * Initial edges * / -const initialEdges: Edge[] = [ - { id: 'start-phase-1', source: 'start', target: 'phase-1' }, - { id: 'phase-1-end', source: 'phase-1', target: 'end' }, -]; +const initialEdges: Edge[] = []; // no initial edges as edge connect events don't fire when using initial edges /** diff --git a/src/pages/VisProgPage/visualProgrammingUI/components/CustomNodeHandles.tsx b/src/pages/VisProgPage/visualProgrammingUI/components/CustomNodeHandles.tsx new file mode 100644 index 0000000..853c488 --- /dev/null +++ b/src/pages/VisProgPage/visualProgrammingUI/components/CustomNodeHandles.tsx @@ -0,0 +1,30 @@ +import { + Handle, + useNodeConnections, + type HandleType, + type Position +} from '@xyflow/react'; + + +const LimitedConnectionCountHandle = (props: { + node_id: string, + type: HandleType, + position: Position, + connection_count: number, + id?: string +}) => { + const connections = useNodeConnections({ + id: props.node_id, + handleType: props.type, + handleId: props.id, + }); + + return ( + + ); +}; + +export default LimitedConnectionCountHandle; \ No newline at end of file diff --git a/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx b/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx index 57db571..116dc01 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx @@ -1,9 +1,9 @@ import { - Handle, type NodeProps, Position, type Node, } from '@xyflow/react'; +import LimitedConnectionCountHandle from "../components/CustomNodeHandles.tsx"; import { Toolbar } from '../components/NodeComponents'; import styles from '../../VisProg.module.css'; @@ -32,7 +32,13 @@ export default function EndNode(props: NodeProps) {
End
- + ); diff --git a/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.default.ts b/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.default.ts index 0a96d6b..73697eb 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.default.ts +++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.default.ts @@ -8,4 +8,6 @@ export const PhaseNodeDefaults: PhaseNodeData = { droppable: true, children: [], hasReduce: true, + nextPhaseId: null, + isFirstPhase: false, }; \ 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 41679f1..9e1fb24 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx @@ -9,6 +9,7 @@ import styles from '../../VisProg.module.css'; import { NodeReduces, NodesInPhase, NodeTypes} from '../NodeRegistry'; import useFlowStore from '../VisProgStores'; import { TextField } from '../../../../components/TextField'; +import LimitedConnectionCountHandle from "../components/CustomNodeHandles.tsx"; /** * The default data dot a phase node @@ -16,12 +17,15 @@ import { TextField } from '../../../../components/TextField'; * @param droppable: whether this node is droppable from the drop bar (initialized as true) * @param children: ID's of children of this node * @param hasReduce: whether this node has reducing functionality (true by default) + * @param nextPhaseId: */ export type PhaseNodeData = { label: string; droppable: boolean; children: string[]; hasReduce: boolean; + nextPhaseId: string | "end" | null; + isFirstPhase: boolean; }; export type PhaseNode = Node @@ -50,9 +54,21 @@ export default function PhaseNode(props: NodeProps) { placeholder={"Phase ..."} /> - + - + ); @@ -65,8 +81,8 @@ export default function PhaseNode(props: NodeProps) { * @returns A collection of all reduced nodes in this phase, starting with this phases' reduced data. */ export function PhaseReduce(node: Node, nodes: Node[]) { - const thisnode = node as PhaseNode; - const data = thisnode.data as PhaseNodeData; + const thisNode = node as PhaseNode; + const data = thisNode.data as PhaseNodeData; // node typings that are not in phase const nodesNotInPhase: string[] = Object.entries(NodesInPhase) @@ -85,8 +101,8 @@ export function PhaseReduce(node: Node, nodes: Node[]) { // Build the result object const result: Record = { - id: thisnode.id, - label: data.label, + id: thisNode.id, + label: data.label, }; nodesInPhase.forEach((type) => { @@ -109,13 +125,19 @@ export function PhaseReduce(node: Node, nodes: Node[]) { * @param _sourceNodeId the source of the received connection */ export function PhaseConnectionTarget(_thisNode: Node, _sourceNodeId: string) { - const node = _thisNode as PhaseNode - const data = node.data as PhaseNodeData - // we only add none phase nodes to the children - if (!(useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId && node.type === 'phase'))) { - data.children.push(_sourceNodeId) - } + const data = _thisNode.data as PhaseNodeData + const nodes = useFlowStore.getState().nodes; + const sourceNode = nodes.find((node) => node.id === _sourceNodeId)! + switch (sourceNode.type) { + case "phase": break; + case "start": data.isFirstPhase = true; break; + // we only add none phase or start nodes to the children + // endNodes cannot be the source of an outgoing connection + // so we don't need to cover them with a special case + // before handling the default behavior + default: data.children.push(_sourceNodeId); break; + } } /** @@ -124,7 +146,19 @@ export function PhaseConnectionTarget(_thisNode: Node, _sourceNodeId: string) { * @param _targetNodeId the target of the created connection */ export function PhaseConnectionSource(_thisNode: Node, _targetNodeId: string) { - // no additional connection logic exists yet + const data = _thisNode.data as PhaseNodeData + const nodes = useFlowStore.getState().nodes; + + const targetNode = nodes.find((node) => node.id === _targetNodeId) + if (!targetNode) {throw new Error("Source node not found")} + + // we set the nextPhaseId to the next target's id if the target is a phaseNode, + // or "end" if the target node is the end node + switch (targetNode.type) { + case 'phase': data.nextPhaseId = _targetNodeId; break; + case 'end': data.nextPhaseId = "end"; break; + default: break; + } } /** @@ -133,9 +167,23 @@ export function PhaseConnectionSource(_thisNode: Node, _targetNodeId: string) { * @param _sourceNodeId the source of the disconnected connection */ export function PhaseDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) { - const node = _thisNode as PhaseNode - const data = node.data as PhaseNodeData - data.children = data.children.filter((child) => { if (child != _sourceNodeId) return child; }); + const data = _thisNode.data as PhaseNodeData + + const nodes = useFlowStore.getState().nodes; + const sourceNode = nodes.find((node) => node.id === _sourceNodeId) + const sourceType = sourceNode ? sourceNode.type : "deleted"; + switch (sourceType) { + case "phase": break; + case "start": data.isFirstPhase = false; break; + // we only add none phase or start nodes to the children + // endNodes cannot be the source of an outgoing connection + // so we don't need to cover them with a special case + // before handling the default behavior + default: + data.children = data.children.filter((child) => { if (child != _sourceNodeId) return child; }); + break; + } + } /** @@ -144,5 +192,12 @@ export function PhaseDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) * @param _targetNodeId the target of the diconnected connection */ export function PhaseDisconnectionSource(_thisNode: Node, _targetNodeId: string) { - // no additional connection logic exists yet + const data = _thisNode.data as PhaseNodeData + const nodes = useFlowStore.getState().nodes; + + // if the target is a phase or end node set the nextPhaseId to null, + // as we are no longer connected to a subsequent phaseNode or to the endNode + if (nodes.some((node) => node.id === _targetNodeId && ['phase', 'end'].includes(node.type!))){ + data.nextPhaseId = null; + } } \ No newline at end of file diff --git a/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx b/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx index 92ca6ed..13f3fc8 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx @@ -1,9 +1,9 @@ import { - Handle, type NodeProps, Position, type Node, } from '@xyflow/react'; +import LimitedConnectionCountHandle from "../components/CustomNodeHandles.tsx"; import { Toolbar } from '../components/NodeComponents'; import styles from '../../VisProg.module.css'; @@ -31,7 +31,13 @@ export default function StartNode(props: NodeProps) {
Start
- + ); diff --git a/src/utils/orderPhaseNodes.ts b/src/utils/orderPhaseNodes.ts new file mode 100644 index 0000000..00b7a26 --- /dev/null +++ b/src/utils/orderPhaseNodes.ts @@ -0,0 +1,40 @@ +import type {PhaseNode} from "../pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx"; + +/** + * takes an array of phaseNodes and orders them according to their nextPhaseId attributes, + * starting with the phase that has isFirstPhase = true + * + * @param {PhaseNode[]} nodes an unordered phaseNode array + * @returns {PhaseNode[]} the ordered phaseNode array + */ +export default function orderPhaseNodeArray(nodes: PhaseNode[]) : PhaseNode[] { + // find the first phaseNode of the sequence + const start = nodes.find(node => node.data.isFirstPhase); + if (!start) { + throw new Error('No phaseNode with isFirstObject = true found'); + } + + // prepare for ordering of phaseNodes + const orderedPhaseNodes: PhaseNode[] = []; + const IdMap = new Map(nodes.map(node => [node.id, node])); + let currentNode: PhaseNode | undefined = start; + + // populate orderedPhaseNodes array with the phaseNodes in the correct order + while (currentNode) { + orderedPhaseNodes.push(currentNode); + + if (!currentNode.data.nextPhaseId) { + throw new Error("Incomplete phase sequence, program does not reach the end node"); + } + + if (currentNode.data.nextPhaseId === "end") break; + + currentNode = IdMap.get(currentNode.data.nextPhaseId); + + if (!currentNode) { + throw new Error(`Incomplete phase sequence, phaseNode with id "${orderedPhaseNodes.at(-1)?.data.nextPhaseId}" not found`); + } + } + + return orderedPhaseNodes; +} \ No newline at end of file diff --git a/test/pages/visProgPage/visualProgrammingUI/EditorUndoRedo.test.ts b/test/pages/visProgPage/visualProgrammingUI/EditorUndoRedo.test.ts index 76e7e96..f7233d8 100644 --- a/test/pages/visProgPage/visualProgrammingUI/EditorUndoRedo.test.ts +++ b/test/pages/visProgPage/visualProgrammingUI/EditorUndoRedo.test.ts @@ -3,6 +3,9 @@ import useFlowStore from '../../../../src/pages/VisProgPage/visualProgrammingUI/ import { mockReactFlow } from '../../../setupFlowTests.ts'; + + + beforeAll(() => { mockReactFlow(); }); diff --git a/test/pages/visProgPage/visualProgrammingUI/nodes/PhaseNode.test.tsx b/test/pages/visProgPage/visualProgrammingUI/nodes/PhaseNode.test.tsx index 01de131..b94feaa 100644 --- a/test/pages/visProgPage/visualProgrammingUI/nodes/PhaseNode.test.tsx +++ b/test/pages/visProgPage/visualProgrammingUI/nodes/PhaseNode.test.tsx @@ -1,8 +1,10 @@ +import type { Node, Edge, Connection } from '@xyflow/react' import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores'; -import type { PhaseNodeData } from "../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode"; -import { getByTestId, render } from '@testing-library/react'; +import type {PhaseNode, PhaseNodeData} from "../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode"; +import {act, getByTestId, render} from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import VisProgPage from '../../../../../src/pages/VisProgPage/VisProg'; +import {mockReactFlow} from "../../../../setupFlowTests.ts"; class ResizeObserver { @@ -98,4 +100,195 @@ describe('PhaseNode', () => { expect(p1_data.children.length == 1); expect(p2_data.children.length == 2); }); -}); \ No newline at end of file +}); + +// --| Helper functions |-- + +function createPhaseNode( + id: string, + overrides: Partial = {}, +): Node { + return { + id: id, + type: 'phase', + position: { x: 0, y: 0 }, + data: { + label: 'Phase', + droppable: true, + children: [], + hasReduce: true, + nextPhaseId: null, + isFirstPhase: false, + ...overrides, + }, + } +} + +function createNode(id: string, type: string): Node { + return { + id: id, + type: type, + position: { x: 0, y: 0 }, + data: {}, + } +} + +function connect(source: string, target: string): Connection { + return { + source: source, + target: target, + sourceHandle: null, + targetHandle: null + }; +} + +function edge(source: string, target: string): Edge { + return { + id: `${source}-${target}`, + source: source, + target: target, + } +} + +// --| Connection Tests |-- + +describe('PhaseNode Connection logic', () => { + beforeAll(() => { + mockReactFlow(); + }); + + describe('PhaseConnections', () => { + test('connecting start => phase sets isFirstPhase to true', () => { + const phase = createPhaseNode('phase-1') + const start = createNode('start', 'start') + + useFlowStore.setState({ nodes: [phase, start] }) + + // verify it starts of false + expect(phase.data.isFirstPhase).toBe(false); + + act(() => { + useFlowStore.getState().onConnect(connect('start', 'phase-1')) + }) + + const updatedPhase = useFlowStore + .getState() + .nodes.find((n) => n.id === 'phase-1') as PhaseNode + + expect(updatedPhase.data.isFirstPhase).toBe(true) + }) + + test('connecting task => phase adds child', () => { + const phase = createPhaseNode('phase-1') + const norm = createNode('norm-1', 'norm') + + useFlowStore.setState({ nodes: [phase, norm] }) + + act(() => { + useFlowStore.getState().onConnect(connect('norm-1', 'phase-1')) + }) + + const updatedPhase = useFlowStore + .getState() + .nodes.find((n) => n.id === 'phase-1') as PhaseNode + + expect(updatedPhase.data.children).toEqual(['norm-1']) + }) + + test('connecting phase => phase sets nextPhaseId', () => { + const p1 = createPhaseNode('phase-1') + const p2 = createPhaseNode('phase-2') + + useFlowStore.setState({ nodes: [p1, p2] }) + + act(() => { + useFlowStore.getState().onConnect(connect('phase-1', 'phase-2')) + }) + + const updatedP1 = useFlowStore + .getState() + .nodes.find((n) => n.id === 'phase-1') as PhaseNode + + expect(updatedP1.data.nextPhaseId).toBe('phase-2') + }) + + test('connecting phase to end => phase sets nextPhaseId to "end"', () => { + const phase = createPhaseNode('phase-1') + const end = createNode('end', 'end') + + useFlowStore.setState({ nodes: [phase, end] }) + + act(() => { + useFlowStore.getState().onConnect(connect('phase-1', 'end')) + }) + + const updatedPhase = useFlowStore + .getState() + .nodes.find((n) => n.id === 'phase-1') as PhaseNode + + expect(updatedPhase.data.nextPhaseId).toBe('end') + }) + }) + + describe('PhaseDisconnections', () => { + test('disconnecting task => phase removes child', () => { + const phase = createPhaseNode('phase-1', { children: ['norm-1'] }) + const norm = createNode('norm-1', 'norm') + + useFlowStore.setState({ + nodes: [phase, norm], + edges: [edge('norm-1', 'phase-1')] + }) + + act(() => { + useFlowStore.getState().onEdgesDelete([edge('norm-1', 'phase-1')]) + }) + + const updatedPhase = useFlowStore + .getState() + .nodes.find((n) => n.id === 'phase-1') as PhaseNode + + expect(updatedPhase.data.children).toEqual([]) + }) + + test('disconnecting start => phase sets isFirstPhase to false', () => { + const phase = createPhaseNode('phase-1', { isFirstPhase: true }) + const start = createNode('start', 'start') + + useFlowStore.setState({ + nodes: [phase, start], + edges: [edge('start', 'phase-1')] + }) + + act(() => { + useFlowStore.getState().onEdgesDelete([edge('start', 'phase-1')]) + }) + + const updatedPhase = useFlowStore + .getState() + .nodes.find((n) => n.id === 'phase-1') as PhaseNode + + expect(updatedPhase.data.isFirstPhase).toBe(false) + }) + + test('disconnecting phase => phase sets nextPhaseId to null', () => { + const p1 = createPhaseNode('phase-1', { nextPhaseId: 'phase-2' }) + const p2 = createPhaseNode('phase-2') + + useFlowStore.setState({ + nodes: [p1, p2], + edges: [edge('phase-1', 'phase-2')] + }) + + act(() => { + useFlowStore.getState().onEdgesDelete([edge('phase-1', 'phase-2')]) + }) + + const updatedP1 = useFlowStore + .getState() + .nodes.find((n) => n.id === 'phase-1') as PhaseNode + + expect(updatedP1.data.nextPhaseId).toBeNull() + }) + }) +}) \ No newline at end of file diff --git a/test/pages/visProgPage/visualProgrammingUI/nodes/UniversalNodes.test.tsx b/test/pages/visProgPage/visualProgrammingUI/nodes/UniversalNodes.test.tsx index c023722..25a50b2 100644 --- a/test/pages/visProgPage/visualProgrammingUI/nodes/UniversalNodes.test.tsx +++ b/test/pages/visProgPage/visualProgrammingUI/nodes/UniversalNodes.test.tsx @@ -13,19 +13,17 @@ describe('NormNode', () => { jest.clearAllMocks(); }); - function createNode(id: string, type: string, position: XYPosition, data: Record, deletable?: boolean) { + function createNode(id: string, type: string, position: XYPosition, data: Record, deletable? : boolean) { const defaultData = NodeDefaults[type as keyof typeof NodeDefaults] + return { - id, - type, - position, - deletable, - data: { - ...defaultData, - ...data, - }, + id: id, + type: type, + position: position, + data: {...defaultData, ...data}, + deletable: deletable } - } + } /** @@ -47,34 +45,34 @@ describe('NormNode', () => { describe('Rendering', () => { test.each(getAllTypes())('it should render %s node with the default data', (nodeType) => { - const lengthBefore = screen.getAllByText(/.*/).length; + const lengthBefore = screen.getAllByText(/.*/).length; - const newNode = createNode(nodeType + "1", nodeType, {x: 200, y:200}, {}); + 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; + 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, - }; + 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; + renderWithProviders(createElement(uiElement as React.ComponentType, props)); + const lengthAfter = screen.getAllByText(/.*/).length; - expect(lengthBefore + 1 === lengthAfter); - }); + expect(lengthBefore + 1 === lengthAfter); + }); }); diff --git a/test/utils/orderPhaseNodes.test.ts b/test/utils/orderPhaseNodes.test.ts new file mode 100644 index 0000000..5020378 --- /dev/null +++ b/test/utils/orderPhaseNodes.test.ts @@ -0,0 +1,110 @@ +import type {PhaseNode} from "../../src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx"; +import orderPhaseNodeArray from "../../src/utils/orderPhaseNodes.ts"; + +function createPhaseNode( + id: string, + isFirst: boolean = false, + nextPhaseId: string | null = null +): PhaseNode { + return { + id: id, + type: 'phase', + position: { x: 0, y: 0 }, + data: { + label: 'Phase', + droppable: true, + children: [], + hasReduce: true, + nextPhaseId: nextPhaseId, + isFirstPhase: isFirst, + }, + } +} + +describe("orderPhaseNodes", () => { + test.each([ + { + testCase: { + testName: "Throws correct error when there is no first phase (empty input array)", + input: [], + expected: "No phaseNode with isFirstObject = true found" + } + },{ + testCase: { + testName: "Throws correct error when there is no first phase", + input: [ + createPhaseNode("phase-1", false, "phase-2"), + createPhaseNode("phase-2", false, "phase-3"), + createPhaseNode("phase-3", false, "end") + ], + expected: "No phaseNode with isFirstObject = true found" + } + },{ + testCase: { + testName: "Throws correct error when the program doesn't lead to an end node (missing phase-phase connection)", + input: [ + createPhaseNode("phase-1", true, "phase-2"), + createPhaseNode("phase-2", false, null), + createPhaseNode("phase-3", false, "end") + ], + expected: "Incomplete phase sequence, program does not reach the end node" + } + },{ + testCase: { + testName: "Throws correct error when the program doesn't lead to an end node (missing phase-end connection)", + input: [ + createPhaseNode("phase-1", true, "phase-2"), + createPhaseNode("phase-2", false, "phase-3"), + createPhaseNode("phase-3", false, null) + ], + expected: "Incomplete phase sequence, program does not reach the end node" + } + },{ + testCase: { + testName: "Throws correct error when the program leads to a non-existent phase", + input: [ + createPhaseNode("phase-1", true, "phase-2"), + createPhaseNode("phase-2", false, "phase-3"), + createPhaseNode("phase-3", false, "phase-4") + ], + expected: "Incomplete phase sequence, phaseNode with id \"phase-4\" not found" + } + } + ])(`Error Handling: $testCase.testName`, ({testCase}) => { + expect(() => { orderPhaseNodeArray(testCase.input) }).toThrow(testCase.expected); + }) + test.each([ + { + testCase: { + testName: "Already correctly ordered phases stay ordered", + input: [ + createPhaseNode("phase-1", true, "phase-2"), + createPhaseNode("phase-2", false, "phase-3"), + createPhaseNode("phase-3", false, "end") + ], + expected: [ + createPhaseNode("phase-1", true, "phase-2"), + createPhaseNode("phase-2", false, "phase-3"), + createPhaseNode("phase-3", false, "end") + ] + } + },{ + testCase: { + testName: "Incorrectly ordered phases get ordered correctly", + input: [ + createPhaseNode("phase-3", false, "end"), + createPhaseNode("phase-1", true, "phase-2"), + createPhaseNode("phase-2", false, "phase-3"), + ], + expected: [ + createPhaseNode("phase-1", true, "phase-2"), + createPhaseNode("phase-2", false, "phase-3"), + createPhaseNode("phase-3", false, "end") + ] + } + } + ])(`Functional: $testCase.testName`, ({testCase}) => { + const output = orderPhaseNodeArray(testCase.input); + expect(output).toEqual(testCase.expected); + }) +}) \ No newline at end of file From 4e9a048c90569d9c6385587c5587a23680196123 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Otgaar?= Date: Wed, 7 Jan 2026 09:27:23 +0000 Subject: [PATCH 2/2] Conditional Norms --- .../visualProgrammingUI/VisProgStores.tsx | 23 ++- .../nodes/NormNode.default.ts | 1 + .../visualProgrammingUI/nodes/NormNode.tsx | 50 ++++- .../nodes/NormNode.test.tsx | 185 ++++++++++++++++-- .../nodes/UniversalNodes.test.tsx | 46 ++++- 5 files changed, 270 insertions(+), 35 deletions(-) diff --git a/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx b/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx index 25736cd..48851bc 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx @@ -28,17 +28,20 @@ import { UndoRedo } from "./EditorUndoRedo.ts"; * @param deletable - Optional flag to indicate if the node can be deleted (can be deleted by default). * @returns A fully initialized Node object ready to be added to the flow. */ -function createNode(id: string, type: string, position: XYPosition, data: Record, deletable? : boolean) { - const defaultData = NodeDefaults[type as keyof typeof NodeDefaults] - - return { - id: id, - type: type, - position: position, - data: {...defaultData, ...data}, - deletable: deletable +function createNode(id: string, type: string, position: XYPosition, data: Record, deletable?: boolean) { + const defaultData = NodeDefaults[type as keyof typeof NodeDefaults] + return { + id, + type, + position, + deletable, + data: { + ...JSON.parse(JSON.stringify(defaultData)), + ...data, + }, + } } -} + //* Initial nodes, created by using createNode. */ const initialNodes : Node[] = [ diff --git a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts index 4b4a3ed..8df25cc 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts +++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts @@ -6,6 +6,7 @@ import type { NormNodeData } from "./NormNode"; export const NormNodeDefaults: NormNodeData = { label: "Norm Node", droppable: true, + conditions: [], norm: "", hasReduce: true, critical: false, diff --git a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx index 8f619a5..4e94834 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx @@ -8,6 +8,7 @@ import { Toolbar } from '../components/NodeComponents'; import styles from '../../VisProg.module.css'; import { TextField } from '../../../../components/TextField'; import useFlowStore from '../VisProgStores'; +import { BasicBeliefReduce } from './BasicBeliefNode'; /** * The default data dot a phase node @@ -19,6 +20,7 @@ import useFlowStore from '../VisProgStores'; export type NormNodeData = { label: string; droppable: boolean; + conditions: string[]; // List of (basic) belief nodes' ids. norm: string; hasReduce: boolean; critical: boolean; @@ -67,7 +69,14 @@ export default function NormNode(props: NodeProps) { onChange={(e) => setCritical(e.target.checked)} /> + + {data.conditions.length > 0 && (
+ +
)} + + + ; }; @@ -78,14 +87,29 @@ export default function NormNode(props: NodeProps) { * @param node The Node Properties of this node. * @param _nodes all the nodes in the graph */ -export function NormReduce(node: Node, _nodes: Node[]) { +export function NormReduce(node: Node, nodes: Node[]) { const data = node.data as NormNodeData; - return { - id: node.id, - label: data.label, - norm: data.norm, - critical: data.critical, - } + + // conditions nodes - make sure to check for empty arrays + let conditionNodes: Node[] = []; + if (data.conditions) + conditionNodes = nodes.filter((node) => data.conditions.includes(node.id)); + + // Build the result object + const result: Record = { + id: node.id, + label: data.label, + norm: data.norm, + critical: data.critical, + }; + + // Go over our conditionNodes. They should either be Basic (OR TODO: Inferred) + const reducer = BasicBeliefReduce; + result["basic_beliefs"] = conditionNodes.map((condition) => reducer(condition, nodes)) + + // When the Inferred is being implemented, you should follow the same kind of structure that PhaseNode has, + // dividing the conditions into basic and inferred, then calling the correct reducer on them. + return result } /** @@ -94,7 +118,11 @@ export function NormReduce(node: Node, _nodes: Node[]) { * @param _sourceNodeId the source of the received connection */ export function NormConnectionTarget(_thisNode: Node, _sourceNodeId: string) { - // no additional connection logic exists yet + const data = _thisNode.data as NormNodeData; + // If we got a belief connected, this is a condition for the norm. + if ((useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId && node.type === 'basic_belief' /* TODO: Add the option for an inferred belief */))) { + data.conditions.push(_sourceNodeId); + } } /** @@ -112,7 +140,11 @@ export function NormConnectionSource(_thisNode: Node, _targetNodeId: string) { * @param _sourceNodeId the source of the disconnected connection */ export function NormDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) { - // no additional connection logic exists yet + const data = _thisNode.data as NormNodeData; + // If we got a belief connected, this is a condition for the norm. + if ((useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId && node.type === 'basic_belief' /* TODO: Add the option for an inferred belief */))) { + data.conditions = data.conditions.filter(id => id != _sourceNodeId); + } } /** diff --git a/test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx b/test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx index a9848b2..c762fff 100644 --- a/test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx +++ b/test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx @@ -10,8 +10,9 @@ import NormNode, { import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores'; import type { Node } from '@xyflow/react'; import '@testing-library/jest-dom' - - +import { NormNodeDefaults } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts'; +import { BasicBeliefNodeDefaults } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.default.ts'; +import BasicBeliefNode, { BasicBeliefConnectionSource } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.tsx'; describe('NormNode', () => { let user: ReturnType; @@ -26,12 +27,7 @@ describe('NormNode', () => { id: 'norm-1', type: 'norm', position: { x: 0, y: 0 }, - data: { - label: 'Test Norm', - droppable: true, - norm: '', - hasReduce: true, - }, + data: {...JSON.parse(JSON.stringify(NormNodeDefaults))}, }; renderWithProviders( @@ -60,6 +56,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Test Norm', droppable: true, norm: 'Be respectful to humans', @@ -94,8 +91,10 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Test Norm', droppable: true, + conditions: [], norm: '', hasReduce: true, critical: false @@ -129,6 +128,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Test Norm', droppable: true, norm: 'Dragged norm', @@ -165,6 +165,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Test Norm', droppable: true, norm: '', @@ -210,6 +211,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Test Norm', droppable: true, norm: 'Initial norm text', @@ -261,6 +263,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Test Norm', droppable: true, norm: '', @@ -314,6 +317,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Test Norm', droppable: true, norm: '', @@ -358,6 +362,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Test Norm', droppable: true, norm: '', @@ -404,6 +409,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Safety Norm', droppable: true, norm: 'Never harm humans', @@ -418,6 +424,8 @@ describe('NormNode', () => { id: 'norm-1', label: 'Safety Norm', norm: 'Never harm humans', + critical: false, + basic_beliefs: [], }); }); @@ -427,6 +435,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Norm 1', droppable: true, norm: 'Be helpful', @@ -439,6 +448,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 100, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Norm 2', droppable: true, norm: 'Be honest', @@ -463,6 +473,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Empty Norm', droppable: true, norm: '', @@ -482,6 +493,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Custom Label', droppable: false, norm: 'Test norm', @@ -502,6 +514,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Test Norm', droppable: true, norm: 'Test', @@ -514,6 +527,7 @@ describe('NormNode', () => { type: 'phase', position: { x: 100, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Phase 1', droppable: true, children: [], @@ -532,6 +546,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Test Norm', droppable: true, norm: 'Test', @@ -544,6 +559,7 @@ describe('NormNode', () => { type: 'phase', position: { x: 100, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Phase 1', droppable: true, children: [], @@ -562,6 +578,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...NormNodeDefaults, label: 'Test Norm', droppable: true, norm: 'Test', @@ -583,6 +600,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Test Norm', droppable: true, norm: '', @@ -634,6 +652,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Test Norm', droppable: true, norm: '', @@ -682,6 +701,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Norm 1', droppable: true, norm: 'Original norm 1', @@ -694,6 +714,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 100, y: 0 }, data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), label: 'Norm 2', droppable: true, norm: 'Original norm 2', @@ -748,6 +769,7 @@ describe('NormNode', () => { type: 'norm', position: { x: 0, y: 0 }, data: { + ...NormNodeDefaults, label: 'Test Norm', droppable: true, norm: 'haa haa fuyaaah - link', @@ -778,21 +800,154 @@ describe('NormNode', () => { ); const input = screen.getByPlaceholderText('Pepper should ...'); + expect(input).toBeDefined() - await user.type(input, 'a'); + await user.type(input, 'a{enter}'); await waitFor(() => { - expect(useFlowStore.getState().nodes[0].data.norm).toBe('haa haa fuyaaah - link'); + expect(useFlowStore.getState().nodes[0].data.norm).toBe('haa haa fuyaaah - linka'); }); - await user.type(input, 'b'); + await user.type(input, 'b{enter}'); await waitFor(() => { - expect(useFlowStore.getState().nodes[0].data.norm).toBe('haa haa fuyaaah - link'); + expect(useFlowStore.getState().nodes[0].data.norm).toBe('haa haa fuyaaah - linkab'); }); - await user.type(input, 'c'); + await user.type(input, 'c{enter}'); await waitFor(() => { - expect(useFlowStore.getState().nodes[0].data.norm).toBe('haa haa fuyaaah - link'); - }, { timeout: 3000 }); + expect(useFlowStore.getState().nodes[0].data.norm).toBe('haa haa fuyaaah - linkabc'); + }); + }); + }); + + describe('Integration beliefs', () => { + it('should update visually when adding beliefs', async () => { + // Setup state + const mockNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), + label: 'Test Norm', + droppable: true, + norm: 'haa haa fuyaaah - link', + hasReduce: true, + } + }; + + const mockBelief: Node = { + id: 'basic_belief-1', + type: 'basic_belief', + position: {x:100, y:100}, + data: { + ...JSON.parse(JSON.stringify(BasicBeliefNodeDefaults)) + } + }; + + useFlowStore.setState({ + nodes: [mockNode, mockBelief], + edges: [], + }); + + // Simulate connecting + NormConnectionTarget(mockNode, mockBelief.id); + BasicBeliefConnectionSource(mockBelief, mockNode.id) + + renderWithProviders( +
+ + +
+ ); + + await waitFor(() => { + expect(screen.getByTestId('norm-condition-information')).toBeInTheDocument(); + }); + + + }); + + it('should update the data when adding beliefs', async () => { + // Setup state + const mockNode: Node = { + id: 'norm-1', + type: 'norm', + position: { x: 0, y: 0 }, + data: { + ...JSON.parse(JSON.stringify(NormNodeDefaults)), + label: 'Test Norm', + droppable: true, + norm: 'haa haa fuyaaah - link', + hasReduce: true, + } + }; + + const mockBelief1: Node = { + id: 'basic_belief-1', + type: 'basic_belief', + position: {x:100, y:100}, + data: { + ...JSON.parse(JSON.stringify(BasicBeliefNodeDefaults)) + } + }; + + const mockBelief2: Node = { + id: 'basic_belief-2', + type: 'basic_belief', + position: {x:300, y:300}, + data: { + ...JSON.parse(JSON.stringify(BasicBeliefNodeDefaults)) + } + }; + + useFlowStore.setState({ + nodes: [mockNode, mockBelief1, mockBelief2], + edges: [], + }); + + // Simulate connecting + useFlowStore.getState().onConnect({ + source: 'basic_belief-1', + target: 'norm-1', + sourceHandle: null, + targetHandle: null, + }); + useFlowStore.getState().onConnect({ + source: 'basic_belief-2', + target: 'norm-1', + sourceHandle: null, + targetHandle: null, + }); + + const state = useFlowStore.getState(); + const updatedNorm = state.nodes.find(n => n.id === 'norm-1'); + expect(updatedNorm?.data.conditions).toEqual(["basic_belief-1", "basic_belief-2"]); }); }); }); \ No newline at end of file diff --git a/test/pages/visProgPage/visualProgrammingUI/nodes/UniversalNodes.test.tsx b/test/pages/visProgPage/visualProgrammingUI/nodes/UniversalNodes.test.tsx index 25a50b2..40cd0e4 100644 --- a/test/pages/visProgPage/visualProgrammingUI/nodes/UniversalNodes.test.tsx +++ b/test/pages/visProgPage/visualProgrammingUI/nodes/UniversalNodes.test.tsx @@ -8,7 +8,7 @@ import { createElement } from 'react'; import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores'; -describe('NormNode', () => { +describe('Universal Nodes', () => { beforeEach(() => { jest.clearAllMocks(); }); @@ -107,6 +107,50 @@ describe('NormNode', () => { }); }); + describe('Disconnecting', () => { + test.each(getAllTypes())('it should remove the correct data when something is disconnected on a %s node.', (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', 'basic_belief', {x: 300, y: 100}, {}); + + // Add nodes to store + useFlowStore.setState({ nodes: [sourceNode, targetNode] }); + + // Spy on the connect functions + const sourceConnectSpy = jest.spyOn(NodeConnections.Sources, nodeType as keyof typeof NodeConnections.Sources); + const targetConnectSpy = jest.spyOn(NodeConnections.Targets, 'basic_belief'); + + // 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.id); + expect(targetConnectSpy).toHaveBeenCalledWith(targetNode, sourceNode.id); + + // Find this connection, and delete it + const edge = useFlowStore.getState().edges[0]; + useFlowStore.getState().onEdgesDelete([edge]); + + // Find the nodes in the flow + const newSourceNode = useFlowStore.getState().nodes.find((node) => node.id == "source-1"); + const newTargetNode = useFlowStore.getState().nodes.find((node) => node.id == "target-1"); + + // Expect them to be the same after deleting the edges + expect(newSourceNode).toBe(sourceNode); + expect(newTargetNode).toBe(targetNode); + + // Restore our spies + 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