chore: create new tests for the UI, namely normnode, and one for all nodes

test/pages/visProgPage/visualProgrammingUI/components/DragDropSidebar.test.tsx

@@ -1,5 +1,112 @@
-describe('Not implemented', () => {
-  test('nothing yet', () => {
-    expect(true)
-  });
+import { getByTestId, render } from '@testing-library/react';
+import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores';
+import VisProgPage from '../../../../../src/pages/VisProgPage/VisProg';
+import userEvent from '@testing-library/user-event';
+
+
+
+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,
+      }),
+    }),
+  };
 });
+
+// Reset Zustand state helper
+function resetStore() {
+  useFlowStore.setState({ nodes: [], edges: [] });
+}
+
+describe("Drag & drop node creation", () => {
+  beforeEach(() => resetStore());
+
+  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,
+    });
+  });
+});