113 lines
3.3 KiB
TypeScript
113 lines
3.3 KiB
TypeScript
// This program has been developed by students from the bachelor Computer Science at Utrecht
|
|
// University within the Software Project course.
|
|
// © Copyright Utrecht University (Department of Information and Computing Sciences)
|
|
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");
|
|
|
|
// UUID Expression
|
|
expect(node.id).toMatch(
|
|
/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
|
|
);
|
|
|
|
// screenToFlowPosition was mocked to subtract 100
|
|
expect(node.position).toEqual({
|
|
x: 200,
|
|
y: 150,
|
|
});
|
|
});
|
|
}); |