126 lines
3.5 KiB
JavaScript
126 lines
3.5 KiB
JavaScript
import { GlAvatarLabeled, GlBadge, GlIcon } from '@gitlab/ui';
|
|
import { shallowMount } from '@vue/test-utils';
|
|
|
|
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
|
|
import AdminUserAvatar from '~/admin/users/components/user_avatar.vue';
|
|
import { LENGTH_OF_USER_NOTE_TOOLTIP } from '~/admin/users/constants';
|
|
import { truncate } from '~/lib/utils/text_utility';
|
|
import { users, paths } from '../mock_data';
|
|
|
|
describe('AdminUserAvatar component', () => {
|
|
let wrapper;
|
|
const user = users[0];
|
|
const adminUserPath = paths.adminUser;
|
|
|
|
const findNote = () => wrapper.findComponent(GlIcon);
|
|
const findAvatar = () => wrapper.findComponent(GlAvatarLabeled);
|
|
const findUserLink = () => wrapper.find('.js-user-link');
|
|
const findAllBadges = () => wrapper.findAllComponents(GlBadge);
|
|
const findTooltip = () => getBinding(findNote().element, 'gl-tooltip');
|
|
|
|
const initComponent = (props = {}) => {
|
|
wrapper = shallowMount(AdminUserAvatar, {
|
|
propsData: {
|
|
user,
|
|
adminUserPath,
|
|
...props,
|
|
},
|
|
directives: {
|
|
GlTooltip: createMockDirective(),
|
|
},
|
|
stubs: {
|
|
GlAvatarLabeled,
|
|
},
|
|
});
|
|
};
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
wrapper = null;
|
|
});
|
|
|
|
describe('when initialized', () => {
|
|
beforeEach(() => {
|
|
initComponent();
|
|
});
|
|
|
|
it('adds a user link hover card', () => {
|
|
expect(findUserLink().attributes()).toMatchObject({
|
|
'data-user-id': user.id.toString(),
|
|
'data-username': user.username,
|
|
});
|
|
});
|
|
|
|
it("renders the user's name with an admin path link", () => {
|
|
const avatar = findAvatar();
|
|
|
|
expect(avatar.props('label')).toBe(user.name);
|
|
expect(avatar.props('labelLink')).toBe(adminUserPath.replace('id', user.username));
|
|
});
|
|
|
|
it("renders the user's email with a mailto link", () => {
|
|
const avatar = findAvatar();
|
|
|
|
expect(avatar.props('subLabel')).toBe(user.email);
|
|
expect(avatar.props('subLabelLink')).toBe(`mailto:${user.email}`);
|
|
});
|
|
|
|
it("renders the user's avatar image", () => {
|
|
expect(findAvatar().attributes('src')).toBe(user.avatarUrl);
|
|
});
|
|
|
|
it('renders a user note icon', () => {
|
|
expect(findNote().exists()).toBe(true);
|
|
expect(findNote().props('name')).toBe('document');
|
|
});
|
|
|
|
it("renders the user's note tooltip", () => {
|
|
const tooltip = findTooltip();
|
|
|
|
expect(tooltip).toBeDefined();
|
|
expect(tooltip.value).toBe(user.note);
|
|
});
|
|
|
|
it("renders the user's badges", () => {
|
|
findAllBadges().wrappers.forEach((badge, idx) => {
|
|
expect(badge.text()).toBe(user.badges[idx].text);
|
|
expect(badge.props('variant')).toBe(user.badges[idx].variant);
|
|
});
|
|
});
|
|
|
|
describe('and the user note is very long', () => {
|
|
const noteText = new Array(LENGTH_OF_USER_NOTE_TOOLTIP + 1).join('a');
|
|
|
|
beforeEach(() => {
|
|
initComponent({
|
|
user: {
|
|
...user,
|
|
note: noteText,
|
|
},
|
|
});
|
|
});
|
|
|
|
it("renders a truncated user's note tooltip", () => {
|
|
const tooltip = findTooltip();
|
|
|
|
expect(tooltip).toBeDefined();
|
|
expect(tooltip.value).toBe(truncate(noteText, LENGTH_OF_USER_NOTE_TOOLTIP));
|
|
});
|
|
});
|
|
|
|
describe('and the user does not have a note', () => {
|
|
beforeEach(() => {
|
|
initComponent({
|
|
user: {
|
|
...user,
|
|
note: null,
|
|
},
|
|
});
|
|
});
|
|
|
|
it('does not render a user note', () => {
|
|
expect(findNote().exists()).toBe(false);
|
|
});
|
|
});
|
|
});
|
|
});
|