1 files changed, 22 insertions, 1 deletions
diff --git a/spec/frontend/vue_shared/components/registry/metadata_item_spec.js b/spec/frontend/vue_shared/components/registry/metadata_item_spec.js
index ff968ff1831..3d3cfbe13e3 100644
--- a/spec/frontend/vue_shared/components/registry/metadata_item_spec.js
+++ b/spec/frontend/vue_shared/components/registry/metadata_item_spec.js
@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlIcon, GlLink } from '@gitlab/ui';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import component from '~/vue_shared/components/registry/metadata_item.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 
@@ -12,6 +13,9 @@ describe('Metadata Item', () => {
   const mountComponent = (propsData = defaultProps) => {
     wrapper = shallowMount(component, {
       propsData,
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
     });
   };
 
@@ -24,8 +28,9 @@ describe('Metadata Item', () => {
   const findLink = (w = wrapper) => w.find(GlLink);
   const findText = () => wrapper.find('[data-testid="metadata-item-text"]');
   const findTooltipOnTruncate = (w = wrapper) => w.find(TooltipOnTruncate);
+  const findTextTooltip = () => wrapper.find('[data-testid="text-tooltip-container"]');
 
-  describe.each(['xs', 's', 'm', 'l', 'xl'])('size class', size => {
+  describe.each(['xs', 's', 'm', 'l', 'xl'])('size class', (size) => {
     const className = `mw-${size}`;
 
     it(`${size} is assigned correctly to text`, () => {
@@ -55,6 +60,22 @@ describe('Metadata Item', () => {
       expect(tooltip.exists()).toBe(true);
       expect(tooltip.attributes('title')).toBe(defaultProps.text);
     });
+
+    describe('with tooltip prop set to something', () => {
+      const textTooltip = 'foo';
+      it('hides tooltip_on_truncate', () => {
+        mountComponent({ ...defaultProps, textTooltip });
+
+        expect(findTooltipOnTruncate(findText()).exists()).toBe(false);
+      });
+
+      it('set the tooltip on the text', () => {
+        mountComponent({ ...defaultProps, textTooltip });
+
+        const tooltip = getBinding(findTextTooltip().element, 'gl-tooltip');
+        expect(tooltip.value.title).toBe(textTooltip);
+      });
+    });
   });
 
   describe('link', () => {