Merge branch 'dev' into bryan/diff

Author: mylee1995

babel.config.js

@@ -8,9 +8,6 @@ module.exports = {
         },
       },
     ],
-    ['@babel/preset-react'],
+    '@babel/preset-react',
   ],
-  plugins: [
-    ["@babel/plugin-proposal-decorators", { legacy: true }]
-  ]
 };

package.json

@@ -7,7 +7,8 @@
     "dev": "webpack --mode development --watch",
     "test": "jest --verbose --coverage --watchAll",
     "lint": "eslint --ext .js --ext .jsx src",
-    "docker-build": "docker build -t reacttt/test-lint"
+    "docker-build": "docker build -t reacttt/test-lint .",
+    "docker-check": "docker-compose up --abort-on-container-exit"
   },
   "keywords": [
     "react",

readme.md

@@ -12,15 +12,15 @@ Two parts are needed for this tool to function. The chrome extension must be ins
 ```
 npm i react-time-travel
 ```
-3. Call the `linkFiber` method on your root container after rendering your App.
+3. Call the library method on your root container after rendering your App.
 
 ```
-const { linkFiber } = require('react-time-travel');
+const reactTimeTravel = require('react-time-travel');
 
 const rootContainer = document.getElementById('root');
 ReactDom.render(<App />, rootContainer);
 
-linkFiber(rootContainer);
+reactTimeTravel(rootContainer);
 ```
 
 4. Done! That's all you have to do to link your React project to our library.

src/app/__tests__/StateContainer.test.js

@@ -1,28 +1,50 @@
 /* eslint-disable react/jsx-filename-extension */
 
-import { shallow, configure } from 'enzyme';
+import { shallow, mount, configure } from 'enzyme';
 import React from 'react';
 import Adapter from 'enzyme-adapter-react-16';
 import ActionContainer from '../containers/ActionContainer';
-
+import { useStoreContext } from '../store';
+import { emptySnapshots } from '../actions/actions';
+import Action from '../components/Action';
 
 configure({ adapter: new Adapter() });
 
-const props = {
-  snapshots: [],
-  snapshotIndex: 1,
-  handleChangeSnapshot: jest.fn(),
-  handleJumpSnapshot: jest.fn(),
-  emptySnapshot: jest.fn(),
+const state = {
+  tabs: {
+    87: {
+      snapshots: [1,2,3,4],
+      sliderIndex: 0,
+      viewIndex: -1,
+    },
+  },
+  currentTab: 87,
 };
 
+const dispatch = jest.fn();
 
-describe('testing the emptySnapshot button', () => {
-  test.skip('emptySnapshot button should be called', () => {
-    const wrapper = shallow((<ActionContainer {...props} />));
+jest.mock('../store');
+useStoreContext.mockImplementation(() => [state, dispatch]);
 
-    wrapper.find('.empty-button').simulate('click');
+let wrapper;
 
-    expect(props.emptySnapshot).toHaveBeenCalled();
+beforeEach(() => {
+  wrapper = shallow(<ActionContainer />);
+  useStoreContext.mockClear();
+  dispatch.mockClear();
+});
+
+describe('testing the emptySnapshot button', () => {
+  test('emptySnapshot button should dispatch action upon click', () => {
+    wrapper.find('.empty-button').simulate('click');
+    expect(dispatch.mock.calls.length).toBe(1);
+  });
+  test('emptying snapshots should send emptySnapshot action to dispatch', () => {
+    wrapper.find('.empty-button').simulate('click');
+    expect(dispatch.mock.calls[0][0]).toEqual(emptySnapshots());
   });
 });
+
+test('number of actions should reflect snapshots array', () => {
+  expect(wrapper.find(Action).length).toBe(state.tabs[state.currentTab].snapshots.length);
+});