merged with dev

Author: joshua0308

.gitignore

@@ -5,3 +5,4 @@ package/react-time-travel-*.tgz
 tictactoe
 parents
 coverage
+src/extension/build.zip

package-lock.json

@@ -52,11 +52,14 @@
   },
   "dependencies": {
     "d3": "^3.5.17",
+    "immer": "^3.2.0",
+    "jsondiffpatch": "^0.3.11",
     "prop-types": "^15.7.2",
     "rc-slider": "^8.6.13",
     "rc-tooltip": "^3.7.3",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-html-parser": "^2.0.2",
     "react-json-tree": "^0.11.2",
     "react-router-dom": "^5.0.1",
     "react-select": "^3.0.4"

package.json

@@ -3,59 +3,107 @@ import { shallow, configure } from 'enzyme';
 import React from 'react';
 import Adapter from 'enzyme-adapter-react-16';
 import ButtonsContainer from '../containers/ButtonsContainer';
-
+import { useStoreContext } from '../store';
+import { toggleMode } from '../actions/actions';
 
 configure({ adapter: new Adapter() });
 
-const props = {
-  toggleMode: jest.fn(),
-  importSnapshots: jest.fn(),
-  exportSnapshots: jest.fn(),
-  mode: {
-    paused: false,
-    locked: false,
-    persist: false,
+const state = {
+  tabs: {
+    87: {
+      snapshots: [1, 2, 3, 4],
+      sliderIndex: 0,
+      viewIndex: -1,
+      mode: {
+        paused: false,
+        locked: false,
+        persist: false,
+      },
+    },
   },
+  currentTab: 87,
 };
 
-describe('testing the bottom buttons', () => {
-  test('if pause button is invoked', () => {
-    const wrapper = shallow(<ButtonsContainer {...props} />);
+const currentTab = state.tabs[state.currentTab];
 
-    wrapper.find('.pause-button').simulate('click');
+const dispatch = jest.fn();
 
-    expect(props.toggleMode).toHaveBeenCalled();
-  });
+jest.mock('../store');
+useStoreContext.mockImplementation(() => [state, dispatch]);
 
-  test('if lock button is invoked', () => {
-    const wrapper = shallow(<ButtonsContainer {...props} />);
+let wrapper;
 
-    wrapper.find('.lock-button').simulate('click');
-
-    expect(props.toggleMode).toHaveBeenCalled();
+describe('testing the bottom buttons', () => {
+  beforeEach(() => {
+    wrapper = shallow(<ButtonsContainer />);
+    dispatch.mockClear();
+    useStoreContext.mockClear();
+    currentTab.mode = {
+      locked: false,
+      paused: false,
+      persist: false,
+    };
   });
 
-  test('if persist button is invoked', () => {
-    const wrapper = shallow(<ButtonsContainer {...props} />);
-
-    wrapper.find('.persist-button').simulate('click');
-
-    expect(props.toggleMode).toHaveBeenCalled();
+  describe('pause button testing', () => {
+    beforeEach(() => {
+      wrapper.find('.pause-button').simulate('click');
+    });
+    test('pause button dispatches upon click', () => {
+      expect(dispatch.mock.calls.length).toBe(1);
+    });
+
+    test('pause button dispatches toggleMode action', () => {
+      expect(dispatch.mock.calls[0][0]).toEqual(toggleMode('paused'));
+    });
+
+    test('pause button displays state', () => {
+      expect(wrapper.find('.pause-button').text()).toBe('Pause');
+      state.tabs[state.currentTab].mode.paused = true;
+      wrapper = shallow(<ButtonsContainer />);
+      expect(wrapper.find('.pause-button').text()).toBe('Resume');
+    });
   });
 
-  test('if import button is invoked', () => {
-    const wrapper = shallow(<ButtonsContainer {...props} />);
-
-    wrapper.find('.import-button').simulate('click');
 
-    expect(props.importSnapshots).toHaveBeenCalled();
+  describe('lock button testing', () => {
+    beforeEach(() => {
+      wrapper.find('.lock-button').simulate('click');
+    });
+    test('lock button dispatches upon click', () => {
+      expect(dispatch.mock.calls.length).toBe(1);
+    });
+
+    test('lock button dispatches toggleMode action', () => {
+      expect(dispatch.mock.calls[0][0]).toEqual(toggleMode('locked'));
+    });
+
+    test('lock button displays state', () => {
+      expect(wrapper.find('.lock-button').text()).toBe('Lock');
+      state.tabs[state.currentTab].mode.locked = true;
+      wrapper = shallow(<ButtonsContainer />);
+      expect(wrapper.find('.lock-button').text()).toBe('Unlock');
+    });
   });
 
-  test('if export button is invoked', () => {
-    const wrapper = shallow(<ButtonsContainer {...props} />);
-
-    wrapper.find('.export-button').simulate('click');
-
-    expect(props.exportSnapshots).toHaveBeenCalled();
+  describe('persist button testing', () => {
+    beforeEach(() => {
+      wrapper.find('.persist-button').simulate('click');
+    });
+
+    test('persist button dispatches upon click', () => {
+      expect(dispatch.mock.calls.length).toBe(1);
+    });
+
+    test('persist button dispatches toggleMode action', () => {
+      expect(dispatch.mock.calls[0][0]).toEqual(toggleMode('persist'));
+    });
+
+    test('persist button displays state', () => {
+      expect(wrapper.find('.persist-button').text()).toBe('Persist');
+      state.tabs[state.currentTab].mode.persist = true;
+      wrapper = shallow(<ButtonsContainer />);
+      expect(wrapper.find('.persist-button').text()).toBe('Unpersist');
+    });
   });
 });

src/app/__tests__/ButtonsContainer.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-filename-extension */
 
-import { shallow, mount, configure } from 'enzyme';
+import { shallow, configure } from 'enzyme';
 import React from 'react';
 import Adapter from 'enzyme-adapter-react-16';
 import ActionContainer from '../containers/ActionContainer';