Commit 2b4083d3 authored by Clement Ho's avatar Clement Ho

Add configurable option to display username in user avatar link component

parent b0f98a2e
...@@ -12,12 +12,14 @@ ...@@ -12,12 +12,14 @@
:img-alt="tooltipText" :img-alt="tooltipText"
:img-size="20" :img-size="20"
:tooltip-text="tooltipText" :tooltip-text="tooltipText"
tooltip-placement="top" :tooltip-placement="top"
:username="username"
/> />
*/ */
import userAvatarImage from './user_avatar_image.vue'; import userAvatarImage from './user_avatar_image.vue';
import tooltip from '../../directives/tooltip';
export default { export default {
name: 'UserAvatarLink', name: 'UserAvatarLink',
...@@ -60,6 +62,22 @@ export default { ...@@ -60,6 +62,22 @@ export default {
required: false, required: false,
default: 'top', default: 'top',
}, },
username: {
type: String,
required: false,
default: '',
},
},
computed: {
showUsername() {
return this.username.length > 0;
},
avatarTooltipText() {
return this.showUsername ? '' : this.tooltipText;
},
},
directives: {
tooltip,
}, },
}; };
</script> </script>
...@@ -73,8 +91,13 @@ export default { ...@@ -73,8 +91,13 @@ export default {
:img-alt="imgAlt" :img-alt="imgAlt"
:css-classes="imgCssClasses" :css-classes="imgCssClasses"
:size="imgSize" :size="imgSize"
:tooltip-text="tooltipText" :tooltip-text="avatarTooltipText"
:tooltip-placement="tooltipPlacement"
/><span
v-if="username.length > 0"
v-tooltip
:title="tooltipText"
:tooltip-placement="tooltipPlacement" :tooltip-placement="tooltipPlacement"
/> >{{username}}</span>
</a> </a>
</template> </template>
...@@ -11,6 +11,7 @@ describe('User Avatar Link Component', function () { ...@@ -11,6 +11,7 @@ describe('User Avatar Link Component', function () {
imgCssClasses: 'myextraavatarclass', imgCssClasses: 'myextraavatarclass',
tooltipText: 'tooltip text', tooltipText: 'tooltip text',
tooltipPlacement: 'bottom', tooltipPlacement: 'bottom',
username: 'username',
}; };
const UserAvatarLinkComponent = Vue.extend(UserAvatarLink); const UserAvatarLinkComponent = Vue.extend(UserAvatarLink);
...@@ -47,4 +48,42 @@ describe('User Avatar Link Component', function () { ...@@ -47,4 +48,42 @@ describe('User Avatar Link Component', function () {
expect(this.userAvatarLink[key]).toBeDefined(); expect(this.userAvatarLink[key]).toBeDefined();
}); });
}); });
describe('no username', function () {
beforeEach(function (done) {
this.userAvatarLink.username = '';
Vue.nextTick(done);
});
it('should not render <span> 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 <span> as a child element', function () {
expect(this.userAvatarLink.$el.querySelector('span')).toBeDefined();
});
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);
});
});
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment