diff options
3 files changed, 60 insertions, 47 deletions
diff --git a/changelogs/unreleased/ce-xanf-move-auto-merge-failed-to-jest.yml b/changelogs/unreleased/ce-xanf-move-auto-merge-failed-to-jest.yml new file mode 100644 index 00000000000..5a56a668c54 --- /dev/null +++ b/changelogs/unreleased/ce-xanf-move-auto-merge-failed-to-jest.yml @@ -0,0 +1,5 @@ +--- +title: Refactored Karma spec to Jest for mr_widget_auto_merge_failed +merge_request: 32282 +author: Illya Klymov +type: other diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js new file mode 100644 index 00000000000..1f4d1e17ea0 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js @@ -0,0 +1,55 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlLoadingIcon } from '@gitlab/ui'; +import AutoMergeFailedComponent from '~/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue'; +import eventHub from '~/vue_merge_request_widget/event_hub'; + +describe('MRWidgetAutoMergeFailed', () => { + let wrapper; + const mergeError = 'This is the merge error'; + const findButton = () => wrapper.find('button'); + + const createComponent = (props = {}) => { + wrapper = shallowMount(AutoMergeFailedComponent, { + sync: false, + propsData: { ...props }, + }); + }; + + beforeEach(() => { + createComponent({ + mr: { mergeError }, + }); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders failed message', () => { + expect(wrapper.text()).toContain('This merge request failed to be merged automatically'); + }); + + it('renders merge error provided', () => { + expect(wrapper.text()).toContain(mergeError); + }); + + it('render refresh button', () => { + expect(findButton().text()).toEqual('Refresh'); + }); + + it('emits event and shows loading icon when button is clicked', () => { + jest.spyOn(eventHub, '$emit'); + findButton().trigger('click'); + + expect(eventHub.$emit.mock.calls[0][0]).toBe('MRWidgetUpdateRequested'); + + return wrapper.vm.$nextTick(() => { + expect(findButton().attributes('disabled')).toEqual('disabled'); + expect( + findButton() + .find(GlLoadingIcon) + .exists(), + ).toBe(true); + }); + }); +}); diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js deleted file mode 100644 index 55a11a72551..00000000000 --- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js +++ /dev/null @@ -1,47 +0,0 @@ -import Vue from 'vue'; -import autoMergeFailedComponent from '~/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue'; -import eventHub from '~/vue_merge_request_widget/event_hub'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; - -describe('MRWidgetAutoMergeFailed', () => { - let vm; - const mergeError = 'This is the merge error'; - - beforeEach(() => { - const Component = Vue.extend(autoMergeFailedComponent); - vm = mountComponent(Component, { - mr: { mergeError }, - }); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('renders failed message', () => { - expect(vm.$el.textContent).toContain('This merge request failed to be merged automatically'); - }); - - it('renders merge error provided', () => { - expect(vm.$el.innerText).toContain(mergeError); - }); - - it('render refresh button', () => { - expect(vm.$el.querySelector('button').textContent.trim()).toEqual('Refresh'); - }); - - it('emits event and shows loading icon when button is clicked', done => { - spyOn(eventHub, '$emit'); - vm.$el.querySelector('button').click(); - - expect(eventHub.$emit.calls.argsFor(0)[0]).toEqual('MRWidgetUpdateRequested'); - - Vue.nextTick(() => { - expect(vm.$el.querySelector('button').getAttribute('disabled')).toEqual('disabled'); - expect(vm.$el.querySelector('button .loading-container span').classList).toContain( - 'gl-spinner', - ); - done(); - }); - }); -}); |