fix: fix the tests by simulating user actions rather than the function, and avoid the cyclic dependancy which was present

ref: N25B-371

src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx

@@ -1,9 +1,9 @@
 import { useDraggable } from '@neodrag/react';
 import { useReactFlow, type XYPosition } from '@xyflow/react';
 import { type ReactNode, useCallback, useRef, useState } from 'react';
+import useFlowStore from '../VisProgStores';
 import styles from '../../VisProg.module.css';
 import { NodeDefaults, type NodeTypes } from '../NodeRegistry'
-import addNode from '../utils/AddNode';
 
 /**
  * Props for a draggable node within the drag-and-drop toolbar.
@@ -57,6 +57,46 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP
   );
 }
 
+/**
+ * Adds a new node to the flow graph.
+ *
+ * Handles:
+ * - Automatic node ID generation based on existing nodes of the same type.
+ * - Loading of default data from the `NodeDefaults` registry.
+ * - Integration with the flow store to update global node state.
+ *
+ * @param nodeType - The type of node to create (from `NodeTypes`).
+ * @param position - The XY position in the flow canvas where the node will appear.
+ */
+function addNode(nodeType: keyof typeof NodeTypes, position: XYPosition) {
+  const { nodes, setNodes } = useFlowStore.getState();
+
+  // Load any predefined data for this node type.
+  const defaultData = NodeDefaults[nodeType] ?? {}
+  
+  // Currently, we find out what the Id is by checking the last node and adding one.
+  const sameTypeNodes = nodes.filter((node) => node.type === nodeType);
+  const nextNumber =
+    sameTypeNodes.length > 0
+      ? (() => {
+          const lastNode = sameTypeNodes[sameTypeNodes.length - 1];
+          const parts = lastNode.id.split('-');
+          const lastNum = Number(parts[1]);
+          return Number.isNaN(lastNum) ? sameTypeNodes.length + 1 : lastNum + 1;
+        })()
+      : 1;
+  const id = `${nodeType}-${nextNumber}`;
+  
+  // Create new node
+  const newNode = {
+    id: id,
+    type: nodeType,
+    position,
+    data: JSON.parse(JSON.stringify(defaultData))
+  }
+  setNodes([...nodes, newNode]);
+}
+
 /**
  * The drag-and-drop toolbar component for the visual programming interface.
  *