Merge pull request #143 from open-source-labs/ast-unit-test

Final merge

Author: yujinkay

.gitignore

@@ -9,3 +9,4 @@ src/extension/build.zip
 src/extension/build.crx
 src/extension/build/key.pem
 bower_components
+package/__tests__/astParser.test.js

package/__tests__/astParser.test.js

@@ -1,38 +1,58 @@
-// import { configure, shallow } from 'enzyme';
-
-// Test 1: Should take in a function definition with 1 hook
-// and return an object with the getter / setter
-// EXAMPLE INPUT FOR TEST
-/**
- * function UseStateHookTest() {
- *   const [testCount, setTestCount] = useState(0);
- *   return (
- *     <div>
- *       <p>You clicked this {useStateCount} times</p>
- *       <button onClick={() => setTestCount(testCount + 1)}>+1</button>
- *       <button onClick={() => setTestCount(testCount - 1)}>-1</button>
- *       <hr />
- *   </div>
- *   );
- * }
-*/
-
-// EXPECTED RESULT of astParser(input)
-/**
- * {
- *  _useState: "testCount",
- *  _useState2: "setTestCount"
- * }
- */
-
-// TEST 2: Should take in multiple function definitions
-// with hooks and return an object with all 4 properties
-// TEST 3: Should ignore any non-hook definitions
-// Test 4: Should return an empty object if no hooks found
-// Test 5: Should throw an error if input is invalid javascript
-
-describe('placeholder', () => {
-  it.skip('placeholder for tests', () => {
-    expect(1 + 1).toEqual(2);
+/* eslint-disable jest/no-disabled-tests */
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable react/button-has-type */
+/* 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 toJson from 'enzyme-to-json';
+import astParser from '../astParser';
+
+// Newer Enzyme versions require an adapter to a particular version of React
+configure({ adapter: new Adapter() });
+
+describe('AST Unit Tests', () => {
+  describe('astParser', () => {
+    it.skip('Should return object with one getter/setter for a single useState instance', () => {
+      const useState = 'const singleUseStateTest = () => { const [testCount, setTestCount] = useState(0); return ( <div> <p> You clicked this {testCount} times </p> <button onClick={() => setTestCount(testCount + 1)}>+1</button> <button onClick={() => setTestCount(testCount - 1)}>-1</button> <hr /> </div> )';
+
+      const expectedObject = {
+        _useState: 'testCount',
+        _useState2: 'setTestCount',
+      };
+      expect(astParser(useState)).toEqual(expectedObject);
+    });
+
+    it.skip('Should output the right number of properties when taking in multiple function definitions', () => {
+      const useState = 'const singleUseStateTest = () => { const [testCount, setTestCount] = useState(0); const [age, setAge] = useState(20); return ( <div> <p> You clicked this {testCount} times </p> <button onClick={() => setTestCount(testCount + 1)}>+1</button> <button onClick={() => setTestCount(testCount - 1)}>-1</button> <p> You are {age} years old! </p> <button onClick={() => setAge(age + 1)}>Get Older</button> <hr /> </div>)';
+
+      const expectedObject = {
+        _useState: 'testCount',
+        _useState2: 'setTestCount',
+        _useState3: 'age',
+        _useState4: 'setAge',
+      };
+      expect(astParser(useState)).toEqual(expectedObject);
+      expect(Object.keys(astParser(useState))).toHaveLength(4);
+    });
+
+    it.skip('Should ignore any non-hook definitions', () => {
+      const useState = 'const singleUseStateTest = () => { const [testCount, setTestCount] = useState(0); const age = 20; return ( <div> <p> You clicked this {testCount} times </p> <button onClick={() => setTestCount(testCount + 1)}>+1</button> <button onClick={() => setTestCount(testCount - 1)}>-1</button> <p> You are {age} years old! </p> <button onClick={age => age + 1}>Get Older</button> <hr /> </div>)';
+
+      expect(Object.keys(astParser(useState))).toHaveLength(2);
+    });
+
+    it.skip('Should return an empty object if no hooks found', () => {
+      const useState = 'const singleUseStateTest = () => { const age = 20; return ( <div> <p> You are {age} years old! </p> <button onClick={age => age + 1}>Get Older</button> <hr /> </div>)';
+
+      expect(astParser(useState)).toBe({});
+    });
+
+    it.skip('Should throw an error if input is invalid javascript', () => {
+      const useState = 'const singleUseStateTest = () => { age: 20; return ( <div> <p> You are {age} years old! </p> <button onClick={age + 1}>Get Older</button></div>) }';
+
+      expect(astParser(useState)).toThrow();
+    });
   });
 });

src/app/components/Chart.jsx

@@ -102,30 +102,30 @@ class Chart extends Component {
       });
 
     node.append('circle')
-      .attr('r', 10)
+      .attr('r', 5)
       .on('mouseover', function (d) {
         d3.select(this)
           .transition(100)
           .duration(20)
-          .attr('r', 20);
+          .attr('r', 10);
 
         tooltipDiv.transition()
-          .duration(200)
+          .duration(50)
           .style('opacity', 0.9);
 
         tooltipDiv.html(JSON.stringify(d.data.stateSnapshot.children[0].state), this)
-          .style('left', (d3.event.pageX) + 'px')
-          .style('top', (d3.event.pageY - 28) + 'px');
+          .style('left', (d3.event.pageX - 90) + 'px')
+          .style('top', (d3.event.pageY - 65) + 'px');
       })
       // eslint-disable-next-line no-unused-vars
       .on('mouseout', function (d) {
         d3.select(this)
           .transition()
-          .duration(200)
-          .attr('r', 12);
+          .duration(300)
+          .attr('r', 5);
 
         tooltipDiv.transition()
-          .duration(500)
+          .duration(400)
           .style('opacity', 0);
       });
     node

src/app/styles/components/d3graph.css

@@ -40,7 +40,7 @@ body {
   fill: none;
   stroke: #3853ea;
   stroke-opacity: 0.4;
-  stroke-width: 5px;
+  stroke-width: 3px;
 }
 
 div.tooltip {

src/extension/background.js

@@ -161,11 +161,12 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       if (!persist) {
         tabsObj[tabId].snapshots.splice(1);
         // reset children in root node to reset graph
-        if (tabsObj[tabId].hierarchy) tabsObj[tabId].hierarchy.children = [];
+        // if (tabsObj[tabId].hierarchy)
+        tabsObj[tabId].hierarchy.children = [];
         // reassigning pointer to the appropriate node to branch off of
         tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy;
         // reset index
-        tabsObj[tabId].index = 0;
+        tabsObj[tabId].index = 1;
 
         // send a message to devtools
         portsArr.forEach(bg => bg.postMessage({