Add latest changes from gitlab-org/gitlab@master

6 files changed, 519 insertions, 261 deletions

diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_new_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_new_spec.js
new file mode 100644
index 00000000000..f624f84eabd
--- /dev/null
+++ b/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_new_spec.js
@@ -0,0 +1,127 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlAvatar, GlTooltip } from '@gitlab/ui';
+import defaultAvatarUrl from 'images/no_avatar.png';
+import { placeholderImage } from '~/lazy_loader';
+import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image_new.vue';
+
+jest.mock('images/no_avatar.png', () => 'default-avatar-url');
+
+const PROVIDED_PROPS = {
+  size: 32,
+  imgSrc: 'myavatarurl.com',
+  imgAlt: 'mydisplayname',
+  cssClasses: 'myextraavatarclass',
+  tooltipText: 'tooltip text',
+  tooltipPlacement: 'bottom',
+};
+
+describe('User Avatar Image Component', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('Initialization', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(UserAvatarImage, {
+        propsData: {
+          ...PROVIDED_PROPS,
+        },
+        provide: {
+          glFeatures: {
+            glAvatarForAllUserAvatars: true,
+          },
+        },
+      });
+    });
+
+    it('should render `GlAvatar` and provide correct properties to it', () => {
+      const avatar = wrapper.findComponent(GlAvatar);
+
+      expect(avatar.attributes('data-src')).toBe(
+        `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
+      );
+      expect(avatar.props()).toMatchObject({
+        src: `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
+        alt: PROVIDED_PROPS.imgAlt,
+        size: PROVIDED_PROPS.size,
+      });
+    });
+
+    it('should add correct CSS classes', () => {
+      const classes = wrapper.findComponent(GlAvatar).classes();
+      expect(classes).toContain(PROVIDED_PROPS.cssClasses);
+      expect(classes).not.toContain('lazy');
+    });
+  });
+
+  describe('Initialization when lazy', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(UserAvatarImage, {
+        propsData: {
+          ...PROVIDED_PROPS,
+          lazy: true,
+        },
+        provide: {
+          glFeatures: {
+            glAvatarForAllUserAvatars: true,
+          },
+        },
+      });
+    });
+
+    it('should add lazy attributes', () => {
+      const avatar = wrapper.findComponent(GlAvatar);
+
+      expect(avatar.classes()).toContain('lazy');
+      expect(avatar.attributes()).toMatchObject({
+        src: placeholderImage,
+        'data-src': `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
+      });
+    });
+  });
+
+  describe('Initialization without src', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(UserAvatarImage, {
+        propsData: {
+          ...PROVIDED_PROPS,
+          imgSrc: null,
+        },
+        provide: {
+          glFeatures: {
+            glAvatarForAllUserAvatars: true,
+          },
+        },
+      });
+    });
+
+    it('should have default avatar image', () => {
+      const avatar = wrapper.findComponent(GlAvatar);
+
+      expect(avatar.props('src')).toBe(`${defaultAvatarUrl}?width=${PROVIDED_PROPS.size}`);
+    });
+  });
+
+  describe('Dynamic tooltip content', () => {
+    const slots = {
+      default: ['Action!'],
+    };
+
+    beforeEach(() => {
+      wrapper = shallowMount(UserAvatarImage, {
+        propsData: PROVIDED_PROPS,
+        slots,
+      });
+    });
+
+    it('renders the tooltip slot', () => {
+      expect(wrapper.findComponent(GlTooltip).exists()).toBe(true);
+    });
+
+    it('renders the tooltip content', () => {
+      expect(wrapper.findComponent(GlTooltip).text()).toContain(slots.default[0]);
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_old_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_old_spec.js
new file mode 100644
index 00000000000..5051b2b9cae
--- /dev/null
+++ b/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_old_spec.js
@@ -0,0 +1,122 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlTooltip } from '@gitlab/ui';
+import defaultAvatarUrl from 'images/no_avatar.png';
+import { placeholderImage } from '~/lazy_loader';
+import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image_old.vue';
+
+jest.mock('images/no_avatar.png', () => 'default-avatar-url');
+
+const PROVIDED_PROPS = {
+  size: 32,
+  imgSrc: 'myavatarurl.com',
+  imgAlt: 'mydisplayname',
+  cssClasses: 'myextraavatarclass',
+  tooltipText: 'tooltip text',
+  tooltipPlacement: 'bottom',
+};
+
+const DEFAULT_PROPS = {
+  size: 20,
+};
+
+describe('User Avatar Image Component', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('Initialization', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(UserAvatarImage, {
+        propsData: {
+          ...PROVIDED_PROPS,
+        },
+      });
+    });
+
+    it('should have <img> as a child element', () => {
+      const imageElement = wrapper.find('img');
+
+      expect(imageElement.exists()).toBe(true);
+      expect(imageElement.attributes('src')).toBe(
+        `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
+      );
+      expect(imageElement.attributes('data-src')).toBe(
+        `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
+      );
+      expect(imageElement.attributes('alt')).toBe(PROVIDED_PROPS.imgAlt);
+    });
+
+    it('should properly render img css', () => {
+      const classes = wrapper.find('img').classes();
+      expect(classes).toEqual(['avatar', 's32', PROVIDED_PROPS.cssClasses]);
+      expect(classes).not.toContain('lazy');
+    });
+  });
+
+  describe('Initialization when lazy', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(UserAvatarImage, {
+        propsData: {
+          ...PROVIDED_PROPS,
+          lazy: true,
+        },
+      });
+    });
+
+    it('should add lazy attributes', () => {
+      const imageElement = wrapper.find('img');
+
+      expect(imageElement.classes()).toContain('lazy');
+      expect(imageElement.attributes('src')).toBe(placeholderImage);
+      expect(imageElement.attributes('data-src')).toBe(
+        `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
+      );
+    });
+  });
+
+  describe('Initialization without src', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(UserAvatarImage);
+    });
+
+    it('should have default avatar image', () => {
+      const imageElement = wrapper.find('img');
+
+      expect(imageElement.attributes('src')).toBe(
+        `${defaultAvatarUrl}?width=${DEFAULT_PROPS.size}`,
+      );
+    });
+  });
+
+  describe('dynamic tooltip content', () => {
+    const props = PROVIDED_PROPS;
+    const slots = {
+      default: ['Action!'],
+    };
+
+    beforeEach(() => {
+      wrapper = shallowMount(UserAvatarImage, {
+        propsData: { props },
+        slots,
+      });
+    });
+
+    it('renders the tooltip slot', () => {
+      expect(wrapper.findComponent(GlTooltip).exists()).toBe(true);
+    });
+
+    it('renders the tooltip content', () => {
+      expect(wrapper.findComponent(GlTooltip).text()).toContain(slots.default[0]);
+    });
+
+    it('does not render tooltip data attributes on avatar image', () => {
+      const avatarImg = wrapper.find('img');
+
+      expect(avatarImg.attributes('title')).toBeFalsy();
+      expect(avatarImg.attributes('data-placement')).not.toBeDefined();
+      expect(avatarImg.attributes('data-container')).not.toBeDefined();
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_spec.js
index 64ce210b6c8..75d2a936b34 100644
--- a/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_spec.js
+++ b/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_spec.js
@@ -1,10 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlAvatar, GlTooltip } from '@gitlab/ui';
-import defaultAvatarUrl from 'images/no_avatar.png';
-import { placeholderImage } from '~/lazy_loader';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
-
-jest.mock('images/no_avatar.png', () => 'default-avatar-url');
+import UserAvatarImageNew from '~/vue_shared/components/user_avatar/user_avatar_image_new.vue';
+import UserAvatarImageOld from '~/vue_shared/components/user_avatar/user_avatar_image_old.vue';
 
 const PROVIDED_PROPS = {
   size: 32,
@@ -15,10 +12,6 @@ const PROVIDED_PROPS = {
   tooltipPlacement: 'bottom',
 };
 
-const DEFAULT_PROPS = {
-  size: 20,
-};
-
 describe('User Avatar Image Component', () => {
   let wrapper;
 
@@ -26,174 +19,43 @@ describe('User Avatar Image Component', () => {
     wrapper.destroy();
   });
 
-  describe('`glAvatarForAllUserAvatars` feature flag enabled', () => {
-    describe('Initialization', () => {
-      beforeEach(() => {
-        wrapper = shallowMount(UserAvatarImage, {
-          propsData: {
-            ...PROVIDED_PROPS,
-          },
-          provide: {
-            glFeatures: {
-              glAvatarForAllUserAvatars: true,
-            },
-          },
-        });
-      });
-
-      it('should render `GlAvatar` and provide correct properties to it', () => {
-        const avatar = wrapper.findComponent(GlAvatar);
-
-        expect(avatar.attributes('data-src')).toBe(
-          `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
-        );
-        expect(avatar.props()).toMatchObject({
-          src: `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
-          alt: PROVIDED_PROPS.imgAlt,
-        });
-      });
-
-      it('should add correct CSS classes', () => {
-        const classes = wrapper.findComponent(GlAvatar).classes();
-        expect(classes).toContain(PROVIDED_PROPS.cssClasses);
-        expect(classes).not.toContain('lazy');
-      });
-    });
-
-    describe('Initialization when lazy', () => {
-      beforeEach(() => {
-        wrapper = shallowMount(UserAvatarImage, {
-          propsData: {
-            ...PROVIDED_PROPS,
-            lazy: true,
-          },
-          provide: {
-            glFeatures: {
-              glAvatarForAllUserAvatars: true,
-            },
-          },
-        });
-      });
-
-      it('should add lazy attributes', () => {
-        const avatar = wrapper.findComponent(GlAvatar);
-
-        expect(avatar.classes()).toContain('lazy');
-        expect(avatar.attributes()).toMatchObject({
-          src: placeholderImage,
-          'data-src': `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
-        });
-      });
-    });
-
-    describe('Initialization without src', () => {
-      beforeEach(() => {
-        wrapper = shallowMount(UserAvatarImage);
-      });
-
-      it('should have default avatar image', () => {
-        const imageElement = wrapper.find('img');
-
-        expect(imageElement.attributes('src')).toBe(
-          `${defaultAvatarUrl}?width=${DEFAULT_PROPS.size}`,
-        );
-      });
-    });
-  });
-
-  describe('`glAvatarForAllUserAvatars` feature flag disabled', () => {
-    describe('Initialization', () => {
-      beforeEach(() => {
-        wrapper = shallowMount(UserAvatarImage, {
-          propsData: {
-            ...PROVIDED_PROPS,
-          },
-        });
-      });
-
-      it('should have <img> as a child element', () => {
-        const imageElement = wrapper.find('img');
-
-        expect(imageElement.exists()).toBe(true);
-        expect(imageElement.attributes('src')).toBe(
-          `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
-        );
-        expect(imageElement.attributes('data-src')).toBe(
-          `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
-        );
-        expect(imageElement.attributes('alt')).toBe(PROVIDED_PROPS.imgAlt);
-      });
-
-      it('should properly render img css', () => {
-        const classes = wrapper.find('img').classes();
-        expect(classes).toEqual(['avatar', 's32', PROVIDED_PROPS.cssClasses]);
-        expect(classes).not.toContain('lazy');
-      });
-    });
-
-    describe('Initialization when lazy', () => {
-      beforeEach(() => {
-        wrapper = shallowMount(UserAvatarImage, {
-          propsData: {
-            ...PROVIDED_PROPS,
-            lazy: true,
+  describe('when `glAvatarForAllUserAvatars` feature flag enabled', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(UserAvatarImage, {
+        propsData: {
+          ...PROVIDED_PROPS,
+        },
+        provide: {
+          glFeatures: {
+            glAvatarForAllUserAvatars: true,
           },
-        });
-      });
-
-      it('should add lazy attributes', () => {
-        const imageElement = wrapper.find('img');
-
-        expect(imageElement.classes()).toContain('lazy');
-        expect(imageElement.attributes('src')).toBe(placeholderImage);
-        expect(imageElement.attributes('data-src')).toBe(
-          `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
-        );
+        },
       });
     });
 
-    describe('Initialization without src', () => {
-      beforeEach(() => {
-        wrapper = shallowMount(UserAvatarImage);
-      });
-
-      it('should have default avatar image', () => {
-        const imageElement = wrapper.find('img');
-
-        expect(imageElement.attributes('src')).toBe(
-          `${defaultAvatarUrl}?width=${DEFAULT_PROPS.size}`,
-        );
-      });
+    it('should render `UserAvatarImageNew` component', () => {
+      expect(wrapper.findComponent(UserAvatarImageNew).exists()).toBe(true);
+      expect(wrapper.findComponent(UserAvatarImageOld).exists()).toBe(false);
     });
   });
 
-  describe('dynamic tooltip content', () => {
-    const props = PROVIDED_PROPS;
-    const slots = {
-      default: ['Action!'],
-    };
-
+  describe('when `glAvatarForAllUserAvatars` feature flag disabled', () => {
     beforeEach(() => {
       wrapper = shallowMount(UserAvatarImage, {
-        propsData: { props },
-        slots,
+        propsData: {
+          ...PROVIDED_PROPS,
+        },
+        provide: {
+          glFeatures: {
+            glAvatarForAllUserAvatars: false,
+          },
+        },
       });
     });
 
-    it('renders the tooltip slot', () => {
-      expect(wrapper.findComponent(GlTooltip).exists()).toBe(true);
-    });
-
-    it('renders the tooltip content', () => {
-      expect(wrapper.findComponent(GlTooltip).text()).toContain(slots.default[0]);
-    });
-
-    it('does not render tooltip data attributes for on avatar image', () => {
-      const avatarImg = wrapper.find('img');
-
-      expect(avatarImg.attributes('title')).toBeFalsy();
-      expect(avatarImg.attributes('data-placement')).not.toBeDefined();
-      expect(avatarImg.attributes('data-container')).not.toBeDefined();
+    it('should render `UserAvatarImageOld` component', () => {
+      expect(wrapper.findComponent(UserAvatarImageNew).exists()).toBe(false);
+      expect(wrapper.findComponent(UserAvatarImageOld).exists()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_new_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_new_spec.js
new file mode 100644
index 00000000000..5ba80b31b99
--- /dev/null
+++ b/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_new_spec.js
@@ -0,0 +1,102 @@
+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_new.vue';
+
+describe('User Avatar Link Component', () => {
+  let wrapper;
+
+  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: {
+        ...defaultProps,
+        ...props,
+        ...slots,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  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);
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_old_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_old_spec.js
new file mode 100644
index 00000000000..2d513c46e77
--- /dev/null
+++ b/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_old_spec.js
@@ -0,0 +1,102 @@
+import { GlLink } 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_old.vue';
+
+describe('User Avatar Link Component', () => {
+  let wrapper;
+
+  const findUserName = () => wrapper.find('[data-testid="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: {
+        ...defaultProps,
+        ...props,
+        ...slots,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render GlLink with correct props', () => {
+    const link = wrapper.findComponent(GlLink);
+    expect(link.exists()).toBe(true);
+    expect(link.attributes('href')).toBe(defaultProps.linkHref);
+  });
+
+  it('should render UserAvatarImage and povide 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);
+    });
+  });
+});
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 d3fec680b54..b36b83d1fea 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,118 +1,61 @@
-import { GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { each } from 'lodash';
-import { trimText } from 'helpers/text_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 defaultProps = {
-    linkHref: `${TEST_HOST}/myavatarurl.com`,
-    imgSize: 99,
-    imgSrc: `${TEST_HOST}/myavatarurl.com`,
-    imgAlt: 'mydisplayname',
-    imgCssClasses: 'myextraavatarclass',
-    tooltipText: 'tooltip text',
-    tooltipPlacement: 'bottom',
-    username: 'username',
-  };
-
-  const createWrapper = (props) => {
-    wrapper = shallowMount(UserAvatarLink, {
-      propsData: {
-        ...defaultProps,
-        ...props,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    createWrapper();
-  });
-
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
-  });
-
-  it('should have user-avatar-image registered as child component', () => {
-    expect(wrapper.vm.$options.components.userAvatarImage).toBeDefined();
-  });
-
-  it('user-avatar-link should have user-avatar-image as child component', () => {
-    expect(wrapper.find(UserAvatarImage).exists()).toBe(true);
-  });
-
-  it('should render GlLink as a child element', () => {
-    const link = wrapper.find(GlLink);
-
-    expect(link.exists()).toBe(true);
-    expect(link.attributes('href')).toBe(defaultProps.linkHref);
-  });
-
-  it('should return necessary props as defined', () => {
-    each(defaultProps, (val, key) => {
-      expect(wrapper.vm[key]).toBeDefined();
-    });
   });
 
-  describe('no username', () => {
+  describe('when `glAvatarForAllUserAvatars` feature flag enabled', () => {
     beforeEach(() => {
-      createWrapper({
-        username: '',
+      wrapper = shallowMount(UserAvatarLink, {
+        propsData: {
+          ...PROVIDED_PROPS,
+        },
+        provide: {
+          glFeatures: {
+            glAvatarForAllUserAvatars: true,
+          },
+        },
       });
     });
 
-    it('should only render image tag in link', () => {
-      const childElements = wrapper.vm.$el.childNodes;
-
-      expect(wrapper.find('img')).not.toBe('null');
-
-      // Vue will render the hidden component as <!---->
-      expect(childElements[1].tagName).toBeUndefined();
-    });
-
-    it('should render avatar image tooltip', () => {
-      expect(wrapper.vm.shouldShowUsername).toBe(false);
-      expect(wrapper.vm.avatarTooltipText).toEqual(defaultProps.tooltipText);
+    it('should render `UserAvatarLinkNew` component', () => {
+      expect(wrapper.findComponent(UserAvatarLinkNew).exists()).toBe(true);
+      expect(wrapper.findComponent(UserAvatarLinkOld).exists()).toBe(false);
     });
   });
 
-  describe('username', () => {
-    it('should not render avatar image tooltip', () => {
-      expect(wrapper.find('.js-user-avatar-image-tooltip').exists()).toBe(false);
-    });
-
-    it('should render username prop in <span>', () => {
-      expect(trimText(wrapper.find('.js-user-avatar-link-username').text())).toEqual(
-        defaultProps.username,
-      );
-    });
-
-    it('should render text tooltip for <span>', () => {
-      expect(wrapper.find('.js-user-avatar-link-username').attributes('title')).toEqual(
-        defaultProps.tooltipText,
-      );
-    });
-
-    it('should render text tooltip placement for <span>', () => {
-      expect(wrapper.find('.js-user-avatar-link-username').attributes('tooltip-placement')).toBe(
-        defaultProps.tooltipPlacement,
-      );
-    });
-  });
-
-  describe('lazy', () => {
-    it('passes lazy prop to avatar image', () => {
-      createWrapper({
-        username: '',
-        lazy: true,
+  describe('when `glAvatarForAllUserAvatars` feature flag disabled', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(UserAvatarLink, {
+        propsData: {
+          ...PROVIDED_PROPS,
+        },
+        provide: {
+          glFeatures: {
+            glAvatarForAllUserAvatars: false,
+          },
+        },
       });
+    });
 
-      expect(wrapper.find(UserAvatarImage).props('lazy')).toBe(true);
+    it('should render `UserAvatarLinkOld` component', () => {
+      expect(wrapper.findComponent(UserAvatarLinkNew).exists()).toBe(false);
+      expect(wrapper.findComponent(UserAvatarLinkOld).exists()).toBe(true);
     });
   });
 });