Merge branch 'dev' into sierra

Author: starkspark

package-lock.json

@@ -1,32 +1,69 @@
-import { shallow } from 'enzyme';
-
 const index = require('../index');
 
 jest.mock('../timeJump');
 
+describe('unit testing for index.js', () => {
+  test('index.js should be exporting the linkFiber, timeJump, getTree methods', () => {
+    expect(typeof index.linkFiber).toBe('function');
+    expect(typeof index.timeJump).toBe('function');
+    expect(typeof index.getTree).toBe('function');
+  });
 
-// describe('unit testing for index.js', () => {
-  // test('index.js should be exporting the linkState and timeJump methods', () => {
-  //   expect(typeof index.linkState).toBe('function');
-  //   expect(typeof index.timeJump).toBe('function');
-  // });
-
-  // test('index.js should be listening to the window for the jumpToSnap message', (done) => {
-  //   const calls = 10;
-  //   let count = 0;
-  //   global.addEventListener('message', ({ data: { action } }) => {
-  //     if (action === 'jumpToSnap') {
-  //       count += 1;
-  //       // timeJump should be called everytime a message is received
-  //       expect(index.timeJump.mock.calls.length).toBe(count);
-
-  //       // test is done once all messages have been received
-  //       if (count === calls) done();
-  //     }
-  //   });
-
-  //   // iterate ${calls} amount of times
-  //   [...Array(calls).keys()].forEach(() => global.postMessage({ action: 'jumpToSnap', payload: ['test'] }, '*'));
-  // });
+  test('index.js should be listening to the window for the jumpToSnap message', (done) => {
+    const calls = 10;
+    let count = 0;
+    global.addEventListener('message', ({ data: { action } }) => {
+      switch (action) {
+        case 'jumpToSnap':
+          count += 1;
+          expect(index.timeJump.mock.calls.length).toBe(count);
+          if (count === calls) done();
+          break;
+        default:
+          break;
+      }
+    });
+    [...Array(calls).keys()].forEach(() => global.postMessage({ action: 'jumpToSnap', payload: ['test'] }, '*'));
+  });
+  test('setLock message should change the mode object to the given payload', (done) => {
+    const mode = { paused: false };
+    const action = 'setLock';
+    const payloads = [true, false, true, false, true, false, false];
+    let count = 0;
+    const calls = payloads.length;
+    global.addEventListener('message', ({ data: { action: actionReceived, payload } }) => {
+      switch (actionReceived) {
+        case 'setLock':
+          mode.locked = payload;
+          expect(mode.locked).toBe(payloads[count]);
+          count += 1;
+          if (calls === count) done();
+          break;
+        default:
+          break;
+      }
+    });
+    payloads.forEach(payload => global.postMessage({ action, payload }, '*'));
+  });
 
-// }); 
+  test('setPause message should change the mode object to the given payload', (done) => {
+    const mode = { paused: false };
+    const action = 'setPause';
+    const payloads = [true, false, true, false, true, false, false];
+    let count = 0;
+    const calls = payloads.length;
+    global.addEventListener('message', ({ data: { action: actionReceived, payload } }) => {
+      switch (actionReceived) {
+        case 'setPause':
+          mode.locked = payload;
+          expect(mode.locked).toBe(payloads[count]);
+          count += 1;
+          if (calls === count) done();
+          break;
+        default:
+          break;
+      }
+    });
+    payloads.forEach(payload => global.postMessage({ action, payload }, '*'));
+  });
+});

package/__tests__/index.test.js

@@ -0,0 +1,50 @@
+// const Tree = require('./tree');
+let linkFiber;
+let ReactDOM;
+let React;
+let mode;
+let snapShot;
+
+describe('unit test for linkFiber', () => {
+  beforeEach(() => {
+    snapShot = { tree: null };
+    mode = {
+      jumping: false,
+      paused: false,
+      locked: false,
+    };
+    React = require('react');
+    ReactDOM = require('react-dom');
+    linkFiber = require('../linkFiber')(snapShot, mode);
+
+    class App extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = { foo: 'bar' };
+      }
+
+      render() {
+        return <div>{this.state.foo}</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(<App />, container);
+    linkFiber(container);
+  });
+
+  test('linkFiber should mutate the snapshot tree property', () => {
+    // linkFiber mutates the snapshot
+    expect(typeof snapShot.tree).toBe('object');
+    expect(snapShot.tree.component.state).toBe('root');
+    expect(snapShot.tree.children).toHaveLength(1);
+    expect(snapShot.tree.children[0].component.state.foo).toBe('bar');
+  });
+
+  test('linkFiber should modify the setState of the stateful component', () => {
+    console.log(snapShot.tree.children[0].component.setState);
+    // snapShot.tree.children[0].component.setState({ foo: 'josh' });
+    // expect(snapShot.tree.children[0].component.setState).toBeInstanceOf(newSetState);
+    // expect(snapShot.tree.children[0].component.state.foo).toBe('josh');
+  });
+});

package/__tests__/linkFiber.test.js

@@ -1,6 +1,4 @@
-import TestRenderer from 'react-test-renderer';
 const timeJumpExport = require('../timeJump');
-import { shallow } from 'enzyme';
 
 describe('unit testing for timeJump.js', () => {
   let timeJump;
@@ -15,14 +13,10 @@ describe('unit testing for timeJump.js', () => {
     mockFuncs = [];
     timeJump = timeJumpExport(snapShot, mode);
 
-    const createSetStateAsync = (i) => {
-      return (state) => {
-        return new Promise((resolve) => {
-          mockFuncs[i](state);
-          resolve();
-        });
-      };
-    };
+    const createSetStateAsync = i => state => new Promise((resolve) => {
+      mockFuncs[i](state);
+      resolve();
+    });
 
     for (let i = 0; i < count; i += 1) {
       mockFuncs.push(jest.fn());
@@ -56,5 +50,4 @@ describe('unit testing for timeJump.js', () => {
   //   timeJump(newSnapShot);
   //   mockFuncs.forEach((mockFunc, i) => expect(mockFunc.mock.calls[1][0]).toEqual({ testkey: `testval${i}` }));
   // });
-
 });

package/__tests__/timeJump.test.js

@@ -1,7 +1,9 @@
 const snapShot = { tree: null };
 
 const mode = {
-  jumping: false, paused: false, locked: false,
+  jumping: false,
+  paused: false,
+  locked: false,
 };
 
 const linkFiber = require('./linkFiber')(snapShot, mode);
@@ -21,9 +23,11 @@ window.addEventListener('message', ({ data: { action, payload } }) => {
       mode.paused = payload;
       break;
     default:
+      break;
   }
 });
 
+// window.postMessage({ data: { action: 'foo', payload: 'bar' } });
 module.exports = {
   timeJump,
   linkFiber,

package/index.js

@@ -22,7 +22,7 @@ module.exports = (snap, mode) => {
     // make a copy of setState
     const oldSetState = component.setState.bind(component);
 
-    function newSetState(state, callback = () => { }) {
+    function newSetState(state, callback = () => {}) {
       // dont do anything if state is locked
       // UNLESS we are currently jumping through time
       if (mode.locked && !mode.jumping) return;
@@ -64,8 +64,11 @@ module.exports = (snap, mode) => {
     const { current } = fiberRoot;
     snap.tree = createTree(current);
   }
+
   return (container) => {
-    const { _reactRootContainer: { _internalRoot } } = container;
+    const {
+      _reactRootContainer: { _internalRoot },
+    } = container;
     fiberRoot = _internalRoot;
     updateSnapShotTree();
 

package/linkFiber.js

@@ -35,22 +35,30 @@ class Chart extends Component {
     duration=0;
 
     var margin = {top: 20, right: 120, bottom: 20, left: 120},
-        width = 960 - margin.right - margin.left,
-        height = 800 - margin.top - margin.bottom;
+        width = 600 - margin.right - margin.left,
+        height = 600 - margin.top - margin.bottom;
 
     var i = 0;
 
     var tree = d3.layout.tree()
-        .size([400, 400]);
+        .nodeSize([20,])
+        .separation(function separation(a, b) {
+        return a.parent == b.parent ? 3 : 1;
+    });
 
     var diagonal = d3.svg.diagonal()
         .projection(function(d) { return [d.y, d.x]; });
 
     var svg = d3.select(this.refs.anchor).append("svg")
-        .attr("width", width + margin.right + margin.left)
-        .attr("height", height + margin.top + margin.bottom)
-        .append("g")
-        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+        .attr("width", "100%")
+        .attr("height","100%")
+        .attr("cursor", "-webkit-grab")
+        .attr("preserveAspectRatio", "xMinYMin slice")
+        .call(d3.behavior.zoom().on("zoom", function () {
+            svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
+          }))
+    .append("g")
+        .attr("transform", "translate(" + 60 + "," + height/2 + ")")
 
     // Add tooltip div
     var div = d3.select("body").append("div")
@@ -215,7 +223,7 @@ class Chart extends Component {
 }
 
   render() {
-    return <div ref="anchor" className="d3Container" width="100%" />;
+    return <div ref="anchor" className="d3Container" />;
   }
 }
 

src/app/components/Chart.jsx

@@ -1,7 +1,6 @@
 .d3Container{
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    height: 100%;
+    width: 100%;
 }
 
 .node {
@@ -12,7 +11,6 @@
     fill: #fff;
     stroke: black;
     stroke-width: 2px;
-    
 }
 
 .node text {