Merge pull request #74 from oslabs-beta/josh/travel-test

added unit test for travelcontainer

Author: mylee1995

src/app/__tests__/TravelContainer.test.js

@@ -3,112 +3,103 @@ import { shallow, configure } from 'enzyme';
 import React from 'react';
 import Adapter from 'enzyme-adapter-react-16';
 import TravelContainer from '../containers/TravelContainer';
-// import MainContainer from '../containers/MainContainer';
-// import Dropdown from '../components/Dropdown';
-
+import MainSlider from '../components/MainSlider';
+import Dropdown from '../components/Dropdown';
+import { useStoreContext } from '../store';
+import { moveBackward, moveForward } from '../actions/actions';
 
 configure({ adapter: new Adapter() });
 
-const props = {
-  moveBackward: jest.fn(),
-  moveForward: jest.fn(),
-  snapshotsLength: 5,
-  handleChangeSnapshot: jest.fn(),
-  handleJumpSnapshot: jest.fn(),
-  snapshotIndex: 6,
-  play: jest.fn(),
-  playing: false,
-  pause: jest.fn(),
+const state = {
+  tabs: {
+    87: {
+      snapshots: [1, 2, 3, 4],
+      sliderIndex: 2,
+      playing: true,
+    },
+  },
+  currentTab: 87,
 };
 
-// These are fake props to be used during dropdown tests
+const dispatch = jest.fn();
+jest.mock('../store');
+useStoreContext.mockImplementation(() => [state, dispatch]);
 
-// const dropdownProps = {
-//   selectedOption: {
-//     value: 1,
-//     label: 'label',
-//   },
-//   options: [0.5, 1, 2],
-//   onChange: jest.fn(),
-// };
+let wrapper;
 
-// const options = [
-//   { value: 2000, label: '0.5x' },
-//   { value: 1000, label: '1.0x' },
-//   { value: 500, label: '2.0x' },
-// ];
+beforeEach(() => {
+  wrapper = shallow(<TravelContainer snapshotsLength={2} />);
+  useStoreContext.mockClear();
+  dispatch.mockClear();
+});
 
-describe('testing the backward and forward buttons', () => {
-  test('if the backward button rewinds the playback', () => {
-    const wrapper = shallow(<TravelContainer {...props} />);
+describe('<TravelContainer /> rendering', () => {
+  test('should render three buttons', () => {
+    expect(wrapper.find('button')).toHaveLength(3);
+  });
+  test('should render one MainSlider', () => {
+    expect(wrapper.find(MainSlider)).toHaveLength(1);
+  });
+  test('should render one Dropdown', () => {
+    expect(wrapper.find(Dropdown)).toHaveLength(1);
+  });
+});
 
+describe('testing the backward-button', () => {
+  test('should dispatch action upon click', () => {
     wrapper.find('.backward-button').simulate('click');
-
-    expect(props.moveBackward).toHaveBeenCalled();
+    expect(dispatch.mock.calls.length).toBe(1);
   });
 
-  test('if the forward button forwards the playback', () => {
-    const wrapper = shallow(<TravelContainer {...props} />);
-
-    wrapper.find('.forward-button').simulate('click');
-
-    expect(props.moveForward).toHaveBeenCalled();
+  test('should send moveBackward action to dispatch', () => {
+    wrapper.find('.backward-button').simulate('click');
+    expect(dispatch.mock.calls[0][0]).toEqual(moveBackward());
   });
 });
 
-describe('testing the play button', () => {
-  test('if the play button starts the playback', () => {
-    const wrapper = shallow(<TravelContainer {...props} />);
-
-    wrapper.find('.play-button').simulate('click');
-
-    expect(props.play).toHaveBeenCalled();
+describe('testing the forward-button', () => {
+  test('should dispatch action upon click', () => {
+    wrapper.find('.forward-button').simulate('click');
+    expect(dispatch.mock.calls.length).toBe(1);
   });
 
-  test("if playback is not running, the button should state 'Play'", () => {
-    const wrapper = shallow(<TravelContainer {...props} />);
-
-    wrapper.find('.play-button');
-
-    expect(wrapper.find('.play-button').text()).toBe('Play');
+  test('should send moveforward action to dispatch', () => {
+    wrapper.find('.forward-button').simulate('click');
+    expect(dispatch.mock.calls[0][0]).toEqual(moveForward());
   });
+});
 
-  test("if playback is running, the button should state 'Pause'", () => {
-    props.playing = true;
-
-    const wrapper = shallow(<TravelContainer {...props} />);
-
-    wrapper.find('.play-button');
-
+describe('testing the play-button', () => {
+  test("should display 'pause' if playing is true", () => {
+    state.tabs[87].playing = true;
+    wrapper = shallow(<TravelContainer snapshotsLength={2} />);
     expect(wrapper.find('.play-button').text()).toBe('Pause');
   });
-});
-
-describe('testing the playback speed', () => {
-  test('if the playback dropdown states 0.5x the speed should be 0.5x', () => {
-    const wrapper = shallow(<TravelContainer {...props} />);
 
-    wrapper.find('Dropdown').simulate('change', { value: ['val'] });
-    // wrapper.find('select').simulate('change', { value : 'hello'});
-    // console.log('val',wrapper.find('Dropdown').simulate('select', { value: ['val'] }));
-    // expect(wrapper.find('Dropdown').text()).toBe('0.5x')
-    expect(wrapper.find('select [selected]').val()).toEqual('key');
+  test('should display play if playing is false', () => {
+    state.tabs[87].playing = false;
+    wrapper = shallow(<TravelContainer snapshotsLength={2} />);
+    expect(wrapper.find('.play-button').text()).toBe('Play');
   });
-  // test('if the playback dropdown states 1x the speed should be 1x', () => {
-
-  //   const wrapper = shallow(<TravelContainer { ...dropdownProps } />);
-
-  //   expect(wrapper.find('Dropdown').label).toBe('1.0x')
-
-  // });
-
-  // test('if the playback dropdown states 2x the speed should be 2x', () => {
-
-  //   const wrapper = shallow(<TravelContainer { ...dropdownProps } />);
-
-  //   wrapper.find('Dropdown').simulate('click');
-
-  //   expect(wrapper.find('Dropdown').label).toBe('2.0x')
-
-  // });
 });
+
+// describe('testing the playback speed', () => {
+//   test('if the playback dropdown states 0.5x the speed should be 0.5x', () => {
+//     const wrapper = shallow(<TravelContainer {...props} />);
+//     wrapper.find('Dropdown').simulate('change', { value: ['val'] });
+//     wrapper.find('select').simulate('change', { value: 'hello' });
+//     console.log('val', wrapper.find('Dropdown').simulate('select', { value: ['val'] }));
+//     expect(wrapper.find('Dropdown').text()).toBe('0.5x');
+//     expect(wrapper.find('select [selected]').val()).toEqual('key');
+//   });
+//   test('if the playback dropdown states 1x the speed should be 1x', () => {
+//     const wrapper = shallow(<TravelContainer {...dropdownProps} />);
+
+//     expect(wrapper.find('Dropdown').label).toBe('1.0x');
+//   });
+//   test('if the playback dropdown states 2x the speed should be 2x', () => {
+//     const wrapper = shallow(<TravelContainer {...dropdownProps} />);
+//     wrapper.find('Dropdown').simulate('click');
+//     expect(wrapper.find('Dropdown').label).toBe('2.0x');
+//   });
+// });

src/app/containers/TravelContainer.jsx

@@ -38,30 +38,25 @@ function TravelContainer({ snapshotsLength }) {
 
   return (
     <div className="travel-container">
-      <button className="play-button" type="button" onClick={() => play(selectedSpeed.value, playing, dispatch, snapshotsLength, sliderIndex)}>
+      <button
+        className="play-button"
+        type="button"
+        onClick={() => play(selectedSpeed.value, playing, dispatch, snapshotsLength, sliderIndex)}
+      >
         {playing ? 'Pause' : 'Play'}
       </button>
-      <MainSlider
-        snapshotsLength={snapshotsLength}
-        sliderIndex={sliderIndex}
-        dispatch={dispatch}
-      />
+      <MainSlider snapshotsLength={snapshotsLength} sliderIndex={sliderIndex} dispatch={dispatch} />
       <button className="backward-button" onClick={() => dispatch(moveBackward())} type="button">
         {'<'}
       </button>
       <button className="forward-button" onClick={() => dispatch(moveForward())} type="button">
         {'>'}
       </button>
-      <Dropdown
-        speeds={speeds}
-        selectedSpeed={selectedSpeed}
-        setSpeed={setSpeed}
-      />
+      <Dropdown speeds={speeds} selectedSpeed={selectedSpeed} setSpeed={setSpeed} />
     </div>
   );
 }
 
-
 TravelContainer.propTypes = {
   snapshotsLength: PropTypes.number.isRequired,
 };