Merge branch 'vue-mr-widget-state' into 'master'

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js → app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue

-import eventHub from '../../event_hub';
-import statusIcon from '../mr_widget_status_icon';
+<script>
+  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+  import eventHub from '../../event_hub';
+  import statusIcon from '../mr_widget_status_icon';
 
-export default {
+  export default {
     name: 'MRWidgetAutoMergeFailed',
+    components: {
+      statusIcon,
+      loadingIcon,
+    },
     props: {
-    mr: { type: Object, required: true },
+      mr: {
+        type: Object,
+        required: true,
+      },
     },
     data() {
       return {
         isRefreshing: false,
       };
     },
-  components: {
-    statusIcon,
-  },
     methods: {
       refreshWidget() {
         this.isRefreshing = true;
@@ -22,26 +28,25 @@ export default {
         });
       },
     },
-  template: `
+  };
+</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>
-          This merge request failed to be merged automatically
+        <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">
-          <i
-            v-if="isRefreshing"
-            class="fa fa-spinner fa-spin"
-            aria-hidden="true" />
-          Refresh
+        class="btn btn-xs btn-default"
+      >
+        <loading-icon v-if="isRefreshing" />
+        {{ s__("mrWidget|Refresh") }}
       </button>
     </div>
   </div>
-  `,
-};
+</template>

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';

spec/javascripts/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js

 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('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');
+  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 i').classList,
+      ).toContain('fa-spinner');
+      done();
+    });
   });
 });