1 files changed, 39 insertions, 7 deletions

diff --git a/spec/frontend/runner/components/runner_tag_spec.js b/spec/frontend/runner/components/runner_tag_spec.js
index dda318f8153..bd05d4b2cfe 100644
--- a/spec/frontend/runner/components/runner_tag_spec.js
+++ b/spec/frontend/runner/components/runner_tag_spec.js
@@ -1,18 +1,35 @@
 import { GlBadge } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import RunnerTag from '~/runner/components/runner_tag.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+
+const mockTag = 'tag1';
 
 describe('RunnerTag', () => {
   let wrapper;
 
   const findBadge = () => wrapper.findComponent(GlBadge);
+  const getTooltipValue = () => getBinding(findBadge().element, 'gl-tooltip').value;
+
+  const setDimensions = ({ scrollWidth, offsetWidth }) => {
+    jest.spyOn(findBadge().element, 'scrollWidth', 'get').mockReturnValue(scrollWidth);
+    jest.spyOn(findBadge().element, 'offsetWidth', 'get').mockReturnValue(offsetWidth);
+
+    // Mock trigger resize
+    getBinding(findBadge().element, 'gl-resize-observer').value();
+  };
 
   const createComponent = ({ props = {} } = {}) => {
     wrapper = shallowMount(RunnerTag, {
       propsData: {
-        tag: 'tag1',
+        tag: mockTag,
         ...props,
       },
+      directives: {
+        GlTooltip: createMockDirective(),
+        GlResizeObserver: createMockDirective(),
+      },
     });
   };
 
@@ -25,21 +42,36 @@ describe('RunnerTag', () => {
   });
 
   it('Displays tag text', () => {
-    expect(wrapper.text()).toBe('tag1');
+    expect(wrapper.text()).toBe(mockTag);
   });
 
   it('Displays tags with correct style', () => {
     expect(findBadge().props()).toMatchObject({
-      size: 'md',
-      variant: 'info',
+      size: 'sm',
+      variant: 'neutral',
     });
   });
 
-  it('Displays tags with small size', () => {
+  it('Displays tags with md size', () => {
     createComponent({
-      props: { size: 'sm' },
+      props: { size: 'md' },
     });
 
-    expect(findBadge().props('size')).toBe('sm');
+    expect(findBadge().props('size')).toBe('md');
   });
+
+  it.each`
+    case                    | scrollWidth | offsetWidth | expectedTooltip
+    ${'overflowing'}        | ${110}      | ${100}      | ${mockTag}
+    ${'not overflowing'}    | ${90}       | ${100}      | ${''}
+    ${'almost overflowing'} | ${100}      | ${100}      | ${''}
+  `(
+    'Sets "$expectedTooltip" as tooltip when $case',
+    async ({ scrollWidth, offsetWidth, expectedTooltip }) => {
+      setDimensions({ scrollWidth, offsetWidth });
+      await nextTick();
+
+      expect(getTooltipValue()).toBe(expectedTooltip);
+    },
+  );
 });