testing progress

Author: zacharydfreeman

src/backend/__tests__/linkFiber.test.tsx

@@ -35,7 +35,7 @@ function App(): JSX.Element {
   return <div>{fooState}</div>;
 }
 
-xdescribe('unit test for linkFiber', () => {
+describe('unit test for linkFiber', () => {
   beforeAll(async () => {
     await SERVER;
     const args = puppeteer

src/backend/__tests__/masterTree.test.ts renamed to src/backend/__tests__/masterTree.test.tsx

@@ -3,6 +3,7 @@ import { Fiber } from '../types/backendTypes';
 import componentActionsRecord from '../models/masterState';
 import createTree from '../controllers/createTree/createTree';
 import Tree from '../models/tree';
+import React, { useState } from 'react';
 import {
   allowedComponentTypes,
   nextJSDefaultComponent,
@@ -14,6 +15,17 @@ describe('master tree tests', () => {
   let mockFiberNode: Fiber;
   let mockSiblingNode: Fiber;
   let mockChildNode: Fiber;
+  function MockFunctionalComponent() {
+    const [count, setCount] = useState(0);
+    return (
+      <div>
+        <button className='increment' onClick={() => setCount(count + 1)}>
+          You clicked me {count} times.
+        </button>
+      </div>
+    );
+  }
+
   beforeEach(() => {
     // create a mock Fiber node with relevant properties
     mockFiberNode = {
@@ -31,23 +43,26 @@ describe('master tree tests', () => {
       _debugHookTypes: [],
     };
 
+    // create a mock child Fiber node with relevant properties for class component
     mockChildNode = {
       ...mockFiberNode,
       tag: 1,
       elementType: { name: 'child' },
       stateNode: { state: { counter: 0 }, props: { start: 0 } },
     };
+
+    // create a mock sibling Fiber node with relevant properties for class component
     mockSiblingNode = {
       ...mockFiberNode,
       tag: 0,
-      elementType: { name: 'sibling' },
+      elementType: MockFunctionalComponent,
       memoizedState: { memoizedState: 1, queue: [{}, { state: { value: 'test' } }], next: null },
     };
     // clear the saved component actions record
     componentActionsRecord.clear();
   });
   describe('create tree tests', () => {
-    it('should return a Tree if we pass in a empty fiber node', () => {
+    xit('should return a Tree if we pass in a empty fiber node', () => {
       const tree = createTree(mockFiberNode);
       const children = tree.children;
 
@@ -58,7 +73,7 @@ describe('master tree tests', () => {
       expect(children[0].state).toEqual('stateless');
     });
 
-    it('should filter out NextJS default components with no children or siblings', () => {
+    xit('should filter out NextJS default components with no children or siblings', () => {
       for (let name of nextJSDefaultComponent) {
         mockFiberNode.elementType.name = name;
         const tree = createTree(mockFiberNode);
@@ -76,19 +91,22 @@ describe('master tree tests', () => {
         const children = tree.children;
         const firstChild = children[0];
         const secondChild = children[1];
+        console.log('First Child', firstChild);
+        console.log('Second Child', secondChild);
         expect(children.length).toEqual(2);
-        // expect(firstChild.componentData?.state).toEqual(2);
+        expect(firstChild.componentData.state).toEqual({ counter: 0 });
+        expect(secondChild.componentData.hooksState);
       }
     });
 
-    it('should filter out remix default components with no children or siblings', () => {
+    xit('should filter out remix default components with no children or siblings', () => {
       for (let name of remixDefaultComponents) {
         mockFiberNode.elementType.name = name;
         const tree = createTree(mockFiberNode);
       }
     });
 
-    it('should only traverse allowed components', () => {
+    xit('should only traverse allowed components', () => {
       for (let tag of allowedComponentTypes) {
         mockFiberNode.elementType.tag = tag;
         const tree = createTree(mockFiberNode);
@@ -102,11 +120,11 @@ describe('master tree tests', () => {
     });
   });
 
-  describe('add sibling', () => {});
+  xdescribe('add sibling', () => {});
 
-  describe('add children', () => {});
+  xdescribe('add children', () => {});
 
-  describe('createComponentActionsRecord', () => {
+  xdescribe('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/createTree/createTree.ts

@@ -2,6 +2,7 @@
 import {
   // object with tree structure
   Fiber,
+  ComponentData,
 } from '../../types/backendTypes';
 import {
   FunctionComponent,
@@ -118,24 +119,17 @@ export default function createTree(currentFiberNode: Fiber): Tree {
 
     // --------------INITIALIZE OBJECT TO CONTAIN COMPONENT DATA---------------
     let newState: 'stateless' | object = 'stateless';
-    let componentData: {
-      actualDuration?: number;
-      actualStartTime?: number;
-      selfBaseDuration?: number;
-      treeBaseDuration?: number;
-      props: {};
-      context: {};
-      state?: {};
-      hooksState?: {};
-      hooksIndex?: number[];
-      index?: number;
-    } = {
+    let componentData: ComponentData = {
       actualDuration,
       actualStartTime,
       selfBaseDuration,
       treeBaseDuration,
       props: {},
       context: {},
+      state: null,
+      index: null,
+      hooksState: null,
+      hooksIndex: null,
     };
 
     // ---------------APPEND PROP DATA FROM REACT DEV TOOL----------------------
@@ -227,7 +221,10 @@ export default function createTree(currentFiberNode: Fiber): Tree {
           // We then store them along with the corresponding memoizedState.queue,
           // which includes the dispatch() function we use to change their state.
           const hooksStates = getHooksStateAndUpdateMethod(memoizedState);
+          // console.log('hooksState');
+          console.log(componentName, elementType);
           const hooksNames = getHooksNames(elementType.toString());
+          console.log('TESThooksNames', hooksNames);
           // Intialize state & index:
           // newState.hooksState = [];
           componentData.hooksState = {};

src/backend/controllers/createTree/statePropExtractors.ts

@@ -213,46 +213,53 @@ export function getHooksStateAndUpdateMethod(memoizedState: Fiber['memoizedState
  */
 export function getHooksNames(elementType: string): { hookName: string; varName: string }[] {
   // Initialize empty object to store the setters and getter
+  // Abstract Syntax Tree
   let AST: any;
   try {
-    AST = JSXParser.parse(elementType);
+    AST = JSXParser.parse(elementType).body;
   } catch (e) {
     throw Error('Error occurs at helpers getHooksName.ts Cannot parse functional component.');
   }
+  console.log('parsed JSX', AST);
   // Begin search for hook names, only if ast has a body property.
-  AST = AST.body;
-
-  // Statements get all the names of the hooks. For example: useCount, useWildcard, ...
-  const statements: { hookName: string; varName: string }[] = [];
-  /** All module exports always start off as a single 'FunctionDeclaration' type
-   * Other types: "BlockStatement" / "ExpressionStatement" / "ReturnStatement"
-   * Iterate through AST of every function declaration
-   * Check within each function declaration if there are hook declarations & variable name declaration */
-  AST.forEach((functionDec: any) => {
-    let declarationBody: any;
-    if (functionDec.expression?.body) declarationBody = functionDec.expression.body.body;
-    // check if functionDec.expression.body exists, then set declarationBody to functionDec's body
-    else declarationBody = functionDec.body?.body ?? [];
-    // Traverse through the function's funcDecs and Expression Statements
-    declarationBody.forEach((elem: any) => {
-      // Hooks will always be contained in a variable declaration
-      if (elem.type === 'VariableDeclaration') {
-        // Obtain the declarations array from elem.
-        const { declarations } = elem;
-        // Obtain the reactHook:
-        const reactHook: string = declarations[0]?.init?.callee?.expressions[1]?.property?.name;
-        if (reactHook === 'useState') {
-          // Obtain the variable being set:
-          let varName: string = declarations[1]?.id?.name;
-          // Obtain the setState method:
-          let hookName: string = declarations[2]?.id?.name;
-          // Push reactHook & varName to statements array
-          statements.push({ hookName, varName });
+  try {
+    // Statements get all the names of the hooks. For example: useCount, useWildcard, ...
+    const statements: { hookName: string; varName: string }[] = [];
+    /** All module exports always start off as a single 'FunctionDeclaration' type
+     * Other types: "BlockStatement" / "ExpressionStatement" / "ReturnStatement"
+     * Iterate through AST of every function declaration
+     * Check within each function declaration if there are hook declarations & variable name declaration */
+    AST.forEach((functionDec: any) => {
+      let declarationBody: any;
+      if (functionDec.expression?.body) declarationBody = functionDec.expression.body.body;
+      // check if functionDec.expression.body exists, then set declarationBody to functionDec's body
+      else declarationBody = functionDec.body?.body ?? [];
+      console.log('declaration body', declarationBody);
+      // Traverse through the function's funcDecs and Expression Statements
+      declarationBody.forEach((elem: any) => {
+        // Hooks will always be contained in a variable declaration
+        if (elem.type === 'VariableDeclaration') {
+          // Obtain the declarations array from elem.
+          const { declarations } = elem;
+          // Obtain the reactHook:
+          console.log('Callee', declarations[0].init.callee);
+          const reactHook: string = declarations[0]?.init?.callee?.expressions[1]?.property?.name;
+          if (reactHook === 'useState') {
+            // Obtain the variable being set:
+            let varName: string = declarations[1]?.id?.name;
+            // Obtain the setState method:
+            let hookName: string = declarations[2]?.id?.name;
+            // Push reactHook & varName to statements array
+            statements.push({ hookName, varName });
+          }
         }
-      }
+      });
     });
-  });
-  return statements;
+    return statements;
+  } catch (err) {
+    console.log(err);
+    throw new Error();
+  }
 }
 
 // DEPERACATED: After React DEV Tool Update. This function no longer works. Keep for history record

src/backend/controllers/timeJump.ts

@@ -68,7 +68,7 @@ async function updateReactFiberTree(
   // ------------------------STATEFUL CLASS COMPONENT-------------------------
   // Check if it is a stateful class component
   // Index can be zero => falsy value => DO NOT REMOVE UNDEFINED
-  if (index !== undefined) {
+  if (index !== null) {
     // Obtain the BOUND update method at the given index
     const classComponent = componentActionsRecord.getComponentByIndex(index);
     // Update component state
@@ -86,7 +86,7 @@ async function updateReactFiberTree(
   // 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
-  if (hooksIndex !== undefined) {
+  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.
     const functionalComponent = componentActionsRecord.getComponentByIndexHooks(hooksIndex);

src/backend/models/tree.ts

@@ -6,6 +6,7 @@
 /* eslint-disable no-console */
 /* eslint-disable no-param-reassign */
 import { Route } from './routes';
+import { ComponentData } from '../types/backendTypes';
 
 // ComponentNames is used to store a mapping between a component's unique identifier and its name. This mapping is used to reconstruct the component instances during deserialization.
 let componentNames = {};
@@ -52,7 +53,7 @@ class Tree {
 
   name: string;
 
-  componentData: {};
+  componentData: ComponentData;
 
   children: Tree[];
 

src/backend/types/backendTypes.ts

@@ -58,13 +58,16 @@ export interface MsgData {
  * @member props -
  */
 export interface ComponentData {
-  index?: number;
-  hooksIndex?: number;
   actualDuration?: number;
   actualStartTime?: number;
   selfBaseDuration?: number;
   treeBaseDuration?: number;
-  props?: any;
+  props: {};
+  context: {};
+  state: {} | null;
+  hooksState: {} | null;
+  hooksIndex: number[] | null;
+  index: number | null;
 }
 
 /**