Moves widget header into a vue file

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

-import tooltip from '../../vue_shared/directives/tooltip';
-import { pluralize } from '../../lib/utils/text_utility';
-import icon from '../../vue_shared/components/icon.vue';
-
-export default {
-  name: 'MRWidgetHeader',
-  props: {
-    mr: { type: Object, required: true },
-  },
-  directives: {
-    tooltip,
-  },
-  components: {
-    icon,
-  },
-  computed: {
-    shouldShowCommitsBehindText() {
-      return this.mr.divergedCommitsCount > 0;
-    },
-    commitsText() {
-      return pluralize('commit', this.mr.divergedCommitsCount);
-    },
-    branchNameClipboardData() {
-      // This supports code in app/assets/javascripts/copy_to_clipboard.js that
-      // works around ClipboardJS limitations to allow the context-specific
-      // copy/pasting of plain text or GFM.
-      return JSON.stringify({
-        text: this.mr.sourceBranch,
-        gfm: `\`${this.mr.sourceBranch}\``,
-      });
-    },
-  },
-  methods: {
-    isBranchTitleLong(branchTitle) {
-      return branchTitle.length > 32;
-    },
-  },
-  template: `
-    <div class="mr-source-target">
-      <div class="normal">
-        <strong>
-          Request to merge
-          <span
-            class="label-branch"
-            :class="{'label-truncated': isBranchTitleLong(mr.sourceBranch)}"
-            :title="isBranchTitleLong(mr.sourceBranch) ? mr.sourceBranch : ''"
-            data-placement="bottom"
-            :v-tooltip="isBranchTitleLong(mr.sourceBranch)"
-            v-html="mr.sourceBranchLink"></span>
-          <button
-            v-tooltip
-            class="btn btn-transparent btn-clipboard"
-            data-title="Copy branch name to clipboard"
-            :data-clipboard-text="branchNameClipboardData">
-            <i
-              aria-hidden="true"
-              class="fa fa-clipboard"></i>
-          </button>
-          into
-          <span
-            class="label-branch"
-            :v-tooltip="isBranchTitleLong(mr.sourceBranch)"
-            :class="{'label-truncatedtooltip': isBranchTitleLong(mr.targetBranch)}"
-            :title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
-            data-placement="bottom">
-            <a :href="mr.targetBranchTreePath">{{mr.targetBranch}}</a>
-          </span>
-        </strong>
-        <span
-          v-if="shouldShowCommitsBehindText"
-          class="diverged-commits-count">
-          (<a :href="mr.targetBranchPath">{{mr.divergedCommitsCount}} {{commitsText}} behind</a>)
-        </span>
-      </div>
-      <div v-if="mr.isOpen">
-        <a
-          href="#modal_merge_info"
-          data-toggle="modal"
-          :disabled="mr.sourceBranchRemoved"
-          class="btn btn-sm inline">
-          Check out branch
-        </a>
-        <span class="dropdown prepend-left-10">
-          <a
-            class="btn btn-sm inline dropdown-toggle"
-            data-toggle="dropdown"
-            aria-label="Download as"
-            role="button">
-            <icon
-              name="download">
-            </icon>
-            <i
-              class="fa fa-caret-down"
-              aria-hidden="true">
-            </i>
-          </a>
-          <ul class="dropdown-menu dropdown-menu-align-right">
-            <li>
-              <a
-                :href="mr.emailPatchesPath"
-                download>
-                Email patches
-              </a>
-            </li>
-            <li>
-              <a
-                :href="mr.plainDiffPath"
-                download>
-                Plain diff
-              </a>
-            </li>
-          </ul>
-        </span>
-      </div>
-    </div>
-  `,
-};

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

+<script>
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import { n__ } from '~/locale';
+  import icon from '~/vue_shared/components/icon.vue';
+  import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
+
+  export default {
+    name: 'MRWidgetHeader',
+    directives: {
+      tooltip,
+    },
+    components: {
+      icon,
+      clipboardButton,
+    },
+    props: {
+      mr: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      shouldShowCommitsBehindText() {
+        return this.mr.divergedCommitsCount > 0;
+      },
+      commitsText() {
+        return n__('commit behind', 'commits behind', this.mr.divergedCommitsCount);
+      },
+      branchNameClipboardData() {
+        // This supports code in app/assets/javascripts/copy_to_clipboard.js that
+        // works around ClipboardJS limitations to allow the context-specific
+        // copy/pasting of plain text or GFM.
+        return JSON.stringify({
+          text: this.mr.sourceBranch,
+          gfm: `\`${this.mr.sourceBranch}\``,
+        });
+      },
+    },
+    methods: {
+      isBranchTitleLong(branchTitle) {
+        return branchTitle.length > 32;
+      },
+    },
+  };
+</script>
+<template>
+  <div class="mr-source-target">
+    <div class="normal">
+      <strong>
+        {{ s__("mrWidget|Request to merge") }}
+        <span
+          class="label-branch js-source-branch"
+          :class="{ 'label-truncated': isBranchTitleLong(mr.sourceBranch) }"
+          :title="isBranchTitleLong(mr.sourceBranch) ? mr.sourceBranch : ''"
+          data-placement="bottom"
+          :v-tooltip="isBranchTitleLong(mr.sourceBranch)"
+          v-html="mr.sourceBranchLink"
+        >
+        </span>
+
+        <clipboardButton
+          :text="branchNameClipboardData"
+          :title="__('Copy branch name to clipboard')"
+        />
+
+        {{ s__("mrWidget|into") }}
+
+        <span
+          class="label-branch"
+          :v-tooltip="isBranchTitleLong(mr.sourceBranch)"
+          :class="{ 'label-truncatedtooltip': isBranchTitleLong(mr.targetBranch) }"
+          :title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
+          data-placement="bottom"
+        >
+          <a
+            :href="mr.targetBranchTreePath"
+            class="js-target-branch"
+          >
+            {{ mr.targetBranch }}
+          </a>
+        </span>
+      </strong>
+      <span
+        v-if="shouldShowCommitsBehindText"
+        class="diverged-commits-count"
+      >
+        (<a :href="mr.targetBranchPath">{{ mr.divergedCommitsCount }} {{ commitsText }}</a>)
+      </span>
+    </div>
+
+    <div v-if="mr.isOpen">
+      <button
+        data-target="#modal_merge_info"
+        data-toggle="modal"
+        :disabled="mr.sourceBranchRemoved"
+        class="btn btn-sm inline js-check-out-branch"
+        type="button"
+      >
+        {{ s__("mrWidget|Check out branch") }}
+      </button>
+      <span class="dropdown prepend-left-10">
+        <button
+          type="button"
+          class="btn btn-sm inline dropdown-toggle"
+          data-toggle="dropdown"
+          aria-label="Download as"
+          aria-haspopup="true"
+          aria-expanded="false"
+        >
+          <icon name="download" />
+          <i
+            class="fa fa-caret-down"
+            aria-hidden="true">
+          </i>
+        </button>
+        <ul class="dropdown-menu dropdown-menu-align-right">
+          <li>
+            <a
+              class="js-download-email-patches"
+              :href="mr.emailPatchesPath"
+              download
+            >
+              {{ s__("mrWidget|Email patches") }}
+            </a>
+          </li>
+          <li>
+            <a
+              class="js-download-plain-diff"
+              :href="mr.plainDiffPath"
+              download
+            >
+              {{ s__("mrWidget|Plain diff") }}
+            </a>
+          </li>
+        </ul>
+      </span>
+    </div>
+  </div>
+</template>

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

@@ -7,14 +7,14 @@
       missingBranch: {
         type: String,
         required: false,
-        default: ''
+        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 }
+          { branch: this.missingBranch },
         );
       },
     },

app/assets/javascripts/vue_merge_request_widget/dependencies.js

@@ -11,7 +11,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 WidgetHeader } from './components/mr_widget_header.vue';
 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';

spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js

 import Vue from 'vue';
-import headerComponent from '~/vue_merge_request_widget/components/mr_widget_header';
-
-const createComponent = (mr) => {
-  const Component = Vue.extend(headerComponent);
-  return new Component({
-    el: document.createElement('div'),
-    propsData: { mr },
-  });
-};
+import headerComponent from '~/vue_merge_request_widget/components/mr_widget_header.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
 describe('MRWidgetHeader', () => {
-  describe('props', () => {
-    it('should have props', () => {
-      const { mr } = headerComponent.props;
+  let vm;
+  let Component;
 
-      expect(mr.type instanceof Object).toBeTruthy();
-      expect(mr.required).toBeTruthy();
-    });
+  beforeEach(() => {
+    Component = Vue.extend(headerComponent);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
   });
 
   describe('computed', () => {
-    let vm;
-    beforeEach(() => {
-      vm = createComponent({
-        divergedCommitsCount: 12,
-        sourceBranch: 'mr-widget-refactor',
-        sourceBranchLink: '/foo/bar/mr-widget-refactor',
-        targetBranch: 'master',
+    describe('shouldShowCommitsBehindText', () => {
+      it('return true when there are divergedCommitsCount', () => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 12,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
+          targetBranch: 'master',
+        } });
+
+        expect(vm.shouldShowCommitsBehindText).toEqual(true);
+      });
+
+      it('returns false where there are no divergedComits count', () => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 0,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
+          targetBranch: 'master',
+        } });
+        expect(vm.shouldShowCommitsBehindText).toEqual(false);
       });
     });
 
-    it('shouldShowCommitsBehindText', () => {
-      expect(vm.shouldShowCommitsBehindText).toBeTruthy();
+    describe('commitsText', () => {
+      it('returns singular when there is one commit', () => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 1,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
+          targetBranch: 'master',
+        } });
 
-      vm.mr.divergedCommitsCount = 0;
-      expect(vm.shouldShowCommitsBehindText).toBeFalsy();
-    });
+        expect(vm.commitsText).toEqual('commit behind');
+      });
 
-    it('commitsText', () => {
-      expect(vm.commitsText).toEqual('commits');
+      it('returns plural when there is more than one commit', () => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 2,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
+          targetBranch: 'master',
+        } });
 
-      vm.mr.divergedCommitsCount = 1;
-      expect(vm.commitsText).toEqual('commit');
+        expect(vm.commitsText).toEqual('commits behind');
+      });
     });
   });
 
   describe('template', () => {
-    let vm;
-    let el;
-    let mr;
-    const sourceBranchPath = '/foo/bar/mr-widget-refactor';
-
-    beforeEach(() => {
-      mr = {
-        divergedCommitsCount: 12,
-        sourceBranch: 'mr-widget-refactor',
-        sourceBranchLink: `<a href="${sourceBranchPath}">mr-widget-refactor</a>`,
-        sourceBranchRemoved: false,
-        targetBranchPath: 'foo/bar/commits-path',
-        targetBranchTreePath: 'foo/bar/tree/path',
-        targetBranch: 'master',
-        isOpen: true,
-        emailPatchesPath: '/mr/email-patches',
-        plainDiffPath: '/mr/plainDiffPath',
-      };
-
-      vm = createComponent(mr);
-      el = vm.$el;
+    describe('common elements', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 12,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>',
+          sourceBranchRemoved: false,
+          targetBranchPath: 'foo/bar/commits-path',
+          targetBranchTreePath: 'foo/bar/tree/path',
+          targetBranch: 'master',
+          isOpen: true,
+          emailPatchesPath: '/mr/email-patches',
+          plainDiffPath: '/mr/plainDiffPath',
+        } });
+      });
+
+      it('renders source branch link', () => {
+        expect(
+          vm.$el.querySelector('.js-source-branch').innerHTML,
+        ).toEqual('<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>');
+      });
+
+      it('renders clipboard button', () => {
+        expect(vm.$el.querySelector('.btn-clipboard')).not.toEqual(null);
+      });
+
+      it('renders target branch', () => {
+        expect(vm.$el.querySelector('.js-target-branch').textContent.trim()).toEqual('master');
+      });
     });
 
-    it('should render template elements correctly', () => {
-      expect(el.classList.contains('mr-source-target')).toBeTruthy();
-      const sourceBranchLink = el.querySelectorAll('.label-branch')[0];
-      const targetBranchLink = el.querySelectorAll('.label-branch')[1];
-      const commitsCount = el.querySelector('.diverged-commits-count');
+    describe('with an open merge request', () => {
+      afterEach(() => {
+        vm.$destroy();
+      });
 
-      expect(sourceBranchLink.textContent).toContain(mr.sourceBranch);
-      expect(targetBranchLink.textContent).toContain(mr.targetBranch);
-      expect(sourceBranchLink.querySelector('a').getAttribute('href')).toEqual(sourceBranchPath);
-      expect(targetBranchLink.querySelector('a').getAttribute('href')).toEqual(mr.targetBranchTreePath);
-      expect(commitsCount.textContent).toContain('12 commits behind');
-      expect(commitsCount.querySelector('a').getAttribute('href')).toEqual(mr.targetBranchPath);
+      beforeEach(() => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 12,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>',
+          sourceBranchRemoved: false,
+          targetBranchPath: 'foo/bar/commits-path',
+          targetBranchTreePath: 'foo/bar/tree/path',
+          targetBranch: 'master',
+          isOpen: true,
+          emailPatchesPath: '/mr/email-patches',
+          plainDiffPath: '/mr/plainDiffPath',
+        } });
+      });
+
+      it('renders checkout branch button with modal trigger', () => {
+        const button = vm.$el.querySelector('.js-check-out-branch');
+
+        expect(button.textContent.trim()).toEqual('Check out branch');
+        expect(button.getAttribute('data-target')).toEqual('#modal_merge_info');
+        expect(button.getAttribute('data-toggle')).toEqual('modal');
+      });
+
+      it('renders download dropdown with links', () => {
+        expect(
+          vm.$el.querySelector('.js-download-email-patches').textContent.trim(),
+        ).toEqual('Email patches');
 
-      expect(el.textContent).toContain('Check out branch');
-      expect(el.querySelectorAll('.dropdown li a')[0].getAttribute('href')).toEqual(mr.emailPatchesPath);
-      expect(el.querySelectorAll('.dropdown li a')[1].getAttribute('href')).toEqual(mr.plainDiffPath);
+        expect(
+          vm.$el.querySelector('.js-download-email-patches').getAttribute('href'),
+        ).toEqual('/mr/email-patches');
 
-      expect(el.querySelector('a[href="#modal_merge_info"]').getAttribute('disabled')).toBeNull();
+        expect(
+          vm.$el.querySelector('.js-download-plain-diff').textContent.trim(),
+        ).toEqual('Plain diff');
+
+        expect(
+          vm.$el.querySelector('.js-download-plain-diff').getAttribute('href'),
+        ).toEqual('/mr/plainDiffPath');
+      });
     });
 
-    it('should not have right action links if the MR state is not open', (done) => {
-      vm.mr.isOpen = false;
-      Vue.nextTick(() => {
-        expect(el.textContent).not.toContain('Check out branch');
-        expect(el.querySelectorAll('.dropdown li a').length).toEqual(0);
-        done();
+    describe('with a closed merge request', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 12,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>',
+          sourceBranchRemoved: false,
+          targetBranchPath: 'foo/bar/commits-path',
+          targetBranchTreePath: 'foo/bar/tree/path',
+          targetBranch: 'master',
+          isOpen: false,
+          emailPatchesPath: '/mr/email-patches',
+          plainDiffPath: '/mr/plainDiffPath',
+        } });
+      });
+
+      it('does not render checkout branch button with modal trigger', () => {
+        const button = vm.$el.querySelector('.js-check-out-branch');
+
+        expect(button).toEqual(null);
+      });
+
+      it('does not render download dropdown with links', () => {
+        expect(
+          vm.$el.querySelector('.js-download-email-patches'),
+        ).toEqual(null);
+
+        expect(
+          vm.$el.querySelector('.js-download-plain-diff'),
+        ).toEqual(null);
       });
     });
 
-    it('should not render diverged commits count if the MR has no diverged commits', (done) => {
-      vm.mr.divergedCommitsCount = null;
-      Vue.nextTick(() => {
-        expect(el.textContent).not.toContain('commits behind');
-        expect(el.querySelectorAll('.diverged-commits-count').length).toEqual(0);
-        done();
+    describe('without diverged commits', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 0,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>',
+          sourceBranchRemoved: false,
+          targetBranchPath: 'foo/bar/commits-path',
+          targetBranchTreePath: 'foo/bar/tree/path',
+          targetBranch: 'master',
+          isOpen: true,
+          emailPatchesPath: '/mr/email-patches',
+          plainDiffPath: '/mr/plainDiffPath',
+        } });
+      });
+
+      it('does not render diverged commits info', () => {
+        expect(vm.$el.querySelector('.diverged-commits-count')).toEqual(null);
       });
     });
 
-    it('should disable check out branch button if source branch has been removed', (done) => {
-      vm.mr.sourceBranchRemoved = true;
+    describe('with diverged commits', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 12,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>',
+          sourceBranchRemoved: false,
+          targetBranchPath: 'foo/bar/commits-path',
+          targetBranchTreePath: 'foo/bar/tree/path',
+          targetBranch: 'master',
+          isOpen: true,
+          emailPatchesPath: '/mr/email-patches',
+          plainDiffPath: '/mr/plainDiffPath',
+        } });
+      });
 
-      Vue.nextTick()
-        .then(() => {
-          expect(el.querySelector('a[href="#modal_merge_info"]').getAttribute('disabled')).toBe('disabled');
-          done();
-        })
-        .catch(done.fail);
+      it('renders diverged commits info', () => {
+        expect(vm.$el.querySelector('.diverged-commits-count').textContent.trim()).toEqual('(12 commits behind)');
+      });
     });
   });
 });

spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js

@@ -2,9 +2,6 @@ import Vue from 'vue';
 import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help.vue';
 import mountComponent from '../../helpers/vue_mount_component_helper';
 
-
-const text = `If the ${props.missingBranch} branch exists in your local repository`;
-
 describe('MRWidgetMergeHelp', () => {
   let vm;
   let Component;
@@ -17,7 +14,7 @@ describe('MRWidgetMergeHelp', () => {
     vm.$destroy();
   });
 
-  fdescribe('with missing branch', () => {
+  describe('with missing branch', () => {
     beforeEach(() => {
       vm = mountComponent(Component, {
         missingBranch: 'this-is-not-the-branch-you-are-looking-for',
@@ -25,8 +22,16 @@ describe('MRWidgetMergeHelp', () => {
     });
 
     it('renders missing branch information', () => {
-      console.log('', vm.$el);
+      expect(
+        vm.$el.textContent.trim().replace(/[\r\n]+/g, ' ').replace(/\s\s+/g, ' '),
+      ).toEqual(
+        'If the this-is-not-the-branch-you-are-looking-for branch exists in your local repository, you can merge this merge request manually using the command line',
+      );
+    });
 
+    it('renders element to open a modal', () => {
+      expect(vm.$el.querySelector('a').getAttribute('href')).toEqual('#modal_merge_info');
+      expect(vm.$el.querySelector('a').getAttribute('data-toggle')).toEqual('modal');
     });
   });
 
@@ -34,5 +39,18 @@ describe('MRWidgetMergeHelp', () => {
     beforeEach(() => {
       vm = mountComponent(Component);
     });
+
+    it('renders information about how to merge manually', () => {
+      expect(
+        vm.$el.textContent.trim().replace(/[\r\n]+/g, ' ').replace(/\s\s+/g, ' '),
+      ).toEqual(
+        'You can merge this merge request manually using the command line',
+      );
+    });
+
+    it('renders element to open a modal', () => {
+      expect(vm.$el.querySelector('a').getAttribute('href')).toEqual('#modal_merge_info');
+      expect(vm.$el.querySelector('a').getAttribute('data-toggle')).toEqual('modal');
+    });
   });
 });