Add latest changes from gitlab-org/gitlab@master

2 files changed, 240 insertions, 17 deletions

diff --git a/spec/frontend/vue_mr_widget/mr_widget_options_spec.js b/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
index d6f85dcfcc7..8c917e9339f 100644
--- a/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
+++ b/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
@@ -849,7 +849,7 @@ describe('mrWidgetOptions', () => {
     });
   });
 
-  describe('suggestPipeline feature flag', () => {
+  describe('suggestPipeline', () => {
     beforeEach(() => {
       mock.onAny().reply(200);
 
@@ -860,8 +860,6 @@ describe('mrWidgetOptions', () => {
 
     describe('given feature flag is enabled', () => {
       beforeEach(() => {
-        gon.features = { suggestPipeline: true };
-
         createComponent();
 
         vm.mr.hasCI = false;
@@ -891,19 +889,5 @@ describe('mrWidgetOptions', () => {
         expect(findSuggestPipeline()).toBeNull();
       });
     });
-
-    describe('given feature flag is not enabled', () => {
-      beforeEach(() => {
-        gon.features = { suggestPipeline: false };
-
-        createComponent();
-
-        vm.mr.hasCI = false;
-      });
-
-      it('should not suggest pipelines when none exist', () => {
-        expect(findSuggestPipeline()).toBeNull();
-      });
-    });
   });
 });
diff --git a/spec/frontend/vue_shared/components/tooltip_on_truncate_spec.js b/spec/frontend/vue_shared/components/tooltip_on_truncate_spec.js
new file mode 100644
index 00000000000..175abf5aae0
--- /dev/null
+++ b/spec/frontend/vue_shared/components/tooltip_on_truncate_spec.js
@@ -0,0 +1,239 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import { hasHorizontalOverflow } from '~/lib/utils/dom_utils';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+
+const DUMMY_TEXT = 'lorem-ipsum-dolar-sit-amit-consectur-adipiscing-elit-sed-do';
+
+const createChildElement = () => `<a href="#">${DUMMY_TEXT}</a>`;
+
+jest.mock('~/lib/utils/dom_utils', () => ({
+  hasHorizontalOverflow: jest.fn(() => {
+    throw new Error('this needs to be mocked');
+  }),
+}));
+
+describe('TooltipOnTruncate component', () => {
+  let wrapper;
+  let parent;
+
+  const createComponent = ({ propsData, ...options } = {}) => {
+    wrapper = shallowMount(TooltipOnTruncate, {
+      attachToDocument: true,
+      propsData: {
+        ...propsData,
+      },
+      ...options,
+    });
+  };
+
+  const createWrappedComponent = ({ propsData, ...options }) => {
+    // set a parent around the tested component
+    parent = mount(
+      {
+        props: {
+          title: { default: '' },
+        },
+        template: `
+        <TooltipOnTruncate :title="title" truncate-target="child">
+          <div>{{title}}</div>
+        </TooltipOnTruncate>
+        `,
+        components: {
+          TooltipOnTruncate,
+        },
+      },
+      {
+        propsData: { ...propsData },
+        attachToDocument: true,
+        ...options,
+      },
+    );
+
+    wrapper = parent.find(TooltipOnTruncate);
+  };
+
+  const hasTooltip = () => wrapper.classes('js-show-tooltip');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('with default target', () => {
+    it('renders tooltip if truncated', () => {
+      hasHorizontalOverflow.mockReturnValueOnce(true);
+      createComponent({
+        propsData: {
+          title: DUMMY_TEXT,
+        },
+        slots: {
+          default: [DUMMY_TEXT],
+        },
+      });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(hasHorizontalOverflow).toHaveBeenCalledWith(wrapper.element);
+        expect(hasTooltip()).toBe(true);
+        expect(wrapper.attributes('data-original-title')).toEqual(DUMMY_TEXT);
+        expect(wrapper.attributes('data-placement')).toEqual('top');
+      });
+    });
+
+    it('does not render tooltip if normal', () => {
+      hasHorizontalOverflow.mockReturnValueOnce(false);
+      createComponent({
+        propsData: {
+          title: DUMMY_TEXT,
+        },
+        slots: {
+          default: [DUMMY_TEXT],
+        },
+      });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(hasHorizontalOverflow).toHaveBeenCalledWith(wrapper.element);
+        expect(hasTooltip()).toBe(false);
+      });
+    });
+  });
+
+  describe('with child target', () => {
+    it('renders tooltip if truncated', () => {
+      hasHorizontalOverflow.mockReturnValueOnce(true);
+      createComponent({
+        propsData: {
+          title: DUMMY_TEXT,
+          truncateTarget: 'child',
+        },
+        slots: {
+          default: createChildElement(),
+        },
+      });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(hasHorizontalOverflow).toHaveBeenCalledWith(wrapper.element.childNodes[0]);
+        expect(hasTooltip()).toBe(true);
+      });
+    });
+
+    it('does not render tooltip if normal', () => {
+      hasHorizontalOverflow.mockReturnValueOnce(false);
+      createComponent({
+        propsData: {
+          truncateTarget: 'child',
+        },
+        slots: {
+          default: createChildElement(),
+        },
+      });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(hasHorizontalOverflow).toHaveBeenCalledWith(wrapper.element.childNodes[0]);
+        expect(hasTooltip()).toBe(false);
+      });
+    });
+  });
+
+  describe('with fn target', () => {
+    it('renders tooltip if truncated', () => {
+      hasHorizontalOverflow.mockReturnValueOnce(true);
+      createComponent({
+        propsData: {
+          title: DUMMY_TEXT,
+          truncateTarget: el => el.childNodes[1],
+        },
+        slots: {
+          default: [createChildElement(), createChildElement()],
+        },
+      });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(hasHorizontalOverflow).toHaveBeenCalledWith(wrapper.element.childNodes[1]);
+        expect(hasTooltip()).toBe(true);
+      });
+    });
+  });
+
+  describe('placement', () => {
+    it('sets data-placement when tooltip is rendered', () => {
+      const placement = 'bottom';
+
+      hasHorizontalOverflow.mockReturnValueOnce(true);
+      createComponent({
+        propsData: {
+          placement,
+        },
+        slots: {
+          default: DUMMY_TEXT,
+        },
+      });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(hasTooltip()).toBe(true);
+        expect(wrapper.attributes('data-placement')).toEqual(placement);
+      });
+    });
+  });
+
+  describe('updates when title and slot content changes', () => {
+    describe('is initialized with a long text', () => {
+      beforeEach(() => {
+        hasHorizontalOverflow.mockReturnValueOnce(true);
+        createWrappedComponent({
+          propsData: { title: DUMMY_TEXT },
+        });
+        return parent.vm.$nextTick();
+      });
+
+      it('renders tooltip', () => {
+        expect(hasTooltip()).toBe(true);
+        expect(wrapper.attributes('data-original-title')).toEqual(DUMMY_TEXT);
+        expect(wrapper.attributes('data-placement')).toEqual('top');
+      });
+
+      it('does not render tooltip after updated to a short text', () => {
+        hasHorizontalOverflow.mockReturnValueOnce(false);
+        parent.setProps({
+          title: 'new-text',
+        });
+
+        return wrapper.vm
+          .$nextTick()
+          .then(() => wrapper.vm.$nextTick()) // wait 2 times to get an updated slot
+          .then(() => {
+            expect(hasTooltip()).toBe(false);
+          });
+      });
+    });
+
+    describe('is initialized with a short text', () => {
+      beforeEach(() => {
+        hasHorizontalOverflow.mockReturnValueOnce(false);
+        createWrappedComponent({
+          propsData: { title: DUMMY_TEXT },
+        });
+        return wrapper.vm.$nextTick();
+      });
+
+      it('does not render tooltip', () => {
+        expect(hasTooltip()).toBe(false);
+      });
+
+      it('renders tooltip after text is updated', () => {
+        hasHorizontalOverflow.mockReturnValueOnce(true);
+        const newText = 'new-text';
+        parent.setProps({
+          title: newText,
+        });
+
+        return wrapper.vm
+          .$nextTick()
+          .then(() => wrapper.vm.$nextTick()) // wait 2 times to get an updated slot
+          .then(() => {
+            expect(hasTooltip()).toBe(true);
+            expect(wrapper.attributes('data-original-title')).toEqual(newText);
+            expect(wrapper.attributes('data-placement')).toEqual('top');
+          });
+      });
+    });
+  });
+});