d3 unit tests completed

Author: yujinkay

.eslintrc

@@ -3,7 +3,9 @@
   "root": true,
   "plugins": ["jest", "react"],
   "rules": {
-    "arrow-parens": [2, "as-needed"]
+    "arrow-parens": [2, "as-needed"],
+    "import/no-unresolved": "off",
+    "import/extensions": "off"
   },
   "env": {
     "es6": true,
@@ -22,8 +24,5 @@
     },
     "ecmaVersion": 2018,
     "sourceType": "module"
-  },
-  "settings": {
-    "import/no-unresolved": "off"
   }
 }

src/app/__tests__/Chart.test.jsx

@@ -1,52 +1,88 @@
-import React from 'react'; 
-import Chart from '../components/Chart'; 
-
-// Unit test cases for d3 functionality 
+import React from 'react';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+// eslint-disable-next-line import/no-named-as-default-member
+import Chart from '../components/Chart';
+// Unit test cases for d3 functionality
+configure({ adapter: new Adapter() });
 // Test the life cycle methods in Chart
 describe('Life cycle methods in Chart', () => {
+  let wrapper;
+  const props = {
+    hierarchy: 0,
+  };
+  // Set up wrapper
+  beforeEach(() => {
+    wrapper = mount(<Chart {...props} />);
+  });
+  // test componentDidMount
+  it('should call componentDidMount once', () => {
+    const instance = wrapper.instance();
+    jest.spyOn(instance, 'componentDidMount');
+    instance.componentDidMount();
+    expect(instance.componentDidMount).toHaveBeenCalledTimes(1);
+  });
+  // test maked3Tree within componentDidMount
   it('should call maked3Tree upon mounting', () => {
-    // Component should call maked3Tree upon mounting
-    // Use the mock function + .toBeCalled()
-   // Test the method in the component 
-   throw new Error(); 
-  }); 
-}); 
-
-// Test the root object and hierarchy 
+    const instance = wrapper.instance();
+    jest.spyOn(instance, 'maked3Tree');
+    instance.componentDidMount();
+    expect(instance.maked3Tree).toHaveBeenCalledTimes(1);
+  });
+  // test componentDidUpdate
+  it('should call componentDidUpdate once', () => {
+    const instance = wrapper.instance();
+    jest.spyOn(instance, 'componentDidUpdate');
+    instance.componentDidUpdate();
+    expect(instance.componentDidUpdate).toHaveBeenCalledTimes(1);
+  });
+  // test maked3Tree within componentDidUpdate
+  it('should call maked3Tree once upon updating', () => {
+    const instance = wrapper.instance();
+    jest.spyOn(instance, 'maked3Tree');
+    instance.componentDidUpdate();
+    expect(instance.maked3Tree).toHaveBeenCalledTimes(1);
+  });
+});
+// Test the root object and hierarchy
 describe('Root object', () => {
+  let wrapper;
+  const root = {};
+  const props = {
+    hierarchy: {
+      index: 1,
+      stateSnapshot: {},
+      children: [],
+    },
+  };
+  // Set up wrapper
+  beforeEach(() => {
+    wrapper = mount(<Chart {...props} />);
+  });
+
   it('should be a deep clone of the hierarchy', () => {
-    // object 'root' should be a deep clone of the hierarchy
-    // create an empty object to mimic root 
-      // i.e.: this.props.hierarchy !== root
-      // expect to !== this.props.hierarchy 
-      // expect to be a deep clone 
-      throw new Error(); 
-  }); 
-}); 
+    const instance = wrapper.instance();
+    instance.componentDidMount();
+    expect(typeof root).toBe(typeof props.hierarchy);
+    expect(root).not.toEqual(props.hierarchy);
+  });
+});
 
-// Test the maked3Tree method 
+// Test the maked3Tree method
 describe('maked3Tree method', () => {
-  it('should call removed3tree once', () => {
- // Should call function 'removed3tree' only once
-    // expect toBeCalled()
-    // expect toHaveBeenCalled()
-    throw new Error(); 
-  }); 
-}); 
-// Test the tooltip functionality in maked3Tree method 
-describe('tooltip functionality in maked3Tree', () => {
-// Should call appropriate function upon triggering 
-// a certain event on the tooltip div
-  // Should call appropriate function upon triggering mouseOver
-  it('should invoke tip.show on mouseOver', () => {
-    throw new Error(); 
-  }); 
-  // Should call appropriate function upon triggering mouseOut
-  it ('should invoke tip.hide on mouseOut', () => {
-    throw new Error(); 
-  }); 
-}); 
-
-
-
-    
+  let wrapper;
+  const props = {
+    hierarchy: 0,
+  };
+  // Set up wrapper
+  beforeEach(() => {
+    wrapper = mount(<Chart {...props} />);
+  });
+  // Test the invocation of removed3Tree within maked3Tree
+  it('should call removed3Tree once', () => {
+    const instance = wrapper.instance();
+    jest.spyOn(instance, 'removed3Tree');
+    instance.maked3Tree();
+    expect(instance.removed3Tree).toHaveBeenCalledTimes(1);
+  });
+});

src/app/__tests__/action.test.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import { configure, shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';

src/app/__tests__/dropdown.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable react/jsx-filename-extension */
 import React from 'react';
 import { configure, shallow } from 'enzyme';

src/app/components/Chart.jsx

@@ -10,9 +10,7 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable react/no-string-refs */
 import React, { Component } from 'react';
-// import PropTypes from 'prop-types';
 import * as d3 from 'd3';
-import d3Tip from 'd3-tip';
 
 let root = {};
 class Chart extends Component {
@@ -78,10 +76,10 @@ class Chart extends Component {
     const d3root = tree(hierarchy);
 
     g.selectAll('.link')
-    // root.links() gets an array of all the links,
-    // where each element is an object containing a
-    // source property, which represents the link's source node,
-    // and a target property, which represents the link's target node.
+      // root.links() gets an array of all the links,
+      // where each element is an object containing a
+      // source property, which represents the link's source node,
+      // and a target property, which represents the link's target node.
       .data(d3root.links())
       .enter()
       .append('path')
@@ -104,21 +102,36 @@ class Chart extends Component {
       });
 
     node.append('circle')
-      .attr('r', 10);
-
-    // creating a d3.tip method where the html has a function that returns
-    // the data we passed into tip.show from line 120
-    const tip = d3Tip()
-      .attr('class', 'd3-tip')
-      .html(function (d) { return 'State: ' + d; });
-
-    // invoking tooltip for nodes
-    node.call(tip);
-
+      .attr('r', 10)
+      .on('mouseover', function (d) {
+        d3.select(this)
+          .transition(100)
+          .duration(20)
+          .attr('r', 20);
+
+        tooltipDiv.transition()
+          .duration(200)
+          .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');
+      })
+      // eslint-disable-next-line no-unused-vars
+      .on('mouseout', function (d) {
+        d3.select(this)
+          .transition()
+          .duration(200)
+          .attr('r', 12);
+
+        tooltipDiv.transition()
+          .duration(500)
+          .style('opacity', 0);
+      });
     node
       .append('text')
       // adjusts the y coordinates for the node text
-      .attr('dy', '0.35em')
+      .attr('dy', '-1.5em')
       .attr('x', function (d) {
         // this positions how far the text is from leaf nodes (ones without children)
         // negative number before the colon moves the text of rightside nodes,
@@ -160,14 +173,12 @@ class Chart extends Component {
       g.attr('transform', d3.event.transform);
     }
 
+    // define the div for the tooltip
+    const tooltipDiv = d3.select('body').append('div')
+      .attr('class', 'tooltip')
+      .style('opacity', 0);
+
     // applying tooltip on mouseover and removes it when mouse cursor moves away
-    node
-      .on('mouseover', function (d) {
-        // without JSON.stringify, data will display as object Object
-        // console.log('d.data --> ', JSON.stringify(d.data))
-        tip.show(JSON.stringify(d.data.stateSnapshot.children[0].state), this);
-      })
-      .on('mouseout', tip.hide);
 
     function reinfeldTidierAlgo(x, y) {
       return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
@@ -179,8 +190,4 @@ class Chart extends Component {
   }
 }
 
-// Chart.propTypes = {
-//   snapshot: PropTypes.arrayOf(PropTypes.object).isRequired,
-// };
-
 export default Chart;

src/app/components/MainSlider.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable react/prop-types */
 
 import React from 'react';

src/app/styles/components/d3graph.css

@@ -43,7 +43,22 @@ body {
   stroke-width: 5px;
 }
 
-.d3-tip {
+div.tooltip {
+  position: absolute;
+  text-align: center;
+  display: inline;
+  max-width: 250px;
+  overflow-wrap: break-word;
+  padding: 6px;
+  color: #320a5c;
+  font-size: 12px;
+  font-family: "Overpass Mono", monospace;
+  background: #9cf4df;
+  border-radius: 8px;
+  pointer-events: none;
+}
+
+/* .d3-tip {
   line-height: 1;
   padding: 6px;
   background: #9cf4df;
@@ -53,7 +68,7 @@ body {
   max-width: 400px;
   overflow-wrap: break-word;
   font-family: "Overpass Mono", monospace;
-}
+} */
 
 /* Creates a small triangle extender for the tooltip
 .d3-tip:after {
@@ -68,8 +83,8 @@ body {
 } */
 
 /* Style northward tooltips specifically */
-.d3-tip.n:after {
+/* .d3-tip.n:after {
   margin: -2px 0 0 0;
   top: 100%;
   left: 0;
-}
+} */

src/extension/build/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Reactime",
-  "version": "3.0",
+  "version": "3.1",
   "devtools_page": "devtools.html",
   "description": "A Chrome extension that helps debug state in React applications by memorizing the state of components with every render.",
   "manifest_version": 2,