Skip to content

Commit 4f1cee9

Browse files
joshua0308joshua0308
committed
added tests for travel container
1 parent 7bce3c3 commit 4f1cee9

File tree

3 files changed

+99
-75
lines changed

3 files changed

+99
-75
lines changed

‎src/app/__tests__/TravelContainer.test.js

Lines changed: 91 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,53 @@ import { shallow, configure } from 'enzyme';
33
import React from 'react';
44
import Adapter from 'enzyme-adapter-react-16';
55
import TravelContainer from '../containers/TravelContainer';
6-
// import MainContainer from '../containers/MainContainer';
7-
// import Dropdown from '../components/Dropdown';
8-
6+
import { useStoreContext } from '../store';
7+
import { moveBackward, moveForward } from '../actions/actions';
98

109
configure({ adapter: new Adapter() });
1110

12-
const props = {
13-
moveBackward: jest.fn(),
14-
moveForward: jest.fn(),
15-
snapshotsLength: 5,
16-
handleChangeSnapshot: jest.fn(),
17-
handleJumpSnapshot: jest.fn(),
18-
snapshotIndex: 6,
19-
play: jest.fn(),
20-
playing: false,
21-
pause: jest.fn(),
11+
const state = {
12+
tabs: {
13+
87: {
14+
snapshots: [1, 2, 3, 4],
15+
sliderIndex: 2,
16+
playing: true,
17+
},
18+
},
19+
currentTab: 87,
2220
};
2321

22+
const dispatch = jest.fn();
23+
jest.mock('../store');
24+
useStoreContext.mockImplementation(() => [state, dispatch]);
25+
26+
let wrapper;
27+
28+
beforeEach(() => {
29+
wrapper = shallow(<TravelContainer snapshotsLength={2} />);
30+
useStoreContext.mockClear();
31+
dispatch.mockClear();
32+
});
33+
34+
describe('testing the backward-button', () => {
35+
test('backward-button should dispatch action upon click', () => {
36+
wrapper.find('.backward-button').simulate('click');
37+
expect(dispatch.mock.calls.length).toBe(1);
38+
});
39+
40+
// backward-button invokes dispatch(moveBackward())
41+
// moveBackward is an actionCreator
42+
test('backward-button should send moveBackward action to dispatch', () => {
43+
wrapper.find('.backward-button').simulate('click');
44+
expect(dispatch.mock.calls[0][0]).toEqual(moveBackward());
45+
});
46+
});
47+
48+
// test('testing the forward-button', () => {
49+
// wrapper.find('.forward-button').simulate('click');
50+
// expect(dispatch.mock.calls.length).toBe(1);
51+
// });
52+
2453
// These are fake props to be used during dropdown tests
2554

2655
// const dropdownProps = {
@@ -38,77 +67,77 @@ const props = {
3867
// { value: 500, label: '2.0x' },
3968
// ];
4069

41-
describe('testing the backward and forward buttons', () => {
42-
test('if the backward button rewinds the playback', () => {
43-
const wrapper = shallow(<TravelContainer {...props} />);
70+
// describe('testing the backward and forward buttons', () => {
71+
// test('if the backward button rewinds the playback', () => {
72+
// const wrapper = shallow(<TravelContainer {...props} />);
4473

45-
wrapper.find('.backward-button').simulate('click');
74+
// wrapper.find('.backward-button').simulate('click');
4675

47-
expect(props.moveBackward).toHaveBeenCalled();
48-
});
76+
// expect(props.moveBackward).toHaveBeenCalled();
77+
// });
4978

50-
test('if the forward button forwards the playback', () => {
51-
const wrapper = shallow(<TravelContainer {...props} />);
79+
// test('if the forward button forwards the playback', () => {
80+
// const wrapper = shallow(<TravelContainer {...props} />);
5281

53-
wrapper.find('.forward-button').simulate('click');
82+
// wrapper.find('.forward-button').simulate('click');
5483

55-
expect(props.moveForward).toHaveBeenCalled();
56-
});
57-
});
84+
// expect(props.moveForward).toHaveBeenCalled();
85+
// });
86+
// });
5887

59-
describe('testing the play button', () => {
60-
test('if the play button starts the playback', () => {
61-
const wrapper = shallow(<TravelContainer {...props} />);
88+
// describe('testing the play button', () => {
89+
// test('if the play button starts the playback', () => {
90+
// const wrapper = shallow(<TravelContainer {...props} />);
6291

63-
wrapper.find('.play-button').simulate('click');
92+
// wrapper.find('.play-button').simulate('click');
6493

65-
expect(props.play).toHaveBeenCalled();
66-
});
94+
// expect(props.play).toHaveBeenCalled();
95+
// });
6796

68-
test("if playback is not running, the button should state 'Play'", () => {
69-
const wrapper = shallow(<TravelContainer {...props} />);
97+
// test("if playback is not running, the button should state 'Play'", () => {
98+
// const wrapper = shallow(<TravelContainer {...props} />);
7099

71-
wrapper.find('.play-button');
100+
// wrapper.find('.play-button');
72101

73-
expect(wrapper.find('.play-button').text()).toBe('Play');
74-
});
102+
// expect(wrapper.find('.play-button').text()).toBe('Play');
103+
// });
75104

76-
test("if playback is running, the button should state 'Pause'", () => {
77-
props.playing = true;
105+
// test("if playback is running, the button should state 'Pause'", () => {
106+
// props.playing = true;
78107

79-
const wrapper = shallow(<TravelContainer {...props} />);
108+
// const wrapper = shallow(<TravelContainer {...props} />);
80109

81-
wrapper.find('.play-button');
110+
// wrapper.find('.play-button');
82111

83-
expect(wrapper.find('.play-button').text()).toBe('Pause');
84-
});
85-
});
112+
// expect(wrapper.find('.play-button').text()).toBe('Pause');
113+
// });
114+
// });
86115

87-
describe('testing the playback speed', () => {
88-
test('if the playback dropdown states 0.5x the speed should be 0.5x', () => {
89-
const wrapper = shallow(<TravelContainer {...props} />);
116+
// describe('testing the playback speed', () => {
117+
// test('if the playback dropdown states 0.5x the speed should be 0.5x', () => {
118+
// const wrapper = shallow(<TravelContainer {...props} />);
90119

91-
wrapper.find('Dropdown').simulate('change', { value: ['val'] });
92-
// wrapper.find('select').simulate('change', { value : 'hello'});
93-
// console.log('val',wrapper.find('Dropdown').simulate('select', { value: ['val'] }));
94-
// expect(wrapper.find('Dropdown').text()).toBe('0.5x')
95-
expect(wrapper.find('select [selected]').val()).toEqual('key');
96-
});
97-
// test('if the playback dropdown states 1x the speed should be 1x', () => {
120+
// wrapper.find('Dropdown').simulate('change', { value: ['val'] });
121+
// // wrapper.find('select').simulate('change', { value : 'hello'});
122+
// // console.log('val',wrapper.find('Dropdown').simulate('select', { value: ['val'] }));
123+
// // expect(wrapper.find('Dropdown').text()).toBe('0.5x')
124+
// expect(wrapper.find('select [selected]').val()).toEqual('key');
125+
// });
126+
// // test('if the playback dropdown states 1x the speed should be 1x', () => {
98127

99-
// const wrapper = shallow(<TravelContainer { ...dropdownProps } />);
128+
// // const wrapper = shallow(<TravelContainer { ...dropdownProps } />);
100129

101-
// expect(wrapper.find('Dropdown').label).toBe('1.0x')
130+
// // expect(wrapper.find('Dropdown').label).toBe('1.0x')
102131

103-
// });
132+
// // });
104133

105-
// test('if the playback dropdown states 2x the speed should be 2x', () => {
134+
// // test('if the playback dropdown states 2x the speed should be 2x', () => {
106135

107-
// const wrapper = shallow(<TravelContainer { ...dropdownProps } />);
136+
// // const wrapper = shallow(<TravelContainer { ...dropdownProps } />);
108137

109-
// wrapper.find('Dropdown').simulate('click');
138+
// // wrapper.find('Dropdown').simulate('click');
110139

111-
// expect(wrapper.find('Dropdown').label).toBe('2.0x')
140+
// // expect(wrapper.find('Dropdown').label).toBe('2.0x')
112141

113-
// });
114-
});
142+
// // });
143+
// });

‎src/app/__tests__/actionContainer.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ configure({ adapter: new Adapter() });
1313
const state = {
1414
tabs: {
1515
87: {
16-
snapshots: [1,2,3,4],
16+
snapshots: [1, 2, 3, 4],
1717
sliderIndex: 0,
1818
viewIndex: -1,
1919
},

‎src/app/containers/TravelContainer.jsx

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,30 +38,25 @@ function TravelContainer({ snapshotsLength }) {
3838

3939
return (
4040
<div className="travel-container">
41-
<button className="play-button" type="button" onClick={() => play(selectedSpeed.value, playing, dispatch, snapshotsLength, sliderIndex)}>
41+
<button
42+
className="play-button"
43+
type="button"
44+
onClick={() => play(selectedSpeed.value, playing, dispatch, snapshotsLength, sliderIndex)}
45+
>
4246
{playing ? 'Pause' : 'Play'}
4347
</button>
44-
<MainSlider
45-
snapshotsLength={snapshotsLength}
46-
sliderIndex={sliderIndex}
47-
dispatch={dispatch}
48-
/>
48+
<MainSlider snapshotsLength={snapshotsLength} sliderIndex={sliderIndex} dispatch={dispatch} />
4949
<button className="backward-button" onClick={() => dispatch(moveBackward())} type="button">
5050
{'<'}
5151
</button>
5252
<button className="forward-button" onClick={() => dispatch(moveForward())} type="button">
5353
{'>'}
5454
</button>
55-
<Dropdown
56-
speeds={speeds}
57-
selectedSpeed={selectedSpeed}
58-
setSpeed={setSpeed}
59-
/>
55+
<Dropdown speeds={speeds} selectedSpeed={selectedSpeed} setSpeed={setSpeed} />
6056
</div>
6157
);
6258
}
6359

64-
6560
TravelContainer.propTypes = {
6661
snapshotsLength: PropTypes.number.isRequired,
6762
};

0 commit comments

Comments
 (0)