Moves widget header into a vue file

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

-import tooltip from '../../vue_shared/directives/tooltip';
-import { pluralize } from '../../lib/utils/text_utility';
-import icon from '../../vue_shared/components/icon.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 {
+  export default {
     name: 'MRWidgetHeader',
-  props: {
-    mr: { type: Object, required: true },
-  },
     directives: {
       tooltip,
     },
     components: {
       icon,
+      clipboardButton,
+    },
+    props: {
+      mr: {
+        type: Object,
+        required: true,
+      },
     },
     computed: {
       shouldShowCommitsBehindText() {
         return this.mr.divergedCommitsCount > 0;
       },
       commitsText() {
-      return pluralize('commit', this.mr.divergedCommitsCount);
+        return n__('commit behind', 'commits behind', this.mr.divergedCommitsCount);
       },
       branchNameClipboardData() {
         // This supports code in app/assets/javascripts/copy_to_clipboard.js that
@@ -35,83 +41,99 @@ export default {
         return branchTitle.length > 32;
       },
     },
-  template: `
+  };
+</script>
+<template>
   <div class="mr-source-target">
     <div class="normal">
       <strong>
-          Request to merge
+        {{ s__("mrWidget|Request to merge") }}
         <span
-            class="label-branch"
-            :class="{'label-truncated': isBranchTitleLong(mr.sourceBranch)}"
+          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>
-          <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
+          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)}"
+          :class="{ 'label-truncatedtooltip': isBranchTitleLong(mr.targetBranch) }"
           :title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
-            data-placement="bottom">
-            <a :href="mr.targetBranchTreePath">{{mr.targetBranch}}</a>
+          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}} behind</a>)
+        class="diverged-commits-count"
+      >
+        (<a :href="mr.targetBranchPath">{{ mr.divergedCommitsCount }} {{ commitsText }}</a>)
       </span>
     </div>
+
     <div v-if="mr.isOpen">
-        <a
-          href="#modal_merge_info"
+      <button
+        data-target="#modal_merge_info"
         data-toggle="modal"
         :disabled="mr.sourceBranchRemoved"
-          class="btn btn-sm inline">
-          Check out branch
-        </a>
+        class="btn btn-sm inline js-check-out-branch"
+        type="button"
+      >
+        {{ s__("mrWidget|Check out branch") }}
+      </button>
       <span class="dropdown prepend-left-10">
-          <a
+        <button
+          type="button"
           class="btn btn-sm inline dropdown-toggle"
           data-toggle="dropdown"
           aria-label="Download as"
-            role="button">
-            <icon
-              name="download">
-            </icon>
+          aria-haspopup="true"
+          aria-expanded="false"
+        >
+          <icon name="download" />
           <i
             class="fa fa-caret-down"
             aria-hidden="true">
           </i>
-          </a>
+        </button>
         <ul class="dropdown-menu dropdown-menu-align-right">
           <li>
             <a
+              class="js-download-email-patches"
               :href="mr.emailPatchesPath"
-                download>
-                Email patches
+              download
+            >
+              {{ s__("mrWidget|Email patches") }}
             </a>
           </li>
           <li>
             <a
+              class="js-download-plain-diff"
               :href="mr.plainDiffPath"
-                download>
-                Plain diff
+              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({
+    describe('shouldShowCommitsBehindText', () => {
+      it('return true when there are divergedCommitsCount', () => {
+        vm = mountComponent(Component, { mr: {
           divergedCommitsCount: 12,
           sourceBranch: 'mr-widget-refactor',
-        sourceBranchLink: '/foo/bar/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';
+    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');
+      });
+    });
+
+    describe('with an open merge request', () => {
+      afterEach(() => {
+        vm.$destroy();
+      });
 
       beforeEach(() => {
-      mr = {
+        vm = mountComponent(Component, { mr: {
           divergedCommitsCount: 12,
           sourceBranch: 'mr-widget-refactor',
-        sourceBranchLink: `<a href="${sourceBranchPath}">mr-widget-refactor</a>`,
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>',
           sourceBranchRemoved: false,
           targetBranchPath: 'foo/bar/commits-path',
           targetBranchTreePath: 'foo/bar/tree/path',
@@ -63,59 +112,109 @@ describe('MRWidgetHeader', () => {
           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');
 
-      vm = createComponent(mr);
-      el = vm.$el;
+        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('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');
+      it('renders download dropdown with links', () => {
+        expect(
+          vm.$el.querySelector('.js-download-email-patches').textContent.trim(),
+        ).toEqual('Email patches');
 
-      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);
+        expect(
+          vm.$el.querySelector('.js-download-email-patches').getAttribute('href'),
+        ).toEqual('/mr/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-plain-diff').textContent.trim(),
+        ).toEqual('Plain diff');
 
-      expect(el.querySelector('a[href="#modal_merge_info"]').getAttribute('disabled')).toBeNull();
+        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('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();
+      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 disable check out branch button if source branch has been removed', (done) => {
-      vm.mr.sourceBranchRemoved = true;
+    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);
+      });
+    });
 
-      Vue.nextTick()
-        .then(() => {
-          expect(el.querySelector('a[href="#modal_merge_info"]').getAttribute('disabled')).toBe('disabled');
-          done();
-        })
-        .catch(done.fail);
+    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',
+        } });
+      });
+
+      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');
+    });
   });
 });