adding tests to linkFiber

Author: zacharydfreeman

src/backend/__tests__/linkFiber.test.tsx

@@ -1,105 +1,76 @@
-/* eslint-disable jest/no-disabled-tests */
-/* eslint-disable react/state-in-constructor */
-/* eslint-disable lines-between-class-members */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable import/order */
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable react/jsx-filename-extension */
-import { string } from 'prop-types';
-import React, { useState } from 'react';
-import { render } from 'react-dom';
-import linkFiberStart from '../routers/linkFiber';
+import linkFiberInitialization from '../routers/linkFiber';
+import { Snapshot, Status, FiberRoot } from '../types/backendTypes';
+import Tree from '../models/tree';
+import { DevTools } from '../types/linkFiberTypes';
+import updateAndSendSnapShotTree from '../routers/snapShot';
+import throttle from '../controllers/throttle';
+
+describe('linkFiber', () => {
+  let snapShot: Snapshot;
+  let mode: Status;
+  let linkFiber;
+  const mockPostMessage = jest.fn();
 
-const puppeteer = require('puppeteer');
-const SERVER = require('../puppeteerServer');
-
-// Apple uses port 5000 for Air Play.
-const APP = 'http://localhost:5001';
-
-let linkFiber;
-let mode;
-let snapShot;
-
-let browser;
-let page;
+  beforeEach(() => {
+    // Create snapshot and mode objects
+    snapShot = {
+      tree: new Tree('root', 'root'),
+    };
+    mode = {
+      jumping: false,
+      paused: false,
+      navigating: undefined,
+    };
 
-interface fooState {
-  foo: string;
-  setFoo?: (string) => void;
-}
-function App(): JSX.Element {
-  const [fooState, setFooState] = useState({
-    foo: 'bar',
+    linkFiber = linkFiberInitialization(snapShot, mode);
+    // Set up mock postMessage function
+    window.postMessage = mockPostMessage;
+
+    // Set up mock React DevTools global hook
+    (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+      renderers: new Map<1, { version: string }>(),
+      inject: jest.fn(),
+      supportsFiber: true,
+      onCommitFiberRoot: jest.fn(),
+      onCommitFiberUnmount: jest.fn(),
+      rendererInterfaces: {},
+    };
   });
-  return <div>{fooState}</div>;
-}
-
-describe('unit test for linkFiber', () => {
-  beforeAll(async () => {
-    await SERVER;
-    const args = puppeteer
-      .defaultArgs()
-      .filter((arg) => String(arg).toLowerCase() !== '--disable-extensions');
-    browser = await puppeteer.launch({
-      args: args.concat([
-        '--no-sandbox',
-        '--disable-setuid-sandbox',
-        '---extensions-on-chrome-urls',
-        '--whitelisted-extension-id=fmkadmapgofadopljbjfkapdkoienihi',
-        '--whitelisted-extension-id=hilpbahfbckghckaiafiiinjkeagmfhn',
-        '--load-extension=/mnt/d/Libraries/Documents/codeRepos/reactime/src/extension/build',
-      ]),
-      devtools: true,
-      ignoreDefaultArgs: true,
-    });
-
-    const c = await puppeteer.connect({
-      browserWSEndpoint: browser.wsEndpoint(),
-      ignoreHTTPSErrors: false,
-    });
 
-    page = await browser.newPage();
+  afterEach(() => {
+    jest.clearAllMocks();
+    delete window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
   });
 
-  afterAll(async () => {
-    await SERVER.close();
-
-    await browser.close();
+  it('link fiber should return a function', () => {
+    expect(typeof linkFiber).toBe('function');
   });
 
-  beforeEach(() => {
-    snapShot = { tree: null };
-    mode = {
-      jumping: false,
-      paused: false,
-    };
-    linkFiber = linkFiberStart(snapShot, mode);
+  it('returned function should not throw an error', () => {
+    expect(() => linkFiber()).not.toThrowError();
+  });
 
-    page.waitForFunction(
-      async (lf) => {
-        const container = document.createElement('div');
-        render(<App />, container);
-        lf(container);
+  it('should send message to front end that React DevTools is installed', () => {
+    linkFiber();
+    expect(mockPostMessage).toHaveBeenCalled();
+    expect(mockPostMessage).toHaveBeenCalledWith(
+      {
+        action: 'devToolsInstalled',
+        payload: 'devToolsInstalled',
       },
-      {},
-      linkFiber,
+      '*',
     );
   });
 
-  test('type of tree should be an object', () => {
-    expect(typeof snapShot.tree).toBe('object');
+  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();
   });
 
-  test.skip('linkFiber should mutate the snapshot tree property', () => {
-    expect(snapShot.tree.state).toBe('root');
-    expect(snapShot.tree.children).toHaveLength(1);
-    expect(snapShot.tree.children[0].component.state.foo).toBe('bar');
-  });
+  xit('should not do anything if the target application is not a React App', () => {});
 
-  test.skip('linkFiber should modify the setState of the stateful component', () => {
-    expect(snapShot.tree.children[0].component.setState.linkFiberChanged).toBe(true);
-  });
-});
+  xit('should send a message to the front end if the target application is a React App', () => {});
 
-SERVER.close();
+  xit('should initiate an event listener for visibility change', () => {});
+});

src/backend/__tests__/masterTree.test.tsx

@@ -4,6 +4,7 @@ import componentActionsRecord from '../models/masterState';
 import createTree from '../controllers/createTree/createTree';
 import Tree from '../models/tree';
 import React, { useState } from 'react';
+import { serializeState, scrubUnserializableMembers } from '../models/tree';
 import {
   allowedComponentTypes,
   nextJSDefaultComponent,
@@ -62,7 +63,7 @@ describe('master tree tests', () => {
     componentActionsRecord.clear();
   });
   describe('create tree tests', () => {
-    xit('should return a Tree if we pass in a empty fiber node', () => {
+    it('should return a Tree if we pass in a empty fiber node', () => {
       const tree = createTree(mockFiberNode);
       const children = tree.children;
 
@@ -73,7 +74,7 @@ describe('master tree tests', () => {
       expect(children[0].state).toEqual('stateless');
     });
 
-    xit('should filter out NextJS default components with no children or siblings', () => {
+    it('should filter out NextJS default components with no children or siblings', () => {
       for (let name of nextJSDefaultComponent) {
         mockFiberNode.elementType.name = name;
         const tree = createTree(mockFiberNode);
@@ -99,14 +100,14 @@ describe('master tree tests', () => {
       }
     });
 
-    xit('should filter out remix default components with no children or siblings', () => {
+    it('should filter out remix default components with no children or siblings', () => {
       for (let name of remixDefaultComponents) {
         mockFiberNode.elementType.name = name;
         const tree = createTree(mockFiberNode);
       }
     });
 
-    xit('should only traverse allowed components', () => {
+    it('should only traverse allowed components', () => {
       for (let tag of allowedComponentTypes) {
         mockFiberNode.elementType.tag = tag;
         const tree = createTree(mockFiberNode);
@@ -120,11 +121,38 @@ describe('master tree tests', () => {
     });
   });
 
-  xdescribe('add sibling', () => {});
+  describe('add sibling', () => {});
 
-  xdescribe('add children', () => {});
+  describe('add children', () => {});
 
-  xdescribe('createComponentActionsRecord', () => {
+  describe('serializing state', () => {
+    const dummyState = {
+      counter: 1,
+      playerOne: 'X',
+      board: [
+        ['', 'O', 'X'],
+        ['', 'O', 'X'],
+        ['O', 'X', ''],
+      ],
+    };
+
+    const circularState: { [key: string]: any } = {};
+    circularState.circ = circularState;
+
+    const serializedState = serializeState(dummyState);
+    const serializedCircularState = serializeState(circularState);
+
+    it('should create a deep copy of state', () => {
+      expect(dummyState).toEqual(serializedState);
+      expect(dummyState).not.toBe(serializedState);
+    });
+
+    it('should detect circular state', () => {
+      expect(serializedCircularState).toEqual('circularState');
+    });
+  });
+
+  describe('createComponentActionsRecord', () => {
     it('should save a new component action record if the Fiber node is a stateful class component', () => {
       mockFiberNode.tag = 1; // ClassComponent
       mockFiberNode.stateNode = {

src/backend/controllers/throttle.ts

@@ -78,3 +78,4 @@ export default function throttle(
     }
   };
 }
+

src/backend/controllers/timeJump.ts

@@ -67,7 +67,7 @@ async function updateReactFiberTree(
   const { index, state, hooksIndex, hooksState } = targetSnapshot.componentData;
   // ------------------------STATEFUL CLASS COMPONENT-------------------------
   // Check if it is a stateful class component
-  // Index can be zero => falsy value => DO NOT REMOVE UNDEFINED
+  // Index can be zero => falsy value => DO NOT REMOVE NULL
   if (index !== null) {
     // Obtain the BOUND update method at the given index
     const classComponent = componentActionsRecord.getComponentByIndex(index);
@@ -85,7 +85,7 @@ async function updateReactFiberTree(
   // Check if it is a stateful functional component
   // if yes, grab all relevant components for this snapshot by its index
   // call dispatch on each component passing in the corresponding currState value
-  //index can be zero => falsy value => DO NOT REMOVE UNDEFINED
+  //index can be zero => falsy value => DO NOT REMOVE NULL
   if (hooksIndex !== null) {
     // Obtain the array of BOUND update methods at the given indexes.
     // NOTE: each useState will be a separate update method. So if a component have 3 useState, we will obtain an array of 3 update methods.

src/backend/linkFiberOLD.ts

@@ -0,0 +1,96 @@
+// import React, { useState } from 'react';
+// import { render } from 'react-dom';
+// import linkFiberInitialization from '../routers/linkFiber';
+
+// const puppeteer = require('puppeteer');
+// const SERVER = require('../puppeteerServer');
+
+// // Apple uses port 5000 for Air Play.
+// const APP = 'http://localhost:5001';
+
+// let linkFiber;
+// let mode;
+// let snapShot;
+
+// let browser;
+// let page;
+
+// interface fooState {
+//   foo: string;
+//   setFoo?: (string) => void;
+// }
+// function App(): JSX.Element {
+//   const [fooState, setFooState] = useState({
+//     foo: 'bar',
+//   });
+//   return <div>{fooState}</div>;
+// }
+
+// describe('unit test for linkFiber', () => {
+//   beforeAll(async () => {
+//     await SERVER;
+//     const args = puppeteer
+//       .defaultArgs()
+//       .filter((arg) => String(arg).toLowerCase() !== '--disable-extensions');
+//     browser = await puppeteer.launch({
+//       args: args.concat([
+//         '--no-sandbox',
+//         '--disable-setuid-sandbox',
+//         '---extensions-on-chrome-urls',
+//         '--whitelisted-extension-id=fmkadmapgofadopljbjfkapdkoienihi',
+//         '--whitelisted-extension-id=hilpbahfbckghckaiafiiinjkeagmfhn',
+//         '--load-extension=/mnt/d/Libraries/Documents/codeRepos/reactime/src/extension/build',
+//       ]),
+//       devtools: true,
+//       ignoreDefaultArgs: true,
+//     });
+
+//     const c = await puppeteer.connect({
+//       browserWSEndpoint: browser.wsEndpoint(),
+//       ignoreHTTPSErrors: false,
+//     });
+
+//     page = await browser.newPage();
+//   });
+
+//   afterAll(async () => {
+//     await SERVER.close();
+
+//     await browser.close();
+//   });
+
+//   beforeEach(() => {
+//     snapShot = { tree: null };
+//     mode = {
+//       jumping: false,
+//       paused: false,
+//     };
+//     linkFiber = linkFiberInitialization(snapShot, mode);
+
+//     page.waitForFunction(
+//       async (lf) => {
+//         const container = document.createElement('div');
+//         render(<App />, container);
+//         lf(container);
+//       },
+//       {},
+//       linkFiber,
+//     );
+//   });
+
+//   it('type of tree should be an object', () => {
+//     expect(typeof snapShot.tree).toBe('object');
+//   });
+
+//   it('linkFiber should mutate the snapshot tree property', () => {
+//     expect(snapShot.tree.state).toBe('root');
+//     expect(snapShot.tree.children).toHaveLength(1);
+//     expect(snapShot.tree.children[0].component.state.foo).toBe('bar');
+//   });
+
+//   it('linkFiber should modify the setState of the stateful component', () => {
+//     expect(snapShot.tree.children[0].component.setState.linkFiberChanged).toBe(true);
+//   });
+// });
+
+// SERVER.close();