diff options
Diffstat (limited to 'spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js')
-rw-r--r-- | spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js | 421 |
1 files changed, 250 insertions, 171 deletions
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js index ae0f605c419..850bbd93df5 100644 --- a/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js @@ -1,20 +1,81 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; +import { nextTick } from 'vue'; +import { shallowMount } from '@vue/test-utils'; import { trimText } from 'helpers/text_helper'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import autoMergeEnabledComponent from '~/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue'; import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service'; import eventHub from '~/vue_merge_request_widget/event_hub'; import { MWPS_MERGE_STRATEGY } from '~/vue_merge_request_widget/constants'; +let wrapper; +let mergeRequestWidgetGraphqlEnabled = false; + +function convertPropsToGraphqlState(props) { + return { + autoMergeStrategy: props.autoMergeStrategy, + cancelAutoMergePath: 'http://text.com', + mergeUser: { + id: props.mergeUserId, + ...props.setToAutoMergeBy, + }, + targetBranch: props.targetBranch, + targetBranchCommitsPath: props.targetBranchPath, + shouldRemoveSourceBranch: props.shouldRemoveSourceBranch, + forceRemoveSourceBranch: props.shouldRemoveSourceBranch, + userPermissions: { + removeSourceBranch: props.canRemoveSourceBranch, + }, + }; +} + +function factory(propsData) { + let state = {}; + + if (mergeRequestWidgetGraphqlEnabled) { + state = convertPropsToGraphqlState(propsData); + } + + wrapper = extendedWrapper( + shallowMount(autoMergeEnabledComponent, { + propsData: { + mr: propsData, + service: new MRWidgetService({}), + }, + data() { + return { state }; + }, + provide: { glFeatures: { mergeRequestWidgetGraphql: mergeRequestWidgetGraphqlEnabled } }, + mocks: { + $apollo: { + queries: { + state: { loading: false }, + }, + }, + }, + }), + ); +} + +const targetBranchPath = '/foo/bar'; +const targetBranch = 'foo'; +const sha = '1EA2EZ34'; +const defaultMrProps = () => ({ + shouldRemoveSourceBranch: false, + canRemoveSourceBranch: true, + canCancelAutomaticMerge: true, + mergeUserId: 1, + currentUserId: 1, + setToAutoMergeBy: {}, + sha, + targetBranchPath, + targetBranch, + autoMergeStrategy: MWPS_MERGE_STRATEGY, +}); + describe('MRWidgetAutoMergeEnabled', () => { - let vm; let oldWindowGl; - const targetBranchPath = '/foo/bar'; - const targetBranch = 'foo'; - const sha = '1EA2EZ34'; beforeEach(() => { - const Component = Vue.extend(autoMergeEnabledComponent); jest.spyOn(eventHub, '$emit').mockImplementation(() => {}); oldWindowGl = window.gl; @@ -23,216 +84,234 @@ describe('MRWidgetAutoMergeEnabled', () => { defaultAvatarUrl: 'no_avatar.png', }, }; - - vm = mountComponent(Component, { - mr: { - shouldRemoveSourceBranch: false, - canRemoveSourceBranch: true, - canCancelAutomaticMerge: true, - mergeUserId: 1, - currentUserId: 1, - setToAutoMergeBy: {}, - sha, - targetBranchPath, - targetBranch, - autoMergeStrategy: MWPS_MERGE_STRATEGY, - }, - service: new MRWidgetService({}), - }); }); afterEach(() => { - vm.$destroy(); window.gl = oldWindowGl; + wrapper.destroy(); + wrapper = null; }); - describe('computed', () => { - describe('canRemoveSourceBranch', () => { - it('should return true when user is able to remove source branch', () => { - expect(vm.canRemoveSourceBranch).toBeTruthy(); + [true, false].forEach((mergeRequestWidgetGraphql) => { + describe(`when graphql is ${mergeRequestWidgetGraphql ? 'enabled' : 'disabled'}`, () => { + beforeEach(() => { + mergeRequestWidgetGraphqlEnabled = mergeRequestWidgetGraphql; }); - it('should return false when user id is not the same with who set the MWPS', () => { - vm.mr.mergeUserId = 2; - - expect(vm.canRemoveSourceBranch).toBeFalsy(); - - vm.mr.currentUserId = 2; - - expect(vm.canRemoveSourceBranch).toBeTruthy(); + describe('computed', () => { + describe('canRemoveSourceBranch', () => { + it('should return true when user is able to remove source branch', () => { + factory({ + ...defaultMrProps(), + }); - vm.mr.currentUserId = 3; + expect(wrapper.findByTestId('removeSourceBranchButton').exists()).toBe(true); + }); - expect(vm.canRemoveSourceBranch).toBeFalsy(); - }); + it.each` + mergeUserId | currentUserId + ${2} | ${1} + ${1} | ${2} + `( + 'should return false when user id is not the same with who set the MWPS', + ({ mergeUserId, currentUserId }) => { + factory({ + ...defaultMrProps(), + mergeUserId, + currentUserId, + }); + + expect(wrapper.findByTestId('removeSourceBranchButton').exists()).toBe(false); + }, + ); - it('should return false when shouldRemoveSourceBranch set to false', () => { - vm.mr.shouldRemoveSourceBranch = true; + it('should return false when shouldRemoveSourceBranch set to false', () => { + factory({ + ...defaultMrProps(), + shouldRemoveSourceBranch: true, + }); - expect(vm.canRemoveSourceBranch).toBeFalsy(); - }); + expect(wrapper.findByTestId('removeSourceBranchButton').exists()).toBe(false); + }); - it('should return false if user is not able to remove the source branch', () => { - vm.mr.canRemoveSourceBranch = false; + it('should return false if user is not able to remove the source branch', () => { + factory({ + ...defaultMrProps(), + canRemoveSourceBranch: false, + }); - expect(vm.canRemoveSourceBranch).toBeFalsy(); - }); - }); + expect(wrapper.findByTestId('removeSourceBranchButton').exists()).toBe(false); + }); + }); - describe('statusTextBeforeAuthor', () => { - it('should return "Set by" if the MWPS is selected', () => { - Vue.set(vm.mr, 'autoMergeStrategy', MWPS_MERGE_STRATEGY); + describe('statusTextBeforeAuthor', () => { + it('should return "Set by" if the MWPS is selected', () => { + factory({ + ...defaultMrProps(), + autoMergeStrategy: MWPS_MERGE_STRATEGY, + }); - expect(vm.statusTextBeforeAuthor).toBe('Set by'); - }); - }); + expect(wrapper.findByTestId('beforeStatusText').text()).toBe('Set by'); + }); + }); - describe('statusTextAfterAuthor', () => { - it('should return "to be merged automatically..." if MWPS is selected', () => { - Vue.set(vm.mr, 'autoMergeStrategy', MWPS_MERGE_STRATEGY); + describe('statusTextAfterAuthor', () => { + it('should return "to be merged automatically..." if MWPS is selected', () => { + factory({ + ...defaultMrProps(), + autoMergeStrategy: MWPS_MERGE_STRATEGY, + }); - expect(vm.statusTextAfterAuthor).toBe( - 'to be merged automatically when the pipeline succeeds', - ); - }); - }); + expect(wrapper.findByTestId('afterStatusText').text()).toBe( + 'to be merged automatically when the pipeline succeeds', + ); + }); + }); - describe('cancelButtonText', () => { - it('should return "Cancel automatic merge" if MWPS is selected', () => { - Vue.set(vm.mr, 'autoMergeStrategy', MWPS_MERGE_STRATEGY); + describe('cancelButtonText', () => { + it('should return "Cancel automatic merge" if MWPS is selected', () => { + factory({ + ...defaultMrProps(), + autoMergeStrategy: MWPS_MERGE_STRATEGY, + }); - expect(vm.cancelButtonText).toBe('Cancel automatic merge'); + expect(wrapper.findByTestId('cancelAutomaticMergeButton').text()).toBe( + 'Cancel automatic merge', + ); + }); + }); }); - }); - }); - describe('methods', () => { - describe('cancelAutomaticMerge', () => { - it('should set flag and call service then tell main component to update the widget with data', done => { - const mrObj = { - is_new_mr_data: true, - }; - jest.spyOn(vm.service, 'cancelAutomaticMerge').mockReturnValue( - new Promise(resolve => { - resolve({ - data: mrObj, + describe('methods', () => { + describe('cancelAutomaticMerge', () => { + it('should set flag and call service then tell main component to update the widget with data', (done) => { + factory({ + ...defaultMrProps(), }); - }), - ); - - vm.cancelAutomaticMerge(); - setImmediate(() => { - expect(vm.isCancellingAutoMerge).toBeTruthy(); - expect(eventHub.$emit).toHaveBeenCalledWith('UpdateWidgetData', mrObj); - done(); + const mrObj = { + is_new_mr_data: true, + }; + jest.spyOn(wrapper.vm.service, 'cancelAutomaticMerge').mockReturnValue( + new Promise((resolve) => { + resolve({ + data: mrObj, + }); + }), + ); + + wrapper.vm.cancelAutomaticMerge(); + setImmediate(() => { + expect(wrapper.vm.isCancellingAutoMerge).toBeTruthy(); + expect(eventHub.$emit).toHaveBeenCalledWith('UpdateWidgetData', mrObj); + done(); + }); + }); }); - }); - }); - describe('removeSourceBranch', () => { - it('should set flag and call service then request main component to update the widget', done => { - jest.spyOn(vm.service, 'merge').mockReturnValue( - Promise.resolve({ - data: { - status: MWPS_MERGE_STRATEGY, - }, - }), - ); - - vm.removeSourceBranch(); - setImmediate(() => { - expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested'); - expect(vm.service.merge).toHaveBeenCalledWith({ - sha, - auto_merge_strategy: MWPS_MERGE_STRATEGY, - should_remove_source_branch: true, - }); - done(); + describe('removeSourceBranch', () => { + it('should set flag and call service then request main component to update the widget', (done) => { + factory({ + ...defaultMrProps(), + }); + jest.spyOn(wrapper.vm.service, 'merge').mockReturnValue( + Promise.resolve({ + data: { + status: MWPS_MERGE_STRATEGY, + }, + }), + ); + + wrapper.vm.removeSourceBranch(); + setImmediate(() => { + expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested'); + expect(wrapper.vm.service.merge).toHaveBeenCalledWith({ + sha, + auto_merge_strategy: MWPS_MERGE_STRATEGY, + should_remove_source_branch: true, + }); + done(); + }); + }); }); }); - }); - }); - describe('template', () => { - it('should have correct elements', () => { - expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy(); - expect(vm.$el.innerText).toContain('to be merged automatically when the pipeline succeeds'); + describe('template', () => { + it('should have correct elements', () => { + factory({ + ...defaultMrProps(), + }); - expect(vm.$el.innerText).toContain('The changes will be merged into'); - expect(vm.$el.innerText).toContain(targetBranch); - expect(vm.$el.innerText).toContain('The source branch will not be deleted'); - expect(vm.$el.querySelector('.js-cancel-auto-merge').innerText).toContain( - 'Cancel automatic merge', - ); + expect(wrapper.element).toMatchSnapshot(); + }); - expect(vm.$el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeFalsy(); - expect(vm.$el.querySelector('.js-remove-source-branch').innerText).toContain( - 'Delete source branch', - ); + it('should disable cancel auto merge button when the action is in progress', async () => { + factory({ + ...defaultMrProps(), + }); + wrapper.setData({ + isCancellingAutoMerge: true, + }); - expect(vm.$el.querySelector('.js-remove-source-branch').getAttribute('disabled')).toBeFalsy(); - }); + await nextTick(); - it('should disable cancel auto merge button when the action is in progress', done => { - vm.isCancellingAutoMerge = true; + expect(wrapper.find('.js-cancel-auto-merge').attributes('disabled')).toBe('disabled'); + }); - Vue.nextTick(() => { - expect(vm.$el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeTruthy(); - done(); - }); - }); + it('should show source branch will be deleted text when it source branch set to remove', () => { + factory({ + ...defaultMrProps(), + shouldRemoveSourceBranch: true, + }); - it('should show source branch will be deleted text when it source branch set to remove', done => { - vm.mr.shouldRemoveSourceBranch = true; + const normalizedText = wrapper.text().replace(/\s+/g, ' '); - Vue.nextTick(() => { - const normalizedText = vm.$el.innerText.replace(/\s+/g, ' '); + expect(normalizedText).toContain('The source branch will be deleted'); + expect(normalizedText).not.toContain('The source branch will not be deleted'); + }); - expect(normalizedText).toContain('The source branch will be deleted'); - expect(normalizedText).not.toContain('The source branch will not be deleted'); - done(); - }); - }); + it('should not show delete source branch button when user not able to delete source branch', () => { + factory({ + ...defaultMrProps(), + currentUserId: 4, + }); - it('should not show delete source branch button when user not able to delete source branch', done => { - vm.mr.currentUserId = 4; + expect(wrapper.find('.js-remove-source-branch').exists()).toBe(false); + }); - Vue.nextTick(() => { - expect(vm.$el.querySelector('.js-remove-source-branch')).toEqual(null); - done(); - }); - }); + it('should disable delete source branch button when the action is in progress', async () => { + factory({ + ...defaultMrProps(), + }); + wrapper.setData({ + isRemovingSourceBranch: true, + }); - it('should disable delete source branch button when the action is in progress', done => { - vm.isRemovingSourceBranch = true; + await nextTick(); - Vue.nextTick(() => { - expect( - vm.$el.querySelector('.js-remove-source-branch').getAttribute('disabled'), - ).toBeTruthy(); - done(); - }); - }); + expect(wrapper.find('.js-remove-source-branch').attributes('disabled')).toBe('disabled'); + }); - it('should render the status text as "...to merged automatically" if MWPS is selected', done => { - Vue.set(vm.mr, 'autoMergeStrategy', MWPS_MERGE_STRATEGY); + it('should render the status text as "...to merged automatically" if MWPS is selected', () => { + factory({ + ...defaultMrProps(), + autoMergeStrategy: MWPS_MERGE_STRATEGY, + }); - Vue.nextTick(() => { - const statusText = trimText(vm.$el.querySelector('.js-status-text-after-author').innerText); + const statusText = trimText(wrapper.find('.js-status-text-after-author').text()); - expect(statusText).toBe('to be merged automatically when the pipeline succeeds'); - done(); - }); - }); + expect(statusText).toBe('to be merged automatically when the pipeline succeeds'); + }); - it('should render the cancel button as "Cancel automatic merge" if MWPS is selected', done => { - Vue.set(vm.mr, 'autoMergeStrategy', MWPS_MERGE_STRATEGY); + it('should render the cancel button as "Cancel automatic merge" if MWPS is selected', () => { + factory({ + ...defaultMrProps(), + autoMergeStrategy: MWPS_MERGE_STRATEGY, + }); - Vue.nextTick(() => { - const cancelButtonText = trimText(vm.$el.querySelector('.js-cancel-auto-merge').innerText); + const cancelButtonText = trimText(wrapper.find('.js-cancel-auto-merge').text()); - expect(cancelButtonText).toBe('Cancel automatic merge'); - done(); + expect(cancelButtonText).toBe('Cancel automatic merge'); + }); }); }); }); |