diff options
Diffstat (limited to 'spec/frontend/vue_mr_widget/components/states')
4 files changed, 76 insertions, 85 deletions
diff --git a/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap b/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap index c425a3a86a9..e5862df5dda 100644 --- a/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap +++ b/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap @@ -16,6 +16,7 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have > <span class="gl-mr-3" + data-qa-selector="merge_request_status_content" > <span class="js-status-text-before-author" @@ -107,6 +108,7 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c > <span class="gl-mr-3" + data-qa-selector="merge_request_status_content" > <span class="js-status-text-before-author" diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js index d3fc1e0e05b..dc2f227b29c 100644 --- a/spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js @@ -1,36 +1,41 @@ -import { createLocalVue, shallowMount } from '@vue/test-utils'; -import $ from 'jquery'; +import { GlPopover } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import { TEST_HOST } from 'helpers/test_constants'; import { removeBreakLine } from 'helpers/text_helper'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import ConflictsComponent from '~/vue_merge_request_widget/components/states/mr_widget_conflicts.vue'; describe('MRWidgetConflicts', () => { - let vm; + let wrapper; let mergeRequestWidgetGraphql = null; const path = '/conflicts'; - function createComponent(propsData = {}) { - const localVue = createLocalVue(); + const findPopover = () => wrapper.find(GlPopover); + const findResolveButton = () => wrapper.findByTestId('resolve-conflicts-button'); + const findMergeLocalButton = () => wrapper.findByTestId('merge-locally-button'); - vm = shallowMount(localVue.extend(ConflictsComponent), { - propsData, - provide: { - glFeatures: { - mergeRequestWidgetGraphql, + function createComponent(propsData = {}) { + wrapper = extendedWrapper( + shallowMount(ConflictsComponent, { + propsData, + provide: { + glFeatures: { + mergeRequestWidgetGraphql, + }, }, - }, - mocks: { - $apollo: { - queries: { - userPermissions: { loading: false }, - stateData: { loading: false }, + mocks: { + $apollo: { + queries: { + userPermissions: { loading: false }, + stateData: { loading: false }, + }, }, }, - }, - }); + }), + ); if (mergeRequestWidgetGraphql) { - vm.setData({ + wrapper.setData({ userPermissions: { canMerge: propsData.mr.canMerge, pushToSourceBranch: propsData.mr.canPushToSourceBranch, @@ -42,16 +47,12 @@ describe('MRWidgetConflicts', () => { }); } - return vm.vm.$nextTick(); + return wrapper.vm.$nextTick(); } - beforeEach(() => { - jest.spyOn($.fn, 'popover'); - }); - afterEach(() => { mergeRequestWidgetGraphql = null; - vm.destroy(); + wrapper.destroy(); }); [false, true].forEach((featureEnabled) => { @@ -82,18 +83,16 @@ describe('MRWidgetConflicts', () => { }); it('should tell you about conflicts without bothering other people', () => { - expect(vm.text()).toContain('There are merge conflicts'); - expect(vm.text()).not.toContain('ask someone with write access'); + expect(wrapper.text()).toContain('There are merge conflicts'); + expect(wrapper.text()).not.toContain('ask someone with write access'); }); it('should not allow you to resolve the conflicts', () => { - expect(vm.text()).not.toContain('Resolve conflicts'); + expect(wrapper.text()).not.toContain('Resolve conflicts'); }); it('should have merge buttons', () => { - const mergeLocallyButton = vm.find('.js-merge-locally-button'); - - expect(mergeLocallyButton.text()).toContain('Merge locally'); + expect(findMergeLocalButton().text()).toContain('Merge locally'); }); }); @@ -110,19 +109,17 @@ describe('MRWidgetConflicts', () => { }); it('should tell you about conflicts', () => { - expect(vm.text()).toContain('There are merge conflicts'); - expect(vm.text()).toContain('ask someone with write access'); + expect(wrapper.text()).toContain('There are merge conflicts'); + expect(wrapper.text()).toContain('ask someone with write access'); }); it('should allow you to resolve the conflicts', () => { - const resolveButton = vm.find('.js-resolve-conflicts-button'); - - expect(resolveButton.text()).toContain('Resolve conflicts'); - expect(resolveButton.attributes('href')).toEqual(path); + expect(findResolveButton().text()).toContain('Resolve conflicts'); + expect(findResolveButton().attributes('href')).toEqual(path); }); it('should not have merge buttons', () => { - expect(vm.text()).not.toContain('Merge locally'); + expect(wrapper.text()).not.toContain('Merge locally'); }); }); @@ -139,21 +136,17 @@ describe('MRWidgetConflicts', () => { }); it('should tell you about conflicts without bothering other people', () => { - expect(vm.text()).toContain('There are merge conflicts'); - expect(vm.text()).not.toContain('ask someone with write access'); + expect(wrapper.text()).toContain('There are merge conflicts'); + expect(wrapper.text()).not.toContain('ask someone with write access'); }); it('should allow you to resolve the conflicts', () => { - const resolveButton = vm.find('.js-resolve-conflicts-button'); - - expect(resolveButton.text()).toContain('Resolve conflicts'); - expect(resolveButton.attributes('href')).toEqual(path); + expect(findResolveButton().text()).toContain('Resolve conflicts'); + expect(findResolveButton().attributes('href')).toEqual(path); }); it('should have merge buttons', () => { - const mergeLocallyButton = vm.find('.js-merge-locally-button'); - - expect(mergeLocallyButton.text()).toContain('Merge locally'); + expect(findMergeLocalButton().text()).toContain('Merge locally'); }); }); @@ -167,7 +160,7 @@ describe('MRWidgetConflicts', () => { }, }); - expect(vm.text().trim().replace(/\s\s+/g, ' ')).toContain( + expect(wrapper.text().trim().replace(/\s\s+/g, ' ')).toContain( 'ask someone with write access', ); }); @@ -181,8 +174,8 @@ describe('MRWidgetConflicts', () => { }, }); - expect(vm.find('.js-resolve-conflicts-button').exists()).toBe(false); - expect(vm.find('.js-merge-locally-button').exists()).toBe(false); + expect(findResolveButton().exists()).toBe(false); + expect(findMergeLocalButton().exists()).toBe(false); }); it('should not have resolve button when no conflict resolution path', async () => { @@ -194,7 +187,7 @@ describe('MRWidgetConflicts', () => { }, }); - expect(vm.find('.js-resolve-conflicts-button').exists()).toBe(false); + expect(findResolveButton().exists()).toBe(false); }); }); @@ -207,7 +200,7 @@ describe('MRWidgetConflicts', () => { }, }); - expect(removeBreakLine(vm.text()).trim()).toContain( + expect(removeBreakLine(wrapper.text()).trim()).toContain( 'Fast-forward merge is not possible. To merge this request, first rebase locally.', ); }); @@ -227,11 +220,11 @@ describe('MRWidgetConflicts', () => { }); it('sets resolve button as disabled', () => { - expect(vm.find('.js-resolve-conflicts-button').attributes('disabled')).toBe('true'); + expect(findResolveButton().attributes('disabled')).toBe('true'); }); - it('renders popover', () => { - expect($.fn.popover).toHaveBeenCalled(); + it('shows the popover', () => { + expect(findPopover().exists()).toBe(true); }); }); @@ -249,11 +242,11 @@ describe('MRWidgetConflicts', () => { }); it('sets resolve button as disabled', () => { - expect(vm.find('.js-resolve-conflicts-button').attributes('disabled')).toBe(undefined); + expect(findResolveButton().attributes('disabled')).toBe(undefined); }); - it('renders popover', () => { - expect($.fn.popover).not.toHaveBeenCalled(); + it('does not show the popover', () => { + expect(findPopover().exists()).toBe(false); }); }); }); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_merging_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_merging_spec.js index 222cb74cc66..b16fb5171e7 100644 --- a/spec/frontend/vue_mr_widget/components/states/mr_widget_merging_spec.js +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_merging_spec.js @@ -1,29 +1,30 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; -import mergingComponent from '~/vue_merge_request_widget/components/states/mr_widget_merging.vue'; +import { shallowMount } from '@vue/test-utils'; +import MrWidgetMerging from '~/vue_merge_request_widget/components/states/mr_widget_merging.vue'; describe('MRWidgetMerging', () => { - let vm; - beforeEach(() => { - const Component = Vue.extend(mergingComponent); + let wrapper; - vm = mountComponent(Component, { - mr: { - targetBranchPath: '/branch-path', - targetBranch: 'branch', + beforeEach(() => { + wrapper = shallowMount(MrWidgetMerging, { + propsData: { + mr: { + targetBranchPath: '/branch-path', + targetBranch: 'branch', + }, }, }); }); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); it('renders information about merge request being merged', () => { expect( - vm.$el - .querySelector('.media-body') - .textContent.trim() + wrapper + .find('.media-body') + .text() + .trim() .replace(/\s\s+/g, ' ') .replace(/[\r\n]+/g, ' '), ).toContain('This merge request is in the process of being merged'); @@ -31,13 +32,14 @@ describe('MRWidgetMerging', () => { it('renders branch information', () => { expect( - vm.$el - .querySelector('.mr-info-list') - .textContent.trim() + wrapper + .find('.mr-info-list') + .text() + .trim() .replace(/\s\s+/g, ' ') .replace(/[\r\n]+/g, ' '), ).toEqual('The changes will be merged into branch'); - expect(vm.$el.querySelector('a').getAttribute('href')).toEqual('/branch-path'); + expect(wrapper.find('a').attributes('href')).toBe('/branch-path'); }); }); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js index bd0bd36ebc2..2c04905d3a9 100644 --- a/spec/frontend/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js @@ -14,20 +14,14 @@ describe('NothingToMerge', () => { it('should have correct elements', () => { expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy(); - expect(vm.$el.querySelector('a').href).toContain(newBlobPath); - expect(vm.$el.innerText).toContain( - "Currently there are no changes in this merge request's source branch", - ); - - expect(vm.$el.innerText.replace(/\s\s+/g, ' ')).toContain( - 'Please push new commits or use a different branch.', - ); + expect(vm.$el.querySelector('[data-testid="createFileButton"]').href).toContain(newBlobPath); + expect(vm.$el.innerText).toContain('Use merge requests to propose changes to your project'); }); it('should not show new blob link if there is no link available', () => { vm.mr.newBlobPath = null; Vue.nextTick(() => { - expect(vm.$el.querySelector('a')).toEqual(null); + expect(vm.$el.querySelector('[data-testid="createFileButton"]')).toEqual(null); }); }); }); |