Add unit tests

spec/frontend/vue_shared/components/user_avatar/user_avatar_image_new_spec.js

@@ -109,19 +109,33 @@ describe('User Avatar Image Component', () => {
       default: ['Action!'],
     };
 
+    describe('when `tooltipText` is provided and no default slot', () => {
       beforeEach(() => {
         wrapper = shallowMount(UserAvatarImage, {
-        propsData: PROVIDED_PROPS,
+          propsData: { ...PROVIDED_PROPS },
+        });
+      });
+
+      it('renders the tooltip with `tooltipText` as content', () => {
+        expect(wrapper.findComponent(GlTooltip).text()).toBe(PROVIDED_PROPS.tooltipText);
+      });
+    });
+
+    describe('when `tooltipText` and default slot is provided', () => {
+      beforeEach(() => {
+        wrapper = shallowMount(UserAvatarImage, {
+          propsData: { ...PROVIDED_PROPS },
           slots,
         });
       });
 
-    it('renders the tooltip slot', () => {
-      expect(wrapper.findComponent(GlTooltip).exists()).toBe(true);
+      it('does not render `tooltipText` inside the tooltip', () => {
+        expect(wrapper.findComponent(GlTooltip).text()).not.toBe(PROVIDED_PROPS.tooltipText);
       });
 
-    it('renders the tooltip content', () => {
+      it('renders the content provided via default slot', () => {
         expect(wrapper.findComponent(GlTooltip).text()).toContain(slots.default[0]);
       });
     });
+  });
 });

spec/frontend/vue_shared/components/user_avatar/user_avatar_image_old_spec.js

@@ -90,33 +90,38 @@ describe('User Avatar Image Component', () => {
     });
   });
 
-  describe('dynamic tooltip content', () => {
-    const props = PROVIDED_PROPS;
+  describe('Dynamic tooltip content', () => {
     const slots = {
       default: ['Action!'],
     };
 
+    describe('when `tooltipText` is provided and no default slot', () => {
       beforeEach(() => {
         wrapper = shallowMount(UserAvatarImage, {
-        propsData: { props },
-        slots,
+          propsData: { ...PROVIDED_PROPS },
         });
       });
 
-    it('renders the tooltip slot', () => {
-      expect(wrapper.findComponent(GlTooltip).exists()).toBe(true);
+      it('renders the tooltip with `tooltipText` as content', () => {
+        expect(wrapper.findComponent(GlTooltip).text()).toBe(PROVIDED_PROPS.tooltipText);
+      });
     });
 
-    it('renders the tooltip content', () => {
-      expect(wrapper.findComponent(GlTooltip).text()).toContain(slots.default[0]);
+    describe('when `tooltipText` and default slot is provided', () => {
+      beforeEach(() => {
+        wrapper = shallowMount(UserAvatarImage, {
+          propsData: { ...PROVIDED_PROPS },
+          slots,
+        });
       });
 
-    it('does not render tooltip data attributes on avatar image', () => {
-      const avatarImg = wrapper.find('img');
+      it('does not render `tooltipText` inside the tooltip', () => {
+        expect(wrapper.findComponent(GlTooltip).text()).not.toBe(PROVIDED_PROPS.tooltipText);
+      });
 
-      expect(avatarImg.attributes('title')).toBeFalsy();
-      expect(avatarImg.attributes('data-placement')).not.toBeDefined();
-      expect(avatarImg.attributes('data-container')).not.toBeDefined();
+      it('renders the content provided via default slot', () => {
+        expect(wrapper.findComponent(GlTooltip).text()).toContain(slots.default[0]);
+      });
     });
   });
 });

spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js

@@ -153,4 +153,29 @@ describe('UserAvatarList', () => {
       });
     });
   });
+
+  describe('additional styling for the image', () => {
+    it('should not add CSS class when feature flag  `glAvatarForAllUserAvatars` is disabled', () => {
+      factory({
+        propsData: { items: createList(1) },
+      });
+
+      const link = wrapper.findComponent(UserAvatarLink);
+      expect(link.props('imgCssClasses')).not.toBe('gl-mr-3');
+    });
+
+    it('should add CSS class when feature flag `glAvatarForAllUserAvatars` is enabled', () => {
+      factory({
+        propsData: { items: createList(1) },
+        provide: {
+          glFeatures: {
+            glAvatarForAllUserAvatars: true,
+          },
+        },
+      });
+
+      const link = wrapper.findComponent(UserAvatarLink);
+      expect(link.props('imgCssClasses')).toBe('gl-mr-3');
+    });
+  });
 });