Merge pull request #13 from hienqn/addingtest

Adding test for tree and masterState

Author: hienqn

package.json

@@ -15,7 +15,7 @@
   "scripts": {
     "build": "webpack --mode production",
     "dev": "webpack --mode development --watch",
-    "test": "jest --verbose --coverage --watchAll --forceExit",
+    "test": "jest --verbose --coverage --watchAll --runInBand --detectOpenHandles --forceExit",
     "docker-test-lint": "eslint --ext .js --ext .jsx src",
     "docs": "typedoc --json docs --inputFiles src/app --inputFiles src/backend --readme docs/readme.md"
   },

src/backend/__tests__/chromium.test.ts

@@ -0,0 +1,21 @@
+// const puppeteer = require('puppeteer');
+// const path = import('path');
+
+// test('Adds two numbers', () => {
+//   const sum = 1+2;
+//   expect(sum).toEqual(3);
+// })
+
+// test('We can launch a browser', async () => {
+//   const browser = await puppeteer.launch({
+//     headless: false
+//   });
+
+//   const page = await browser.newPage();
+//   await page.goto('localhost:3000');
+//   // console.log(await page.addScriptTag({path: 'src/extension/build/bundles/backend.bundle.js'}));
+//   // console.log(page);
+//   // const script = document.createElement('script');
+//   // script.setAttribute('type', 'text/javascript');
+//   // script.setAttribute('src', 'file');
+// })

src/backend/__tests__/helpers.test.ts

@@ -5,13 +5,13 @@
 /* eslint-disable react/jsx-filename-extension */
 /* eslint-disable jest/valid-describe */
 /* eslint-disable react/react-in-jsx-scope */
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+// import { configure } from 'enzyme';
+// import Adapter from 'enzyme-adapter-react-16';
 // import toJson from 'enzyme-to-json';
 import { throttle, getHooksNames } from '../helpers';
 
 // Newer Enzyme versions require an adapter to a particular version of React
-configure({ adapter: new Adapter() });
+// configure({ adapter: new Adapter() });
 
 // Replace any setTimeout functions with jest timer
 jest.useFakeTimers();
@@ -41,19 +41,15 @@ describe('AST Unit Tests', () => {
       jest.advanceTimersByTime(20);
       throttledMockFunc();
       expect(mockFunc).toHaveBeenCalledTimes(1);
-
       jest.advanceTimersByTime(941);
-
       expect(mockFunc).toHaveBeenCalledTimes(2);
     });
 
     it('Should only invoke function', () => {
       // Because we haven't invoked returned function from throttle
       // mock func should not have been called yet
       expect(mockFunc).not.toHaveBeenCalled();
-
       throttledMockFunc();
-
       expect(mockFunc).toHaveBeenCalledTimes(1);
     });
   });

src/backend/__tests__/masterState.test.ts

@@ -0,0 +1,35 @@
+import masterState from '../masterState'
+import {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  HookStateItem,
+  HookStates
+} from '../types/backendTypes';
+
+describe('Testing masterState functionality', () => {
+  let hookOne : HookStateItem = {state: 'A', component: 'counter1'};
+  let hookTwo : HookStateItem = {state: 'B', component: 'counter2'};
+  let allHooks : HookStates = [hookOne, hookTwo];
+  masterState.saveNew(hookOne.state, hookOne.component);
+  masterState.saveNew(hookTwo.state, hookTwo.component);
+
+  describe('Save new', () => {
+    masterState.saveNew(hookOne.state, hookOne.component);
+    masterState.saveNew(hookTwo.state, hookTwo.component);
+  })
+
+  describe('getComponentByIndex', () => {
+    it('should be able to get both hook states component', () => {
+      expect(masterState.getComponentByIndex(0)).toEqual(hookOne.component);
+      expect(masterState.getComponentByIndex(1)).toEqual(hookTwo.component);
+    })
+  })
+
+  describe('getRecordByIndex', () => {
+    it('should be able to get both hook states', () => {
+      expect(masterState.getRecordByIndex(0)).toEqual(hookOne);
+      expect(masterState.getRecordByIndex(1)).toEqual(hookTwo);
+    })
+  })
+
+  
+})

src/backend/__tests__/tree.test.ts

@@ -0,0 +1,100 @@
+import Tree from '../tree';
+import { networkInterfaces } from 'os';
+
+describe('Tree unit test', () => {
+  describe('Constructor', () => {
+    let newTree = new Tree({});
+
+    it('should be able to create a newTree', () => {
+      expect(newTree.state).toEqual({});
+    })
+
+    it('should have 5 properties', () => {
+      expect(newTree).toHaveProperty('state');
+      expect(newTree).toHaveProperty('name');
+      expect(newTree).toHaveProperty('componentData');
+      expect(newTree).toHaveProperty('children');
+      expect(newTree).toHaveProperty('parent');
+    })
+
+    it('has name default value as stateless', () => {
+      expect(newTree.name).toBe('nameless');
+    })
+
+    it('has children as an empty array', () => {
+      expect(newTree.children).toEqual([]);
+    })
+  })
+
+
+  describe('Adding children', () => {
+    let newTree = new Tree({});
+    let returnChild = newTree.addChild('stateful', 'child', {});
+  
+    it('should be able to add a child', () => {
+      expect(typeof newTree.children).toEqual('object');
+      expect(Array.isArray(newTree.children)).toBeTruthy;
+    })
+
+    it(`its parent should be newTree`, () => {
+      expect(returnChild.parent).toEqual(newTree);
+    })
+
+    it('parent now contains an array of children and each children is a valid tree', () => {
+      expect(newTree.children[0]).toHaveProperty('state');
+      expect(newTree.children[0]).toHaveProperty('name');
+      expect(newTree.children[0]).toHaveProperty('componentData');
+    })
+  })
+
+  describe('Adding sibling', () => {
+    let newTree = new Tree({});
+    let returnChild = newTree.addChild('stateful', 'child', {});
+    let returnSibling = returnChild.addSibling('stateful', 'child', {});
+
+    it('the tree now has 2 children', () => {
+      expect(newTree.children.length).toBe(2);
+    })
+
+    it('both of the children has the parent as this tree', () => {
+      expect(newTree.children[0]).toEqual(returnChild);
+      expect(newTree.children[1]).toEqual(returnSibling);
+    })
+
+    it('both of the children has the parent as this tree', () => {
+      expect(returnChild.parent).toEqual(newTree);
+      expect(returnSibling.parent).toEqual(newTree);
+    })  
+  })
+
+
+  describe('Adding sibling', () => {
+    let newTree = new Tree({});
+    let returnChild = newTree.addChild('stateful', 'child', {});
+    let returnSibling = returnChild.addSibling('stateful', 'child', {});
+    it('the tree now has 2 children', () => {
+      expect(newTree.children.length).toBe(2);
+    })
+
+    it('both of the children has the parent as this tree', () => {
+      expect(newTree.children[0]).toEqual(returnChild);
+      expect(newTree.children[1]).toEqual(returnSibling);
+    })
+
+    it('both of the children has the parent as this tree', () => {
+      expect(returnChild.parent).toEqual(newTree);
+      expect(returnSibling.parent).toEqual(newTree);
+    })  
+  })
+
+
+  describe('Copy & clean tree', () => {
+    let newTree = new Tree({});
+    let returnChild = newTree.addChild('stateful', 'child', {});
+    let returnSibling = returnChild.addSibling('stateful', 'child', {});
+    let copy = newTree.cleanTreeCopy();
+    it('its copy has 2 children', () => {
+      expect(copy.children.length).toEqual(2);
+    })
+  })
+})

src/backend/linkFiber.ts

@@ -66,6 +66,7 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     if (!snap.tree) {
       snap.tree = new Tree('root', 'root');
     }
+
     const payload = snap.tree.cleanTreeCopy(); // snap.tree.getCopy();
 
     window.postMessage(
@@ -309,7 +310,7 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
       circularComponentTable.add(sibling);
       createTree(sibling, newNode, true);
     }
-
+    
     return tree;
   }
 
@@ -318,9 +319,8 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
       const { current } = fiberRoot;
       circularComponentTable.clear();
       snap.tree = createTree(current);
+      console.log(snap.tree);
     }
-
-
     sendSnapshot();
   }
 

src/backend/timeJump.ts

@@ -64,7 +64,6 @@ export default (origin, mode) => {
         const hookState = Object.values(hook);
         console.log('target', target);
         if (hooksComponent && hooksComponent.dispatch) {
-
           hooksComponent.dispatch(hookState[0]);
         }
       });
@@ -76,8 +75,6 @@ export default (origin, mode) => {
         jump(child);
       }
     });
-
-    // }
   }
 
   return (target, firstCall = false) => {

src/backend/tree.ts

@@ -97,39 +97,17 @@ class Tree {
     // copy.children = this.children;
 
     // creates copy of each child of the present node
-
     copy.children = this.children.map((child: Tree): Tree | string => {
       if (!circularComponentTable.has(child)) {
         return child.cleanTreeCopy();
       }
       return 'circular';
     });
-
-
+    
     // returns copy
     copyInstances--;
     return copy;
   }
-
-  // print out the tree structure in the console
-  // DEV: Process may be different for useState components
-  // BUG FIX: Don't print the Router as a component
-  // Change how the children are printed
-//   print() {
-//     const children = ['children: '];
-//     // DEV: What should we push instead for components using hooks (it wouldn't be state)
-//     // if this.children is always initialized to empty array, when would there ever be anything to iterate through here?
-//     this.children.forEach((child: any) => {
-//       children.push(child.state || child.component.state);
-//     });
-//     if (this.name) console.log('this.name if exists: ', this.name);
-//     if (children.length === 1) {
-//       console.log(`children length 1. ${this.state ? 'this.state: ' : 'this.component.state: '}`, this.state || this.component.state);
-//     } else console.log(`children length !== 1. ${this.state ? 'this.state: ' : 'this.component.state, children: '}`, this.state || this.component.state, ...children);
-//     this.children.forEach((child: any) => {
-//       child.print();
-//     });
-//   }
 }
 
 export default Tree;