Moves merge help into a vue component

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js

-export default {
-  name: 'MRWidgetMergeHelp',
-  props: {
-    missingBranch: { type: String, required: false, default: '' },
-  },
-  template: `
-    <section class="mr-widget-help">
-      <template
-        v-if="missingBranch">
-        If the {{missingBranch}} branch exists in your local repository, you
-      </template>
-      <template v-else>
-        You
-      </template>
-      can merge this merge request manually using the
-      <a
-        data-toggle="modal"
-        href="#modal_merge_info">
-        command line
-      </a>
-    </section>
-  `,
-};

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue

+<script>
+  import { sprintf, s__ } from '~/locale';
+
+  export default {
+    name: 'MRWidgetMergeHelp',
+    props: {
+      missingBranch: {
+        type: String,
+        required: false,
+        default: ''
+      },
+    },
+    computed: {
+      missingBranchInfo() {
+        return sprintf(
+          s__('mrWidget|If the %{branch} branch exists in your local repository, you can merge this merge request manually using the'),
+          { branch: this.missingBranch }
+        );
+      },
+    },
+  };
+</script>
+<template>
+  <section class="mr-widget-help">
+    <template v-if="missingBranch">
+      {{ missingBranchInfo }}
+    </template>
+    <template v-else>
+      {{ s__("mrWidget|You can merge this merge request manually using the") }}
+    </template>
+
+    <a
+      role="button"
+      data-toggle="modal"
+      href="#modal_merge_info">
+      {{ s__("mrWidget|command line") }}
+    </a>
+  </section>
+</template>

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

 import statusIcon from '../mr_widget_status_icon.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
-import mrWidgetMergeHelp from '../../components/mr_widget_merge_help';
+import mrWidgetMergeHelp from '../../components/mr_widget_merge_help.vue';
 
 export default {
   name: 'MRWidgetMissingBranch',

app/assets/javascripts/vue_merge_request_widget/dependencies.js

@@ -12,7 +12,7 @@
 export { default as Vue } from 'vue';
 export { default as SmartInterval } from '~/smart_interval';
 export { default as WidgetHeader } from './components/mr_widget_header';
-export { default as WidgetMergeHelp } from './components/mr_widget_merge_help';
+export { default as WidgetMergeHelp } from './components/mr_widget_merge_help.vue';
 export { default as WidgetPipeline } from './components/mr_widget_pipeline.vue';
 export { default as WidgetDeployment } from './components/mr_widget_deployment';
 export { default as WidgetRelatedLinks } from './components/mr_widget_related_links';

spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js

 import Vue from 'vue';
-import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help';
+import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
-const props = {
-  missingBranch: 'this-is-not-the-branch-you-are-looking-for',
-};
-const text = `If the ${props.missingBranch} branch exists in your local repository`;
 
-const createComponent = () => {
-  const Component = Vue.extend(mergeHelpComponent);
-  return new Component({
-    el: document.createElement('div'),
-    propsData: props,
-  });
-};
+const text = `If the ${props.missingBranch} branch exists in your local repository`;
 
 describe('MRWidgetMergeHelp', () => {
-  describe('props', () => {
-    it('should have props', () => {
-      const { missingBranch } = mergeHelpComponent.props;
-      const MissingBranchTypeClass = missingBranch.type;
-
-      expect(new MissingBranchTypeClass() instanceof String).toBeTruthy();
-      expect(missingBranch.required).toBeFalsy();
-      expect(missingBranch.default).toEqual('');
-    });
+  let vm;
+  let Component;
+
+  beforeEach(() => {
+    Component = Vue.extend(mergeHelpComponent);
   });
 
-  describe('template', () => {
-    let vm;
-    let el;
+  afterEach(() => {
+    vm.$destroy();
+  });
 
+  fdescribe('with missing branch', () => {
     beforeEach(() => {
-      vm = createComponent();
-      el = vm.$el;
+      vm = mountComponent(Component, {
+        missingBranch: 'this-is-not-the-branch-you-are-looking-for',
+      });
     });
 
-    it('should have the correct elements', () => {
-      expect(el.classList.contains('mr-widget-help')).toBeTruthy();
-      expect(el.textContent).toContain(text);
+    it('renders missing branch information', () => {
+      console.log('', vm.$el);
+
     });
+  });
 
-    it('should not show missing branch name if missingBranch props is not provided', (done) => {
-      vm.missingBranch = null;
-      Vue.nextTick(() => {
-        expect(el.textContent).not.toContain(text);
-        done();
-      });
+  describe('without missing branch', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component);
     });
   });
 });