adding

Author: starkspark

.eslintignore

@@ -0,0 +1 @@
+/src/extension/build/

.gitignore

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

Dockerfile

@@ -0,0 +1,4 @@
+FROM node:10.16.2
+WORKDIR /usr/src/app
+COPY package*.json ./
+RUN npm i

babel.config.js

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

docker-compose.yml

@@ -0,0 +1,11 @@
+version: '3'
+services:
+  test:
+    image: reacttt/test-lint
+    container_name: reacttt-test-lint
+    volumes:
+      - .:/usr/src/app
+      - node_modules:/usr/src/app/node_modules
+    command: bash -c "npm run lint && npm test"
+volumes:
+  node_modules:

package-lock.json

@@ -6,7 +6,9 @@
     "build": "webpack --mode production",
     "dev": "webpack --mode development --watch",
     "test": "jest --verbose --coverage --watchAll",
-    "lint": "eslint --ext .js --ext .jsx src"
+    "lint": "eslint --ext .js --ext .jsx src",
+    "docker-build": "docker build -t reacttt/test-lint .",
+    "docker-check": "docker-compose up --abort-on-container-exit"
   },
   "keywords": [
     "react",
@@ -25,40 +27,41 @@
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-decorators": "^7.4.4",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
-    "@babel/plugin-proposal-decorators": "^7.4.4",
     "babel-loader": "^8.0.6",
-    "css-loader": "^3.1.0",
+    "css-loader": "^3.2.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.1",
-    "eslint-plugin-import": "^2.18.0",
-    "eslint-plugin-jest": "^22.13.4",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jest": "^22.15.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.14.2",
+    "eslint-plugin-react": "^7.14.3",
     "jest": "^24.8.0",
     "jest-cli": "^24.8.0",
     "node-sass": "^4.12.0",
-    "sass-loader": "^7.1.0",
+    "sass": "^1.22.9",
+    "sass-loader": "^7.2.0",
     "style-loader": "^0.23.1",
-    "webpack": "^4.36.1",
+    "webpack": "^4.39.1",
     "webpack-chrome-extension-reloader": "^1.3.0",
     "webpack-cli": "^3.3.6"
   },
   "dependencies": {
-    "auto-bind": "^2.1.0",
     "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.8.6",
-    "react-dom": "^16.8.6",
+    "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",
-    "sass": "^1.22.7"
+    "react-select": "^3.0.4"
   }
 }

package.json

@@ -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.

readme.md

@@ -1,60 +1,109 @@
+/* eslint-disable react/jsx-filename-extension */
 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');
+    });
   });
 });