travelcontainer testing

Author: joshua0308

src/app/__tests__/TravelContainer.test.js

@@ -3,6 +3,8 @@ import { shallow, configure } from 'enzyme';
 import React from 'react';
 import Adapter from 'enzyme-adapter-react-16';
 import TravelContainer from '../containers/TravelContainer';
+import MainSlider from '../components/MainSlider';
+import Dropdown from '../components/Dropdown';
 import { useStoreContext } from '../store';
 import { moveBackward, moveForward } from '../actions/actions';
 
@@ -31,113 +33,73 @@ beforeEach(() => {
   dispatch.mockClear();
 });
 
+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('backward-button should dispatch action upon click', () => {
+  test('should dispatch action upon click', () => {
     wrapper.find('.backward-button').simulate('click');
     expect(dispatch.mock.calls.length).toBe(1);
   });
 
-  // backward-button invokes dispatch(moveBackward())
-  // moveBackward is an actionCreator
-  test('backward-button should send moveBackward action to dispatch', () => {
+  test('should send moveBackward action to dispatch', () => {
     wrapper.find('.backward-button').simulate('click');
     expect(dispatch.mock.calls[0][0]).toEqual(moveBackward());
   });
 });
 
-// test('testing the forward-button', () => {
-//   wrapper.find('.forward-button').simulate('click');
-//   expect(dispatch.mock.calls.length).toBe(1);
-// });
-
-// These are fake props to be used during dropdown tests
-
-// const dropdownProps = {
-//   selectedOption: {
-//     value: 1,
-//     label: 'label',
-//   },
-//   options: [0.5, 1, 2],
-//   onChange: jest.fn(),
-// };
-
-// const options = [
-//   { value: 2000, label: '0.5x' },
-//   { value: 1000, label: '1.0x' },
-//   { value: 500, label: '2.0x' },
-// ];
-
-// describe('testing the backward and forward buttons', () => {
-//   test('if the backward button rewinds the playback', () => {
-//     const wrapper = shallow(<TravelContainer {...props} />);
-
-//     wrapper.find('.backward-button').simulate('click');
-
-//     expect(props.moveBackward).toHaveBeenCalled();
-//   });
-
-//   test('if the forward button forwards the playback', () => {
-//     const wrapper = shallow(<TravelContainer {...props} />);
-
-//     wrapper.find('.forward-button').simulate('click');
-
-//     expect(props.moveForward).toHaveBeenCalled();
-//   });
-// });
-
-// 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();
-//   });
-
-//   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("if playback is running, the button should state 'Pause'", () => {
-//     props.playing = true;
+describe('testing the forward-button', () => {
+  test('should dispatch action upon click', () => {
+    wrapper.find('.forward-button').simulate('click');
+    expect(dispatch.mock.calls.length).toBe(1);
+  });
 
-//     const wrapper = shallow(<TravelContainer {...props} />);
+  test('should send moveforward action to dispatch', () => {
+    wrapper.find('.forward-button').simulate('click');
+    expect(dispatch.mock.calls[0][0]).toEqual(moveForward());
+  });
+});
 
-//     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');
+  });
 
-//     expect(wrapper.find('.play-button').text()).toBe('Pause');
-//   });
-// });
+  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');
+  });
+});
 
 // 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')
+//     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 1x the speed should be 1x', () => {
+//     const wrapper = shallow(<TravelContainer {...dropdownProps} />);
 
-//   // 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')
-
-//   // });
+//     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/__tests__/__snapshots__/TravelContainer.test.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` 1`] = `undefined`;
+
+exports[`<TravelContainer /> rendering should render three buttons 1`] = `ShallowWrapper {}`;