From 2b4083d3ac2e33853dacbcbd45fbf4b9f9e9c4ea Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 16 Oct 2017 16:32:38 -0500 Subject: [PATCH 1/4] Add configurable option to display username in user avatar link component --- .../user_avatar/user_avatar_link.vue | 29 ++++++++++++-- .../components/user_avatar_link_spec.js | 39 +++++++++++++++++++ 2 files changed, 65 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue index 95898d54cf7..792d8b29593 100644 --- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue +++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue @@ -12,12 +12,14 @@ :img-alt="tooltipText" :img-size="20" :tooltip-text="tooltipText" - tooltip-placement="top" + :tooltip-placement="top" + :username="username" /> */ import userAvatarImage from './user_avatar_image.vue'; +import tooltip from '../../directives/tooltip'; export default { name: 'UserAvatarLink', @@ -60,6 +62,22 @@ export default { required: false, default: 'top', }, + username: { + type: String, + required: false, + default: '', + }, + }, + computed: { + showUsername() { + return this.username.length > 0; + }, + avatarTooltipText() { + return this.showUsername ? '' : this.tooltipText; + }, + }, + directives: { + tooltip, }, }; @@ -73,8 +91,13 @@ export default { :img-alt="imgAlt" :css-classes="imgCssClasses" :size="imgSize" - :tooltip-text="tooltipText" + :tooltip-text="avatarTooltipText" :tooltip-placement="tooltipPlacement" - /> + />{{username}} 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 52e450e9ba5..ce75df6fc7b 100644 --- a/spec/javascripts/vue_shared/components/user_avatar_link_spec.js +++ b/spec/javascripts/vue_shared/components/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 not render as a child element', function () { + expect(this.userAvatarLink.$el.querySelector('span')).toBeNull(); + }); + + 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 as a child element', function () { + expect(this.userAvatarLink.$el.querySelector('span')).toBeDefined(); + }); + + it('should render username prop in ', function () { + expect(this.userAvatarLink.$el.querySelector('span').innerText.trim()).toEqual(this.propsData.username); + }); + + it('should render text tooltip for ', function () { + expect(this.userAvatarLink.$el.querySelector('span').dataset.originalTitle).toEqual(this.propsData.tooltipText); + }); + + it('should render text tooltip placement for ', function () { + expect(this.userAvatarLink.$el.querySelector('span').getAttribute('tooltip-placement')).toEqual(this.propsData.tooltipPlacement); + }); + }); }); From 9a2b9d2345c504f888386012a1fefa29de837640 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 27 Oct 2017 16:11:02 +0800 Subject: [PATCH 2/4] Rename to shouldShowUsername --- .../vue_shared/components/user_avatar/user_avatar_link.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue index 792d8b29593..dc32e783258 100644 --- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue +++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue @@ -69,11 +69,11 @@ export default { }, }, computed: { - showUsername() { + shouldShowUsername() { return this.username.length > 0; }, avatarTooltipText() { - return this.showUsername ? '' : this.tooltipText; + return this.shouldShowUsername ? '' : this.tooltipText; }, }, directives: { @@ -94,7 +94,7 @@ export default { :tooltip-text="avatarTooltipText" :tooltip-placement="tooltipPlacement" /> Date: Fri, 27 Oct 2017 16:20:53 +0800 Subject: [PATCH 3/4] Improve spec to check hidden component --- .../vue_shared/components/user_avatar_link_spec.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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 ce75df6fc7b..c10528360a3 100644 --- a/spec/javascripts/vue_shared/components/user_avatar_link_spec.js +++ b/spec/javascripts/vue_shared/components/user_avatar_link_spec.js @@ -56,8 +56,12 @@ describe('User Avatar Link Component', function () { Vue.nextTick(done); }); - it('should not render as a child element', function () { - expect(this.userAvatarLink.$el.querySelector('span')).toBeNull(); + 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 () { From 4e8010aa9d8bdb05c3999691731daa2e8e99c9d8 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 27 Oct 2017 16:21:56 +0800 Subject: [PATCH 4/4] Remove repetitive karma spec --- .../vue_shared/components/user_avatar_link_spec.js | 4 ---- 1 file changed, 4 deletions(-) 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 c10528360a3..8450ad9dbcb 100644 --- a/spec/javascripts/vue_shared/components/user_avatar_link_spec.js +++ b/spec/javascripts/vue_shared/components/user_avatar_link_spec.js @@ -74,10 +74,6 @@ describe('User Avatar Link Component', function () { expect(this.userAvatarLink.$el.querySelector('img').dataset.originalTitle).toEqual(''); }); - it('should render as a child element', function () { - expect(this.userAvatarLink.$el.querySelector('span')).toBeDefined(); - }); - it('should render username prop in ', function () { expect(this.userAvatarLink.$el.querySelector('span').innerText.trim()).toEqual(this.propsData.username); });