debian-mirror-gitlab/spec/javascripts/monitoring/graph/flag_spec.js
2018-12-13 13:39:08 +05:30

133 lines
3.3 KiB
JavaScript

import Vue from 'vue';
import GraphFlag from '~/monitoring/components/graph/flag.vue';
import { deploymentData } from '../mock_data';
const createComponent = propsData => {
const Component = Vue.extend(GraphFlag);
return new Component({
propsData,
}).$mount();
};
const defaultValuesComponent = {
currentXCoordinate: 200,
currentYCoordinate: 100,
currentFlagPosition: 100,
currentData: {
time: new Date('2017-06-04T18:17:33.501Z'),
value: '1.49609375',
},
graphHeight: 300,
graphHeightOffset: 120,
showFlagContent: true,
realPixelRatio: 1,
timeSeries: [
{
values: [
{
time: new Date('2017-06-04T18:17:33.501Z'),
value: '1.49609375',
},
],
},
],
unitOfDisplay: 'ms',
currentDataIndex: 0,
legendTitle: 'Average',
currentCoordinates: {},
};
const deploymentFlagData = {
...deploymentData[0],
ref: deploymentData[0].ref.name,
xPos: 10,
time: new Date(deploymentData[0].created_at),
};
describe('GraphFlag', () => {
let component;
it('has a line at the currentXCoordinate', () => {
component = createComponent(defaultValuesComponent);
expect(component.$el.style.left).toEqual(`${70 + component.currentXCoordinate}px`);
});
describe('Deployment flag', () => {
it('shows a deployment flag when deployment data provided', () => {
const deploymentFlagComponent = createComponent({
...defaultValuesComponent,
deploymentFlagData,
});
expect(deploymentFlagComponent.$el.querySelector('.popover-title')).toContainText('Deployed');
});
it('contains the ref when a tag is available', () => {
const deploymentFlagComponent = createComponent({
...defaultValuesComponent,
deploymentFlagData: {
...deploymentFlagData,
sha: 'f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187',
tag: true,
ref: '1.0',
},
});
expect(deploymentFlagComponent.$el.querySelector('.deploy-meta-content')).toContainText(
'f5bcd1d9',
);
expect(deploymentFlagComponent.$el.querySelector('.deploy-meta-content')).toContainText(
'1.0',
);
});
it('does not contain the ref when a tag is unavailable', () => {
const deploymentFlagComponent = createComponent({
...defaultValuesComponent,
deploymentFlagData: {
...deploymentFlagData,
sha: 'f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187',
tag: false,
ref: '1.0',
},
});
expect(deploymentFlagComponent.$el.querySelector('.deploy-meta-content')).toContainText(
'f5bcd1d9',
);
expect(deploymentFlagComponent.$el.querySelector('.deploy-meta-content')).not.toContainText(
'1.0',
);
});
});
describe('Computed props', () => {
beforeEach(() => {
component = createComponent(defaultValuesComponent);
});
it('formatTime', () => {
expect(component.formatTime).toMatch(/\d:17PM/);
});
it('formatDate', () => {
expect(component.formatDate).toEqual('04 Jun 2017, ');
});
it('cursorStyle', () => {
expect(component.cursorStyle).toEqual({
top: '20px',
left: '270px',
height: '180px',
});
});
it('flagOrientation', () => {
expect(component.flagOrientation).toEqual('left');
});
});
});