137 lines
3.3 KiB
JavaScript
137 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');
|
|
});
|
|
});
|
|
});
|