added a lot code to testing

Author: zacharydfreeman

src/backend/__tests__/linkFiber.test.tsx

@@ -9,6 +9,7 @@ describe('linkFiber', () => {
   let snapShot: Snapshot;
   let mode: Status;
   let linkFiber;
+  let fiberRoot: FiberRoot;
   const mockPostMessage = jest.fn();
 
   beforeEach(() => {
@@ -22,6 +23,23 @@ describe('linkFiber', () => {
       navigating: undefined,
     };
 
+    fiberRoot = {
+      current: {
+        tag: 3,
+        key: null,
+        elementType: 'div',
+        type: 'div',
+        stateNode: {},
+        child: null,
+        sibling: null,
+        index: 0,
+        memoizedState: null,
+        memoizedProps: {},
+        dependencies: null,
+        _debugHookTypes: [],
+      },
+    };
+
     linkFiber = linkFiberInitialization(snapShot, mode);
     // Set up mock postMessage function
     window.postMessage = mockPostMessage;
@@ -31,10 +49,12 @@ describe('linkFiber', () => {
       renderers: new Map<1, { version: string }>([[1, { version: '16' }]]),
       inject: jest.fn(),
       supportsFiber: true,
-      onCommitFiberRoot: jest.fn(),
+      onCommitFiberRoot: jest.fn((...args) => {
+        console.log(...args);
+      }),
       onCommitFiberUnmount: jest.fn(),
       rendererInterfaces: {},
-      getFiberRoots: jest.fn(() => [{ current: { tag: 0 } }]),
+      getFiberRoots: jest.fn(() => [{ current: { tag: 3 } }]),
     };
   });
 
@@ -43,53 +63,120 @@ describe('linkFiber', () => {
     delete window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
   });
 
-  xit('link fiber should return a function', () => {
-    expect(typeof linkFiber).toBe('function');
-  });
+  describe('link fiber initiliaztion', () => {
+    it('link fiber should return a function', () => {
+      expect(typeof linkFiber).toBe('function');
+    });
 
-  xit('returned function should not throw an error', () => {
-    expect(() => linkFiber()).not.toThrowError();
+    it('returned function should not throw an error', () => {
+      expect(() => linkFiber()).not.toThrowError();
+    });
   });
 
-  xit('should send message to front end that React DevTools is installed', () => {
-    linkFiber();
-    expect(mockPostMessage).toHaveBeenCalled();
-    expect(mockPostMessage).toHaveBeenCalledWith(
-      {
-        action: 'devToolsInstalled',
-        payload: 'devToolsInstalled',
-      },
-      '*',
-    );
+  describe('React dev tools and react app check', () => {
+    it('should send message to front end that React DevTools is installed', () => {
+      linkFiber();
+      expect(mockPostMessage).toHaveBeenCalled();
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          action: 'devToolsInstalled',
+          payload: 'devToolsInstalled',
+        },
+        '*',
+      );
+    });
+
+    it('should not do anything if React Devtools is not installed', () => {
+      delete window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      expect(() => linkFiber()).not.toThrowError();
+      expect(mockPostMessage).not.toHaveBeenCalled();
+    });
+
+    it('should send a message to the front end if the target application is a React App', () => {
+      linkFiber();
+      // the third call is from the onCommitFiberRoot() function
+      expect(mockPostMessage).toHaveBeenCalledTimes(3);
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          action: 'devToolsInstalled',
+          payload: 'devToolsInstalled',
+        },
+        '*',
+      );
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        {
+          action: 'aReactApp',
+          payload: 'aReactApp',
+        },
+        '*',
+      );
+    });
+
+    it('should not do anything if the target application is not a React App', () => {
+      (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers = new Map();
+      linkFiber();
+      expect(mockPostMessage).not.toHaveBeenCalledTimes(3);
+    });
   });
 
-  xit('should not do anything if React Devtools is not installed', () => {
-    delete window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-    expect(() => linkFiber()).not.toThrowError();
-    expect(mockPostMessage).not.toHaveBeenCalled();
+  describe('document visibility', () => {
+    it('should initiate an event listener for visibility change', () => {
+      const addEventListenerSpy = jest.spyOn(document, 'addEventListener');
+      linkFiber();
+      expect(addEventListenerSpy).toHaveBeenCalledWith('visibilitychange', expect.any(Function));
+    });
   });
 
-  it('should send a message to the front end if the target application is a React App', () => {
-    linkFiber();
-    // the third call is from the onCommitFiberRoot() function
-    expect(mockPostMessage).toHaveBeenCalledTimes(3);
-    expect(mockPostMessage).toHaveBeenCalledWith(
-      {
-        action: 'devToolsInstalled',
-        payload: 'devToolsInstalled',
-      },
-      '*',
-    );
-    expect(mockPostMessage).toHaveBeenCalledWith(
-      {
-        action: 'aReactApp',
-        payload: 'aReactApp',
-      },
-      '*',
-    );
+  describe('throttledUpdateSnapshot', () => {
+    const mockUpdateAndSendSnapShotTree = jest.fn();
+
+    beforeEach(() => {
+      jest.useFakeTimers();
+      mockUpdateAndSendSnapShotTree.mockClear();
+    });
+
+    afterEach(() => {
+      jest.runOnlyPendingTimers();
+      jest.useRealTimers();
+    });
+
+    it('throttled function should be called with the correct arguments', () => {
+      const throttledUpdateSnapshot = throttle(mockUpdateAndSendSnapShotTree, 1000);
+      const onCoolDown = true;
+      const isCallQueued = true;
+      throttledUpdateSnapshot(onCoolDown, isCallQueued);
+
+      expect(mockUpdateAndSendSnapShotTree).toHaveBeenCalledWith(onCoolDown, isCallQueued);
+    });
+
+    it('should call updateAndSendSnapShotTree only once per 100ms', () => {
+      const throttledUpdateSnapshot = throttle(mockUpdateAndSendSnapShotTree, 100);
+      throttledUpdateSnapshot();
+      expect(mockUpdateAndSendSnapShotTree).toHaveBeenCalledTimes(1);
+      throttledUpdateSnapshot();
+      expect(mockUpdateAndSendSnapShotTree).toHaveBeenCalledTimes(1);
+      jest.advanceTimersByTime(100);
+      expect(mockUpdateAndSendSnapShotTree).toHaveBeenCalledTimes(2);
+    });
+
+    it('should call throttle after visibility change', () => {
+      const throttledUpdateSnapshot = throttle(mockUpdateAndSendSnapShotTree, 100);
+      // Simulate visibility change
+      const visibilityChangeEvent = new Event('visibilitychange');
+      document.dispatchEvent(visibilityChangeEvent);
+      expect(throttle).toHaveBeenCalled();
+    });
   });
 
-  xit('should not do anything if the target application is not a React App', () => {});
+  describe('addOneMoreStep', () => {
+    it('should add a new step to the current path in the snapshot tree', () => {});
+  });
 
-  xit('should initiate an event listener for visibility change', () => {});
+  describe('onCommitFiberRoot', () => {
+    it('should call throttledUpdateSnapshot', () => {
+      linkFiber();
+      const onCommitFiberRoot = window.__REACT_DEVTOOLS_GLOBAL_HOOK__?.onCommitFiberRoot;
+      expect(onCommitFiberRoot).toHaveBeenCalled();
+    });
+  });
 });

src/backend/__tests__/throttle.test.ts

@@ -18,7 +18,7 @@ describe('throttle unit tests', () => {
     expect(typeof result).toBe('function');
   });
 
-  test('throttled function should be called with the correct arguments', () => {
+  it('throttled function should be called with the correct arguments', () => {
     const throttledFunc = throttle(mockCallback, 1000);
 
     throttledFunc(1, 2, 3);

src/backend/routers/linkFiber.ts

@@ -47,17 +47,17 @@ export default function linkFiber(snapShot: Snapshot, mode: Status): () => void
    * @function throttledUpdateSnapshot - a function that will wait for at least MIN_TIME_BETWEEN_UPDATE ms, before updating the tree snapShot being displayed on the Chrome Extension.
    */
   const throttledUpdateSnapshot = throttle(async (fiberRoot) => {
-    console.log('linkFiber - RERENDER');
+    // console.log('linkFiber - RERENDER');
     // If not jumping
     if (!mode.jumping) {
-      console.log('linkFiber - SEND SNAPSHOT');
+      // console.log('linkFiber - SEND SNAPSHOT');
       // Update and Send SnapShot tree to front end
       updateAndSendSnapShotTree(snapShot, fiberRoot);
     }
 
     // If navigating to another route during jumping:
     else if (mode.navigating) {
-      console.log('linkFiber - NAVIGATING');
+      // console.log('linkFiber - NAVIGATING');
       // Reset the array containing update methods:
       componentActionsRecord.clear();
       // Obtain new update methods for the current route:
@@ -100,7 +100,6 @@ export default function linkFiber(snapShot: Snapshot, mode: Status): () => void
     const reactInstance = devTools.renderers.get(1);
     // If target application is not a React App, this will return undefined.
     if (!reactInstance) {
-      console.log('not a react instance', reactInstance);
       return;
     }
     // If target application is a React App, send a message to front end.
@@ -124,7 +123,7 @@ export default function linkFiber(snapShot: Snapshot, mode: Status): () => void
     // ---------OBTAIN THE INITIAL FIBEROOTNODE FROM REACT DEV TOOL-------------
     // Obtain the FiberRootNode, which is the first value in the FiberRoot Set:
     fiberRoot = devTools.getFiberRoots(1).values().next().value;
-    console.log('fiberRoot', fiberRoot);
+    // console.log('fiberRoot', fiberRoot);
 
     // ----------INITIALIZE THE TREE SNAP SHOT ON CHROME EXTENSION--------------
     throttledUpdateSnapshot(fiberRoot); // only runs on start up