Merge pull request #136 from open-source-labs/d3-testing

D3 testing completed + additional code base cleanup

Author: andynullwong

package.json

@@ -12,8 +12,10 @@
   },
   "keywords": [
     "react",
-    "time",
-    "time travel",
+    "useState",
+    "state",
+    "debug",
+    "react dev tool",
     "reactime"
   ],
   "repository": {

package/__tests__/linkFiber.test.js

@@ -20,17 +20,6 @@ class App extends Component {
   }
 }
 
-// Need to create a functioanl component instance to test
-// Would need to be revised but here's the gist
-// const funcComponent = () => {
-//     const [ number, setNumber ] = useState(0);
-//     const newNumber = setNumber(1);
-
-//     return (
-//       <div>{newNumber}</div>
-//     )
-// }
-
 describe('unit test for linkFiber', () => {
   beforeEach(() => {
     snapShot = { tree: null };

package/__tests__/timeJump.test.js

@@ -20,10 +20,6 @@ class FiberNode {
   }
 }
 
-// MVP FEATURE: Additional Testing
-// Testing for useState and useContext
-
-
 describe('unit testing for timeJump.js', () => {
   let timeJump;
   let snapShot;

src/app/__tests__/Chart.test.jsx

@@ -1,27 +1,88 @@
-// import TestRunner from 'jest-runner';
-
-// Unit Test Cases for Charts
-// description: lifecycle methods
-// Component should call make3dTree upon mounting
-// object 'root' should be a deep clone of the snapshot
-// i.e.: this.props.snapshot !== root
-
-// description: maked3Tree
-// Should call function 'removed3tree' only once
-// Should call appropriate function upon triggering a certain event on the tooltip div
-// i.e.:
-// 'mouseover' event -> 'tipMouseover' function
-// 'mouseout' event -> 'tipMouseout' function
-// Should call appropriate function upon triggering a certain event on a node
-// (nested under the 'update' function)
-// i.e.:
-// 'mouseover' event -> 'mouseover' function
-// 'mouseout' event -> 'mouseout' function
-// 'click' event -> 'click' function
-// Should call function 'update' at least once
+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', () => {
+    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} />);
+  });
 
-describe('placeholder', () => {
-  it.skip('placeholder for tests', () => {
-    expect(1 + 1).toEqual(2);
+  it('should be a deep clone of the hierarchy', () => {
+    const instance = wrapper.instance();
+    instance.componentDidMount();
+    expect(typeof root).toBe(typeof props.hierarchy);
+    expect(root).not.toEqual(props.hierarchy);
   });
 });
+
+// Test the maked3Tree method
+describe('maked3Tree method', () => {
+  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/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 {
@@ -192,8 +190,4 @@ class Chart extends Component {
   }
 }
 
-// Chart.propTypes = {
-//   snapshot: PropTypes.arrayOf(PropTypes.object).isRequired,
-// };
-
 export default Chart;

src/app/containers/ActionContainer.jsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/no-array-index-key */
 import React from 'react';
-// import SwitchStateDropdown from '../components/SwitchState';
 import Action from '../components/Action';
 
 import { emptySnapshots } from '../actions/actions';