Skip to content

Commit a308312

Browse files
mylee1995mylee1995
committed
Merge branch 'dev' into bryan/maincont-testing
2 parents d0ac2a2 + 552697c commit a308312

File tree

8 files changed

+150
-174
lines changed

8 files changed

+150
-174
lines changed

‎package-lock.json

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,14 @@
5252
},
5353
"dependencies": {
5454
"d3": "^3.5.17",
55+
"immer": "^3.2.0",
5556
"jsondiffpatch": "^0.3.11",
5657
"prop-types": "^15.7.2",
5758
"rc-slider": "^8.6.13",
5859
"rc-tooltip": "^3.7.3",
59-
"react-html-parser": "^2.0.2",
6060
"react": "^16.9.0",
6161
"react-dom": "^16.9.0",
62+
"react-html-parser": "^2.0.2",
6263
"react-json-tree": "^0.11.2",
6364
"react-router-dom": "^5.0.1",
6465
"react-select": "^3.0.4"

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

Lines changed: 76 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -3,112 +3,103 @@ 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 MainSlider from '../components/MainSlider';
7+
import Dropdown from '../components/Dropdown';
8+
import { useStoreContext } from '../store';
9+
import { moveBackward, moveForward } from '../actions/actions';
910

1011
configure({ adapter: new Adapter() });
1112

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(),
13+
const state = {
14+
tabs: {
15+
87: {
16+
snapshots: [1, 2, 3, 4],
17+
sliderIndex: 2,
18+
playing: true,
19+
},
20+
},
21+
currentTab: 87,
2222
};
2323

24-
// These are fake props to be used during dropdown tests
24+
const dispatch = jest.fn();
25+
jest.mock('../store');
26+
useStoreContext.mockImplementation(() => [state, dispatch]);
2527

26-
// const dropdownProps = {
27-
// selectedOption: {
28-
// value: 1,
29-
// label: 'label',
30-
// },
31-
// options: [0.5, 1, 2],
32-
// onChange: jest.fn(),
33-
// };
28+
let wrapper;
3429

35-
// const options = [
36-
// { value: 2000, label: '0.5x' },
37-
// { value: 1000, label: '1.0x' },
38-
// { value: 500, label: '2.0x' },
39-
// ];
30+
beforeEach(() => {
31+
wrapper = shallow(<TravelContainer snapshotsLength={2} />);
32+
useStoreContext.mockClear();
33+
dispatch.mockClear();
34+
});
4035

41-
describe('testing the backward and forward buttons', () => {
42-
test('if the backward button rewinds the playback', () => {
43-
const wrapper = shallow(<TravelContainer {...props} />);
36+
describe('<TravelContainer /> rendering', () => {
37+
test('should render three buttons', () => {
38+
expect(wrapper.find('button')).toHaveLength(3);
39+
});
40+
test('should render one MainSlider', () => {
41+
expect(wrapper.find(MainSlider)).toHaveLength(1);
42+
});
43+
test('should render one Dropdown', () => {
44+
expect(wrapper.find(Dropdown)).toHaveLength(1);
45+
});
46+
});
4447

48+
describe('testing the backward-button', () => {
49+
test('should dispatch action upon click', () => {
4550
wrapper.find('.backward-button').simulate('click');
46-
47-
expect(props.moveBackward).toHaveBeenCalled();
51+
expect(dispatch.mock.calls.length).toBe(1);
4852
});
4953

50-
test('if the forward button forwards the playback', () => {
51-
const wrapper = shallow(<TravelContainer {...props} />);
52-
53-
wrapper.find('.forward-button').simulate('click');
54-
55-
expect(props.moveForward).toHaveBeenCalled();
54+
test('should send moveBackward action to dispatch', () => {
55+
wrapper.find('.backward-button').simulate('click');
56+
expect(dispatch.mock.calls[0][0]).toEqual(moveBackward());
5657
});
5758
});
5859

59-
describe('testing the play button', () => {
60-
test('if the play button starts the playback', () => {
61-
const wrapper = shallow(<TravelContainer {...props} />);
62-
63-
wrapper.find('.play-button').simulate('click');
64-
65-
expect(props.play).toHaveBeenCalled();
60+
describe('testing the forward-button', () => {
61+
test('should dispatch action upon click', () => {
62+
wrapper.find('.forward-button').simulate('click');
63+
expect(dispatch.mock.calls.length).toBe(1);
6664
});
6765

68-
test("if playback is not running, the button should state 'Play'", () => {
69-
const wrapper = shallow(<TravelContainer {...props} />);
70-
71-
wrapper.find('.play-button');
72-
73-
expect(wrapper.find('.play-button').text()).toBe('Play');
66+
test('should send moveforward action to dispatch', () => {
67+
wrapper.find('.forward-button').simulate('click');
68+
expect(dispatch.mock.calls[0][0]).toEqual(moveForward());
7469
});
70+
});
7571

76-
test("if playback is running, the button should state 'Pause'", () => {
77-
props.playing = true;
78-
79-
const wrapper = shallow(<TravelContainer {...props} />);
80-
81-
wrapper.find('.play-button');
82-
72+
describe('testing the play-button', () => {
73+
test("should display 'pause' if playing is true", () => {
74+
state.tabs[87].playing = true;
75+
wrapper = shallow(<TravelContainer snapshotsLength={2} />);
8376
expect(wrapper.find('.play-button').text()).toBe('Pause');
8477
});
85-
});
86-
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} />);
9078

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');
79+
test('should display play if playing is false', () => {
80+
state.tabs[87].playing = false;
81+
wrapper = shallow(<TravelContainer snapshotsLength={2} />);
82+
expect(wrapper.find('.play-button').text()).toBe('Play');
9683
});
97-
// test('if the playback dropdown states 1x the speed should be 1x', () => {
98-
99-
// const wrapper = shallow(<TravelContainer { ...dropdownProps } />);
100-
101-
// expect(wrapper.find('Dropdown').label).toBe('1.0x')
102-
103-
// });
104-
105-
// test('if the playback dropdown states 2x the speed should be 2x', () => {
106-
107-
// const wrapper = shallow(<TravelContainer { ...dropdownProps } />);
108-
109-
// wrapper.find('Dropdown').simulate('click');
110-
111-
// expect(wrapper.find('Dropdown').label).toBe('2.0x')
112-
113-
// });
11484
});
85+
86+
// describe('testing the playback speed', () => {
87+
// test('if the playback dropdown states 0.5x the speed should be 0.5x', () => {
88+
// const wrapper = shallow(<TravelContainer {...props} />);
89+
// wrapper.find('Dropdown').simulate('change', { value: ['val'] });
90+
// wrapper.find('select').simulate('change', { value: 'hello' });
91+
// console.log('val', wrapper.find('Dropdown').simulate('select', { value: ['val'] }));
92+
// expect(wrapper.find('Dropdown').text()).toBe('0.5x');
93+
// expect(wrapper.find('select [selected]').val()).toEqual('key');
94+
// });
95+
// test('if the playback dropdown states 1x the speed should be 1x', () => {
96+
// const wrapper = shallow(<TravelContainer {...dropdownProps} />);
97+
98+
// expect(wrapper.find('Dropdown').label).toBe('1.0x');
99+
// });
100+
// test('if the playback dropdown states 2x the speed should be 2x', () => {
101+
// const wrapper = shallow(<TravelContainer {...dropdownProps} />);
102+
// wrapper.find('Dropdown').simulate('click');
103+
// expect(wrapper.find('Dropdown').label).toBe('2.0x');
104+
// });
105+
// });

‎src/app/__tests__/action.test.jsx

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,21 @@ import React from 'react';
22
import { configure, shallow } from 'enzyme';
33
import Adapter from 'enzyme-adapter-react-16';
44
import Action from '../components/Action';
5+
import { changeView, changeSlider } from '../actions/actions';
56

67
configure({ adapter: new Adapter() });
78

89
describe('unit testing for Action.jsx', () => {
910
let wrapper;
1011
const props = {
1112
selected: true,
12-
handleChangeSnapshot: jest.fn(),
13-
handleJumpSnapshot: jest.fn(),
13+
sliderIndex: 1,
1414
index: 1,
15+
dispatch: jest.fn(),
1516
};
1617
beforeEach(() => {
1718
wrapper = shallow(<Action {...props} />);
19+
props.dispatch.mockClear();
1820
});
1921

2022
describe('Component', () => {
@@ -32,9 +34,14 @@ describe('unit testing for Action.jsx', () => {
3234
expect(wrapper.find('.action-component-text').text()).toEqual(props.index.toString());
3335
});
3436

35-
test('should invoke changeSnapshot method when clicked', () => {
37+
test('should invoke dispatch method when clicked', () => {
3638
wrapper.find('.action-component').simulate('click');
37-
expect(props.handleChangeSnapshot).toHaveBeenCalled();
39+
expect(props.dispatch).toHaveBeenCalled();
40+
});
41+
42+
test('dispatch should send a changeView action', () => {
43+
wrapper.find('.action-component').simulate('click');
44+
expect(props.dispatch.mock.calls[0][0]).toEqual(changeView(props.index));
3845
});
3946
});
4047

@@ -48,13 +55,14 @@ describe('unit testing for Action.jsx', () => {
4855
).toHaveLength(1);
4956
});
5057

51-
test('should invoke jumpSnapshot method when clicked', () => {
52-
wrapper
53-
.find('.action-component')
54-
.children()
55-
.find('.jump-button')
56-
.simulate('click');
57-
expect(props.handleJumpSnapshot).toHaveBeenCalled();
58+
test('should invoke dispatch method when clicked', () => {
59+
wrapper.find('.jump-button').simulate('click', { stopPropagation() { } });
60+
expect(props.dispatch).toHaveBeenCalled();
61+
});
62+
63+
test('dispatch should send a changeSlider action', () => {
64+
wrapper.find('.jump-button').simulate('click', { stopPropagation() { } });
65+
expect(props.dispatch.mock.calls[0][0]).toEqual(changeSlider(props.index));
5866
});
5967
});
6068
});

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ describe('unit testing for Dropdown.jsx', () => {
1515
{ value: 23, label: '2.0x' },
1616
],
1717
setSpeed: jest.fn(),
18-
selectedOption: { value: 312, label: '1.0x' },
18+
selectedSpeed: { value: 312, label: '1.0x' },
1919
};
2020
beforeEach(() => {
2121
wrapper = shallow(<Dropdown {...props} />);
@@ -30,8 +30,8 @@ describe('unit testing for Dropdown.jsx', () => {
3030
});
3131
});
3232

33-
describe('handlechangeSpeed', () => {
34-
test('should invoke handleChangeSpeed onChange', () => {
33+
describe('setSpeed', () => {
34+
test('should invoke setSpeed on change', () => {
3535
wrapper.simulate('change', { value: 2000, label: '0.5x' });
3636
expect(props.setSpeed).toHaveBeenCalled();
3737
});

‎src/app/containers/MainContainer.jsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect } from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import HeadContainer from './HeadContainer';
33
import ActionContainer from './ActionContainer';
44
import StateContainer from './StateContainer';
@@ -10,9 +10,8 @@ import {
1010
} from '../actions/actions';
1111
import { useStoreContext } from '../store';
1212

13-
let npmPackageExists = false;
14-
1513
function MainContainer() {
14+
const [npmExists, setnpm] = useState(false);
1615
const [store, dispatch] = useStoreContext();
1716
const { tabs, currentTab, port: currentPort } = store;
1817

@@ -33,8 +32,8 @@ function MainContainer() {
3332
break;
3433
}
3534
case 'initialConnectSnapshots': {
36-
npmPackageExists = true;
3735
dispatch(initialConnect(payload));
36+
setnpm(true);
3837
break;
3938
}
4039
default:
@@ -49,7 +48,7 @@ function MainContainer() {
4948
dispatch(setPort(port));
5049
});
5150

52-
if (!npmPackageExists) return <div style={{ color: 'black' }}>please install our npm package in your app</div>;
51+
if (!npmExists) return <div style={{ color: 'black' }}>please install our npm package in your app</div>;
5352

5453
const { viewIndex, sliderIndex, snapshots } = tabs[currentTab];
5554

‎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)