diff options
author | Phil Hughes <me@iamphill.com> | 2018-01-22 16:19:27 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-01-22 16:19:27 +0300 |
commit | d6e63f9848adc19ed0d16ce191cbbe811923de9a (patch) | |
tree | 9bfd48f1b3a912833907a3cc25800fd8fc94ad98 | |
parent | 6d9da7382d96b1d6f8c23e4d81fadd51e1453821 (diff) | |
parent | 5de85992bb76e041222fbee06f3844bf275aaf66 (diff) |
Merge branch 'vue-mr-widget-state' into 'master'
Move mr_widget_auto_merge_failed component into a vue file
See merge request gitlab-org/gitlab-ce!16564
4 files changed, 89 insertions, 69 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js deleted file mode 100644 index 587de731f6e..00000000000 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js +++ /dev/null @@ -1,47 +0,0 @@ -import eventHub from '../../event_hub'; -import statusIcon from '../mr_widget_status_icon'; - -export default { - name: 'MRWidgetAutoMergeFailed', - props: { - mr: { type: Object, required: true }, - }, - data() { - return { - isRefreshing: false, - }; - }, - components: { - statusIcon, - }, - methods: { - refreshWidget() { - this.isRefreshing = true; - eventHub.$emit('MRWidgetUpdateRequested', () => { - this.isRefreshing = false; - }); - }, - }, - template: ` - <div class="mr-widget-body media"> - <status-icon status="warning" /> - <div class="media-body space-children"> - <span class="bold"> - <template v-if="mr.mergeError">{{mr.mergeError}}.</template> - This merge request failed to be merged automatically - </span> - <button - @click="refreshWidget" - :disabled="isRefreshing" - type="button" - class="btn btn-xs btn-default"> - <i - v-if="isRefreshing" - class="fa fa-spinner fa-spin" - aria-hidden="true" /> - Refresh - </button> - </div> - </div> - `, -}; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue new file mode 100644 index 00000000000..77dd243d617 --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue @@ -0,0 +1,52 @@ +<script> + import loadingIcon from '~/vue_shared/components/loading_icon.vue'; + import eventHub from '../../event_hub'; + import statusIcon from '../mr_widget_status_icon'; + + export default { + name: 'MRWidgetAutoMergeFailed', + components: { + statusIcon, + loadingIcon, + }, + props: { + mr: { + type: Object, + required: true, + }, + }, + data() { + return { + isRefreshing: false, + }; + }, + methods: { + refreshWidget() { + this.isRefreshing = true; + eventHub.$emit('MRWidgetUpdateRequested', () => { + this.isRefreshing = false; + }); + }, + }, + }; +</script> +<template> + <div class="mr-widget-body media"> + <status-icon status="warning" /> + <div class="media-body space-children"> + <span class="bold"> + <template v-if="mr.mergeError">{{ mr.mergeError }}.</template> + {{ s__("mrWidget|This merge request failed to be merged automatically") }} + </span> + <button + @click="refreshWidget" + :disabled="isRefreshing" + type="button" + class="btn btn-xs btn-default" + > + <loading-icon v-if="isRefreshing" /> + {{ s__("mrWidget|Refresh") }} + </button> + </div> + </div> +</template> diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js index 12610501868..2dd3b2c2f98 100644 --- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js +++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js @@ -33,7 +33,7 @@ export { default as PipelineBlockedState } from './components/states/mr_widget_p export { default as PipelineFailedState } from './components/states/mr_widget_pipeline_failed'; export { default as MergeWhenPipelineSucceedsState } from './components/states/mr_widget_merge_when_pipeline_succeeds'; export { default as RebaseState } from './components/states/mr_widget_rebase.vue'; -export { default as AutoMergeFailed } from './components/states/mr_widget_auto_merge_failed'; +export { default as AutoMergeFailed } from './components/states/mr_widget_auto_merge_failed.vue'; export { default as CheckingState } from './components/states/mr_widget_checking'; export { default as MRWidgetStore } from './stores/mr_widget_store'; export { default as MRWidgetService } from './services/mr_widget_service'; 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 index 6042d7384d5..95c94e95e3a 100644 --- 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 @@ -1,32 +1,47 @@ import Vue from 'vue'; -import autoMergeFailedComponent from '~/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed'; - -const mergeError = 'This is the merge error'; +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 '../../../helpers/vue_mount_component_helper'; describe('MRWidgetAutoMergeFailed', () => { - describe('props', () => { - it('should have props', () => { - const mrProp = autoMergeFailedComponent.props.mr; + let vm; + const mergeError = 'This is the merge error'; - expect(mrProp.type instanceof Object).toBeTruthy(); - expect(mrProp.required).toBeTruthy(); + beforeEach(() => { + const Component = Vue.extend(autoMergeFailedComponent); + vm = mountComponent(Component, { + mr: { mergeError }, }); }); - describe('template', () => { - const Component = Vue.extend(autoMergeFailedComponent); - const vm = new Component({ - el: document.createElement('div'), - propsData: { - 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'); - it('should have correct elements', () => { - expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy(); - expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeFalsy(); - expect(vm.$el.innerText).toContain('This merge request failed to be merged automatically'); - expect(vm.$el.innerText).toContain(mergeError); + Vue.nextTick(() => { + expect(vm.$el.querySelector('button').getAttribute('disabled')).toEqual('disabled'); + expect( + vm.$el.querySelector('button i').classList, + ).toContain('fa-spinner'); + done(); }); }); }); |