Skip to content

Commit 00f1666

Browse files
JeanMarcMilletScalityJeanMarcMilletScality
committed
update graphUtils test
1 parent b9283a8 commit 00f1666

File tree

1 file changed

+215
-72
lines changed

1 file changed

+215
-72
lines changed

‎ui/src/services/graphUtils.test.ts‎

Lines changed: 215 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,22 @@ import {
22
getMultiResourceSeriesForChart,
33
getMultipleSymmetricalSeries,
44
fiterMetricValues,
5+
createSymmetricalQuantileColorSet,
6+
createColorSet,
7+
getTimeFormatForInterval,
58
} from './graphUtils';
9+
import {
10+
lineColor2,
11+
lineColor3,
12+
lineColor4,
13+
lineColor5,
14+
lineColor6,
15+
lineColor7,
16+
CHART_COLOR_VALUES,
17+
SAMPLE_FREQUENCY_LAST_SEVEN_DAYS,
18+
SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
19+
SAMPLE_FREQUENCY_LAST_ONE_HOUR,
20+
} from '../constants';
621
const testPromData = {
722
status: 'success',
823
data: {
@@ -61,7 +76,6 @@ it('returns the data set within series for multi resources chart', () => {
6176
[1620738665, '29.994621830058193'],
6277
],
6378
resource: 'node1',
64-
getLegendLabel: expect.anything(),
6579
getTooltipLabel: expect.anything(),
6680
isLineDashed: false,
6781
},
@@ -74,7 +88,6 @@ it('returns the data set within series for multi resources chart', () => {
7488
[1620738665, '29.994621830058193'],
7589
],
7690
resource: 'node2',
77-
getLegendLabel: expect.anything(),
7891
getTooltipLabel: expect.anything(),
7992
isLineDashed: false,
8093
},
@@ -164,64 +177,66 @@ it('returns the series for multi resources symmetrical chart', () => {
164177
'read',
165178
testNodesData,
166179
);
167-
const expectSymmetricalSeries = [
168-
{
169-
data: [
170-
[1620727967, '10'],
171-
[1620731567, '11'],
172-
[1620735167, '12'],
173-
[1620738767, '13'],
174-
[1620742367, '14'],
175-
],
176-
resource: 'node1',
177-
isLineDashed: false,
178-
metricPrefix: 'write',
179-
getLegendLabel: expect.anything(),
180-
getTooltipLabel: expect.anything(),
181-
},
182-
{
183-
data: [
184-
[1620727967, '20'],
185-
[1620731567, '21'],
186-
[1620735167, '22'],
187-
[1620738767, '23'],
188-
[1620742367, '24'],
189-
],
190-
resource: 'node2',
191-
isLineDashed: false,
192-
metricPrefix: 'write',
193-
getLegendLabel: expect.anything(),
194-
getTooltipLabel: expect.anything(),
195-
},
196-
{
197-
data: [
198-
[1620727967, '15'],
199-
[1620731567, '16'],
200-
[1620735167, '17'],
201-
[1620738767, '18'],
202-
[1620742367, '19'],
203-
],
204-
resource: 'node1',
205-
isLineDashed: false,
206-
metricPrefix: 'read',
207-
getLegendLabel: null,
208-
getTooltipLabel: expect.anything(),
209-
},
210-
{
211-
data: [
212-
[1620727967, '25'],
213-
[1620731567, '26'],
214-
[1620735167, '27'],
215-
[1620738767, '28'],
216-
[1620742367, '29'],
217-
],
218-
resource: 'node2',
219-
isLineDashed: false,
220-
metricPrefix: 'read',
221-
getLegendLabel: null,
222-
getTooltipLabel: expect.anything(),
223-
},
224-
];
180+
const expectSymmetricalSeries = {
181+
above: [
182+
{
183+
data: [
184+
[1620727967, '10'],
185+
[1620731567, '11'],
186+
[1620735167, '12'],
187+
[1620738767, '13'],
188+
[1620742367, '14'],
189+
],
190+
resource: 'node1',
191+
isLineDashed: false,
192+
metricPrefix: 'write',
193+
getTooltipLabel: expect.anything(),
194+
},
195+
{
196+
data: [
197+
[1620727967, '20'],
198+
[1620731567, '21'],
199+
[1620735167, '22'],
200+
[1620738767, '23'],
201+
[1620742367, '24'],
202+
],
203+
resource: 'node2',
204+
isLineDashed: false,
205+
metricPrefix: 'write',
206+
getTooltipLabel: expect.anything(),
207+
},
208+
],
209+
below: [
210+
{
211+
data: [
212+
[1620727967, '15'],
213+
[1620731567, '16'],
214+
[1620735167, '17'],
215+
[1620738767, '18'],
216+
[1620742367, '19'],
217+
],
218+
resource: 'node1',
219+
isLineDashed: false,
220+
metricPrefix: 'read',
221+
getTooltipLabel: expect.anything(),
222+
renderTooltipSerie: expect.anything(),
223+
},
224+
{
225+
data: [
226+
[1620727967, '25'],
227+
[1620731567, '26'],
228+
[1620735167, '27'],
229+
[1620738767, '28'],
230+
[1620742367, '29'],
231+
],
232+
resource: 'node2',
233+
isLineDashed: false,
234+
metricPrefix: 'read',
235+
getTooltipLabel: expect.anything(),
236+
renderTooltipSerie: expect.anything(),
237+
},
238+
],
239+
};
225240
expect(series).toMatchObject(expectSymmetricalSeries);
226241
});
227242
it('returns the correct labels for tooltip and legend for multi resources symmetrical chart', () => {
@@ -233,40 +248,40 @@ it('returns the correct labels for tooltip and legend for multi resources symmet
233248
'read',
234249
testNodesData,
235250
);
251+
// Flatten series for easier testing
252+
const allSeries = [...series.above, ...series.below];
253+
236254
//resource: 'node1'
237255
expect(
238-
series
256+
allSeries
239257
.find(
240258
(serie) => serie.resource === 'node1' && serie.metricPrefix === 'write',
241259
)
242260
.getTooltipLabel('write', 'node1'),
243261
).toEqual('node1-write');
244262
expect(
245-
series
263+
allSeries
246264
.find(
247265
(serie) => serie.resource === 'node1' && serie.metricPrefix === 'read',
248266
)
249267
.getTooltipLabel('read', 'node1'),
250268
).toEqual('node1-read');
251269
//resource: 'node2'
270+
const node2WriteSerite = allSeries.find(
271+
(serie) => serie.resource === 'node2' && serie.metricPrefix === 'write',
272+
);
273+
expect(node2WriteSerite).toBeDefined();
252274
expect(
253-
series
254-
.find(
255-
(serie) => serie.resource === 'node2' && serie.metricPrefix === 'write',
256-
)
257-
.getLegendLabel('write', 'node2'),
258-
).toEqual('node2');
259-
expect(
260-
series
275+
allSeries
261276
.find(
262277
(serie) => serie.resource === 'node2' && serie.metricPrefix === 'write',
263278
)
264279
.getTooltipLabel('write', 'node2'),
265280
).toEqual('node2-write');
266281
expect(
267-
series
282+
allSeries
268283
.find(
269-
(serie) => serie.resource === 'node2' && serie.metricPrefix === 'write',
284+
(serie) => serie.resource === 'node2' && serie.metricPrefix === 'read',
270285
)
271286
.getTooltipLabel('read', 'node2'),
272287
).toEqual('node2-read');
@@ -277,7 +292,9 @@ it('selects the result with the expected label', () => {
277292
instance: '192.168.1.1',
278293
};
279294
const prometheusResult = {
295+
status: 'success',
280296
data: {
297+
resultType: 'matrix',
281298
result: [
282299
{
283300
metric: {
@@ -309,7 +326,9 @@ it('selects the result with the 2 expected labels', () => {
309326
device: 'eth2',
310327
};
311328
const prometheusResult = {
329+
status: 'success',
312330
data: {
331+
resultType: 'matrix',
313332
result: [
314333
{
315334
metric: {
@@ -338,3 +357,127 @@ it('selects the result with the 2 expected labels', () => {
338357
values: [1, '1'],
339358
});
340359
});
360+
361+
// Test createSymmetricalQuantileColorSet function
362+
describe('createSymmetricalQuantileColorSet', () => {
363+
const mockAboveSeries = [
364+
{ resource: 'Q90-write', name: 'Q90-write' },
365+
{ resource: 'Median-write', name: 'Median-write' },
366+
{ resource: 'Q5-write', name: 'Q5-write' },
367+
];
368+
369+
const mockBelowSeries = [
370+
{ resource: 'Q5-read', name: 'Q5-read' },
371+
{ resource: 'Median-read', name: 'Median-read' },
372+
{ resource: 'Q90-read', name: 'Q90-read' },
373+
];
374+
375+
it('assigns correct colors for above series', () => {
376+
const colorSet = createSymmetricalQuantileColorSet(mockAboveSeries, []);
377+
378+
expect(colorSet['Q90-write']).toBe(lineColor3); // cyan
379+
expect(colorSet['Median-write']).toBe(lineColor5); // yellow
380+
expect(colorSet['Q5-write']).toBe(lineColor4); // blue
381+
});
382+
383+
it('assigns correct colors for below series', () => {
384+
const colorSet = createSymmetricalQuantileColorSet([], mockBelowSeries);
385+
386+
expect(colorSet['Q5-read']).toBe(lineColor6); // red
387+
expect(colorSet['Median-read']).toBe(lineColor2); // gold
388+
expect(colorSet['Q90-read']).toBe(lineColor7); // orange
389+
});
390+
391+
it('assigns correct colors for both above and below series', () => {
392+
const colorSet = createSymmetricalQuantileColorSet(
393+
mockAboveSeries,
394+
mockBelowSeries,
395+
);
396+
397+
// Above series colors
398+
expect(colorSet['Q90-write']).toBe(lineColor3); // cyan
399+
expect(colorSet['Median-write']).toBe(lineColor5); // yellow
400+
expect(colorSet['Q5-write']).toBe(lineColor4); // blue
401+
402+
// Below series colors
403+
expect(colorSet['Q5-read']).toBe(lineColor6); // red
404+
expect(colorSet['Median-read']).toBe(lineColor2); // gold
405+
expect(colorSet['Q90-read']).toBe(lineColor7); // orange
406+
});
407+
408+
it('handles empty series arrays', () => {
409+
const colorSet = createSymmetricalQuantileColorSet([], []);
410+
411+
expect(colorSet).toEqual({});
412+
});
413+
414+
it('handles series with name property instead of resource', () => {
415+
const aboveSeriesWithName = [
416+
{ name: 'Q90-write' },
417+
{ name: 'Median-write' },
418+
{ name: 'Q5-write' },
419+
];
420+
421+
const colorSet = createSymmetricalQuantileColorSet(aboveSeriesWithName, []);
422+
423+
expect(colorSet['Q90-write']).toBe(lineColor3); // cyan
424+
expect(colorSet['Median-write']).toBe(lineColor5); // yellow
425+
expect(colorSet['Q5-write']).toBe(lineColor4); // blue
426+
});
427+
428+
it('handles mixed series with both resource and name properties', () => {
429+
const mixedAboveSeries = [
430+
{ resource: 'Q90-write' },
431+
{ name: 'Median-write' },
432+
{ resource: 'Q5-write', name: 'Q5-write' },
433+
];
434+
435+
const colorSet = createSymmetricalQuantileColorSet(mixedAboveSeries, []);
436+
437+
expect(colorSet['Q90-write']).toBe(lineColor3); // cyan
438+
expect(colorSet['Median-write']).toBe(lineColor5); // yellow
439+
expect(colorSet['Q5-write']).toBe(lineColor4); // blue
440+
});
441+
});
442+
443+
// Test createColorSet function
444+
describe('createColorSet', () => {
445+
it('creates color mapping for series names', () => {
446+
const seriesNames = ['series1', 'series2', 'series3'];
447+
const colorSet = createColorSet(seriesNames);
448+
449+
expect(colorSet['series1']).toBe(CHART_COLOR_VALUES[0]);
450+
expect(colorSet['series2']).toBe(CHART_COLOR_VALUES[1]);
451+
expect(colorSet['series3']).toBe(CHART_COLOR_VALUES[2]);
452+
});
453+
454+
it('handles empty series array', () => {
455+
const colorSet = createColorSet([]);
456+
expect(colorSet).toEqual({});
457+
});
458+
});
459+
460+
// Test getTimeFormatForInterval function
461+
describe('getTimeFormatForInterval', () => {
462+
it('returns day-month-abbreviated-hour-minute for 7 days interval', () => {
463+
const result = getTimeFormatForInterval(SAMPLE_FREQUENCY_LAST_SEVEN_DAYS);
464+
expect(result).toBe('day-month-abbreviated-hour-minute');
465+
});
466+
467+
it('returns day-month-abbreviated-hour-minute for 24 hours interval', () => {
468+
const result = getTimeFormatForInterval(
469+
SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
470+
);
471+
expect(result).toBe('day-month-abbreviated-hour-minute');
472+
});
473+
474+
it('returns day-month-abbreviated-hour-minute-second for 1 hour interval', () => {
475+
const result = getTimeFormatForInterval(SAMPLE_FREQUENCY_LAST_ONE_HOUR);
476+
expect(result).toBe('day-month-abbreviated-hour-minute-second');
477+
});
478+
479+
it('returns long-date-without-weekday for unknown interval', () => {
480+
const result = getTimeFormatForInterval(999);
481+
expect(result).toBe('long-date-without-weekday');
482+
});
483+
});

0 commit comments

Comments
 (0)