diff --git a/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx b/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx index 9a41f06..0401da9 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx @@ -92,7 +92,7 @@ function addNodeToFlow(nodeType: keyof typeof NodeTypes, position: XYPosition) { id: id, type: nodeType, position, - data: {...defaultData} + data: JSON.parse(JSON.stringify(defaultData)) } addNode(newNode); } diff --git a/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx b/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx index 56c762c..c8ea2c0 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx @@ -110,7 +110,6 @@ export function PhaseReduce(node: Node, nodes: Node[]) { * @param isThisSource whether this instance of the node was the source in the connection, true = yes. */ export function PhaseConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) { - console.log("Connect functionality called.") const node = thisNode as PhaseNode const data = node.data as PhaseNodeData if (!isThisSource) diff --git a/test/pages/visProgPage/visualProgrammingUI/nodes/PhaseNode.test.tsx b/test/pages/visProgPage/visualProgrammingUI/nodes/PhaseNode.test.tsx new file mode 100644 index 0000000..01de131 --- /dev/null +++ b/test/pages/visProgPage/visualProgrammingUI/nodes/PhaseNode.test.tsx @@ -0,0 +1,101 @@ +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 userEvent from '@testing-library/user-event'; +import VisProgPage from '../../../../../src/pages/VisProgPage/VisProg'; + + +class ResizeObserver { + observe() {} + unobserve() {} + disconnect() {} +} +window.ResizeObserver = ResizeObserver; + +jest.mock('@neodrag/react', () => ({ + useDraggable: (ref: React.RefObject, options: any) => { + // We access the real useEffect from React to attach a listener + // This bridges the gap between the test's userEvent and the component's logic + const { useEffect } = jest.requireActual('react'); + + useEffect(() => { + const element = ref.current; + if (!element) return; + + // When the test fires a "pointerup" (end of click/drag), + // we manually trigger the library's onDragEnd callback. + const handlePointerUp = (e: PointerEvent) => { + if (options.onDragEnd) { + options.onDragEnd({ event: e }); + } + }; + + element.addEventListener('pointerup', handlePointerUp as EventListener); + return () => { + element.removeEventListener('pointerup', handlePointerUp as EventListener); + }; + }, [ref, options]); + }, +})); + +describe('PhaseNode', () => { + it('each created phase gets its own children array, not the same reference ', async () => { + const user = userEvent.setup(); + + const { container } = render(); + + // --- Mock ReactFlow bounding box --- + // Your DndToolbar checks these values: + const flowEl = container.querySelector('.react-flow'); + jest.spyOn(flowEl!, 'getBoundingClientRect').mockReturnValue({ + left: 0, + right: 800, + top: 0, + bottom: 600, + width: 800, + height: 600, + x: 0, + y: 0, + toJSON: () => {}, + }); + + // Find the draggable norm node in the toolbar + const phaseButton = getByTestId(container, 'draggable-phase') + + // Simulate dropping phase down in graph (twice) + for (let i = 0; i < 2; i++) { + await user.pointer([ + // touch the screen at element1 + {keys: '[TouchA>]', target: phaseButton}, + // move the touch pointer to element2 + {pointerName: 'TouchA', coords: {x: 300, y: 250}}, + // release the touch pointer at the last position (element2) + {keys: '[/TouchA]'}, + ]); + } + + // Find nodes + const nodes = useFlowStore.getState().nodes; + const p1 = nodes.find((x) => x.id === 'phase-1')!; + const p2 = nodes.find((x) => x.id === 'phase-2')!; + + // expect same value, not same reference + expect(p1.data.children).not.toBe(p2.data.children); + expect(p1.data.children).toEqual(p2.data.children); + + // Add nodes to children + const p1_data = p1.data as PhaseNodeData; + const p2_data = p2.data as PhaseNodeData; + p1_data.children.push("norm-1"); + p2_data.children.push("norm-2"); + p2_data.children.push("goal-1"); + + // check that after adding, its not the same reference, and its not the same children + expect(p1.data.children).not.toBe(p2.data.children); + expect(p1.data.children).not.toEqual(p2.data.children); + + // expect them to have the correct length. + expect(p1_data.children.length == 1); + expect(p2_data.children.length == 2); + }); +}); \ No newline at end of file