test/pages/visProgPage/VisProg.test.tsx

@@ -0,0 +1,30 @@
+import { act } from '@testing-library/react';
+import useFlowStore from '../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx';
+import { mockReactFlow } from '../../setupFlowTests.ts';
+
+beforeAll(() => {
+  mockReactFlow();
+});
+
+describe('FlowCanvas onConnect', () => {
+
+  test('adds an edge when onConnect is triggered', () => {
+    const { onConnect} = useFlowStore.getState();
+
+    act(() => {
+      onConnect({
+        source: 'A',
+        target: 'B',
+        sourceHandle: null,
+        targetHandle: null,
+      });
+    });
+
+    const updatedEdges = useFlowStore.getState().edges;
+    expect(updatedEdges).toHaveLength(1);
+    expect(updatedEdges[0]).toMatchObject({
+      source: 'A',
+      target: 'B',
+    });
+  });
+});

test/setupFlowTests.ts

@@ -63,8 +63,7 @@ export const mockReactFlow = () => {
   });
 };
 
-afterEach(() => {
-  cleanup();
-  useFlowStore.setState({ nodes: [], edges: [] });
-});
+beforeEach(() => { useFlowStore.setState({ nodes: [], edges: [] }); })
+
+afterEach(() => { cleanup(); });