BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Unverified Commit 33df949e by Phil Hughes
Options

updated specs

[ci skip]
parent b48516fe
Showing with 129 additions and 106 deletions
app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
......@@ -9,6 +9,13 @@ import MRWidgetService from '../services/mr_widget_service';
export default {
name: 'Deployment',
components: {
MemoryUsage,
StatusIcon,
},
directives: {
tooltip,
},
mixins: [
timeagoMixin,
],
......@@ -18,22 +25,21 @@ export default {
required: true,
},
},
components: {
MemoryUsage,
StatusIcon,
},
computed: {
deployTimeago() {
return this.timeFormated(this.deployment.deployed_at);
},
hasExternalUrls() {
return this.deployment.external_url && this.deployment.external_url_formatted;
return !!(this.deployment.external_url && this.deployment.external_url_formatted);
},
hasDeploymentTime() {
return this.deployment.deployed_at && this.deployment.deployed_at_formatted;
return !!(this.deployment.deployed_at && this.deployment.deployed_at_formatted);
},
hasDeploymentMeta() {
return this.deployment.url && this.deployment.name;
return !!(this.deployment.url && this.deployment.name);
},
hasMetrics() {
return !!(this.deployment.metrics_url);
},
},
methods: {
......@@ -67,7 +73,8 @@ export default {
<div class="media-body">
<div class="deploy-body">
<span
v-if="hasDeploymentMeta">
v-if="hasDeploymentMeta"
>
Deployed to
</span>
<span class="deploy-link">
......@@ -77,11 +84,12 @@ export default {
target="_blank"
rel="noopener noreferrer nofollow"
class="js-deploy-meta">
{{deployment.name}}
{{ deployment.name }}
</a>
</span>
<span
v-if="hasExternalUrls">
v-if="hasExternalUrls"
>
on
</span>
<span class="deploy-link">
......@@ -93,8 +101,10 @@ export default {
class="js-deploy-url">
<i
class="fa fa-external-link"
aria-hidden="true" />
{{deployment.external_url_formatted}}
aria-hidden="true"
>
</i>
{{ deployment.external_url_formatted }}
</a>
</span>
<span
......@@ -103,7 +113,7 @@ export default {
class="js-deploy-time"
data-toggle="tooltip"
data-placement="top">
{{deployTimeago}}
{{ deployTimeago }}
</span>
<button
type="button"
......@@ -114,7 +124,7 @@ export default {
</button>
</div>
<memory-usage
v-if="deployment.metrics_url"
v-if="hasMetrics"
:metrics-url="deployment.metrics_url"
:metrics-monitoring-url="deployment.metrics_monitoring_url"
/>
......
spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js → spec/javascripts/vue_mr_widget/components/deployment_spec.js
import Vue from 'vue';
import * as urlUtils from '~/lib/utils/url_utility';
import deploymentComponent from '~/vue_merge_request_widget/components/mr_widget_deployment';
import deploymentComponent from '~/vue_merge_request_widget/components/deployment.vue';
import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
import { getTimeago } from '~/lib/utils/datetime_utility';
const deploymentMockData = [
{
id: 15,
name: 'review/diplo',
url: '/root/acets-review-apps/environments/15',
stop_url: '/root/acets-review-apps/environments/15/stop',
metrics_url: '/root/acets-review-apps/environments/15/deployments/1/metrics',
metrics_monitoring_url: '/root/acets-review-apps/environments/15/metrics',
external_url: 'http://diplo.',
external_url_formatted: 'diplo.',
deployed_at: '2017-03-22T22:44:42.258Z',
deployed_at_formatted: 'Mar 22, 2017 10:44pm',
},
];
const deploymentMockData = {
id: 15,
name: 'review/diplo',
url: '/root/acets-review-apps/environments/15',
stop_url: '/root/acets-review-apps/environments/15/stop',
metrics_url: '/root/acets-review-apps/environments/15/deployments/1/metrics',
metrics_monitoring_url: '/root/acets-review-apps/environments/15/metrics',
external_url: 'http://diplo.',
external_url_formatted: 'diplo.',
deployed_at: '2017-03-22T22:44:42.258Z',
deployed_at_formatted: 'Mar 22, 2017 10:44pm',
};
const createComponent = () => {
const Component = Vue.extend(deploymentComponent);
const mr = {
deployments: deploymentMockData,
};
const service = {};
return new Component({
el: document.createElement('div'),
propsData: { mr, service },
propsData: { deployment: { ...deploymentMockData } },
});
};
describe('MRWidgetDeployment', () => {
describe('props', () => {
it('should have props', () => {
const { mr, service } = deploymentComponent.props;
expect(mr.type instanceof Object).toBeTruthy();
expect(mr.required).toBeTruthy();
describe('Deployment component', () => {
let vm;
expect(service.type instanceof Object).toBeTruthy();
expect(service.required).toBeTruthy();
});
beforeEach(() => {
vm = createComponent();
});
describe('methods', () => {
let vm = createComponent();
const deployment = deploymentMockData[0];
afterEach(() => {
vm.$destroy();
});
describe('formatDate', () => {
it('should work', () => {
const readable = getTimeago().format(deployment.deployed_at);
expect(vm.formatDate(deployment.deployed_at)).toEqual(readable);
describe('computed', () => {
describe('deployTimeago', () => {
it('return formatted date', () => {
const readable = getTimeago().format(deploymentMockData.deployed_at);
expect(vm.deployTimeago).toEqual(readable);
});
});
describe('hasExternalUrls', () => {
it('should return true', () => {
expect(vm.hasExternalUrls(deployment)).toBeTruthy();
expect(vm.hasExternalUrls).toEqual(true);
});
it('should return false when deployment has no external_url_formatted', () => {
vm.deployment.external_url_formatted = null;
expect(vm.hasExternalUrls).toEqual(false);
});
it('should return false when there is not enough information', () => {
expect(vm.hasExternalUrls()).toBeFalsy();
expect(vm.hasExternalUrls({ external_url: 'Diplo' })).toBeFalsy();
expect(vm.hasExternalUrls({ external_url_formatted: 'Diplo' })).toBeFalsy();
it('should return false when deployment has no external_url', () => {
vm.deployment.external_url = null;
expect(vm.hasExternalUrls).toEqual(false);
});
});
describe('hasDeploymentTime', () => {
it('should return true', () => {
expect(vm.hasDeploymentTime(deployment)).toBeTruthy();
expect(vm.hasDeploymentTime).toEqual(true);
});
it('should return false when there is not enough information', () => {
expect(vm.hasDeploymentTime()).toBeFalsy();
expect(vm.hasDeploymentTime({ deployed_at: 'Diplo' })).toBeFalsy();
expect(vm.hasDeploymentTime({ deployed_at_formatted: 'Diplo' })).toBeFalsy();
it('should return false when deployment has no deployed_at', () => {
vm.deployment.deployed_at = null;
expect(vm.hasDeploymentTime).toEqual(false);
});
it('should return false when deployment has no deployed_at_formatted', () => {
vm.deployment.deployed_at_formatted = null;
expect(vm.hasDeploymentTime).toEqual(false);
});
});
describe('hasDeploymentMeta', () => {
it('should return true', () => {
expect(vm.hasDeploymentMeta(deployment)).toBeTruthy();
expect(vm.hasDeploymentMeta).toEqual(true);
});
it('should return false when there is not enough information', () => {
expect(vm.hasDeploymentMeta()).toBeFalsy();
expect(vm.hasDeploymentMeta({ url: 'Diplo' })).toBeFalsy();
expect(vm.hasDeploymentMeta({ name: 'Diplo' })).toBeFalsy();
it('should return false when deployment has no url', () => {
vm.deployment.url = null;
expect(vm.hasDeploymentMeta).toEqual(false);
});
it('should return false when deployment has no name', () => {
vm.deployment.name = null;
expect(vm.hasDeploymentMeta).toEqual(false);
});
});
});
describe('methods', () => {
describe('stopEnvironment', () => {
const url = '/foo/bar';
const returnPromise = () => new Promise((resolve) => {
......@@ -131,9 +140,7 @@ describe('MRWidgetDeployment', () => {
});
describe('template', () => {
let vm;
let el;
const [deployment] = deploymentMockData;
beforeEach(() => {
vm = createComponent(deploymentMockData);
......@@ -141,39 +148,15 @@ describe('MRWidgetDeployment', () => {
});
it('should render template elements correctly', () => {
expect(el.classList.contains('mr-widget-heading')).toBeTruthy();
expect(el.querySelector('.js-icon-link')).toBeDefined();
expect(el.querySelector('.js-deploy-meta').getAttribute('href')).toEqual(deployment.url);
expect(el.querySelector('.js-deploy-meta').innerText).toContain(deployment.name);
expect(el.querySelector('.js-deploy-url').getAttribute('href')).toEqual(deployment.external_url);
expect(el.querySelector('.js-deploy-url').innerText).toContain(deployment.external_url_formatted);
expect(el.querySelector('.js-deploy-time').innerText).toContain(vm.formatDate(deployment.deployed_at));
expect(el.querySelector('.js-mr-memory-usage')).toBeDefined();
expect(el.querySelector('button')).toBeDefined();
});
it('should list multiple deployments', (done) => {
vm.mr.deployments.push(deployment);
vm.mr.deployments.push(deployment);
Vue.nextTick(() => {
expect(el.querySelectorAll('.ci-widget').length).toEqual(3);
expect(el.querySelectorAll('.js-mr-memory-usage').length).toEqual(3);
done();
});
});
it('should not have some elements when there is not enough data', (done) => {
vm.mr.deployments = [{}];
Vue.nextTick(() => {
expect(el.querySelectorAll('.js-deploy-meta').length).toEqual(0);
expect(el.querySelectorAll('.js-deploy-url').length).toEqual(0);
expect(el.querySelectorAll('.js-deploy-time').length).toEqual(0);
expect(el.querySelectorAll('.js-mr-memory-usage').length).toEqual(0);
expect(el.querySelectorAll('.button').length).toEqual(0);
done();
});
expect(el.classList.contains('mr-widget-heading')).toEqual(true);
expect(el.querySelector('.js-icon-link')).not.toBeNull();
expect(el.querySelector('.js-deploy-meta').getAttribute('href')).toEqual(deploymentMockData.url);
expect(el.querySelector('.js-deploy-meta').innerText).toContain(deploymentMockData.name);
expect(el.querySelector('.js-deploy-url').getAttribute('href')).toEqual(deploymentMockData.external_url);
expect(el.querySelector('.js-deploy-url').innerText).toContain(deploymentMockData.external_url_formatted);
expect(el.querySelector('.js-deploy-time').innerText).toContain(vm.deployTimeago);
expect(el.querySelector('.js-mr-memory-usage')).not.toBeNull();
expect(el.querySelector('button')).not.toBeNull();
});
});
});
spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
......@@ -12,7 +12,7 @@ const returnPromise = data => new Promise((resolve) => {
});
});
describe('mrWidgetOptions', () => {
fdescribe('mrWidgetOptions', () => {
let vm;
let MrWidgetOptions;
......@@ -189,16 +189,16 @@ describe('mrWidgetOptions', () => {
describe('fetchDeployments', () => {
it('should fetch deployments', (done) => {
spyOn(vm.service, 'fetchDeployments').and.returnValue(returnPromise([{ deployment: 1 }]));
spyOn(vm.service, 'fetchDeployments').and.returnValue(returnPromise([{ id: 1 }]));
vm.fetchDeployments();
setTimeout(() => {
expect(vm.service.fetchDeployments).toHaveBeenCalled();
expect(vm.mr.deployments.length).toEqual(1);
expect(vm.mr.deployments[0].deployment).toEqual(1);
expect(vm.mr.deployments[0].id).toBe(1);
done();
}, 333);
});
});
});
......@@ -374,7 +374,7 @@ describe('mrWidgetOptions', () => {
expect(comps['mr-widget-header']).toBeDefined();
expect(comps['mr-widget-merge-help']).toBeDefined();
expect(comps['mr-widget-pipeline']).toBeDefined();
expect(comps['mr-widget-deployment']).toBeDefined();
expect(comps.Deployment).toBeDefined();
expect(comps['mr-widget-related-links']).toBeDefined();
expect(comps['mr-widget-merged']).toBeDefined();
expect(comps['mr-widget-closed']).toBeDefined();
......@@ -454,4 +454,34 @@ describe('mrWidgetOptions', () => {
});
});
});
describe('rendering deployments', () => {
const deploymentMockData = {
id: 15,
name: 'review/diplo',
url: '/root/acets-review-apps/environments/15',
stop_url: '/root/acets-review-apps/environments/15/stop',
metrics_url: '/root/acets-review-apps/environments/15/deployments/1/metrics',
metrics_monitoring_url: '/root/acets-review-apps/environments/15/metrics',
external_url: 'http://diplo.',
external_url_formatted: 'diplo.',
deployed_at: '2017-03-22T22:44:42.258Z',
deployed_at_formatted: 'Mar 22, 2017 10:44pm',
};
beforeEach((done) => {
vm.mr.deployments.push({
...deploymentMockData,
}, {
...deploymentMockData,
id: deploymentMockData.id + 1,
});
vm.$nextTick(done);
});
it('renders multiple deployments', () => {
expect(vm.$el.querySelectorAll('.deploy-heading').length).toBe(2);
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment