Merge pull request #51 from oslabs-beta/josh/app-test

app.jsx test and change text color based on sliderindex

Author: rydang

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",
@@ -37,6 +37,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",

package.json

@@ -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,13 +3,15 @@ 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>
       <button

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 />;