Commit a4d84192 authored by Phil Hughes's avatar Phil Hughes

Merge branch 'fl-mr-widget' into 'master'

Move mr widget related links into a vue file

See merge request gitlab-org/gitlab-ce!16825
parents f4b91f7a 514826f5
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>
`,
};
<script>
import { s__ } from '~/locale';
export default {
name: 'MRWidgetRelatedLinks',
props: {
relatedLinks: {
type: Object,
required: true,
default: () => ({}),
},
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">
{{ s__("mrWidget|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'; ...@@ -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 WidgetMergeHelp } from './components/mr_widget_merge_help';
export { default as WidgetPipeline } from './components/mr_widget_pipeline.vue'; export { default as WidgetPipeline } from './components/mr_widget_pipeline.vue';
export { default as WidgetDeployment } from './components/mr_widget_deployment'; 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 MergedState } from './components/states/mr_widget_merged.vue';
export { default as FailedToMerge } from './components/states/mr_widget_failed_to_merge.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'; export { default as ClosedState } from './components/states/mr_widget_closed.vue';
......
...@@ -257,7 +257,8 @@ export default { ...@@ -257,7 +257,8 @@ export default {
<mr-widget-related-links <mr-widget-related-links
v-if="shouldRenderRelatedLinks" v-if="shouldRenderRelatedLinks"
:state="mr.state" :state="mr.state"
:related-links="mr.relatedLinks" /> :related-links="mr.relatedLinks"
/>
</div> </div>
<div <div
class="mr-widget-footer" class="mr-widget-footer"
......
import Vue from 'vue'; import Vue from 'vue';
import relatedLinksComponent from '~/vue_merge_request_widget/components/mr_widget_related_links'; import relatedLinksComponent from '~/vue_merge_request_widget/components/mr_widget_related_links.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
const createComponent = (data) => { describe('MRWidgetRelatedLinks', () => {
const Component = Vue.extend(relatedLinksComponent); let vm;
return new Component({ const createComponent = (data) => {
el: document.createElement('div'), const Component = Vue.extend(relatedLinksComponent);
propsData: data,
});
};
describe('MRWidgetRelatedLinks', () => { return mountComponent(Component, data);
describe('props', () => { };
it('should have props', () => {
const { relatedLinks } = relatedLinksComponent.props;
expect(relatedLinks).toBeDefined(); afterEach(() => {
expect(relatedLinks.type instanceof Object).toBeTruthy(); vm.$destroy();
expect(relatedLinks.required).toBeTruthy();
});
}); });
describe('computed', () => { 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', () => { describe('closesText', () => {
it('returns correct text for open merge request', () => { it('returns Closes text for open merge request', () => {
data.state = 'open'; vm = createComponent({ state: 'open', relatedLinks: {} });
const vm = createComponent(data);
expect(vm.closesText).toEqual('Closes'); expect(vm.closesText).toEqual('Closes');
}); });
it('returns correct text for closed merge request', () => { it('returns correct text for closed merge request', () => {
data.state = 'closed'; vm = createComponent({ state: 'closed', relatedLinks: {} });
const vm = createComponent(data);
expect(vm.closesText).toEqual('Did not close'); expect(vm.closesText).toEqual('Did not close');
}); });
it('returns correct tense for merged request', () => { it('returns correct tense for merged request', () => {
data.state = 'merged'; vm = createComponent({ state: 'merged', relatedLinks: {} });
const vm = createComponent(data);
expect(vm.closesText).toEqual('Closed'); expect(vm.closesText).toEqual('Closed');
}); });
}); });
}); });
describe('template', () => { it('should have only have closing issues text', () => {
it('should have only have closing issues text', () => { vm = createComponent({
const vm = createComponent({ relatedLinks: {
relatedLinks: { closing: '<a href="#">#23</a> and <a>#42</a>',
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');
}); });
const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim();
it('should have only have mentioned issues text', () => { expect(content).toContain('Closes #23 and #42');
const vm = createComponent({ expect(content).not.toContain('Mentions');
relatedLinks: { });
mentioned: '<a href="#">#7</a>',
},
});
expect(vm.$el.innerText).toContain('Mentions #7'); it('should have only have mentioned issues text', () => {
expect(vm.$el.innerText).not.toContain('Closes'); vm = createComponent({
relatedLinks: {
mentioned: '<a href="#">#7</a>',
},
}); });
it('should have closing and mentioned issues at the same time', () => { expect(vm.$el.innerText).toContain('Mentions #7');
const vm = createComponent({ expect(vm.$el.innerText).not.toContain('Closes');
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'); it('should have closing and mentioned issues at the same time', () => {
expect(content).toContain('Mentions #23 and #42'); 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();
it('should have assing issues link', () => { expect(content).toContain('Closes #7');
const vm = createComponent({ expect(content).toContain('Mentions #23 and #42');
relatedLinks: { });
assignToMe: '<a href="#">Assign yourself to these issues</a>',
},
});
expect(vm.$el.innerText).toContain('Assign yourself to these issues'); it('should have assing issues link', () => {
vm = createComponent({
relatedLinks: {
assignToMe: '<a href="#">Assign yourself to these issues</a>',
},
}); });
expect(vm.$el.innerText).toContain('Assign yourself to these issues');
}); });
}); });
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