Consolidate user avatar Vue logic

Former-commit-id: 3c668fa0

spec/javascripts/pipelines/pipeline_url_spec.js

@@ -60,7 +60,7 @@ describe('Pipeline Url Component', () => {
     expect(
       component.$el.querySelector('.js-pipeline-url-user').getAttribute('href'),
     ).toEqual(mockData.pipeline.user.web_url);
-    expect(image.getAttribute('title')).toEqual(mockData.pipeline.user.name);
+    expect(image.getAttribute('data-original-title')).toEqual(mockData.pipeline.user.name);
     expect(image.getAttribute('src')).toEqual(mockData.pipeline.user.avatar_url);
   });

spec/javascripts/vue_shared/components/commit_spec.js

@@ -86,7 +86,7 @@ describe('Commit component', () => {
       it('Should render the author avatar with title and alt attributes', () => {
         expect(
-          component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('title'),
+          component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('data-original-title'),
         ).toContain(props.author.username);
         expect(
           component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('alt'),

spec/javascripts/vue_shared/components/pipelines_table_row_spec.js

@@ -79,7 +79,7 @@ describe('Pipelines Table Row', () => {
         ).toEqual(pipeline.user.web_url);
         expect(
-          component.$el.querySelector('td:nth-child(2) img').getAttribute('title'),
+          component.$el.querySelector('td:nth-child(2) img').getAttribute('data-original-title'),
         ).toEqual(pipeline.user.name);
       });
     });
@@ -102,7 +102,7 @@ describe('Pipelines Table Row', () => {
       }
       const commitAuthorLink = commitAuthorElement.getAttribute('href');
-      const commitAuthorName = commitAuthorElement.querySelector('img.avatar').getAttribute('title');
+      const commitAuthorName = commitAuthorElement.querySelector('img.avatar').getAttribute('data-original-title');
       return { commitAuthorElement, commitAuthorLink, commitAuthorName };
     };

spec/javascripts/vue_shared/components/user_avatar_image_spec.js

+import Vue from 'vue';
+import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
+
+const UserAvatarImageComponent = Vue.extend(UserAvatarImage);
+
+describe('User Avatar Image Component', function () {
+  describe('Initialization', function () {
+    beforeEach(function () {
+      this.propsData = {
+        size: 99,
+        imgSrc: 'myavatarurl.com',
+        imgAlt: 'mydisplayname',
+        cssClasses: 'myextraavatarclass',
+        tooltipText: 'tooltip text',
+        tooltipPlacement: 'bottom',
+      };
+
+      this.userAvatarImage = new UserAvatarImageComponent({
+        propsData: this.propsData,
+      }).$mount();
+
+      this.imageElement = this.userAvatarImage.$el.outerHTML;
+    });
+
+    it('should return a defined Vue component', function () {
+      expect(this.userAvatarImage).toBeDefined();
+    });
+
+    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();
+      });
+    });
+
+    it('should properly compute tooltipContainer', function () {
+      expect(this.userAvatarImage.tooltipContainer).toBe('body');
+    });
+
+    it('should properly render tooltipContainer', function () {
+      expect(this.imageElement).toContain('data-container="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');
+    });
+  });
+});

spec/javascripts/vue_shared/components/user_avatar_link_spec.js

+import Vue from 'vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+
+describe('User Avatar Link Component', function () {
+  beforeEach(function () {
+    this.propsData = {
+      linkHref: 'myavatarurl.com',
+      imgSize: 99,
+      imgSrc: 'myavatarurl.com',
+      imgAlt: 'mydisplayname',
+      imgCssClasses: 'myextraavatarclass',
+      tooltipText: 'tooltip text',
+      tooltipPlacement: 'bottom',
+    };
+
+    const UserAvatarLinkComponent = Vue.extend(UserAvatarLink);
+
+    this.userAvatarLink = new UserAvatarLinkComponent({
+      propsData: this.propsData,
+    }).$mount();
+
+    this.userAvatarImage = this.userAvatarLink.$children[0];
+  });
+
+  it('should return a defined Vue component', function () {
+    expect(this.userAvatarLink).toBeDefined();
+  });
+
+  it('should have user-avatar-image registered as child component', function () {
+    expect(this.userAvatarLink.$options.components.userAvatarImage).toBeDefined();
+  });
+
+  it('user-avatar-link should have user-avatar-image as child component', function () {
+    expect(this.userAvatarImage).toBeDefined();
+  });
+
+  it('should render <a> as a child element', function () {
+    const componentLinkTag = this.userAvatarLink.$el.outerHTML;
+    expect(componentLinkTag).toContain('<a');
+  });
+
+  it('should have <img> as a child element', function () {
+    const componentImgTag = this.userAvatarLink.$el.outerHTML;
+    expect(componentImgTag).toContain('<img');
+  });
+
+  it('should return neccessary props as defined', function () {
+    _.each(this.propsData, (val, key) => {
+      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

+import Vue from 'vue';
+import UserAvatarSvg from '~/vue_shared/components/user_avatar/user_avatar_svg.vue';
+import avatarSvg from 'icons/_icon_random.svg';
+
+const UserAvatarSvgComponent = Vue.extend(UserAvatarSvg);
+
+describe('User Avatar Svg Component', function () {
+  describe('Initialization', function () {
+    beforeEach(function () {
+      this.propsData = {
+        size: 99,
+        svg: avatarSvg,
+      };
+
+      this.userAvatarSvg = new UserAvatarSvgComponent({
+        propsData: this.propsData,
+      }).$mount();
+    });
+
+    it('should return a defined Vue component', function () {
+      expect(this.userAvatarSvg).toBeDefined();
+    });
+
+    it('should have <svg> as a child element', 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();
+      });
+    });
+  });
+});