debian-mirror-gitlab/spec/javascripts/monitoring/graph_spec.js

131 lines
3.8 KiB
JavaScript
Raw Normal View History

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