76 lines
2.3 KiB
JavaScript
76 lines
2.3 KiB
JavaScript
import Vue from 'vue';
|
|
import MonitoringFlag from '~/monitoring/components/monitoring_flag.vue';
|
|
|
|
const createComponent = (propsData) => {
|
|
const Component = Vue.extend(MonitoringFlag);
|
|
|
|
return new Component({
|
|
propsData,
|
|
}).$mount();
|
|
};
|
|
|
|
function getCoordinate(component, selector, coordinate) {
|
|
const coordinateVal = component.$el.querySelector(selector).getAttribute(coordinate);
|
|
return parseInt(coordinateVal, 10);
|
|
}
|
|
|
|
describe('MonitoringFlag', () => {
|
|
it('has a line and a circle located at the currentXCoordinate and currentYCoordinate', () => {
|
|
const component = createComponent({
|
|
currentXCoordinate: 200,
|
|
currentYCoordinate: 100,
|
|
currentFlagPosition: 100,
|
|
currentData: {
|
|
time: new Date('2017-06-04T18:17:33.501Z'),
|
|
value: '1.49609375',
|
|
},
|
|
graphHeight: 300,
|
|
graphHeightOffset: 120,
|
|
});
|
|
|
|
expect(getCoordinate(component, '.selected-metric-line', 'x1'))
|
|
.toEqual(component.currentXCoordinate);
|
|
expect(getCoordinate(component, '.selected-metric-line', 'x2'))
|
|
.toEqual(component.currentXCoordinate);
|
|
expect(getCoordinate(component, '.circle-metric', 'cx'))
|
|
.toEqual(component.currentXCoordinate);
|
|
expect(getCoordinate(component, '.circle-metric', 'cy'))
|
|
.toEqual(component.currentYCoordinate);
|
|
});
|
|
|
|
it('has a SVG with the class rect-text-metric at the currentFlagPosition', () => {
|
|
const component = createComponent({
|
|
currentXCoordinate: 200,
|
|
currentYCoordinate: 100,
|
|
currentFlagPosition: 100,
|
|
currentData: {
|
|
time: new Date('2017-06-04T18:17:33.501Z'),
|
|
value: '1.49609375',
|
|
},
|
|
graphHeight: 300,
|
|
graphHeightOffset: 120,
|
|
});
|
|
|
|
const svg = component.$el.querySelector('.rect-text-metric');
|
|
expect(svg.tagName).toEqual('svg');
|
|
expect(parseInt(svg.getAttribute('x'), 10)).toEqual(component.currentFlagPosition);
|
|
});
|
|
|
|
describe('Computed props', () => {
|
|
it('calculatedHeight', () => {
|
|
const component = createComponent({
|
|
currentXCoordinate: 200,
|
|
currentYCoordinate: 100,
|
|
currentFlagPosition: 100,
|
|
currentData: {
|
|
time: new Date('2017-06-04T18:17:33.501Z'),
|
|
value: '1.49609375',
|
|
},
|
|
graphHeight: 300,
|
|
graphHeightOffset: 120,
|
|
});
|
|
|
|
expect(component.calculatedHeight).toEqual(180);
|
|
});
|
|
});
|
|
});
|