Skip to content

Commit 72b7923

Browse files
bmicharebmichare
committed
worknig on testing suite
1 parent 9d358ab commit 72b7923

File tree

6 files changed

+39
-149
lines changed

6 files changed

+39
-149
lines changed

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,6 @@ describe('unit testing for Action.tsx', () => {
4545
wrapper.setProps({ selected: false });
4646
expect(wrapper.hasClass('action-component selected')).toEqual(false);
4747
});
48-
test('should have a text that is equal to props.index', () => {
49-
expect(wrapper.find('.action-component-text').text()).toEqual(`${props.displayName}: ${props.componentName} `);
50-
});
5148

5249
test('should invoke dispatch method when clicked', () => {
5350
wrapper.find('.action-component').simulate('click');

‎src/app/components/BarGraph.tsx

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @ts-nocheck
2-
import React, { useEffect, useRef } from 'react';
2+
import React, { useEffect, useState } from 'react';
33
import { BarStack } from '@visx/shape';
44
import { SeriesPoint } from '@visx/shape/lib/types';
55
import { Group } from '@visx/group';
@@ -61,7 +61,8 @@ const tooltipStyles = {
6161

6262
const BarGraph = props => {
6363
const [{ tabs, currentTab }, dispatch] = useStoreContext();
64-
const { width, height, data } = props;
64+
const { width, height, data, comparison } = props;
65+
const [ seriesNameInput, setSeriesNameInput ] = useState(`Series ${comparison.length}`);
6566
const {
6667
tooltipOpen,
6768
tooltipLeft,
@@ -124,25 +125,23 @@ const BarGraph = props => {
124125
});
125126

126127
const saveSeriesClickHandler = () => {
127-
const seriesName = document.getElementById('seriesname').value;
128-
const actionNames = document.getElementsByClassName('actionname');
129-
console.log("action names", actionNames);
130-
// const testname = document.getElementsByClassName('actionname').value
131-
// console.log(testname)
132-
for (let i = 0; i < actionNames.length; i++ ) {
133-
toStorage.data.barStack[i].name = actionNames[i].value;
128+
if (tabs[currentTab].seriesSavedStatus === 'inputBoxOpen') {
129+
const actionNames = document.getElementsByClassName('actionname');
130+
for (let i = 0; i < actionNames.length; i++ ) {
131+
toStorage.data.barStack[i].name = actionNames[i].value;
132+
}
133+
dispatch(save(toStorage, seriesNameInput));
134+
setSeriesNameInput(`Series ${comparison.length}`)
135+
return
134136
}
135-
// displayName: ${componentName !== 'nameless' ? componentName :
136-
137-
138-
dispatch(save(toStorage, seriesName));
137+
dispatch(save(toStorage))
139138
}
140139

141-
// const textbox = tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? <input type="text" className="seriesname" placeholder="Series Name" /> : null
142-
console.log('dataFromBarGraph', data)
140+
const textbox = tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? <input type="text" id="seriesname" value={seriesNameInput} onChange={e => setSeriesNameInput(e.target.value)} /> : null;
143141
return (
144142
<div className="bargraph-position">
145-
<input type="text" id ="seriesname" placeholder="Series Name" />
143+
{/* <input type="text" id ="seriesname" placeholder="Series Name" /> */}
144+
{textbox}
146145
<button
147146
type="button"
148147
className="save-series-button"
@@ -151,7 +150,6 @@ const BarGraph = props => {
151150
Save Series
152151
</button>
153152
<svg ref={containerRef} width={width} height={height}>
154-
{}
155153
<rect
156154
x={0}
157155
y={0}

‎src/app/components/BarGraphComparison.tsx

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -72,17 +72,9 @@ const BarGraphComparison = props => {
7272
const {
7373
width, height, data, comparison, setSeries, series, setAction
7474
} = props;
75-
// const [series, setSeries] = React.useState(0);
7675
const [snapshots, setSnapshots] = React.useState(0);
7776
const [open, setOpen] = React.useState(false);
7877
const [picOpen, setPicOpen] = React.useState(false);
79-
const [maxRender, setMaxRender] = React.useState(data.maxTotalRender);
80-
81-
function titleFilter(comparisonArray) {
82-
return comparisonArray.filter(
83-
elem => elem.title.split('-')[1] === tabs[currentTab].title.split('-')[1],
84-
);
85-
}
8678

8779
const currentIndex = tabs[currentTab].sliderIndex;
8880

@@ -173,53 +165,40 @@ const BarGraphComparison = props => {
173165
const handleSeriesChange = event => {
174166
setSeries(event.target.value);
175167
setAction(false);
176-
// setXpoints();
177168
};
178169

179170
const handleClose = () => {
180171
setOpen(false);
181-
// setXpoints();
182172
};
183173

184174
const handleOpen = () => {
185175
setOpen(true);
186-
// setXpoints();
187176
};
188177

189178
const handleActionChange = event => {
190179
setAction(event.target.value);
191180
setSeries(false);
192-
console.log(event.target.value)
193-
// setXpoints();
194181
};
195182

196183
const picHandleClose = () => {
197184
setPicOpen(false);
198-
// setXpoints();
199185
};
200186

201187
const picHandleOpen = () => {
202188
setPicOpen(true);
203-
// setXpoints();
204189
};
205190

206191
// manually assignin X -axis points with tab ID.
207192
function setXpointsComparison() {
208193
comparison[series].data.barStack.forEach(elem => {
209194
elem.currentTab = 'comparison';
210195
});
211-
// comparison[series].data.barStack.currentTab = currentTab;
212-
console.log(comparison)
213-
console.log(series)
214-
console.log(comparison[series].data.barStack)
215196
return comparison[series].data.barStack;
216197
}
217198
function setXpointsCurrentTab() {
218-
console.log('unprocessedData',data)
219199
data.barStack.forEach(element => {
220200
element.currentTab = 'currentTab';
221201
});
222-
console.log('processedData', data.barStack)
223202
return data.barStack;
224203
}
225204
const animateButton = function (e) {
@@ -243,7 +222,6 @@ const BarGraphComparison = props => {
243222
for (let i = 0; i < testList.length; i++) {
244223
if (testList[i] !== "" && !finalList.includes(testList[i])) finalList.push(testList[i]);
245224
}
246-
console.log('Final List', finalList)
247225

248226
return (
249227
<div>
@@ -274,11 +252,8 @@ const BarGraphComparison = props => {
274252
{!comparison.length ? (
275253
<MenuItem>No series available</MenuItem>
276254
) : (
277-
// titleFilter(comparison).map((tabElem, index) => (
278-
// <MenuItem value={index}>{`Series ${index + 1}`}</MenuItem>
279-
// ))
280255
comparison.map((tabElem, index) => (
281-
<MenuItem value={index}>{tabElem.name}</MenuItem>
256+
<MenuItem key={`MenuItem${tabElem.name}`} value={index}>{tabElem.name}</MenuItem>
282257
))
283258
)}
284259
</Select>

‎src/app/components/BarGraphComparisonActions.tsx

Lines changed: 13 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -72,13 +72,10 @@ const BarGraphComparisonActions = props => {
7272
const {
7373
width, height, data, comparison, setSeries, series, setAction, action
7474
} = props;
75-
// const [series, setSeries] = React.useState(0);
7675
const [snapshots, setSnapshots] = React.useState(0);
7776
const [open, setOpen] = React.useState(false);
7877
const [picOpen, setPicOpen] = React.useState(false);
7978

80-
const currentIndex = tabs[currentTab].sliderIndex;
81-
8279
const {
8380
tooltipOpen,
8481
tooltipLeft,
@@ -90,11 +87,9 @@ const BarGraphComparisonActions = props => {
9087
let tooltipTimeout: number;
9188

9289
const { containerRef, TooltipInPortal } = useTooltipInPortal();
90+
console.log(data)
9391
const keys = Object.keys(data[0]).filter((componentName) => componentName !== 'name' && componentName !== 'seriesName' && componentName !== 'snapshotId');
9492
// data accessor (used to generate scales) and formatter (add units for on hover box)
95-
const getSnapshotId = (d: snapshot) => d.snapshotId;
96-
const formatSnapshotId = id => `Snapshot ID: ${id}`;
97-
const formatRenderTime = time => `${time} ms `;
9893
const getSeriesName = action => action.seriesName;
9994

10095
// create visualization SCALES with cleaned data
@@ -215,9 +210,6 @@ const BarGraphComparisonActions = props => {
215210
if (testList[i] !== "" && !finalList.includes(testList[i])) finalList.push(testList[i]);
216211
}
217212

218-
console.log(data);
219-
console.log(keys);
220-
221213
return (
222214
<div>
223215
<div className="series-options-container">
@@ -237,22 +229,15 @@ const BarGraphComparisonActions = props => {
237229
labelId="simple-select-outlined-label"
238230
id="simple-select-outlined"
239231
className={classes.select}
240-
open={open}
241-
onClose={handleClose}
242-
onOpen={handleOpen}
232+
// open={open}
233+
// onClose={handleClose}
234+
// onOpen={handleOpen}
243235
value={series}
244236
onChange={handleSeriesChange}
245237
>
246238
{!comparison.length ? (
247239
<MenuItem>No series available</MenuItem>
248-
) : (
249-
// titleFilter(comparison).map((tabElem, index) => (
250-
// <MenuItem value={index}>{`Series ${index + 1}`}</MenuItem>
251-
// ))
252-
comparison.map((tabElem, index) => (
253-
<MenuItem value={index}>{tabElem.name}</MenuItem>
254-
))
255-
)}
240+
) : comparison.map((tabElem, index) => (<MenuItem key={`MenuItem${tabElem.name}`} value={index}>{tabElem.name}</MenuItem> ))}
256241
</Select>
257242
</FormControl>
258243
<h4 style={{ padding: '0 1rem' }}>Compare Actions </h4>
@@ -262,18 +247,17 @@ const BarGraphComparisonActions = props => {
262247
labelId="snapshot-select"
263248
id="snapshot-select"
264249
className={classes.select}
265-
open={picOpen}
266-
onClose={picHandleClose}
267-
onOpen={picHandleOpen}
250+
// open={picOpen}
251+
// onClose={picHandleClose}
252+
// onOpen={picHandleOpen}
268253
value={action} //snapshots
269254
onChange={handleActionChange}
270255
>
271256
{!comparison[snapshots] ? (
272257
<MenuItem>No snapshots available</MenuItem>
273258
) : (
274-
finalList.map((elem, index) => (
275-
<MenuItem value={elem}>{elem}</MenuItem>
276-
// <MenuItem value="test">{}</MenuItem>
259+
finalList.map((elem) => (
260+
<MenuItem key={`MenuItem${elem}`} value={elem}>{elem}</MenuItem>
277261
)))
278262
}
279263
</Select>
@@ -282,7 +266,6 @@ const BarGraphComparisonActions = props => {
282266
</div>
283267

284268
<svg ref={containerRef} width={width} height={height}>
285-
{}
286269
<rect
287270
x={0}
288271
y={0}
@@ -312,7 +295,6 @@ const BarGraphComparisonActions = props => {
312295
color={colorScale}
313296
>
314297
{barStacks => barStacks.map(barStack => barStack.bars.map((bar) => {
315-
console.log(bar)
316298
return (
317299
<rect
318300
key={`bar-stack-${bar.bar.data.seriesName}-${bar.key}`}
@@ -330,7 +312,6 @@ const BarGraphComparisonActions = props => {
330312
}}
331313
// Cursor position in window updates position of the tool tip.
332314
onMouseMove={event => {
333-
// dispatch(onHover(data.componentData[bar.key].rtid));
334315
if (tooltipTimeout) clearTimeout(tooltipTimeout);
335316
const top = event.clientY - margin.top - bar.height;
336317
const left = bar.x + bar.width / 2;
@@ -382,7 +363,7 @@ const BarGraphComparisonActions = props => {
382363
Rendering Time (ms)
383364
</Text>
384365
<Text x={xMax / 2} y={yMax + 65} fontSize={12} fill="#FFFFFF">
385-
Series ID
366+
Series Name
386367
</Text>
387368
</svg>
388369
{/* FOR HOVER OVER DISPLAY */}
@@ -394,22 +375,11 @@ const BarGraphComparisonActions = props => {
394375
style={tooltipStyles}
395376
>
396377
<div style={{ color: colorScale(tooltipData.key) }}>
397-
{' '}
398378
<strong>{tooltipData.key}</strong>
399-
{console.log(tooltipData)}
400-
{' '}
401-
</div>
402-
{/* <div>{data.componentData[tooltipData.key].stateType}</div> */}
403-
<div>
404-
{' '}
405-
{formatRenderTime(tooltipData.bar.data[tooltipData.key])}
406-
{' '}
407379
</div>
380+
<div> {`${tooltipData.bar.data[tooltipData.key]} ms`} </div>
408381
<div>
409-
{' '}
410-
<small>
411-
{tooltipData.bar.data.seriesName}
412-
</small>
382+
<small> {tooltipData.bar.data.seriesName} </small>
413383
</div>
414384
</TooltipInPortal>
415385
)}

0 commit comments

Comments
 (0)