From b73959a94bcace3d0af7819f7621b308980c49d9 Mon Sep 17 00:00:00 2001
From: Bryce Johnson <bryce@gitlab.com>
Date: Wed, 17 May 2017 11:22:26 -0400
Subject: Fixes per feedback on user avatar components.

---
 .../components/user_avatar_image_spec.js           | 26 ++++++---------
 .../vue_shared/components/user_avatar_link_spec.js | 12 ++-----
 .../components/user_avatar_size_mixin_spec.js      | 37 ----------------------
 .../vue_shared/components/user_avatar_svg_spec.js  |  6 ----
 4 files changed, 12 insertions(+), 69 deletions(-)
 delete mode 100644 spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js

(limited to 'spec/javascripts')

diff --git a/spec/javascripts/vue_shared/components/user_avatar_image_spec.js b/spec/javascripts/vue_shared/components/user_avatar_image_spec.js
index 0b5ec736b1e..8daa7610274 100644
--- a/spec/javascripts/vue_shared/components/user_avatar_image_spec.js
+++ b/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 img css', function () {
+      const classList = this.userAvatarImage.$el.classList;
+      const containsAvatar = classList.contains('avatar');
+      const containsSizeClass = classList.contains('s99');
+      const containsCustomClass = classList.contains('myextraavatarclass');
 
-    it('should properly render imgCssClasses', function () {
-      expect(this.imageElement).toContain('avatar s99 myextraavatarclass');
+      expect(containsAvatar).toBe(true);
+      expect(containsSizeClass).toBe(true);
+      expect(containsCustomClass).toBe(true);
     });
   });
 });
diff --git a/spec/javascripts/vue_shared/components/user_avatar_link_spec.js b/spec/javascripts/vue_shared/components/user_avatar_link_spec.js
index 770daa9f0de..52e450e9ba5 100644
--- a/spec/javascripts/vue_shared/components/user_avatar_link_spec.js
+++ b/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);
-    });
-  });
 });
diff --git a/spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js b/spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js
deleted file mode 100644
index b37813cdb3d..00000000000
--- a/spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js
+++ /dev/null
@@ -1,37 +0,0 @@
-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');
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/user_avatar_svg_spec.js b/spec/javascripts/vue_shared/components/user_avatar_svg_spec.js
index 809886c5dbd..b8d639ffbec 100644
--- a/spec/javascripts/vue_shared/components/user_avatar_svg_spec.js
+++ b/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();
-      });
-    });
   });
 });
-- 
cgit v1.2.1