Merge branch '49110-update-mr-widget-styles' into 'master'

Resolve "Follow up to "Styling of the MR widget's info and pipeline sections""

Closes #49110

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

3 files changed, 180 insertions, 6 deletions

diff --git a/spec/javascripts/helpers/vue_mount_component_helper.js b/spec/javascripts/helpers/vue_mount_component_helper.js
index 1057f0aca3e..6848c95d95d 100644
--- a/spec/javascripts/helpers/vue_mount_component_helper.js
+++ b/spec/javascripts/helpers/vue_mount_component_helper.js
@@ -1,3 +1,5 @@
+import Vue from 'vue';
+
 const mountComponent = (Component, props = {}, el = null) =>
   new Component({
     propsData: props,
@@ -25,4 +27,12 @@ export const mountComponentWithSlots = (Component, { props, slots }) => {
   return component.$mount();
 };
 
+/**
+ * Mount a component with the given render method.
+ *
+ * This helps with inserting slots that need to be compiled.
+ */
+export const mountComponentWithRender = (render, el = null) =>
+  mountComponent(Vue.extend({ render }), {}, el);
+
 export default mountComponent;
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 8ac2f26979b..0e42537faed 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
@@ -45,7 +45,7 @@ describe('MRWidgetHeader', () => {
       });
     });
 
-    describe('commitsText', () => {
+    describe('commitsBehindText', () => {
       it('returns singular when there is one commit', () => {
         vm = mountComponent(Component, {
           mr: {
@@ -53,11 +53,12 @@ describe('MRWidgetHeader', () => {
             sourceBranch: 'mr-widget-refactor',
             sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
             targetBranch: 'master',
+            targetBranchPath: '/foo/bar/master',
             statusPath: 'abc',
           },
         });
 
-        expect(vm.commitsText).toEqual('1 commit behind');
+        expect(vm.commitsBehindText).toEqual('The source branch is <a href="/foo/bar/master">1 commit behind</a> the target branch');
       });
 
       it('returns plural when there is more than one commit', () => {
@@ -67,11 +68,12 @@ describe('MRWidgetHeader', () => {
             sourceBranch: 'mr-widget-refactor',
             sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
             targetBranch: 'master',
+            targetBranchPath: '/foo/bar/master',
             statusPath: 'abc',
           },
         });
 
-        expect(vm.commitsText).toEqual('2 commits behind');
+        expect(vm.commitsBehindText).toEqual('The source branch is <a href="/foo/bar/master">2 commits behind</a> the target branch');
       });
     });
   });
@@ -280,9 +282,9 @@ describe('MRWidgetHeader', () => {
       });
 
       it('renders diverged commits info', () => {
-        expect(vm.$el.querySelector('.diverged-commits-count').textContent).toMatch(
-          /(mr-widget-refactor[\s\S]+?is 12 commits behind[\s\S]+?master)/,
-        );
+        expect(vm.$el.querySelector('.diverged-commits-count').textContent).toEqual('The source branch is 12 commits behind the target branch');
+        expect(vm.$el.querySelector('.diverged-commits-count a').textContent).toEqual('12 commits behind');
+        expect(vm.$el.querySelector('.diverged-commits-count a')).toHaveAttr('href', vm.mr.targetBranchPath);
       });
     });
   });
diff --git a/spec/javascripts/vue_shared/components/tooltip_on_truncate_spec.js b/spec/javascripts/vue_shared/components/tooltip_on_truncate_spec.js
new file mode 100644
index 00000000000..8465757deb6
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/tooltip_on_truncate_spec.js
@@ -0,0 +1,162 @@
+import { mountComponentWithRender } from 'spec/helpers/vue_mount_component_helper';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+
+const TEST_TITLE = 'lorem-ipsum-dolar-sit-amit-consectur-adipiscing-elit-sed-do';
+const CLASS_SHOW_TOOLTIP = 'js-show-tooltip';
+const STYLE_TRUNCATED = {
+  display: 'inline-block',
+  'max-width': '20px',
+};
+const STYLE_NORMAL = {
+  display: 'inline-block',
+  'max-width': '1000px',
+};
+
+function mountTooltipOnTruncate(options, createChildren) {
+  return mountComponentWithRender(h => h(TooltipOnTruncate, options, createChildren(h)), '#app');
+}
+
+describe('TooltipOnTruncate component', () => {
+  let vm;
+
+  beforeEach(() => {
+    const el = document.createElement('div');
+    el.id = 'app';
+    document.body.appendChild(el);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('with default target', () => {
+    it('renders tooltip if truncated', done => {
+      const options = {
+        style: STYLE_TRUNCATED,
+        props: {
+          title: TEST_TITLE,
+        },
+      };
+
+      vm = mountTooltipOnTruncate(options, () => [TEST_TITLE]);
+
+      vm.$nextTick()
+        .then(() => {
+          expect(vm.$el).toHaveClass(CLASS_SHOW_TOOLTIP);
+          expect(vm.$el).toHaveData('original-title', TEST_TITLE);
+          expect(vm.$el).toHaveData('placement', 'top');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('does not render tooltip if normal', done => {
+      const options = {
+        style: STYLE_NORMAL,
+        props: {
+          title: TEST_TITLE,
+        },
+      };
+
+      vm = mountTooltipOnTruncate(options, () => [TEST_TITLE]);
+
+      vm.$nextTick()
+        .then(() => {
+          expect(vm.$el).not.toHaveClass(CLASS_SHOW_TOOLTIP);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
+  describe('with child target', () => {
+    it('renders tooltip if truncated', done => {
+      const options = {
+        style: STYLE_NORMAL,
+        props: {
+          title: TEST_TITLE,
+          truncateTarget: 'child',
+        },
+      };
+
+      vm = mountTooltipOnTruncate(options, (h) => [
+        h('a', { style: STYLE_TRUNCATED }, TEST_TITLE),
+      ]);
+
+      vm.$nextTick()
+        .then(() => {
+          expect(vm.$el).toHaveClass(CLASS_SHOW_TOOLTIP);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('does not render tooltip if normal', done => {
+      const options = {
+        props: {
+          title: TEST_TITLE,
+          truncateTarget: 'child',
+        },
+      };
+
+      vm = mountTooltipOnTruncate(options, (h) => [
+        h('a', { style: STYLE_NORMAL }, TEST_TITLE),
+      ]);
+
+      vm.$nextTick()
+        .then(() => {
+          expect(vm.$el).not.toHaveClass(CLASS_SHOW_TOOLTIP);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
+  describe('with fn target', () => {
+    it('renders tooltip if truncated', done => {
+      const options = {
+        style: STYLE_NORMAL,
+        props: {
+          title: TEST_TITLE,
+          truncateTarget: (el) => el.childNodes[1],
+        },
+      };
+
+      vm = mountTooltipOnTruncate(options, (h) => [
+        h('a', { style: STYLE_NORMAL }, TEST_TITLE),
+        h('span', { style: STYLE_TRUNCATED }, TEST_TITLE),
+      ]);
+
+      vm.$nextTick()
+        .then(() => {
+          expect(vm.$el).toHaveClass(CLASS_SHOW_TOOLTIP);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
+  describe('placement', () => {
+    it('sets data-placement when tooltip is rendered', done => {
+      const options = {
+        props: {
+          title: TEST_TITLE,
+          truncateTarget: 'child',
+          placement: 'bottom',
+        },
+      };
+
+      vm = mountTooltipOnTruncate(options, (h) => [
+        h('a', { style: STYLE_TRUNCATED }, TEST_TITLE),
+      ]);
+
+      vm.$nextTick()
+        .then(() => {
+          expect(vm.$el).toHaveClass(CLASS_SHOW_TOOLTIP);
+          expect(vm.$el).toHaveData('placement', options.props.placement);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+});