diff options
Diffstat (limited to 'spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js')
-rw-r--r-- | spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js | 51 |
1 files changed, 27 insertions, 24 deletions
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js index a33401c5ba9..a879b06e858 100644 --- a/spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js +++ b/spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js @@ -1,85 +1,88 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; -import relatedLinksComponent from '~/vue_merge_request_widget/components/mr_widget_related_links.vue'; +import { shallowMount } from '@vue/test-utils'; +import RelatedLinks from '~/vue_merge_request_widget/components/mr_widget_related_links.vue'; describe('MRWidgetRelatedLinks', () => { - let vm; + let wrapper; - const createComponent = (data) => { - const Component = Vue.extend(relatedLinksComponent); - - return mountComponent(Component, data); + const createComponent = (propsData = {}) => { + wrapper = shallowMount(RelatedLinks, { propsData }); }; afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); describe('computed', () => { describe('closesText', () => { it('returns Closes text for open merge request', () => { - vm = createComponent({ state: 'open', relatedLinks: {} }); + createComponent({ state: 'open', relatedLinks: {} }); - expect(vm.closesText).toEqual('Closes'); + expect(wrapper.vm.closesText).toBe('Closes'); }); it('returns correct text for closed merge request', () => { - vm = createComponent({ state: 'closed', relatedLinks: {} }); + createComponent({ state: 'closed', relatedLinks: {} }); - expect(vm.closesText).toEqual('Did not close'); + expect(wrapper.vm.closesText).toBe('Did not close'); }); it('returns correct tense for merged request', () => { - vm = createComponent({ state: 'merged', relatedLinks: {} }); + createComponent({ state: 'merged', relatedLinks: {} }); - expect(vm.closesText).toEqual('Closed'); + expect(wrapper.vm.closesText).toBe('Closed'); }); }); }); it('should have only have closing issues text', () => { - vm = createComponent({ + createComponent({ relatedLinks: { closing: '<a href="#">#23</a> and <a>#42</a>', }, }); - const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim(); + const content = wrapper + .text() + .replace(/\n(\s)+/g, ' ') + .trim(); expect(content).toContain('Closes #23 and #42'); expect(content).not.toContain('Mentions'); }); it('should have only have mentioned issues text', () => { - vm = createComponent({ + createComponent({ relatedLinks: { mentioned: '<a href="#">#7</a>', }, }); - expect(vm.$el.innerText).toContain('Mentions #7'); - expect(vm.$el.innerText).not.toContain('Closes'); + expect(wrapper.text().trim()).toContain('Mentions #7'); + expect(wrapper.text().trim()).not.toContain('Closes'); }); it('should have closing and mentioned issues at the same time', () => { - vm = createComponent({ + 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(); + const content = wrapper + .text() + .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({ + createComponent({ relatedLinks: { assignToMe: '<a href="#">Assign yourself to these issues</a>', }, }); - expect(vm.$el.innerText).toContain('Assign yourself to these issues'); + expect(wrapper.text().trim()).toContain('Assign yourself to these issues'); }); }); |