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 @@
: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,
},
};
</script>
......@@ -73,8 +91,13 @@ export default {
:img-alt="imgAlt"
:css-classes="imgCssClasses"
:size="imgSize"
:tooltip-text="tooltipText"
:tooltip-text="avatarTooltipText"
:tooltip-placement="tooltipPlacement"
/><span
v-if="username.length > 0"
v-tooltip
:title="tooltipText"
:tooltip-placement="tooltipPlacement"
/>
>{{username}}</span>
</a>
</template>
......@@ -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 <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