adding tree test

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",
     "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

@@ -1,15 +1,21 @@
-const puppeteer = require('puppeteer');
+// const puppeteer = require('puppeteer');
+// const path = import('path');
 
-test('Adds two numbers', () => {
-  const sum = 1+2;
-  expect(sum).toEqual(3);
-})
+// 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
-  });
+// test('We can launch a browser', async () => {
+//   const browser = await puppeteer.launch({
+//     headless: false
+//   });
 
-  const page = await browser.newPage();
-  await page.goto('localhost:3000');
-})
+//   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__/tree.test.ts

@@ -0,0 +1,69 @@
+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('its children can recognize the parent, () => {
+      expect(returnChild.parent).toEqual(newTree);
+      expect(returnSibling.parent).toEqual(newTree);
+    })
+  })
+})

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/tree.ts

@@ -110,26 +110,6 @@ class Tree {
     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;