Skip to content

Commit 632b0f7

Browse files
sergiu-ojocsergiu-ojoc
authored
Merge pull request #333 from HDI-Project/evtSummarryUT
More unit tests, event summary
2 parents 55f63d3 + 5634266 commit 632b0f7

File tree

5 files changed

+769
-23
lines changed

5 files changed

+769
-23
lines changed

‎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/Sidebar/EventSummary/__snapshots__/index.test.js.snap‎

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Testing Event Summary component -> Should render without crashing 1`] = `
4+
<div
5+
className="event-summary"
6+
>
7+
<div
8+
className="event-header"
9+
>
10+
<div
11+
className="left-wrapper"
12+
>
13+
<span>
14+
Overview Events Table
15+
</span>
16+
</div>
17+
<div
18+
className="right-wrapper"
19+
>
20+
<button
21+
id="toggleSummary"
22+
onClick={[Function]}
23+
type="button"
24+
>
25+
<span>
26+
HIDE
27+
</span>
28+
<FontAwesomeIcon
29+
border={false}
30+
className=""
31+
fixedWidth={false}
32+
flip={null}
33+
icon={
34+
Object {
35+
"icon": Array [
36+
320,
37+
512,
38+
Array [],
39+
"f054",
40+
"M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z",
41+
],
42+
"iconName": "chevron-right",
43+
"prefix": "fas",
44+
}
45+
}
46+
inverse={false}
47+
listItem={false}
48+
mask={null}
49+
pull={null}
50+
pulse={false}
51+
rotation={null}
52+
size={null}
53+
spin={false}
54+
swapOpacity={false}
55+
symbol={false}
56+
title=""
57+
transform={null}
58+
/>
59+
</button>
60+
</div>
61+
<div
62+
className="clear"
63+
/>
64+
</div>
65+
<div
66+
className="summary-details active"
67+
>
68+
<table>
69+
<tbody>
70+
<tr
71+
className="row-light"
72+
>
73+
<th>
74+
event tag
75+
</th>
76+
<td
77+
key="Investigate"
78+
>
79+
<span
80+
className="tooltip-data"
81+
>
82+
<i
83+
className="indicator investigate"
84+
key="investigate"
85+
/>
86+
Investigate
87+
</span>
88+
<i
89+
className="indicator investigate"
90+
key="investigate"
91+
/>
92+
</td>
93+
<td
94+
key="Do not Investigate"
95+
>
96+
<span
97+
className="tooltip-data"
98+
>
99+
<i
100+
className="indicator not_investigate"
101+
key="not_investigate"
102+
/>
103+
Do not Investigate
104+
</span>
105+
<i
106+
className="indicator not_investigate"
107+
key="not_investigate"
108+
/>
109+
</td>
110+
<td
111+
key="Postpone"
112+
>
113+
<span
114+
className="tooltip-data"
115+
>
116+
<i
117+
className="indicator postpone"
118+
key="postpone"
119+
/>
120+
Postpone
121+
</span>
122+
<i
123+
className="indicator postpone"
124+
key="postpone"
125+
/>
126+
</td>
127+
<td
128+
key="Problem"
129+
>
130+
<span
131+
className="tooltip-data"
132+
>
133+
<i
134+
className="indicator problem"
135+
key="problem"
136+
/>
137+
Problem
138+
</span>
139+
<i
140+
className="indicator problem"
141+
key="problem"
142+
/>
143+
</td>
144+
<td
145+
key="Previously seen"
146+
>
147+
<span
148+
className="tooltip-data"
149+
>
150+
<i
151+
className="indicator seen"
152+
key="seen"
153+
/>
154+
Previously seen
155+
</span>
156+
<i
157+
className="indicator seen"
158+
key="seen"
159+
/>
160+
</td>
161+
<td
162+
key="Normal"
163+
>
164+
<span
165+
className="tooltip-data"
166+
>
167+
<i
168+
className="indicator normal"
169+
key="normal"
170+
/>
171+
Normal
172+
</span>
173+
<i
174+
className="indicator normal"
175+
key="normal"
176+
/>
177+
</td>
178+
<td
179+
key="Untagged"
180+
>
181+
<span
182+
className="tooltip-data"
183+
>
184+
<i
185+
className="indicator untagged"
186+
key="untagged"
187+
/>
188+
Untagged
189+
</span>
190+
<i
191+
className="indicator untagged"
192+
key="untagged"
193+
/>
194+
</td>
195+
</tr>
196+
<tr>
197+
<th>
198+
Year
199+
</th>
200+
<td
201+
key="Investigate"
202+
>
203+
-
204+
</td>
205+
<td
206+
key="Do not Investigate"
207+
>
208+
-
209+
</td>
210+
<td
211+
key="Postpone"
212+
>
213+
-
214+
</td>
215+
<td
216+
key="Problem"
217+
>
218+
-
219+
</td>
220+
<td
221+
key="Previously seen"
222+
>
223+
-
224+
</td>
225+
<td
226+
key="Normal"
227+
>
228+
-
229+
</td>
230+
<td
231+
key="Untagged"
232+
>
233+
-
234+
</td>
235+
</tr>
236+
<tr
237+
className="row-light"
238+
>
239+
<th>
240+
Month
241+
</th>
242+
<td
243+
key="Investigate"
244+
>
245+
-
246+
</td>
247+
<td
248+
key="Do not Investigate"
249+
>
250+
-
251+
</td>
252+
<td
253+
key="Postpone"
254+
>
255+
-
256+
</td>
257+
<td
258+
key="Problem"
259+
>
260+
-
261+
</td>
262+
<td
263+
key="Previously seen"
264+
>
265+
-
266+
</td>
267+
<td
268+
key="Normal"
269+
>
270+
-
271+
</td>
272+
<td
273+
key="Untagged"
274+
>
275+
-
276+
</td>
277+
</tr>
278+
</tbody>
279+
</table>
280+
</div>
281+
</div>
282+
`;

‎client/src/components/Timeseries/Sidebar/EventSummary/index.jsx‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -40,32 +40,36 @@ const renderTagEventsPerMonth = (isPeriodLevelSelected, month, monthEvents) => {
4040
);
4141
};
4242

43-
const handleColHover = () => {
44-
const td = document.querySelectorAll('.summary-details td');
45-
46-
td.forEach((currentTd) => {
47-
currentTd.addEventListener('mouseover', function () {
48-
const index = this.cellIndex + 1;
49-
document.querySelectorAll(`td:nth-child(${index})`).forEach((hoveredTd) => {
50-
hoveredTd.classList.add('highlighted');
51-
});
52-
});
53-
54-
currentTd.addEventListener('mouseleave', function () {
55-
const index = this.cellIndex + 1;
56-
document.querySelectorAll(`td:nth-child(${index})`).forEach((hoveredTd) => {
57-
hoveredTd.classList.remove('highlighted');
58-
});
59-
});
60-
});
61-
};
62-
6343
class EventSummary extends Component {
6444
constructor(props) {
6545
super(props);
6646
this.state = {
6747
isSummaryVisible: true,
6848
};
49+
this.toggleSummaryDetails = this.toggleSummaryDetails.bind(this);
50+
}
51+
52+
componentDidMount() {
53+
this.handleColHover();
54+
}
55+
56+
handleColHover() {
57+
const td = document.querySelectorAll('.summary-details td');
58+
td.forEach((currentTd) => {
59+
currentTd.addEventListener('mouseover', function () {
60+
const index = this.cellIndex + 1;
61+
document.querySelectorAll(`td:nth-child(${index})`).forEach((hoveredTd) => {
62+
hoveredTd.classList.add('highlighted');
63+
});
64+
});
65+
66+
currentTd.addEventListener('mouseleave', function () {
67+
const index = this.cellIndex + 1;
68+
document.querySelectorAll(`td:nth-child(${index})`).forEach((hoveredTd) => {
69+
hoveredTd.classList.remove('highlighted');
70+
});
71+
});
72+
});
6973
}
7074

7175
toggleSummaryDetails() {
@@ -87,15 +91,14 @@ class EventSummary extends Component {
8791
<span>Overview Events Table</span>
8892
</div>
8993
<div className="right-wrapper">
90-
<button type="button" onClick={() => this.toggleSummaryDetails()}>
94+
<button type="button" onClick={this.toggleSummaryDetails} id="toggleSummary">
9195
<span>{buttonText}</span>
9296
<FontAwesomeIcon icon={faChevronRight} />
9397
</button>
9498
</div>
9599
<div className="clear" />
96100
</div>
97101
<div className={`summary-details ${activeSummary}`}>
98-
{handleColHover()}
99102
<table>
100103
<tbody>
101104
<tr className="row-light">

0 commit comments

Comments
 (0)