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
122
123
124
125
126
127
|
import 'jquery';
import PrometheusGraph from '~/monitoring/prometheus_graph';
import prometheusStates from '~/monitoring/prometheus_states';
import { prometheusMockData } from './prometheus_mock_data';
describe('PrometheusGraph', () => {
const fixtureName = 'static/environments/metrics.html.raw';
const prometheusGraphContainer = '.prometheus-graph';
const prometheusGraphContents = `${prometheusGraphContainer}[graph-type=cpu_values]`;
preloadFixtures(fixtureName);
beforeEach(() => {
loadFixtures(fixtureName);
$('.prometheus-container').data('has-metrics', 'true');
this.prometheusGraph = new PrometheusGraph();
const self = this;
const fakeInit = (metricsResponse) => {
self.prometheusGraph.transformData(metricsResponse);
self.prometheusGraph.createGraph();
};
spyOn(this.prometheusGraph, 'init').and.callFake(fakeInit);
});
it('initializes graph properties', () => {
// Test for the measurements
expect(this.prometheusGraph.margin).toBeDefined();
expect(this.prometheusGraph.marginLabelContainer).toBeDefined();
expect(this.prometheusGraph.originalWidth).toBeDefined();
expect(this.prometheusGraph.originalHeight).toBeDefined();
expect(this.prometheusGraph.height).toBeDefined();
expect(this.prometheusGraph.width).toBeDefined();
expect(this.prometheusGraph.backOffRequestCounter).toBeDefined();
// Test for the graph properties (colors, radius, etc.)
expect(this.prometheusGraph.graphSpecificProperties).toBeDefined();
expect(this.prometheusGraph.commonGraphProperties).toBeDefined();
});
it('transforms the data', () => {
this.prometheusGraph.init(prometheusMockData.metrics);
Object.keys(this.prometheusGraph.graphSpecificProperties, (key) => {
const graphProps = this.prometheusGraph.graphSpecificProperties[key];
expect(graphProps.data).toBeDefined();
expect(graphProps.data.length).toBe(121);
});
});
it('creates two graphs', () => {
this.prometheusGraph.init(prometheusMockData.metrics);
expect($(prometheusGraphContainer).length).toBe(2);
});
describe('Graph contents', () => {
beforeEach(() => {
this.prometheusGraph.init(prometheusMockData.metrics);
});
it('has axis, an area, a line and a overlay', () => {
const $graphContainer = $(prometheusGraphContents).find('.x-axis').parent();
expect($graphContainer.find('.x-axis')).toBeDefined();
expect($graphContainer.find('.y-axis')).toBeDefined();
expect($graphContainer.find('.prometheus-graph-overlay')).toBeDefined();
expect($graphContainer.find('.metric-line')).toBeDefined();
expect($graphContainer.find('.metric-area')).toBeDefined();
});
it('has legends, labels and an extra axis that labels the metrics', () => {
const $prometheusGraphContents = $(prometheusGraphContents);
const $axisLabelContainer = $(prometheusGraphContents).find('.label-x-axis-line').parent();
expect($prometheusGraphContents.find('.label-x-axis-line')).toBeDefined();
expect($prometheusGraphContents.find('.label-y-axis-line')).toBeDefined();
expect($prometheusGraphContents.find('.label-axis-text')).toBeDefined();
expect($prometheusGraphContents.find('.rect-axis-text')).toBeDefined();
expect($axisLabelContainer.find('rect').length).toBe(3);
expect($axisLabelContainer.find('text').length).toBe(4);
});
});
});
describe('PrometheusGraphs UX states', () => {
const fixtureName = 'static/environments/metrics.html.raw';
const prometheusStatesContainer = '.prometheus-state';
preloadFixtures(fixtureName);
function clearStateElements() {
$(`${prometheusStatesContainer} .state-svg`).empty();
$(`${prometheusStatesContainer} .state-title`).text('');
$(`${prometheusStatesContainer} .state-description`).text('');
$(`${prometheusStatesContainer} .state-button`).empty();
}
beforeEach(() => {
loadFixtures(fixtureName);
this.prometheusGraph = new PrometheusGraph();
});
it('shows the getting started state', () => {
this.prometheusGraph.updateState('gettingStarted');
const currentState = prometheusStates.gettingStarted;
expect($(`${prometheusStatesContainer} .state-svg`).find('svg')[0]).toBeDefined();
expect($(`${prometheusStatesContainer} .state-title`).text()).toBe(currentState.title);
expect($(`${prometheusStatesContainer} .state-description`)).toBeDefined();
expect($(`${prometheusStatesContainer} .state-button`).find('a').text()).toBe(currentState.buttonText);
});
it('shows the attempting to load performance data state', () => {
clearStateElements();
this.prometheusGraph.state = 'loading';
this.prometheusGraph.updateState();
const currentState = prometheusStates.loading;
expect($(`${prometheusStatesContainer} .state-svg`).find('svg')[0]).toBeDefined();
expect($(`${prometheusStatesContainer} .state-title`).text()).toBe(currentState.title);
expect($(`${prometheusStatesContainer} .state-description`).text()).toContain(currentState.description);
expect($(`${prometheusStatesContainer} .state-button`).find('a').text()).toBe(currentState.buttonText);
});
it('shows the unable to connect state', () => {
clearStateElements();
this.prometheusGraph.state = 'unableToConnect';
this.prometheusGraph.updateState();
const currentState = prometheusStates.unableToConnect;
expect($(`${prometheusStatesContainer} .state-svg`).find('svg')[0]).toBeDefined();
expect($(`${prometheusStatesContainer} .state-title`).text()).toBe(currentState.title);
expect($(`${prometheusStatesContainer} .state-description`)[0]).toBeDefined();
expect($(`${prometheusStatesContainer} .state-button`).find('a').text()).toBe(currentState.buttonText);
});
});
|
