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
This commit is contained in:
commit
ab9b54f977
|
@ -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 {
|
||||||
required: false,
|
required: false,
|
||||||
default: 'top',
|
default: 'top',
|
||||||
},
|
},
|
||||||
|
username: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
shouldShowUsername() {
|
||||||
|
return this.username.length > 0;
|
||||||
|
},
|
||||||
|
avatarTooltipText() {
|
||||||
|
return this.shouldShowUsername ? '' : this.tooltipText;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
directives: {
|
||||||
|
tooltip,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -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"
|
:tooltip-placement="tooltipPlacement"
|
||||||
/>
|
/><span
|
||||||
|
v-if="shouldShowUsername"
|
||||||
|
v-tooltip
|
||||||
|
:title="tooltipText"
|
||||||
|
:tooltip-placement="tooltipPlacement"
|
||||||
|
>{{username}}</span>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -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 () {
|
||||||
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 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);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue