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
|
import { GlDisclosureDropdownItem, GlTooltip } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import UserMenuProfileItem from '~/super_sidebar/components/user_menu_profile_item.vue';
import { userMenuMockData, userMenuMockStatus } from '../mock_data';
describe('UserMenuProfileItem component', () => {
let wrapper;
const findGlDisclosureDropdownItem = () => wrapper.findComponent(GlDisclosureDropdownItem);
const findGlTooltip = () => wrapper.findComponent(GlTooltip);
const findUserStatus = () => wrapper.findByTestId('user-menu-status');
const GlEmoji = { template: '<img/>' };
const createWrapper = (userDataChanges = {}) => {
wrapper = shallowMountExtended(UserMenuProfileItem, {
propsData: {
user: {
...userMenuMockData,
...userDataChanges,
},
},
stubs: {
GlEmoji,
GlDisclosureDropdownItem,
},
});
};
beforeEach(() => {
createWrapper();
});
it('renders menu item', () => {
expect(findGlDisclosureDropdownItem().exists()).toBe(true);
});
it('passes the item to the disclosure dropdown item', () => {
expect(findGlDisclosureDropdownItem().props('item')).toEqual(
expect.objectContaining({
text: userMenuMockData.name,
href: userMenuMockData.link_to_profile,
}),
);
});
it("renders user's name", () => {
expect(findGlDisclosureDropdownItem().text()).toContain(userMenuMockData.name);
});
it("renders user's username", () => {
expect(findGlDisclosureDropdownItem().text()).toContain(userMenuMockData.username);
});
describe('Busy status', () => {
it('should not render "Busy" when user is NOT busy', () => {
expect(findGlDisclosureDropdownItem().text()).not.toContain('Busy');
});
it('should render "Busy" when user is busy', () => {
createWrapper({ status: { customized: true, busy: true } });
expect(findGlDisclosureDropdownItem().text()).toContain('Busy');
});
});
describe('User status', () => {
describe('when not customized', () => {
it('should not render it', () => {
expect(findUserStatus().exists()).toBe(false);
});
});
describe('when customized', () => {
beforeEach(() => {
createWrapper({ status: { ...userMenuMockStatus, customized: true } });
});
it('should render it', () => {
expect(findUserStatus().exists()).toBe(true);
});
it('should render status emoji', () => {
expect(findUserStatus().findComponent(GlEmoji).attributes('data-name')).toBe(
userMenuMockData.status.emoji,
);
});
it('should render status message', () => {
expect(findUserStatus().html()).toContain(userMenuMockData.status.message_html);
});
it("sets the tooltip's target to the status container", () => {
expect(findGlTooltip().props('target')?.()).toBe(findUserStatus().element);
});
describe('Tooltip', () => {
it('renders the tooltip when message has some text', () => {
createWrapper({
status: { ...userMenuMockStatus, customized: true, message_html: 'Has text' },
});
expect(findGlTooltip().exists()).toBe(true);
});
it('does not render the tooltip when message is empty', () => {
createWrapper({
status: { ...userMenuMockStatus, customized: true, message_html: '' },
});
expect(findGlTooltip().exists()).toBe(false);
});
});
});
});
describe('Tracking', () => {
it('sets the tracking attributes', () => {
expect(findGlDisclosureDropdownItem().find('a').attributes()).toEqual(
expect.objectContaining({
'data-track-property': 'nav_user_menu',
'data-track-action': 'click_link',
'data-track-label': 'user_profile',
}),
);
});
});
});
|
