Move mr widget related links into a vue file
This commit is contained in:
parent
a20e02a5bc
commit
d700659b04
|
@ -1,37 +0,0 @@
|
|||
export default {
|
||||
name: 'MRWidgetRelatedLinks',
|
||||
props: {
|
||||
relatedLinks: { type: Object, required: true },
|
||||
state: { type: String, required: false },
|
||||
},
|
||||
computed: {
|
||||
hasLinks() {
|
||||
const { closing, mentioned, assignToMe } = this.relatedLinks;
|
||||
return closing || mentioned || assignToMe;
|
||||
},
|
||||
closesText() {
|
||||
if (this.state === 'merged') {
|
||||
return 'Closed';
|
||||
}
|
||||
if (this.state === 'closed') {
|
||||
return 'Did not close';
|
||||
}
|
||||
return 'Closes';
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<section
|
||||
v-if="hasLinks"
|
||||
class="mr-info-list mr-links">
|
||||
<p v-if="relatedLinks.closing">
|
||||
{{closesText}} <span v-html="relatedLinks.closing"></span>
|
||||
</p>
|
||||
<p v-if="relatedLinks.mentioned">
|
||||
Mentions <span v-html="relatedLinks.mentioned"></span>
|
||||
</p>
|
||||
<p v-if="relatedLinks.assignToMe">
|
||||
<span v-html="relatedLinks.assignToMe"></span>
|
||||
</p>
|
||||
</section>
|
||||
`,
|
||||
};
|
|
@ -0,0 +1,42 @@
|
|||
<script>
|
||||
import { s__ } from '~/locale';
|
||||
|
||||
export default {
|
||||
name: 'MRWidgetRelatedLinks',
|
||||
props: {
|
||||
relatedLinks: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
state: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
closesText() {
|
||||
if (this.state === 'merged') {
|
||||
return s__('mrWidget|Closed');
|
||||
}
|
||||
if (this.state === 'closed') {
|
||||
return s__('mrWidget|Did not close');
|
||||
}
|
||||
return s__('mrWidget|Closes');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<section class="mr-info-list mr-links">
|
||||
<p v-if="relatedLinks.closing">
|
||||
{{ closesText }} <span v-html="relatedLinks.closing"></span>
|
||||
</p>
|
||||
<p v-if="relatedLinks.mentioned">
|
||||
Mentions <span v-html="relatedLinks.mentioned"></span>
|
||||
</p>
|
||||
<p v-if="relatedLinks.assignToMe">
|
||||
<span v-html="relatedLinks.assignToMe"></span>
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
|
@ -15,7 +15,7 @@ export { default as WidgetHeader } from './components/mr_widget_header';
|
|||
export { default as WidgetMergeHelp } from './components/mr_widget_merge_help';
|
||||
export { default as WidgetPipeline } from './components/mr_widget_pipeline.vue';
|
||||
export { default as WidgetDeployment } from './components/mr_widget_deployment';
|
||||
export { default as WidgetRelatedLinks } from './components/mr_widget_related_links';
|
||||
export { default as WidgetRelatedLinks } from './components/mr_widget_related_links.vue';
|
||||
export { default as MergedState } from './components/states/mr_widget_merged.vue';
|
||||
export { default as FailedToMerge } from './components/states/mr_widget_failed_to_merge.vue';
|
||||
export { default as ClosedState } from './components/states/mr_widget_closed.vue';
|
||||
|
|
|
@ -63,7 +63,8 @@ export default {
|
|||
return this.mr.hasCI;
|
||||
},
|
||||
shouldRenderRelatedLinks() {
|
||||
return !!this.mr.relatedLinks && !this.mr.isNothingToMergeState;
|
||||
const { closing, mentioned, assignToMe } = this.mr.relatedLinks;
|
||||
return (closing || mentioned || assignToMe) && !this.mr.isNothingToMergeState;
|
||||
},
|
||||
shouldRenderDeployments() {
|
||||
return this.mr.deployments.length;
|
||||
|
@ -257,7 +258,8 @@ export default {
|
|||
<mr-widget-related-links
|
||||
v-if="shouldRenderRelatedLinks"
|
||||
:state="mr.state"
|
||||
:related-links="mr.relatedLinks" />
|
||||
:related-links="mr.relatedLinks"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mr-widget-footer"
|
||||
|
|
|
@ -1,117 +1,82 @@
|
|||
import Vue from 'vue';
|
||||
import relatedLinksComponent from '~/vue_merge_request_widget/components/mr_widget_related_links';
|
||||
|
||||
const createComponent = (data) => {
|
||||
const Component = Vue.extend(relatedLinksComponent);
|
||||
|
||||
return new Component({
|
||||
el: document.createElement('div'),
|
||||
propsData: data,
|
||||
});
|
||||
};
|
||||
import relatedLinksComponent from '~/vue_merge_request_widget/components/mr_widget_related_links.vue';
|
||||
import mountComponent from '../../helpers/vue_mount_component_helper';
|
||||
|
||||
describe('MRWidgetRelatedLinks', () => {
|
||||
describe('props', () => {
|
||||
it('should have props', () => {
|
||||
const { relatedLinks } = relatedLinksComponent.props;
|
||||
let vm;
|
||||
|
||||
expect(relatedLinks).toBeDefined();
|
||||
expect(relatedLinks.type instanceof Object).toBeTruthy();
|
||||
expect(relatedLinks.required).toBeTruthy();
|
||||
});
|
||||
const createComponent = (data) => {
|
||||
const Component = Vue.extend(relatedLinksComponent);
|
||||
|
||||
return mountComponent(Component, data);
|
||||
};
|
||||
|
||||
afterEach(() => {
|
||||
vm.$destroy();
|
||||
});
|
||||
|
||||
describe('computed', () => {
|
||||
const data = {
|
||||
relatedLinks: {
|
||||
closing: '/foo',
|
||||
mentioned: '/foo',
|
||||
assignToMe: '/foo',
|
||||
},
|
||||
};
|
||||
|
||||
describe('hasLinks', () => {
|
||||
it('should return correct value when we have links reference', () => {
|
||||
const vm = createComponent(data);
|
||||
expect(vm.hasLinks).toBeTruthy();
|
||||
|
||||
vm.relatedLinks.closing = null;
|
||||
expect(vm.hasLinks).toBeTruthy();
|
||||
|
||||
vm.relatedLinks.mentioned = null;
|
||||
expect(vm.hasLinks).toBeTruthy();
|
||||
|
||||
vm.relatedLinks.assignToMe = null;
|
||||
expect(vm.hasLinks).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('closesText', () => {
|
||||
it('returns correct text for open merge request', () => {
|
||||
data.state = 'open';
|
||||
const vm = createComponent(data);
|
||||
it('returns Closes text for open merge request', () => {
|
||||
vm = createComponent({ state: 'open', relatedLinks: {} });
|
||||
expect(vm.closesText).toEqual('Closes');
|
||||
});
|
||||
|
||||
it('returns correct text for closed merge request', () => {
|
||||
data.state = 'closed';
|
||||
const vm = createComponent(data);
|
||||
vm = createComponent({ state: 'closed', relatedLinks: {} });
|
||||
expect(vm.closesText).toEqual('Did not close');
|
||||
});
|
||||
|
||||
it('returns correct tense for merged request', () => {
|
||||
data.state = 'merged';
|
||||
const vm = createComponent(data);
|
||||
vm = createComponent({ state: 'merged', relatedLinks: {} });
|
||||
expect(vm.closesText).toEqual('Closed');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('template', () => {
|
||||
it('should have only have closing issues text', () => {
|
||||
const vm = createComponent({
|
||||
relatedLinks: {
|
||||
closing: '<a href="#">#23</a> and <a>#42</a>',
|
||||
},
|
||||
});
|
||||
const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim();
|
||||
it('should have only have closing issues text', () => {
|
||||
vm = createComponent({
|
||||
relatedLinks: {
|
||||
closing: '<a href="#">#23</a> and <a>#42</a>',
|
||||
},
|
||||
});
|
||||
const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim();
|
||||
|
||||
expect(content).toContain('Closes #23 and #42');
|
||||
expect(content).not.toContain('Mentions');
|
||||
expect(content).toContain('Closes #23 and #42');
|
||||
expect(content).not.toContain('Mentions');
|
||||
});
|
||||
|
||||
it('should have only have mentioned issues text', () => {
|
||||
vm = createComponent({
|
||||
relatedLinks: {
|
||||
mentioned: '<a href="#">#7</a>',
|
||||
},
|
||||
});
|
||||
|
||||
it('should have only have mentioned issues text', () => {
|
||||
const vm = createComponent({
|
||||
relatedLinks: {
|
||||
mentioned: '<a href="#">#7</a>',
|
||||
},
|
||||
});
|
||||
expect(vm.$el.innerText).toContain('Mentions #7');
|
||||
expect(vm.$el.innerText).not.toContain('Closes');
|
||||
});
|
||||
|
||||
expect(vm.$el.innerText).toContain('Mentions #7');
|
||||
expect(vm.$el.innerText).not.toContain('Closes');
|
||||
it('should have closing and mentioned issues at the same time', () => {
|
||||
vm = createComponent({
|
||||
relatedLinks: {
|
||||
closing: '<a href="#">#7</a>',
|
||||
mentioned: '<a href="#">#23</a> and <a>#42</a>',
|
||||
},
|
||||
});
|
||||
const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim();
|
||||
|
||||
expect(content).toContain('Closes #7');
|
||||
expect(content).toContain('Mentions #23 and #42');
|
||||
});
|
||||
|
||||
it('should have assing issues link', () => {
|
||||
vm = createComponent({
|
||||
relatedLinks: {
|
||||
assignToMe: '<a href="#">Assign yourself to these issues</a>',
|
||||
},
|
||||
});
|
||||
|
||||
it('should have closing and mentioned issues at the same time', () => {
|
||||
const vm = createComponent({
|
||||
relatedLinks: {
|
||||
closing: '<a href="#">#7</a>',
|
||||
mentioned: '<a href="#">#23</a> and <a>#42</a>',
|
||||
},
|
||||
});
|
||||
const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim();
|
||||
|
||||
expect(content).toContain('Closes #7');
|
||||
expect(content).toContain('Mentions #23 and #42');
|
||||
});
|
||||
|
||||
it('should have assing issues link', () => {
|
||||
const vm = createComponent({
|
||||
relatedLinks: {
|
||||
assignToMe: '<a href="#">Assign yourself to these issues</a>',
|
||||
},
|
||||
});
|
||||
|
||||
expect(vm.$el.innerText).toContain('Assign yourself to these issues');
|
||||
});
|
||||
expect(vm.$el.innerText).toContain('Assign yourself to these issues');
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue