1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
import { shallowMount } from '@vue/test-utils';
import Area from '~/serverless/components/area.vue';
import { mockNormalizedMetrics } from '../mock_data';
describe('Area component', () => {
const mockWidgets = 'mockWidgets';
const mockGraphData = mockNormalizedMetrics;
let areaChart;
beforeEach(() => {
areaChart = shallowMount(Area, {
propsData: {
graphData: mockGraphData,
containerWidth: 0,
},
slots: {
default: mockWidgets,
},
});
});
afterEach(() => {
areaChart.destroy();
});
it('renders chart title', () => {
expect(areaChart.find({ ref: 'graphTitle' }).text()).toBe(mockGraphData.title);
});
it('contains graph widgets from slot', () => {
expect(areaChart.find({ ref: 'graphWidgets' }).text()).toBe(mockWidgets);
});
describe('methods', () => {
describe('formatTooltipText', () => {
const mockDate = mockNormalizedMetrics.queries[0].result[0].values[0].time;
const generateSeriesData = type => ({
seriesData: [
{
componentSubType: type,
value: [mockDate, 4],
},
],
value: mockDate,
});
describe('series is of line type', () => {
beforeEach(() => {
areaChart.vm.formatTooltipText(generateSeriesData('line'));
});
it('formats tooltip title', () => {
expect(areaChart.vm.tooltipPopoverTitle).toBe('28 Feb 2019, 11:11AM');
});
it('formats tooltip content', () => {
expect(areaChart.vm.tooltipPopoverContent).toBe('Invocations (requests): 4');
});
});
it('verify default interval value of 1', () => {
expect(areaChart.vm.getInterval).toBe(1);
});
});
describe('onResize', () => {
const mockWidth = 233;
beforeEach(() => {
spyOn(Element.prototype, 'getBoundingClientRect').and.callFake(() => ({
width: mockWidth,
}));
areaChart.vm.onResize();
});
it('sets area chart width', () => {
expect(areaChart.vm.width).toBe(mockWidth);
});
});
});
describe('computed', () => {
describe('chartData', () => {
it('utilizes all data points', () => {
expect(Object.keys(areaChart.vm.chartData)).toEqual(['requests']);
expect(areaChart.vm.chartData.requests.length).toBe(2);
});
it('creates valid data', () => {
const data = areaChart.vm.chartData.requests;
expect(
data.filter(
datum => new Date(datum.time).getTime() > 0 && typeof datum.value === 'number',
).length,
).toBe(data.length);
});
});
describe('generateSeries', () => {
it('utilizes correct time data', () => {
expect(areaChart.vm.generateSeries.data).toEqual([
['2019-02-28T11:11:38.756Z', 0],
['2019-02-28T11:12:38.756Z', 0],
]);
});
});
describe('xAxisLabel', () => {
it('constructs a label for the chart x-axis', () => {
expect(areaChart.vm.xAxisLabel).toBe('invocations / minute');
});
});
describe('yAxisLabel', () => {
it('constructs a label for the chart y-axis', () => {
expect(areaChart.vm.yAxisLabel).toBe('Invocations (requests)');
});
});
});
});
|
