137 lines
4.1 KiB
JavaScript
137 lines
4.1 KiB
JavaScript
import Vue from 'vue';
|
|
import MonitoringState from '~/monitoring/components/monitoring_deployment.vue';
|
|
import { deploymentData } from './mock_data';
|
|
|
|
const createComponent = (propsData) => {
|
|
const Component = Vue.extend(MonitoringState);
|
|
|
|
return new Component({
|
|
propsData,
|
|
}).$mount();
|
|
};
|
|
|
|
describe('MonitoringDeployment', () => {
|
|
const reducedDeploymentData = [deploymentData[0]];
|
|
reducedDeploymentData[0].ref = reducedDeploymentData[0].ref.name;
|
|
reducedDeploymentData[0].xPos = 10;
|
|
reducedDeploymentData[0].time = new Date(reducedDeploymentData[0].created_at);
|
|
describe('Methods', () => {
|
|
it('refText shows the ref when a tag is available', () => {
|
|
reducedDeploymentData[0].tag = '1.0';
|
|
const component = createComponent({
|
|
showDeployInfo: false,
|
|
deploymentData: reducedDeploymentData,
|
|
graphHeight: 300,
|
|
graphHeightOffset: 120,
|
|
});
|
|
|
|
expect(
|
|
component.refText(reducedDeploymentData[0]),
|
|
).toEqual(reducedDeploymentData[0].ref);
|
|
});
|
|
|
|
it('refText shows the sha when no tag is available', () => {
|
|
reducedDeploymentData[0].tag = null;
|
|
const component = createComponent({
|
|
showDeployInfo: false,
|
|
deploymentData: reducedDeploymentData,
|
|
graphHeight: 300,
|
|
graphHeightOffset: 120,
|
|
});
|
|
|
|
expect(
|
|
component.refText(reducedDeploymentData[0]),
|
|
).toContain('f5bcd1');
|
|
});
|
|
|
|
it('nameDeploymentClass creates a class with the prefix deploy-info-', () => {
|
|
const component = createComponent({
|
|
showDeployInfo: false,
|
|
deploymentData: reducedDeploymentData,
|
|
graphHeight: 300,
|
|
graphHeightOffset: 120,
|
|
});
|
|
|
|
expect(
|
|
component.nameDeploymentClass(reducedDeploymentData[0]),
|
|
).toContain('deploy-info');
|
|
});
|
|
|
|
it('transformDeploymentGroup translates an available deployment', () => {
|
|
const component = createComponent({
|
|
showDeployInfo: false,
|
|
deploymentData: reducedDeploymentData,
|
|
graphHeight: 300,
|
|
graphHeightOffset: 120,
|
|
});
|
|
|
|
expect(
|
|
component.transformDeploymentGroup(reducedDeploymentData[0]),
|
|
).toContain('translate(11, 20)');
|
|
});
|
|
|
|
it('hides the deployment flag', () => {
|
|
reducedDeploymentData[0].showDeploymentFlag = false;
|
|
const component = createComponent({
|
|
showDeployInfo: true,
|
|
deploymentData: reducedDeploymentData,
|
|
graphHeight: 300,
|
|
graphHeightOffset: 120,
|
|
});
|
|
|
|
expect(component.$el.querySelector('.js-deploy-info-box')).toBeNull();
|
|
});
|
|
|
|
it('shows the deployment flag', () => {
|
|
reducedDeploymentData[0].showDeploymentFlag = true;
|
|
const component = createComponent({
|
|
showDeployInfo: true,
|
|
deploymentData: reducedDeploymentData,
|
|
graphHeight: 300,
|
|
graphHeightOffset: 120,
|
|
});
|
|
|
|
expect(
|
|
component.$el.querySelector('.js-deploy-info-box').style.display,
|
|
).not.toEqual('display: none;');
|
|
});
|
|
|
|
it('shows the refText inside a text element with the deploy-info-text class', () => {
|
|
reducedDeploymentData[0].showDeploymentFlag = true;
|
|
const component = createComponent({
|
|
showDeployInfo: true,
|
|
deploymentData: reducedDeploymentData,
|
|
graphHeight: 300,
|
|
graphHeightOffset: 120,
|
|
});
|
|
|
|
expect(
|
|
component.$el.querySelector('.deploy-info-text').firstChild.nodeValue.trim(),
|
|
).toEqual(component.refText(reducedDeploymentData[0]));
|
|
});
|
|
|
|
it('should contain a hidden gradient', () => {
|
|
const component = createComponent({
|
|
showDeployInfo: true,
|
|
deploymentData: reducedDeploymentData,
|
|
graphHeight: 300,
|
|
graphHeightOffset: 120,
|
|
});
|
|
|
|
expect(component.$el.querySelector('#shadow-gradient')).not.toBeNull();
|
|
});
|
|
|
|
describe('Computed props', () => {
|
|
it('calculatedHeight', () => {
|
|
const component = createComponent({
|
|
showDeployInfo: true,
|
|
deploymentData: reducedDeploymentData,
|
|
graphHeight: 300,
|
|
graphHeightOffset: 120,
|
|
});
|
|
|
|
expect(component.calculatedHeight).toEqual(180);
|
|
});
|
|
});
|
|
});
|
|
});
|