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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
import { shallowMount } from '@vue/test-utils';
import { GlLink } from '@gitlab/ui';
import { TEST_HOST } from 'helpers/test_constants';
import { TYPENAME_USER } from '~/graphql_shared/constants';
import { convertToGraphQLId } from '~/graphql_shared/utils';
import AssigneeAvatar from '~/sidebar/components/assignees/assignee_avatar.vue';
import AssigneeAvatarLink from '~/sidebar/components/assignees/assignee_avatar_link.vue';
import userDataMock from '../../user_data_mock';
const TOOLTIP_PLACEMENT = 'bottom';
const { name: USER_NAME } = userDataMock();
const TEST_ISSUABLE_TYPE = 'merge_request';
describe('AssigneeAvatarLink component', () => {
let wrapper;
function createComponent(props = {}) {
const propsData = {
user: userDataMock(),
showLess: true,
rootPath: TEST_HOST,
tooltipPlacement: TOOLTIP_PLACEMENT,
singleUser: false,
issuableType: TEST_ISSUABLE_TYPE,
...props,
};
wrapper = shallowMount(AssigneeAvatarLink, {
propsData,
});
}
const findTooltipText = () => wrapper.attributes('title');
const findUserLink = () => wrapper.findComponent(GlLink);
it('has the root url present in the assigneeUrl method', () => {
createComponent();
expect(wrapper.attributes().href).toEqual(userDataMock().web_url);
});
it('renders assignee avatar', () => {
createComponent();
expect(wrapper.findComponent(AssigneeAvatar).props()).toEqual(
expect.objectContaining({
issuableType: TEST_ISSUABLE_TYPE,
user: userDataMock(),
}),
);
});
describe.each`
issuableType | tooltipHasName | canMerge | expected
${'merge_request'} | ${true} | ${true} | ${USER_NAME}
${'merge_request'} | ${true} | ${false} | ${`${USER_NAME} (cannot merge)`}
${'merge_request'} | ${false} | ${true} | ${''}
${'merge_request'} | ${false} | ${false} | ${'Cannot merge'}
${'issue'} | ${true} | ${true} | ${USER_NAME}
${'issue'} | ${true} | ${false} | ${USER_NAME}
${'issue'} | ${false} | ${true} | ${''}
${'issue'} | ${false} | ${false} | ${''}
`(
'with $issuableType and tooltipHasName=$tooltipHasName and canMerge=$canMerge',
({ issuableType, tooltipHasName, canMerge, expected }) => {
beforeEach(() => {
createComponent({
issuableType,
tooltipHasName,
user: {
...userDataMock(),
can_merge: canMerge,
},
});
});
it('sets tooltip', () => {
expect(findTooltipText()).toBe(expected);
});
},
);
describe.each`
tooltipHasName | name | availability | canMerge | expected
${true} | ${"Rabbit O'Hare"} | ${''} | ${true} | ${"Rabbit O'Hare"}
${true} | ${"Rabbit O'Hare"} | ${'Busy'} | ${false} | ${"Rabbit O'Hare (Busy) (cannot merge)"}
${true} | ${'Root'} | ${'Busy'} | ${false} | ${'Root (Busy) (cannot merge)'}
${true} | ${'Root'} | ${'Busy'} | ${true} | ${'Root (Busy)'}
${true} | ${'Root'} | ${''} | ${false} | ${'Root (cannot merge)'}
${true} | ${'Root'} | ${''} | ${true} | ${'Root'}
${false} | ${'Root'} | ${'Busy'} | ${false} | ${'Cannot merge'}
${false} | ${'Root'} | ${'Busy'} | ${true} | ${''}
${false} | ${'Root'} | ${''} | ${false} | ${'Cannot merge'}
${false} | ${'Root'} | ${''} | ${true} | ${''}
`(
"with name=$name tooltipHasName=$tooltipHasName and availability='$availability' and canMerge=$canMerge",
({ name, tooltipHasName, availability, canMerge, expected }) => {
beforeEach(() => {
createComponent({
tooltipHasName,
user: {
...userDataMock(),
name,
can_merge: canMerge,
availability,
},
});
});
it(`sets tooltip to "${expected}"`, () => {
expect(findTooltipText()).toBe(expected);
});
},
);
it('passes the correct user id for REST API', () => {
createComponent({
tooltipHasName: true,
issuableType: 'issue',
user: userDataMock(),
});
expect(findUserLink().attributes('data-user-id')).toBe(String(userDataMock().id));
});
it('passes the correct user id for GraphQL API', () => {
const userId = userDataMock().id;
createComponent({
tooltipHasName: true,
issuableType: 'issue',
user: { ...userDataMock(), id: convertToGraphQLId(TYPENAME_USER, userId) },
});
expect(findUserLink().attributes('data-user-id')).toBe(String(userId));
});
it.each`
issuableType | userId
${'merge_request'} | ${undefined}
${'issue'} | ${'1'}
`('sets data-user-id as $userId for $issuableType', ({ issuableType, userId }) => {
createComponent({
issuableType,
});
expect(findUserLink().attributes('data-user-id')).toBe(userId);
});
});
|
