test/pages/visProgPage/visualProgrammingUI/VisProgStores.test.tsx

@@ -1,4 +1,4 @@
-import { act } from '@testing-library/react';
+import {act} from '@testing-library/react';
 import useFlowStore from '../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx';
 import { mockReactFlow } from '../../../setupFlowTests.ts';
 
@@ -7,10 +7,19 @@ beforeAll(() => {
 });
 
 describe('FlowStore Functionality', () => {
+  describe('Node changes', () => {
+    // currently just using a single function from the ReactFlow library,
+    // so testing would mean we are testing already tested behavior.
+    // if implementation gets modified tests should be added for custom behavior
+  });
+  describe('Edge changes', () => {
+    // currently just using a single function from the ReactFlow library,
+    // so testing would mean we are testing already tested behavior.
+    // if implementation gets modified tests should be added for custom behavior
+  })
   describe('ReactFlow onConnect', () => {
     test('adds an edge when onConnect is triggered', () => {
-      const { onConnect} = useFlowStore.getState();
+      const {onConnect} = useFlowStore.getState();
-
       act(() => {
         onConnect({
           source: 'A',
@@ -28,4 +37,70 @@ describe('FlowStore Functionality', () => {
       });
     });
   });
-})
+  describe('ReactFlow onReconnect', () => {
+  });
+  describe('ReactFlow onReconnectStart', () => {
+  });
+  describe('ReactFlow onReconnectEnd', () => {
+  });
+  describe('ReactFlow setNodes', () => {
+    test('sets nodes to the provided list of nodes', () => {
+      const {setNodes} = useFlowStore.getState();
+
+      act(() => {
+        setNodes([
+          {
+            id: 'start',
+            type: 'start',
+            position: {x: 0, y: 0},
+            data: {label: 'start'}
+          },
+          {
+            id: 'end',
+            type: 'end',
+            position: {x: 0, y: 300},
+            data: {label: 'End'}
+          }
+        ]);
+      });
+
+      const updatedNodes = useFlowStore.getState().nodes;
+      expect(updatedNodes).toHaveLength(2);
+      expect(updatedNodes[0]).toMatchObject({
+        id: 'start',
+        type: 'start',
+        position: {x: 0, y: 0},
+        data: {label: 'start'}
+      });
+      expect(updatedNodes[1]).toMatchObject({
+        id: 'end',
+        type: 'end',
+        position: {x: 0, y: 300},
+        data: {label: 'End'}
+      });
+    });
+  });
+  describe('ReactFlow setEdges', () => {
+   test('sets edges to the provided list of edges', () => {
+      const {setEdges} = useFlowStore.getState();
+
+      act(() => {
+        setEdges([
+          {
+            id: 'start-end',
+            source: 'start',
+            target: 'end'
+          }
+        ]);
+      });
+
+      const updatedEdges = useFlowStore.getState().edges;
+      expect(updatedEdges).toHaveLength(1);
+      expect(updatedEdges[0]).toMatchObject({
+        id: 'start-end',
+        source: 'start',
+        target: 'end'
+      });
+    });
+  });
+});

test/setupFlowTests.ts

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