Move mr_widget_auto_merge_failed component into a vue file

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

-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="failed" />
-      <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>
-  `,
-};

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

+<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="failed" />
+    <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>

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

app/assets/javascripts/vue_merge_request_widget/index.js

@@ -2,6 +2,9 @@ import {
   Vue,
   mrWidgetOptions,
 } from './dependencies';
+import Translate from '../vue_shared/translate';
+
+Vue.use(Translate);
 
 document.addEventListener('DOMContentLoaded', () => {
   gl.mrWidgetData.gitlabLogo = gon.gitlab_logo;

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('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();
     });
   });
 });