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
127
128
129
130
|
import { GlDisclosureDropdownGroup, GlDisclosureDropdownItem, GlTooltip } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import UserNameGroup from '~/super_sidebar/components/user_name_group.vue';
import { userMenuMockData, userMenuMockStatus } from '../mock_data';
describe('UserNameGroup component', () => {
let wrapper;
const findGlDisclosureDropdownGroup = () => wrapper.findComponent(GlDisclosureDropdownGroup);
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(UserNameGroup, {
propsData: {
user: {
...userMenuMockData,
...userDataChanges,
},
},
stubs: {
GlEmoji,
GlDisclosureDropdownItem,
},
});
};
beforeEach(() => {
createWrapper();
});
it('renders the menu item in a separate group', () => {
expect(findGlDisclosureDropdownGroup().exists()).toBe(true);
});
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',
}),
);
});
});
});
|
