Merge branch 'dz/355859-migrate-user-avatar-link' into 'master'

Migrate UserAvatarLink  in pipelines triggerers

See merge request gitlab-org/gitlab!84087

app/assets/javascripts/pipelines/components/pipelines_list/pipeline_triggerer.vue

 <script>
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+import { GlAvatarLink, GlAvatar, GlTooltipDirective } from '@gitlab/ui';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
-    UserAvatarLink,
+    GlAvatarLink,
+    GlAvatar,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   mixins: [glFeatureFlagMixin()],
   props: {
@@ -22,15 +26,11 @@ export default {
 </script>
 <template>
   <div class="pipeline-triggerer" data-testid="pipeline-triggerer">
-    <user-avatar-link
-      v-if="user"
-      :link-href="user.path"
-      :img-src="user.avatar_url"
-      :img-size="32"
-      :tooltip-text="user.name"
-      class="gl-ml-3 js-pipeline-url-user"
-    />
-    <span v-else class="gl-ml-3 js-pipeline-url-api api">
+    <gl-avatar-link v-if="user" v-gl-tooltip :href="user.path" :title="user.name" class="gl-ml-3">
+      <gl-avatar :size="32" :src="user.avatar_url" />
+    </gl-avatar-link>
+
+    <span v-else class="gl-ml-3">
       {{ s__('Pipelines|API') }}
     </span>
   </div>

spec/frontend/pipelines/pipeline_triggerer_spec.js

-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();
   });
 
+  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 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 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 render "API" when no triggerer is provided', async () => {
-    wrapper.setProps({
-      pipeline: {
-        user: null,
-      },
+    it('should add tooltip to avatar link', () => {
+      const tooltip = getBinding(findAvatarLink().element, 'gl-tooltip');
+
+      expect(tooltip).toBeDefined();
     });
 
-    await nextTick();
-    expect(wrapper.find('.js-pipeline-url-api').text()).toEqual('API');
+    it('should set correct props on avatar component', () => {
+      expect(findAvatar().attributes().src).toBe(mockData.pipeline.user.avatar_url);
+    });
+  });
+
+  describe('when API was a triggerer', () => {
+    beforeEach(() => {
+      createComponent({ pipeline: {} });
+    });
+
+    it('should render label only', () => {
+      expect(findAvatarLink().exists()).toBe(false);
+      expect(findTriggerer().exists()).toBe(true);
+    });
   });
 });