Resolve "Issue board card design"

4 files changed, 59 insertions, 32 deletions

diff --git a/spec/javascripts/vue_shared/components/commit_spec.js b/spec/javascripts/vue_shared/components/commit_spec.js
index 97dacec1fce..18fcdf7ede1 100644
--- a/spec/javascripts/vue_shared/components/commit_spec.js
+++ b/spec/javascripts/vue_shared/components/commit_spec.js
@@ -98,8 +98,8 @@ 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('data-original-title'),
+            .querySelector('.commit-title .avatar-image-container .js-user-avatar-image-toolip')
+            .textContent.trim(),
         ).toContain(props.author.username);
 
         expect(
diff --git a/spec/javascripts/vue_shared/components/header_ci_component_spec.js b/spec/javascripts/vue_shared/components/header_ci_component_spec.js
index 3bf497bc00b..7a741bdc067 100644
--- a/spec/javascripts/vue_shared/components/header_ci_component_spec.js
+++ b/spec/javascripts/vue_shared/components/header_ci_component_spec.js
@@ -73,7 +73,7 @@ describe('Header CI Component', () => {
     });
 
     it('should render user icon and name', () => {
-      expect(vm.$el.querySelector('.js-user-link').textContent.trim()).toEqual(props.user.name);
+      expect(vm.$el.querySelector('.js-user-link').innerText.trim()).toContain(props.user.name);
     });
 
     it('should render provided actions', () => {
diff --git a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js
index dc7652c77f7..5c4aa7cf844 100644
--- a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js
+++ b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import { placeholderImage } from '~/lazy_loader';
 import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent, { mountComponentWithSlots } from 'spec/helpers/vue_mount_component_helper';
 
 const DEFAULT_PROPS = {
   size: 99,
@@ -32,18 +32,12 @@ describe('User Avatar Image Component', function() {
     });
 
     it('should have <img> as a child element', function() {
-      expect(vm.$el.tagName).toBe('IMG');
-      expect(vm.$el.getAttribute('src')).toBe(`${DEFAULT_PROPS.imgSrc}?width=99`);
-      expect(vm.$el.getAttribute('data-src')).toBe(`${DEFAULT_PROPS.imgSrc}?width=99`);
-      expect(vm.$el.getAttribute('alt')).toBe(DEFAULT_PROPS.imgAlt);
-    });
-
-    it('should properly compute tooltipContainer', function() {
-      expect(vm.tooltipContainer).toBe('body');
-    });
+      const imageElement = vm.$el.querySelector('img');
 
-    it('should properly render tooltipContainer', function() {
-      expect(vm.$el.getAttribute('data-container')).toBe('body');
+      expect(imageElement).not.toBe(null);
+      expect(imageElement.getAttribute('src')).toBe(`${DEFAULT_PROPS.imgSrc}?width=99`);
+      expect(imageElement.getAttribute('data-src')).toBe(`${DEFAULT_PROPS.imgSrc}?width=99`);
+      expect(imageElement.getAttribute('alt')).toBe(DEFAULT_PROPS.imgAlt);
     });
 
     it('should properly compute avatarSizeClass', function() {
@@ -51,7 +45,7 @@ describe('User Avatar Image Component', function() {
     });
 
     it('should properly render img css', function() {
-      const { classList } = vm.$el;
+      const { classList } = vm.$el.querySelector('img');
       const containsAvatar = classList.contains('avatar');
       const containsSizeClass = classList.contains('s99');
       const containsCustomClass = classList.contains(DEFAULT_PROPS.cssClasses);
@@ -73,12 +67,41 @@ describe('User Avatar Image Component', function() {
     });
 
     it('should add lazy attributes', function() {
-      const { classList } = vm.$el;
-      const lazyClass = classList.contains('lazy');
+      const imageElement = vm.$el.querySelector('img');
+      const lazyClass = imageElement.classList.contains('lazy');
 
       expect(lazyClass).toBe(true);
-      expect(vm.$el.getAttribute('src')).toBe(placeholderImage);
-      expect(vm.$el.getAttribute('data-src')).toBe(`${DEFAULT_PROPS.imgSrc}?width=99`);
+      expect(imageElement.getAttribute('src')).toBe(placeholderImage);
+      expect(imageElement.getAttribute('data-src')).toBe(`${DEFAULT_PROPS.imgSrc}?width=99`);
+    });
+  });
+
+  describe('dynamic tooltip content', () => {
+    const props = DEFAULT_PROPS;
+    const slots = {
+      default: ['Action!'],
+    };
+
+    beforeEach(() => {
+      vm = mountComponentWithSlots(UserAvatarImage, { props, slots }).$mount();
+    });
+
+    it('renders the tooltip slot', () => {
+      expect(vm.$el.querySelector('.js-user-avatar-image-toolip')).not.toBe(null);
+    });
+
+    it('renders the tooltip content', () => {
+      expect(vm.$el.querySelector('.js-user-avatar-image-toolip').textContent).toContain(
+        slots.default[0],
+      );
+    });
+
+    it('does not render tooltip data attributes for on avatar image', () => {
+      const avatarImg = vm.$el.querySelector('img');
+
+      expect(avatarImg.dataset.originalTitle).not.toBeDefined();
+      expect(avatarImg.dataset.placement).not.toBeDefined();
+      expect(avatarImg.dataset.container).not.toBeDefined();
     });
   });
 });
diff --git a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js
index e022245d3ea..0151ad23ba2 100644
--- a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js
+++ b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js
@@ -60,39 +60,43 @@ describe('User Avatar Link Component', function() {
     it('should only render image tag in link', function() {
       const childElements = this.userAvatarLink.$el.childNodes;
 
-      expect(childElements[0].tagName).toBe('IMG');
+      expect(this.userAvatarLink.$el.querySelector('img')).not.toBe('null');
 
       // Vue will render the hidden component as <!---->
       expect(childElements[1].tagName).toBeUndefined();
     });
 
     it('should render avatar image tooltip', function() {
-      expect(this.userAvatarLink.$el.querySelector('img').dataset.originalTitle).toEqual(
-        this.propsData.tooltipText,
-      );
+      expect(this.userAvatarLink.shouldShowUsername).toBe(false);
+      expect(this.userAvatarLink.avatarTooltipText).toEqual(this.propsData.tooltipText);
     });
   });
 
   describe('username', function() {
     it('should not render avatar image tooltip', function() {
-      expect(this.userAvatarLink.$el.querySelector('img').dataset.originalTitle).toEqual('');
+      expect(
+        this.userAvatarLink.$el.querySelector('.js-user-avatar-image-toolip').innerText.trim(),
+      ).toEqual('');
     });
 
     it('should render username prop in <span>', function() {
-      expect(this.userAvatarLink.$el.querySelector('span').innerText.trim()).toEqual(
-        this.propsData.username,
-      );
+      expect(
+        this.userAvatarLink.$el.querySelector('.js-user-avatar-link-username').innerText.trim(),
+      ).toEqual(this.propsData.username);
     });
 
     it('should render text tooltip for <span>', function() {
-      expect(this.userAvatarLink.$el.querySelector('span').dataset.originalTitle).toEqual(
-        this.propsData.tooltipText,
-      );
+      expect(
+        this.userAvatarLink.$el.querySelector('.js-user-avatar-link-username').dataset
+          .originalTitle,
+      ).toEqual(this.propsData.tooltipText);
     });
 
     it('should render text tooltip placement for <span>', function() {
       expect(
-        this.userAvatarLink.$el.querySelector('span').getAttribute('tooltip-placement'),
+        this.userAvatarLink.$el
+          .querySelector('.js-user-avatar-link-username')
+          .getAttribute('tooltip-placement'),
       ).toEqual(this.propsData.tooltipPlacement);
     });
   });