Fixes per feedback on user avatar components.

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue

@@ -16,12 +16,11 @@
 */
 import defaultAvatarUrl from 'images/no_avatar.png';
-import UserAvatarSizeMixin from './user_avatar_size_mixin';
 import TooltipMixin from '../../mixins/tooltip';
 export default {
   name: 'UserAvatarImage',
-  mixins: [UserAvatarSizeMixin, TooltipMixin],
+  mixins: [TooltipMixin],
   props: {
     imgSrc: {
       type: String,
@@ -58,8 +57,8 @@ export default {
     tooltipContainer() {
       return this.tooltipText ? 'body' : null;
     },
-    imgCssClasses() {
-      return `avatar ${this.avatarSizeClass} ${this.cssClasses}`;
+    avatarSizeClass() {
+      return `s${this.size}`;
     },
   },
 };
@@ -67,9 +66,11 @@ export default {
 <template>
   <img
-    :class="imgCssClasses"
+    class="avatar"
+    :class="[avatarSizeClass, cssClasses]"
     :src="imgSrc"
-    :style="avatarSizeStylesMap"
+    :width="size"
+    :height="size"
     :alt="imgAlt"
     :data-container="tooltipContainer"
     :data-placement="tooltipPlacement"

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_size_mixin.js

-export default {
-  computed: {
-    avatarSizeStylesMap() {
-      return {
-        width: `${this.size}px`,
-        height: `${this.size}px`,
-      };
-    },
-    avatarSizeClass() {
-      return `s${this.size}`;
-    },
-  },
-};

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue

@@ -14,10 +14,7 @@
 */
-import UserAvatarSizeMixin from './user_avatar_size_mixin';
-
 export default {
-  mixins: [UserAvatarSizeMixin],
   props: {
     svg: {
       type: String,
@@ -29,13 +26,19 @@ export default {
       default: 20,
     },
   },
+  computed: {
+    avatarSizeClass() {
+      return `s${this.size}`;
+    },
+  },
 };
 </script>
 <template>
   <svg
     :class="avatarSizeClass"
-    :style="avatarSizeStylesMap"
+    :height="size"
+    :width="size"
     v-html="svg">
   </svg>
 </template>

spec/javascripts/vue_shared/components/user_avatar_image_spec.js

@@ -18,8 +18,6 @@ describe('User Avatar Image Component', function () {
       this.userAvatarImage = new UserAvatarImageComponent({
         propsData: this.propsData,
       }).$mount();
-
-      this.imageElement = this.userAvatarImage.$el.outerHTML;
     });
     it('should return a defined Vue component', function () {
@@ -27,14 +25,7 @@ describe('User Avatar Image Component', function () {
     });
     it('should have <img> as a child element', function () {
-      const componentImgTag = this.userAvatarImage.$el.outerHTML;
-      expect(componentImgTag).toContain('<img');
-    });
-
-    it('should return neccessary props as defined', function () {
-      _.each(this.propsData, (val, key) => {
-        expect(this.userAvatarImage[key]).toBeDefined();
-      });
+      expect(this.userAvatarImage.$el.tagName).toBe('IMG');
     });
     it('should properly compute tooltipContainer', function () {
@@ -42,19 +33,22 @@ describe('User Avatar Image Component', function () {
     });
     it('should properly render tooltipContainer', function () {
-      expect(this.imageElement).toContain('data-container="body"');
+      expect(this.userAvatarImage.$el.getAttribute('data-container')).toBe('body');
     });
     it('should properly compute avatarSizeClass', function () {
       expect(this.userAvatarImage.avatarSizeClass).toBe('s99');
     });
-    it('should properly compute imgCssClasses', function () {
-      expect(this.userAvatarImage.imgCssClasses).toBe('avatar s99 myextraavatarclass');
-    });
-    it('should properly render imgCssClasses', function () {
-      expect(this.imageElement).toContain('avatar s99 myextraavatarclass');
+    it('should properly render img css', function () {
+      const classList = this.userAvatarImage.$el.classList;
+      const containsAvatar = classList.contains('avatar');
+      const containsSizeClass = classList.contains('s99');
+      const containsCustomClass = classList.contains('myextraavatarclass');
+      expect(containsAvatar).toBe(true);
+      expect(containsSizeClass).toBe(true);
+      expect(containsCustomClass).toBe(true);
     });
   });
 });

spec/javascripts/vue_shared/components/user_avatar_link_spec.js

@@ -35,13 +35,11 @@ describe('User Avatar Link Component', function () {
   });
   it('should render <a> as a child element', function () {
-    const componentLinkTag = this.userAvatarLink.$el.outerHTML;
-    expect(componentLinkTag).toContain('<a');
+    expect(this.userAvatarLink.$el.tagName).toBe('A');
   });
   it('should have <img> as a child element', function () {
-    const componentImgTag = this.userAvatarLink.$el.outerHTML;
-    expect(componentImgTag).toContain('<img');
+    expect(this.userAvatarLink.$el.querySelector('img')).not.toBeNull();
   });
   it('should return neccessary props as defined', function () {
@@ -49,10 +47,4 @@ describe('User Avatar Link Component', function () {
       expect(this.userAvatarLink[key]).toBeDefined();
     });
   });
-
-  it('should include props in the rendered output', function () {
-    _.each(this.propsData, (val) => {
-      expect(this.userAvatarLink.$el.outerHTML).toContain(val);
-    });
-  });
 });

spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js

-import Vue from 'vue';
-import UserAvatarSizeMixin from '~/vue_shared/components/user_avatar/user_avatar_size_mixin';
-
-describe('User Avatar Size Mixin', () => {
-  beforeEach(() => {
-    this.vueInstance = new Vue({
-      data: {
-        size: 99,
-      },
-      mixins: [UserAvatarSizeMixin],
-    });
-  });
-
-  describe('#avatarSizeClass', () => {
-    it('should be a defined computed value', () => {
-      expect(this.vueInstance.avatarSizeClass).toBeDefined();
-    });
-
-    it('should correctly transform size into the class name', () => {
-      expect(this.vueInstance.avatarSizeClass).toBe('s99');
-    });
-  });
-
-  describe('#avatarSizeStylesMap', () => {
-    it('should be a defined computed value', () => {
-      expect(this.vueInstance.avatarSizeStylesMap).toBeDefined();
-    });
-
-    it('should return a correctly formatted styles width', () => {
-      expect(this.vueInstance.avatarSizeStylesMap.width).toBe('99px');
-    });
-
-    it('should return a correctly formatted styles height', () => {
-      expect(this.vueInstance.avatarSizeStylesMap.height).toBe('99px');
-    });
-  });
-});

spec/javascripts/vue_shared/components/user_avatar_svg_spec.js

@@ -25,11 +25,5 @@ describe('User Avatar Svg Component', function () {
       expect(this.userAvatarSvg.$el.tagName).toEqual('svg');
       expect(this.userAvatarSvg.$el.innerHTML).toContain('<path');
     });
-
-    it('should return neccessary props as defined', function () {
-      _.each(this.propsData, (val, key) => {
-        expect(this.userAvatarSvg[key]).toBeDefined();
-      });
-    });
   });
 });