1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
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.find(GlIcon);
const findAvatar = () => wrapper.find(GlAvatarLabeled);
const findUserLink = () => wrapper.find('.js-user-link');
const findAllBadges = () => wrapper.findAll(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);
});
});
});
});
|
