1 files changed, 85 insertions, 34 deletions

diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js
index fd3f59008ec..df7ce449678 100644
--- a/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js
+++ b/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js
@@ -1,51 +1,102 @@
-import { shallowMount } from '@vue/test-utils';
+import { GlAvatarLink } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { TEST_HOST } from 'spec/test_constants';
+import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
-import UserAvatarLinkNew from '~/vue_shared/components/user_avatar/user_avatar_link_new.vue';
-import UserAvatarLinkOld from '~/vue_shared/components/user_avatar/user_avatar_link_old.vue';
-
-const PROVIDED_PROPS = {
-  size: 32,
-  imgSrc: 'myavatarurl.com',
-  imgAlt: 'mydisplayname',
-  cssClasses: 'myextraavatarclass',
-  tooltipText: 'tooltip text',
-  tooltipPlacement: 'bottom',
-};
 
 describe('User Avatar Link Component', () => {
   let wrapper;
 
-  const createWrapper = (props = {}, { glAvatarForAllUserAvatars } = {}) => {
-    wrapper = shallowMount(UserAvatarLink, {
+  const findUserName = () => wrapper.findByTestId('user-avatar-link-username');
+
+  const defaultProps = {
+    linkHref: `${TEST_HOST}/myavatarurl.com`,
+    imgSize: 32,
+    imgSrc: `${TEST_HOST}/myavatarurl.com`,
+    imgAlt: 'mydisplayname',
+    imgCssClasses: 'myextraavatarclass',
+    tooltipText: 'tooltip text',
+    tooltipPlacement: 'bottom',
+    username: 'username',
+  };
+
+  const createWrapper = (props, slots) => {
+    wrapper = shallowMountExtended(UserAvatarLink, {
       propsData: {
-        ...PROVIDED_PROPS,
+        ...defaultProps,
         ...props,
-      },
-      provide: {
-        glFeatures: {
-          glAvatarForAllUserAvatars,
-        },
+        ...slots,
       },
     });
   };
 
+  beforeEach(() => {
+    createWrapper();
+  });
+
   afterEach(() => {
     wrapper.destroy();
   });
 
-  describe.each([
-    [false, true, true],
-    [true, false, true],
-    [true, true, true],
-    [false, false, false],
-  ])(
-    'when glAvatarForAllUserAvatars=%s and enforceGlAvatar=%s',
-    (glAvatarForAllUserAvatars, enforceGlAvatar, isUsingNewVersion) => {
-      it(`will render ${isUsingNewVersion ? 'new' : 'old'} version`, () => {
-        createWrapper({ enforceGlAvatar }, { glAvatarForAllUserAvatars });
-        expect(wrapper.findComponent(UserAvatarLinkNew).exists()).toBe(isUsingNewVersion);
-        expect(wrapper.findComponent(UserAvatarLinkOld).exists()).toBe(!isUsingNewVersion);
+  it('should render GlLink with correct props', () => {
+    const link = wrapper.findComponent(GlAvatarLink);
+    expect(link.exists()).toBe(true);
+    expect(link.attributes('href')).toBe(defaultProps.linkHref);
+  });
+
+  it('should render UserAvatarImage and provide correct props to it', () => {
+    expect(wrapper.findComponent(UserAvatarImage).exists()).toBe(true);
+    expect(wrapper.findComponent(UserAvatarImage).props()).toEqual({
+      cssClasses: defaultProps.imgCssClasses,
+      imgAlt: defaultProps.imgAlt,
+      imgSrc: defaultProps.imgSrc,
+      lazy: false,
+      size: defaultProps.imgSize,
+      tooltipPlacement: defaultProps.tooltipPlacement,
+      tooltipText: '',
+    });
+  });
+
+  describe('when username provided', () => {
+    beforeEach(() => {
+      createWrapper({ username: defaultProps.username });
+    });
+
+    it('should render provided username', () => {
+      expect(findUserName().text()).toBe(defaultProps.username);
+    });
+
+    it('should provide the tooltip data for the username', () => {
+      expect(findUserName().attributes()).toEqual(
+        expect.objectContaining({
+          title: defaultProps.tooltipText,
+          'tooltip-placement': defaultProps.tooltipPlacement,
+        }),
+      );
+    });
+  });
+
+  describe('when username is NOT provided', () => {
+    beforeEach(() => {
+      createWrapper({ username: '' });
+    });
+
+    it('should NOT render username', () => {
+      expect(findUserName().exists()).toBe(false);
+    });
+  });
+
+  describe('avatar-badge slot', () => {
+    const badge = '<span>User badge</span>';
+
+    beforeEach(() => {
+      createWrapper(defaultProps, {
+        'avatar-badge': badge,
       });
-    },
-  );
+    });
+
+    it('should render provided `avatar-badge` slot content', () => {
+      expect(wrapper.html()).toContain(badge);
+    });
+  });
 });