travel, action, and button containers tests

Author: starkspark

.gitignore

@@ -1,10 +1,7 @@
 node_modules
 .DS_Store
-dist/
-extension/bundle.js
-package/react-time-travel-1.0.1.tgz
+src/extension/build/bundles
+package/react-time-travel-*.tgz
 tictactoe
-tictactoe/build/bundle.js
-tictactoe/package-lock.json
 parents
 coverage

package-lock.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "webpack --mode production",
     "dev": "webpack --mode development --watch",
-    "test": "jest --verbose --coverage"
+    "test": "jest --verbose --coverage --watchAll"
   },
   "keywords": [
     "react",
@@ -38,6 +38,7 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.14.2",
     "jest": "^24.8.0",
+    "jest-cli": "^24.8.0",
     "node-sass": "^4.12.0",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
@@ -47,6 +48,7 @@
   },
   "dependencies": {
     "auto-bind": "^2.1.0",
+    "d3": "^3.5.17",
     "prop-types": "^15.7.2",
     "rc-slider": "^8.6.13",
     "rc-tooltip": "^3.7.3",

package.json

@@ -4,7 +4,7 @@ class Tree {
     // give it a special state = 'root'
     // a setState function that just calls the callback instantly
     if (!useStateInstead) {
-      this.component = (component === 'root') ? { state: 'root', setState: (partial, callback) => callback() } : component;
+      this.component = (component === 'root') ? { state: 'root',  setState: (partial, callback) => callback() } : component;
     } else {
       this.state = component;
       this.name = name;

package/tree.js

@@ -10,41 +10,51 @@ describe('unit testing for Action.jsx', () => {
   const props = {
     selected: true,
     handleChangeSnapshot: jest.fn(),
-    handleSendSnapshot: jest.fn(),
+    handleJumpSnapshot: jest.fn(),
     index: 1,
   };
   beforeEach(() => {
     wrapper = shallow(<Action {...props} />);
   });
 
-  describe('<Action> component', () => {
-    it("<Action> should have a className 'action-component selected' if props.selected is true", () => {
+  describe('Component', () => {
+    test("should have a className 'action-component selected' if props.selected is true", () => {
       wrapper.setProps({ selected: true });
       expect(wrapper.hasClass('action-component selected')).toEqual(true);
     });
 
-    it("<Action> shouldn't have a className 'action-component selected' if props.selected is false", () => {
+    test("shouldn't have a className 'action-component selected' if props.selected is false", () => {
       wrapper.setProps({ selected: false });
       expect(wrapper.hasClass('action-component selected')).toEqual(false);
     });
 
-    it('<Action> should have a text that is equal to props.index', () => {
+    test('should have a text that is equal to props.index', () => {
       expect(wrapper.find('.action-component-text').text()).toEqual(props.index.toString());
     });
+
+    test('should invoke changeSnapshot method when clicked', () => {
+      wrapper.find('.action-component').simulate('click');
+      expect(props.handleChangeSnapshot).toHaveBeenCalled();
+    });
   });
 
-  describe('jump button', () => {
-    it('Should render a jump button', () => {
-      expect(wrapper.type()).toEqual('div');
-      expect(wrapper.find('button')).toHaveLength(1);
+  describe('Jump Button', () => {
+    test("should render a div with a className 'jump-button' inside action-component", () => {
+      expect(
+        wrapper
+          .find('.action-component')
+          .children()
+          .find('.jump-button'),
+      ).toHaveLength(1);
     });
 
-    it('Should invoke the sendSnapshot method when the jump button is clicked', () => {
+    test('should invoke jumpSnapshot method when clicked', () => {
       wrapper
-        .find('button')
-        .at(0)
+        .find('.action-component')
+        .children()
+        .find('.jump-button')
         .simulate('click');
-      expect(props.handleSendSnapshot).toHaveBeenCalled();
+      expect(props.handleJumpSnapshot).toHaveBeenCalled();
     });
   });
 });

src/app/__tests__/action.test.jsx

@@ -3,30 +3,37 @@ import PropTypes from 'prop-types';
 
 const Action = (props) => {
   const {
-    selected, handleChangeSnapshot, handleJumpSnapshot, index,
+    selected, handleChangeSnapshot, handleJumpSnapshot, index, sliderIndex,
   } = props;
+
   return (
     <div
       className={selected ? 'action-component selected' : 'action-component'}
       onClick={() => handleChangeSnapshot(index)}
       role="presentation"
+      style={index > sliderIndex ? { color: '#5f6369' } : {}}
     >
       <div className="action-component-text">{index}</div>
-      <div
+      <button
         className="jump-button"
-        onClick={() => handleJumpSnapshot(index)}
+        onClick={(e) => {
+          e.stopPropagation();
+          handleJumpSnapshot(index);
+        }}
         tabIndex={index}
-        role="button"
+        type="button"
       >
         Jump
-      </div>
+      </button>
     </div>
   );
 };
 
-// Action.propTypes = {
-//   selected: PropTypes.bool,
-//   index: PropTypes.number,
-// };
+Action.propTypes = {
+  selected: PropTypes.bool.isRequired,
+  index: PropTypes.number.isRequired,
+  handleChangeSnapshot: PropTypes.func.isRequired,
+  handleJumpSnapshot: PropTypes.func.isRequired,
+};
 
 export default Action;

src/app/components/Action.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import MainContainer from '../containers/MainContainer';
 
 const App = () => <MainContainer />;