Merge branch 'fl-mr-widget-1' into 'master'

Moves more mr widget components into vue files

See merge request gitlab-org/gitlab-ce!16857

2 files changed, 228 insertions, 124 deletions

diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
index 93bb83ca8bd..13e5595bbfc 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
@@ -1,121 +1,220 @@
 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('1 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('2 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)');
+      });
     });
   });
 });
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js
index 4da4fc82c26..cc43639f576 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js
@@ -1,51 +1,56 @@
 import Vue from 'vue';
-import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help';
-
-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,
-  });
-};
+import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
 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();
+  });
 
+  describe('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', () => {
+      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('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();
-      });
+    it('renders button to open help modal', () => {
+      expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-target')).toEqual('#modal_merge_info');
+      expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-toggle')).toEqual('modal');
+    });
+  });
+
+  describe('without missing branch', () => {
+    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('.js-open-modal-help').getAttribute('data-target')).toEqual('#modal_merge_info');
+      expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-toggle')).toEqual('modal');
     });
   });
 });