Skip to content

Commit db5982f

Browse files
sergiu-ojocsergiu-ojoc
authored
Merge pull request #334 from HDI-Project/unitTests
Unit tests
2 parents 0b35b17 + 632b0f7 commit db5982f

File tree

22 files changed

+1399
-286
lines changed

22 files changed

+1399
-286
lines changed

‎.vscode/launch.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@
66
"request": "launch",
77
"name": "Launch Chrome against localhost",
88
"url": "http://localhost:3001",
9-
"webRoot": "${workspaceFolder}/mtv-client"
9+
"webRoot": "${workspaceFolder}/client"
1010
},
1111
{
1212
"name": "Debug All CRA Tests",
1313
"type": "node",
1414
"request": "launch",
15-
"runtimeExecutable": "${workspaceRoot}/mtv-client/node_modules/.bin/react-scripts",
15+
"runtimeExecutable": "${workspaceRoot}/client/node_modules/.bin/react-scripts",
1616
"args": ["test", "--runInBand", "--no-cache", "--watchAll=false"],
17-
"cwd": "${workspaceRoot}/mtv-client",
17+
"cwd": "${workspaceRoot}/client",
1818
"protocol": "inspector",
1919
"console": "integratedTerminal",
2020
"internalConsoleOptions": "neverOpen",
@@ -25,15 +25,15 @@
2525
"name": "Debug Current CRA Test",
2626
"type": "node",
2727
"request": "launch",
28-
"runtimeExecutable": "${workspaceRoot}/mtv-client/node_modules/.bin/react-scripts",
28+
"runtimeExecutable": "${workspaceRoot}/client/node_modules/.bin/react-scripts",
2929
"args": [
3030
"test",
3131
"${fileBasenameNoExtension}",
3232
"--runInBand",
3333
"--no-cache",
3434
"--watchAll=false"
3535
],
36-
"cwd": "${workspaceRoot}/mtv-client",
36+
"cwd": "${workspaceRoot}/client",
3737
"protocol": "inspector",
3838
"console": "integratedTerminal",
3939
"internalConsoleOptions": "neverOpen",

‎client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
"react-select": "^3.1.0",
5757
"react-sortablejs": "^2.0.11",
5858
"react-syntax-highlighter": "^12.2.1",
59+
"react-test-renderer": "^16.13.1",
5960
"react-transition-group": "^4.3.0",
6061
"redux": "^4.0.5",
6162
"redux-devtools-extension": "^2.13.8",

‎client/src/components/Common/GoogleButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export class GoogleButton extends Component<GoogleButtonProps> {
3333
onSuccess={responseGoogleSucces}
3434
onFailure={responseGoogleSucces}
3535
cookiePolicy="single_host_origin"
36-
onAutoLoadFinished={message => message}
36+
onAutoLoadFinished={(message) => message}
3737
>
3838
{this.props.text}
3939
</GoogleLogin>

‎client/src/components/Timeseries/FocusChart/EventDetails/__snapshots__/EventDetails.test.js.snap‎

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`Testing event Details component -> Should render event details without crashing 1`] = `
44
<div
5-
class="events-wrapper "
5+
class="events-wrapper scroll-style "
66
>
77
<div>
88
<button
@@ -151,11 +151,18 @@ exports[`Testing event Details component -> Should render event details without
151151
<div
152152
class="event-row form-group"
153153
>
154-
<label
155-
for="comment"
154+
<ul
155+
class="form-intro"
156156
>
157-
Comment
158-
</label>
157+
<li>
158+
<label
159+
for="comment"
160+
>
161+
Comment
162+
</label>
163+
</li>
164+
<li />
165+
</ul>
159166
<div
160167
class="comment-area"
161168
>
@@ -193,9 +200,11 @@ exports[`Testing event Details component -> Should render event details without
193200
</div>
194201
</div>
195202
<div
196-
class="event-row "
203+
class="event-row"
197204
>
198-
<ul>
205+
<ul
206+
class="btn-wrapper"
207+
>
199208
<li>
200209
<button
201210
class="danger"
@@ -211,6 +220,28 @@ exports[`Testing event Details component -> Should render event details without
211220
Save
212221
</button>
213222
</li>
223+
<li>
224+
<p
225+
class="error"
226+
>
227+
<svg
228+
aria-hidden="true"
229+
class="svg-inline--fa fa-exclamation fa-w-6 "
230+
data-icon="exclamation"
231+
data-prefix="fas"
232+
focusable="false"
233+
role="img"
234+
viewBox="0 0 192 512"
235+
xmlns="http://www.w3.org/2000/svg"
236+
>
237+
<path
238+
d="M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z"
239+
fill="currentColor"
240+
/>
241+
</svg>
242+
Event update error
243+
</p>
244+
</li>
214245
</ul>
215246
</div>
216247
</div>

‎client/src/components/Timeseries/FocusChart/FocusChart.test.js‎

Lines changed: 86 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,103 @@
11
import React from 'react';
2+
import renderer from 'react-test-renderer';
23
import { FocusChart } from './FocusChart';
34
import { dataRun } from '../../../tests/testmocks/dataRun';
4-
import { renderWithStore } from '../../../tests/utils';
5+
6+
import * as chartUtils from './FocusChartUtils';
7+
import * as utils from '../../../model/utils/Utils';
58

69
jest.mock('./ShowErrors', () => () => 'Show Errors component');
710
jest.mock('./EventDetails', () => () => 'Event Details Component');
811
jest.mock('./ZoomControls', () => () => 'Zoom Controls Component');
912
jest.mock('./FocusChartEvents/AddEvent', () => () => 'Add Event Component');
1013

11-
describe('Testing FocusChart component ->', () => {
12-
it('Should render FocusChart without crashing', () => {
13-
const focusChartProps = {
14-
dataRun,
15-
isPredictionVisible: false,
16-
isTooltipVisible: false,
17-
periodRange: {
18-
zoomValue: 1,
19-
eventRange: (2)[(0, 0)],
14+
describe('Testing FocusChart component -> ', () => {
15+
const focusChartProps = {
16+
dataRun,
17+
isPredictionVisible: false,
18+
periodRange: {
19+
zoomValue: 1,
20+
eventRange: (2)[(0, 0)],
21+
},
22+
reviewRange: null,
23+
zoomCounter: 0,
24+
zoomDirection: '',
25+
isEditingRange: false,
26+
isZoomEnabled: true,
27+
setPeriodRange: jest.fn().mockReturnValue({ eventRange: [200, 300], zoomValue: 2.33 }),
28+
};
29+
30+
beforeAll(() => {
31+
chartUtils.getWrapperSize = jest.fn().mockReturnValue({ width: 300, height: 300 });
32+
utils.formatDate = jest.fn().mockReturnValue({
33+
startDate: {
34+
day: 'mon',
2035
},
21-
reviewRange: null,
22-
zoomCounter: 0,
23-
zoomDirection: '',
24-
isEditingRange: false,
25-
width: 300,
26-
height: 100,
27-
};
28-
const mountedFocusChart = renderWithStore({}, <FocusChart {...focusChartProps} />);
36+
});
37+
});
38+
39+
it('Set focus chart dimensions in state', () => {
40+
const mountedFocusChart = shallow(<FocusChart {...focusChartProps} />);
41+
expect(mountedFocusChart.instance().state.width).toBe(300);
42+
expect(mountedFocusChart.instance().state.height).toBe(300);
43+
});
44+
45+
it('Should Render without crashing', () => {
46+
const mountedFocusChart = renderer.create(<FocusChart {...focusChartProps} />).toJSON();
47+
2948
expect(mountedFocusChart).toMatchSnapshot();
3049
});
3150

32-
it('Should render focuschart predictions', () => {
33-
const focusChartProps = {
34-
dataRun,
35-
isPredictionVisible: false,
36-
isTooltipVisible: false,
37-
periodRange: {
38-
zoomValue: 1,
39-
eventRange: (2)[(0, 0)],
40-
},
41-
reviewRange: null,
42-
zoomCounter: 0,
43-
zoomDirection: '',
44-
isEditingRange: false,
45-
width: 300,
46-
height: 100,
47-
};
48-
const mountedFocusChart = renderWithStore({}, <FocusChart {...focusChartProps} />);
51+
it('Should render fousChart predictions', () => {
52+
const mountedFocusChart = renderer.create(<FocusChart {...focusChartProps} isPredictionVisible />);
4953
expect(mountedFocusChart).toMatchSnapshot();
5054
});
5155

52-
// should render tooltip
53-
// should handle zoom
54-
// test zoom presence
55-
// toogle zoom
56-
// update zoom on click
57-
//
56+
it('Should render event tooltip', () => {
57+
const mountedFocusChart = shallow(<FocusChart {...focusChartProps} />);
58+
mountedFocusChart.setState({
59+
isTooltipVisible: false,
60+
});
61+
62+
mountedFocusChart.find('#_5da802e1abc5668935743a07').simulate('mousemove', (event) => {
63+
mountedFocusChart.setState({
64+
eventData: {
65+
xCoord: 200,
66+
yCoord: 300,
67+
startDate: event.clientX,
68+
stopDate: event.clientX,
69+
},
70+
});
71+
});
72+
73+
expect(mountedFocusChart.instance().state.isTooltipVisible).toBe(true);
74+
});
75+
76+
it('Should handle updateZoomOnClick method', () => {
77+
const spy = jest.spyOn(FocusChart.prototype, 'updateZoomOnClick');
78+
const mountedFocusChart = mount(<FocusChart {...focusChartProps} zoomCounter={0} />);
79+
mountedFocusChart.setProps({ zoomCounter: 1, zoomDirection: 'In' });
80+
mountedFocusChart.update();
81+
expect(spy).toHaveBeenCalledTimes(1);
82+
});
83+
84+
it('Should handle toggleZoom method', () => {
85+
const spy = jest.spyOn(FocusChart.prototype, 'toggleZoom');
86+
const mountedFocusChart = mount(<FocusChart {...focusChartProps} />);
87+
mountedFocusChart.setProps({ isEditingRange: true });
88+
mountedFocusChart.update();
89+
expect(spy).toHaveBeenCalledTimes(1);
90+
91+
mountedFocusChart.setProps({ isEditingRange: false });
92+
mountedFocusChart.update();
93+
expect(spy).toHaveBeenCalledTimes(2);
94+
});
95+
96+
it('Should handle updateChartZoomOnSelectPeriod method', () => {
97+
const spy = jest.spyOn(FocusChart.prototype, 'updateChartZoomOnSelectPeriod');
98+
const mountedFocusChart = mount(<FocusChart {...focusChartProps} />);
99+
mountedFocusChart.setProps({ selectedPeriod: { year: 2009, month: '' } });
100+
mountedFocusChart.update();
101+
expect(spy).toHaveBeenCalledTimes(1);
102+
});
58103
});

‎client/src/components/Timeseries/FocusChart/FocusChart.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
getZoomCounter,
2121
getZoomOnClickDirection,
2222
getIsEditingEventRange,
23+
getZoomMode,
2324
} from '../../../model/selectors/datarun';
2425
import './FocusChart.scss';
2526

@@ -48,8 +49,8 @@ export class FocusChart extends Component<Props, State> {
4849
constructor(props) {
4950
super(props);
5051
this.state = {
51-
width: 200, // unit tests value
52-
height: 200, // unit tests value
52+
width: 0,
53+
height: 0,
5354
isTooltipVisible: false,
5455
eventData: {},
5556
};
@@ -324,10 +325,15 @@ export class FocusChart extends Component<Props, State> {
324325

325326
drawChartData() {
326327
const { width, height } = this.state;
327-
const { dataRun, isPredictionVisible } = this.props;
328+
const { dataRun, isPredictionVisible, isZoomEnabled } = this.props;
328329
const { eventWindows, timeSeries, timeseriesPred } = dataRun;
329330
const focusChartWidth = width - TRANSLATE_LEFT - 2 * CHART_MARGIN;
330331

332+
const zoomProps = {
333+
width: isZoomEnabled ? focusChartWidth : 0,
334+
height: isZoomEnabled ? height : 0,
335+
};
336+
331337
return (
332338
width > 0 &&
333339
height > 0 && (
@@ -342,7 +348,7 @@ export class FocusChart extends Component<Props, State> {
342348
<path className="chart-wawes" d={this.drawLine(timeSeries)} />
343349
{isPredictionVisible && <path className="predictions" d={this.drawLine(timeseriesPred)} />}
344350
</g>
345-
<rect className="zoom" width={focusChartWidth} height={height} />
351+
<rect className="zoom" {...zoomProps} />
346352
{eventWindows.map((currentEvent) => this.renderEvents(currentEvent))}
347353
</g>
348354
<g className="chart-axis">
@@ -383,6 +389,7 @@ const mapState = (state: RootState) => ({
383389
zoomCounter: getZoomCounter(state),
384390
zoomDirection: getZoomOnClickDirection(state),
385391
isEditingRange: getIsEditingEventRange(state),
392+
isZoomEnabled: getZoomMode(state),
386393
});
387394

388395
const mapDispatch = (dispatch: Function) => ({

‎client/src/components/Timeseries/FocusChart/FocusChartUtils.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ export const getWrapperSize = () => {
1515
};
1616

1717
export const getScale = (width, height, datarun) => {
18-
const [minTX, maxTX] = d3.extent(datarun, time => time[0]);
19-
const [minTY, maxTY] = d3.extent(datarun, time => time[1]);
18+
const [minTX, maxTX] = d3.extent(datarun, (time) => time[0]);
19+
const [minTY, maxTY] = d3.extent(datarun, (time) => time[1]);
2020
const drawableWidth = width - 2 * CHART_MARGIN - TRANSLATE_LEFT;
2121
const drawableHeight = height - 3.5 * CHART_MARGIN;
2222

@@ -48,12 +48,12 @@ export const drawLine = (data, periodRange, maxTimeSeries) => {
4848

4949
const line = d3
5050
.line()
51-
.x(d => xCoord(d[0]))
52-
.y(d => yCoord(d[1]));
51+
.x((d) => xCoord(d[0]))
52+
.y((d) => yCoord(d[1]));
5353
return line(data);
5454
};
5555

56-
export const normalizeHanlers = chart => {
56+
export const normalizeHanlers = (chart) => {
5757
const brushHandlers = d3.selectAll(`.${chart} rect.handle`);
5858
const overlay = d3.select(`.${chart} .selection`);
5959

@@ -69,10 +69,10 @@ export const normalizeHanlers = chart => {
6969

7070
const { height } = getWrapperSize();
7171
brushHandlers
72-
.attr('y', function() {
72+
.attr('y', function () {
7373
return height / 2 - height / 6;
7474
})
75-
.attr('height', function() {
75+
.attr('height', function () {
7676
return height / 4;
7777
})
7878
.attr('ry', 3);

‎client/src/components/Timeseries/FocusChart/ZoomControls.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { faArrowsAlt } from '@fortawesome/free-solid-svg-icons';
55
import { getZoomMode, getIsEditingEventRange } from '../../../model/selectors/datarun';
66
import { zoomOnClick, zoomToggleAction } from '../../../model/actions/datarun';
77

8-
const ZoomControls = (props) => (
8+
export const ZoomControls = (props) => (
99
<div>
1010
<ul>
1111
<li>
@@ -21,12 +21,12 @@ const ZoomControls = (props) => (
2121
</label>
2222
</li>
2323
<li>
24-
<button type="button" onClick={() => props.zoom('In')} disabled={props.isEditingEventRange}>
24+
<button type="button" onClick={() => props.zoom('In')} disabled={props.isEditingEventRange} id="zoomIn">
2525
<span>+</span>
2626
</button>
2727
</li>
2828
<li>
29-
<button type="button" onClick={() => props.zoom('Out')} disabled={props.isEditingEventRange}>
29+
<button type="button" onClick={() => props.zoom('Out')} disabled={props.isEditingEventRange} id="zoomOut">
3030
<span>-</span>
3131
</button>
3232
</li>

0 commit comments

Comments
 (0)