Merge branch 'add-user-avatar-username-link' into 'master'

Add configurable option to display username in user avatar link component

See merge request gitlab-org/gitlab-ce!14902

1 files changed, 39 insertions, 0 deletions

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 52e450e9ba5..8450ad9dbcb 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
@@ -11,6 +11,7 @@ describe('User Avatar Link Component', function () {
       imgCssClasses: 'myextraavatarclass',
       tooltipText: 'tooltip text',
       tooltipPlacement: 'bottom',
+      username: 'username',
     };
 
     const UserAvatarLinkComponent = Vue.extend(UserAvatarLink);
@@ -47,4 +48,42 @@ describe('User Avatar Link Component', function () {
       expect(this.userAvatarLink[key]).toBeDefined();
     });
   });
+
+  describe('no username', function () {
+    beforeEach(function (done) {
+      this.userAvatarLink.username = '';
+
+      Vue.nextTick(done);
+    });
+
+    it('should only render image tag in link', function () {
+      const childElements = this.userAvatarLink.$el.childNodes;
+      expect(childElements[0].tagName).toBe('IMG');
+
+      // 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);
+    });
+  });
+
+  describe('username', function () {
+    it('should not render avatar image tooltip', function () {
+      expect(this.userAvatarLink.$el.querySelector('img').dataset.originalTitle).toEqual('');
+    });
+
+    it('should render username prop in <span>', function () {
+      expect(this.userAvatarLink.$el.querySelector('span').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);
+    });
+
+    it('should render text tooltip placement for <span>', function () {
+      expect(this.userAvatarLink.$el.querySelector('span').getAttribute('tooltip-placement')).toEqual(this.propsData.tooltipPlacement);
+    });
+  });
 });