2017-06-20 08:50:31 +00:00
|
|
|
import Vue from 'vue';
|
2017-08-30 16:11:19 +00:00
|
|
|
import Graph from '~/monitoring/components/graph.vue';
|
2017-06-20 08:50:31 +00:00
|
|
|
import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins';
|
|
|
|
import eventHub from '~/monitoring/event_hub';
|
2018-03-21 19:36:43 +00:00
|
|
|
import {
|
|
|
|
deploymentData,
|
|
|
|
convertDatesMultipleSeries,
|
|
|
|
singleRowMetricsMultipleSeries,
|
|
|
|
} from './mock_data';
|
2017-06-20 08:50:31 +00:00
|
|
|
|
2017-12-04 21:39:07 +00:00
|
|
|
const tagsPath = 'http://test.host/frontend-fixtures/environments-project/tags';
|
|
|
|
const projectPath = 'http://test.host/frontend-fixtures/environments-project';
|
2018-03-21 19:36:43 +00:00
|
|
|
const createComponent = propsData => {
|
2017-08-30 16:11:19 +00:00
|
|
|
const Component = Vue.extend(Graph);
|
2017-06-20 08:50:31 +00:00
|
|
|
|
|
|
|
return new Component({
|
|
|
|
propsData,
|
|
|
|
}).$mount();
|
|
|
|
};
|
|
|
|
|
2018-06-06 11:02:47 +00:00
|
|
|
const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
|
2017-08-29 01:49:14 +00:00
|
|
|
|
2017-08-30 16:11:19 +00:00
|
|
|
describe('Graph', () => {
|
2017-06-20 08:50:31 +00:00
|
|
|
beforeEach(() => {
|
2017-08-30 16:11:19 +00:00
|
|
|
spyOn(MonitoringMixins.methods, 'formatDeployments').and.returnValue({});
|
2017-06-20 08:50:31 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('has a title', () => {
|
|
|
|
const component = createComponent({
|
2017-08-31 01:28:44 +00:00
|
|
|
graphData: convertedMetrics[1],
|
2017-06-20 08:50:31 +00:00
|
|
|
updateAspectRatio: false,
|
|
|
|
deploymentData,
|
2017-12-04 21:39:07 +00:00
|
|
|
tagsPath,
|
|
|
|
projectPath,
|
2017-06-20 08:50:31 +00:00
|
|
|
});
|
|
|
|
|
2018-06-06 11:02:47 +00:00
|
|
|
expect(component.$el.querySelector('.prometheus-graph-title').innerText.trim()).toBe(
|
2018-03-21 19:36:43 +00:00
|
|
|
component.graphData.title,
|
|
|
|
);
|
2017-06-20 08:50:31 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
describe('Computed props', () => {
|
|
|
|
it('axisTransform translates an element Y position depending of its height', () => {
|
|
|
|
const component = createComponent({
|
2017-08-31 01:28:44 +00:00
|
|
|
graphData: convertedMetrics[1],
|
2017-06-20 08:50:31 +00:00
|
|
|
updateAspectRatio: false,
|
|
|
|
deploymentData,
|
2017-12-04 21:39:07 +00:00
|
|
|
tagsPath,
|
|
|
|
projectPath,
|
2017-06-20 08:50:31 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
const transformedHeight = `${component.graphHeight - 100}`;
|
2018-06-06 11:02:47 +00:00
|
|
|
expect(component.axisTransform.indexOf(transformedHeight)).not.toEqual(-1);
|
2017-06-20 08:50:31 +00:00
|
|
|
});
|
|
|
|
|
2017-10-05 17:00:20 +00:00
|
|
|
it('outerViewBox gets a width and height property based on the DOM size of the element', () => {
|
2017-06-20 08:50:31 +00:00
|
|
|
const component = createComponent({
|
2017-08-31 01:28:44 +00:00
|
|
|
graphData: convertedMetrics[1],
|
2017-06-20 08:50:31 +00:00
|
|
|
updateAspectRatio: false,
|
|
|
|
deploymentData,
|
2017-12-04 21:39:07 +00:00
|
|
|
tagsPath,
|
|
|
|
projectPath,
|
2017-06-20 08:50:31 +00:00
|
|
|
});
|
|
|
|
|
2017-10-05 17:00:20 +00:00
|
|
|
const viewBoxArray = component.outerViewBox.split(' ');
|
|
|
|
expect(typeof component.outerViewBox).toEqual('string');
|
2017-06-20 08:50:31 +00:00
|
|
|
expect(viewBoxArray[2]).toEqual(component.graphWidth.toString());
|
2018-03-21 19:36:43 +00:00
|
|
|
expect(viewBoxArray[3]).toEqual((component.graphHeight - 50).toString());
|
2017-06-20 08:50:31 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-03-21 19:36:43 +00:00
|
|
|
it('sends an event to the eventhub when it has finished resizing', done => {
|
2017-06-20 08:50:31 +00:00
|
|
|
const component = createComponent({
|
2017-08-31 01:28:44 +00:00
|
|
|
graphData: convertedMetrics[1],
|
2017-06-20 08:50:31 +00:00
|
|
|
updateAspectRatio: false,
|
|
|
|
deploymentData,
|
2017-12-04 21:39:07 +00:00
|
|
|
tagsPath,
|
|
|
|
projectPath,
|
2017-06-20 08:50:31 +00:00
|
|
|
});
|
|
|
|
spyOn(eventHub, '$emit');
|
|
|
|
|
|
|
|
component.updateAspectRatio = true;
|
|
|
|
Vue.nextTick(() => {
|
|
|
|
expect(eventHub.$emit).toHaveBeenCalled();
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
2017-07-03 15:43:56 +00:00
|
|
|
|
2017-07-04 17:29:53 +00:00
|
|
|
it('has a title for the y-axis and the chart legend that comes from the backend', () => {
|
2017-07-03 15:43:56 +00:00
|
|
|
const component = createComponent({
|
2017-08-31 01:28:44 +00:00
|
|
|
graphData: convertedMetrics[1],
|
2017-07-03 15:43:56 +00:00
|
|
|
updateAspectRatio: false,
|
|
|
|
deploymentData,
|
2017-12-04 21:39:07 +00:00
|
|
|
tagsPath,
|
|
|
|
projectPath,
|
2017-07-03 15:43:56 +00:00
|
|
|
});
|
|
|
|
|
2017-08-30 16:11:19 +00:00
|
|
|
expect(component.yAxisLabel).toEqual(component.graphData.y_label);
|
|
|
|
expect(component.legendTitle).toEqual(component.graphData.queries[0].label);
|
2017-07-03 15:43:56 +00:00
|
|
|
});
|
2017-10-05 08:52:06 +00:00
|
|
|
|
|
|
|
it('sets the currentData object based on the hovered data index', () => {
|
|
|
|
const component = createComponent({
|
|
|
|
graphData: convertedMetrics[1],
|
|
|
|
updateAspectRatio: false,
|
|
|
|
deploymentData,
|
|
|
|
graphIdentifier: 0,
|
|
|
|
hoverData: {
|
|
|
|
hoveredDate: new Date('Sun Aug 27 2017 06:11:51 GMT-0500 (CDT)'),
|
|
|
|
currentDeployXPos: null,
|
|
|
|
},
|
2017-12-04 21:39:07 +00:00
|
|
|
tagsPath,
|
|
|
|
projectPath,
|
2017-10-05 08:52:06 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
component.positionFlag();
|
|
|
|
expect(component.currentData).toBe(component.timeSeries[0].values[10]);
|
|
|
|
});
|
2017-06-20 08:50:31 +00:00
|
|
|
});
|