Merge branch 'dev' into sierra

Author: starkspark

package/__mocks__/timeJump.js

@@ -1,69 +1,28 @@
-const index = require('../index');
+const timeJumpRequire = require('../timeJump');
 
 jest.mock('../timeJump');
+const timeJump = jest.fn();
+timeJumpRequire.mockReturnValue(timeJump);
+
+const index = require('../index');
 
 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');
+  test('index.js should be exporting a function', () => {
+    expect(typeof index).toBe('function');
   });
 
-  test('index.js should be listening to the window for the jumpToSnap message', (done) => {
+  test('index.js should be calling timeJump for every 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;
+      if (action === 'jumpToSnap') {
+        count += 1;
+        expect(timeJump.mock.calls.length).toBe(count);
+        if (count === calls) done();
       }
     });
-    payloads.forEach(payload => global.postMessage({ action, payload }, '*'));
+    for (let i = 0; i < calls; i += 1) {
+      global.postMessage({ action: 'jumpToSnap', payload: ['test'] }, '*');
+    }
   });
 });

package/__tests__/index.test.js

@@ -1,9 +1,14 @@
+/* eslint-disable import/no-extraneous-dependencies */
 // const Tree = require('./tree');
+import React from 'react';
+import { render } from 'react-dom';
+
+const linkFiberRequire = require('../linkFiber');
+
 let linkFiber;
-let ReactDOM;
-let React;
 let mode;
 let snapShot;
+let component;
 
 describe('unit test for linkFiber', () => {
   beforeEach(() => {
@@ -13,9 +18,7 @@ describe('unit test for linkFiber', () => {
       paused: false,
       locked: false,
     };
-    React = require('react');
-    ReactDOM = require('react-dom');
-    linkFiber = require('../linkFiber')(snapShot, mode);
+    linkFiber = linkFiberRequire(snapShot, mode);
 
     class App extends React.Component {
       constructor(props) {
@@ -29,8 +32,10 @@ describe('unit test for linkFiber', () => {
     }
 
     const container = document.createElement('div');
-    ReactDOM.render(<App />, container);
+    render(<App />, container);
     linkFiber(container);
+    // eslint-disable-next-line prefer-destructuring
+    component = snapShot.tree.children[0].component;
   });
 
   test('linkFiber should mutate the snapshot tree property', () => {
@@ -42,9 +47,12 @@ describe('unit test for linkFiber', () => {
   });
 
   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');
+    expect(snapShot.tree.children[0].component.setState.linkFiberChanged).toBe(true);
   });
+
+  // test('newSetState should still setState correctly', () => {
+  //   component.setState({ foo: 'barf' });
+  //   expect(component.state).not.toEqual({ foo: 'bar' });
+  //   expect(component.state).toEqual({ foo: 'barf' });
+  // });
 });

package/__tests__/linkFiber.test.js

@@ -1,53 +1,78 @@
-const timeJumpExport = require('../timeJump');
+const timeJumpRequire = require('../timeJump');
+
+class Component {
+  constructor(mockfn) {
+    this.mockfn = mockfn;
+  }
+
+  setState(state, func = () => { }) {
+    this.mockfn(state);
+    func();
+  }
+}
+
+class FiberNode {
+  constructor(mockfn, state) {
+    this.state = state;
+    this.children = [];
+    this.component = new Component(mockfn);
+  }
+}
 
 describe('unit testing for timeJump.js', () => {
   let timeJump;
   let snapShot;
   let mode;
   let mockFuncs;
-  const count = 3;
 
   beforeEach(() => {
-    snapShot = [];
     mode = { jumping: false };
     mockFuncs = [];
-    timeJump = timeJumpExport(snapShot, mode);
+    for (let i = 0; i < 4; i += 1) mockFuncs.push(jest.fn());
+
+    const tree = new FiberNode(mockFuncs[0]);
+    tree.children = [
+      new FiberNode(mockFuncs[1]),
+      new FiberNode(mockFuncs[2]),
+      new FiberNode(mockFuncs[3]),
+    ];
 
-    const createSetStateAsync = i => state => new Promise((resolve) => {
-      mockFuncs[i](state);
-      resolve();
+    snapShot = { tree };
+    timeJump = timeJumpRequire(snapShot, mode);
+  });
+
+  test('calling the initial require should return a function', () => {
+    expect(typeof timeJumpRequire).toBe('function');
+  });
+
+  describe('testing iteration through snapshot tree', () => {
+    const states = ['root', 'firstChild', 'secondChild', 'thirdChild'];
+    const target = new FiberNode(null, states[0]);
+    target.children = [
+      new FiberNode(null, states[1]),
+      new FiberNode(null, states[2]),
+      new FiberNode(null, states[3]),
+    ];
+
+    beforeEach(() => {
+      timeJump(target);
+    });
+    test('timeJump should call setState on each state in origin', () => {
+      mockFuncs.forEach(mockFunc => expect(mockFunc.mock.calls.length).toBe(1));
     });
 
-    for (let i = 0; i < count; i += 1) {
-      mockFuncs.push(jest.fn());
-      snapShot.push({ setStateAsync: createSetStateAsync(i) });
-    }
+    test('timeJump should pass target state to origin setState', () => {
+      mockFuncs.forEach((mockFunc, i) => expect(mockFunc.mock.calls[0][0]).toBe(states[i]));
+    });
   });
 
-  // test('calling the initial require should return a function', () => {
-  //   expect(typeof timeJump).toBe('function');
-  // });
-
-  // test('timeJump should iterate through snapshot and call setStateAsync on each state', () => {
-  //   const calls = 10;
-  //   for (let i = 1; i <= calls; i += 1) {
-  //     timeJump(Array(count).fill('test'));
-  //     mockFuncs.forEach(mockFunc => expect(mockFunc.mock.calls.length).toBe(i));
-  //   }
-  // });
-
-  // test('timeJump should pass the state from new snapshot to setStateAsync', () => {
-  //   const newSnapShot = [];
-  //   for (let i = 0; i < count; i += 1) {
-  //     newSnapShot.push(`testState${i}`);
-  //   }
-  //   timeJump(newSnapShot);
-  //   mockFuncs.forEach((mockFunc, i) => expect(mockFunc.mock.calls[0][0]).toBe(`testState${i}`));
-
-  //   for (let i = 0; i < count; i += 1) {
-  //     newSnapShot[i] = { testkey: `testval${i}` };
-  //   }
-  //   timeJump(newSnapShot);
-  //   mockFuncs.forEach((mockFunc, i) => expect(mockFunc.mock.calls[1][0]).toEqual({ testkey: `testval${i}` }));
-  // });
+  test('jumping mode should be set while timeJumping', () => {
+    const logMode = jest.fn();
+    logMode.mockImplementation(() => expect(mode.jumping).toBe(true));
+
+    snapShot.tree = new FiberNode(logMode);
+    const target = new FiberNode(null, 'test');
+    timeJump(target);
+    expect(logMode).toHaveBeenCalled();
+  });
 });

package/__tests__/timeJump.test.js

@@ -9,8 +9,6 @@ const mode = {
 const linkFiber = require('./linkFiber')(snapShot, mode);
 const timeJump = require('./timeJump')(snapShot, mode);
 
-const getTree = () => snapShot.tree.getCopy();
-
 window.addEventListener('message', ({ data: { action, payload } }) => {
   switch (action) {
     case 'jumpToSnap':
@@ -27,9 +25,4 @@ window.addEventListener('message', ({ data: { action, payload } }) => {
   }
 });
 
-// window.postMessage({ data: { action: 'foo', payload: 'bar' } });
-module.exports = {
-  timeJump,
-  linkFiber,
-  getTree,
-};
+module.exports = linkFiber;

package/index.js

@@ -17,12 +17,14 @@ module.exports = (snap, mode) => {
 
   function changeSetState(component) {
     // check that setState hasn't been changed yet
-    if (component.setState.name === 'newSetState') return;
+    if (component.setState.linkFiberChanged) return;
 
     // make a copy of setState
     const oldSetState = component.setState.bind(component);
 
-    function newSetState(state, callback = () => {}) {
+    // replace component's setState so developer doesn't change syntax
+    // component.setState = newSetState.bind(component);
+    component.setState = (state, callback = () => {}) => {
       // dont do anything if state is locked
       // UNLESS we are currently jumping through time
       if (mode.locked && !mode.jumping) return;
@@ -32,10 +34,8 @@ module.exports = (snap, mode) => {
         sendSnapshot();
         callback();
       });
-    }
-
-    // replace component's setState so developer doesn't change syntax
-    component.setState = newSetState;
+    };
+    component.setState.linkFiberChanged = true;
   }
 
   function createTree(currentFiber, tree = new Tree('root')) {
@@ -68,8 +68,10 @@ module.exports = (snap, mode) => {
   return (container) => {
     const {
       _reactRootContainer: { _internalRoot },
+      _reactRootContainer,
     } = container;
-    fiberRoot = _internalRoot;
+    // only assign internal root if it actually exists
+    fiberRoot = (_internalRoot) ? _internalRoot : _reactRootContainer;
     updateSnapShotTree();
 
     // send the initial snapshot once the content script has started up

package/linkFiber.js

@@ -1,6 +1,6 @@
 {
   "name": "react-time-travel",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "A library that helps debug React by memorizing the state of components with every render.",
   "main": "index.js",
   "repository": {