1 files changed, 24 insertions, 72 deletions

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 2c3fc70e116..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,12 +1,10 @@
 import { shallowMount } from '@vue/test-utils';
-import defaultAvatarUrl from 'images/no_avatar.png';
-import { placeholderImage } from '~/lazy_loader';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
+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';
 
-jest.mock('images/no_avatar.png', () => 'default-avatar-url');
-
-const DEFAULT_PROPS = {
-  size: 99,
+const PROVIDED_PROPS = {
+  size: 32,
   imgSrc: 'myavatarurl.com',
   imgAlt: 'mydisplayname',
   cssClasses: 'myextraavatarclass',
@@ -21,89 +19,43 @@ describe('User Avatar Image Component', () => {
     wrapper.destroy();
   });
 
-  describe('Initialization', () => {
+  describe('when `glAvatarForAllUserAvatars` feature flag enabled', () => {
     beforeEach(() => {
       wrapper = shallowMount(UserAvatarImage, {
         propsData: {
-          ...DEFAULT_PROPS,
+          ...PROVIDED_PROPS,
+        },
+        provide: {
+          glFeatures: {
+            glAvatarForAllUserAvatars: true,
+          },
         },
       });
     });
 
-    it('should have <img> as a child element', () => {
-      const imageElement = wrapper.find('img');
-
-      expect(imageElement.exists()).toBe(true);
-      expect(imageElement.attributes('src')).toBe(`${DEFAULT_PROPS.imgSrc}?width=99`);
-      expect(imageElement.attributes('data-src')).toBe(`${DEFAULT_PROPS.imgSrc}?width=99`);
-      expect(imageElement.attributes('alt')).toBe(DEFAULT_PROPS.imgAlt);
-    });
-
-    it('should properly render img css', () => {
-      const classes = wrapper.find('img').classes();
-      expect(classes).toEqual(expect.arrayContaining(['avatar', 's99', DEFAULT_PROPS.cssClasses]));
-      expect(classes).not.toContain('lazy');
+    it('should render `UserAvatarImageNew` component', () => {
+      expect(wrapper.findComponent(UserAvatarImageNew).exists()).toBe(true);
+      expect(wrapper.findComponent(UserAvatarImageOld).exists()).toBe(false);
     });
   });
 
-  describe('Initialization when lazy', () => {
+  describe('when `glAvatarForAllUserAvatars` feature flag disabled', () => {
     beforeEach(() => {
       wrapper = shallowMount(UserAvatarImage, {
         propsData: {
-          ...DEFAULT_PROPS,
-          lazy: true,
+          ...PROVIDED_PROPS,
+        },
+        provide: {
+          glFeatures: {
+            glAvatarForAllUserAvatars: false,
+          },
         },
       });
     });
 
-    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(`${DEFAULT_PROPS.imgSrc}?width=99`);
-    });
-  });
-
-  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=20`);
-    });
-  });
-
-  describe('dynamic tooltip content', () => {
-    const props = DEFAULT_PROPS;
-    const slots = {
-      default: ['Action!'],
-    };
-
-    beforeEach(() => {
-      wrapper = shallowMount(UserAvatarImage, {
-        propsData: { props },
-        slots,
-      });
-    });
-
-    it('renders the tooltip slot', () => {
-      expect(wrapper.find('.js-user-avatar-image-tooltip').exists()).toBe(true);
-    });
-
-    it('renders the tooltip content', () => {
-      expect(wrapper.find('.js-user-avatar-image-tooltip').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);
     });
   });
 });