1 files changed, 50 insertions, 31 deletions

diff --git a/spec/frontend/pipelines/pipeline_triggerer_spec.js b/spec/frontend/pipelines/pipeline_triggerer_spec.js
index 701b1691c7b..58bfb68e85c 100644
--- a/spec/frontend/pipelines/pipeline_triggerer_spec.js
+++ b/spec/frontend/pipelines/pipeline_triggerer_spec.js
@@ -1,17 +1,11 @@
-import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { GlAvatar, GlAvatarLink } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import pipelineTriggerer from '~/pipelines/components/pipelines_list/pipeline_triggerer.vue';
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
 describe('Pipelines Triggerer', () => {
   let wrapper;
 
-  const expectComponentWithProps = (Component, props = {}) => {
-    const componentWrapper = wrapper.find(Component);
-    expect(componentWrapper.isVisible()).toBe(true);
-    expect(componentWrapper.props()).toEqual(expect.objectContaining(props));
-  };
-
   const mockData = {
     pipeline: {
       user: {
@@ -22,40 +16,65 @@ describe('Pipelines Triggerer', () => {
     },
   };
 
-  const createComponent = () => {
-    wrapper = shallowMount(pipelineTriggerer, {
-      propsData: mockData,
+  const createComponent = (props) => {
+    wrapper = shallowMountExtended(pipelineTriggerer, {
+      propsData: {
+        ...props,
+      },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
     });
   };
 
-  beforeEach(() => {
-    createComponent();
-  });
-
   afterEach(() => {
     wrapper.destroy();
   });
 
-  it('should render pipeline triggerer table cell', () => {
-    expect(wrapper.find('[data-testid="pipeline-triggerer"]').exists()).toBe(true);
-  });
+  const findAvatarLink = () => wrapper.findComponent(GlAvatarLink);
+  const findAvatar = () => wrapper.findComponent(GlAvatar);
+  const findTriggerer = () => wrapper.findByText('API');
+
+  describe('when user was a triggerer', () => {
+    beforeEach(() => {
+      createComponent(mockData);
+    });
+
+    it('should render pipeline triggerer table cell', () => {
+      expect(wrapper.find('[data-testid="pipeline-triggerer"]').exists()).toBe(true);
+    });
+
+    it('should render only user avatar', () => {
+      expect(findAvatarLink().exists()).toBe(true);
+      expect(findTriggerer().exists()).toBe(false);
+    });
+
+    it('should set correct props on avatar link component', () => {
+      expect(findAvatarLink().attributes()).toMatchObject({
+        title: mockData.pipeline.user.name,
+        href: mockData.pipeline.user.path,
+      });
+    });
 
-  it('should pass triggerer information when triggerer is provided', () => {
-    expectComponentWithProps(UserAvatarLink, {
-      linkHref: mockData.pipeline.user.path,
-      tooltipText: mockData.pipeline.user.name,
-      imgSrc: mockData.pipeline.user.avatar_url,
+    it('should add tooltip to avatar link', () => {
+      const tooltip = getBinding(findAvatarLink().element, 'gl-tooltip');
+
+      expect(tooltip).toBeDefined();
+    });
+
+    it('should set correct props on avatar component', () => {
+      expect(findAvatar().attributes().src).toBe(mockData.pipeline.user.avatar_url);
     });
   });
 
-  it('should render "API" when no triggerer is provided', async () => {
-    wrapper.setProps({
-      pipeline: {
-        user: null,
-      },
+  describe('when API was a triggerer', () => {
+    beforeEach(() => {
+      createComponent({ pipeline: {} });
     });
 
-    await nextTick();
-    expect(wrapper.find('.js-pipeline-url-api').text()).toEqual('API');
+    it('should render label only', () => {
+      expect(findAvatarLink().exists()).toBe(false);
+      expect(findTriggerer().exists()).toBe(true);
+    });
   });
 });