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
|
import { GlButton } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import AttentionRequestedToggle from '~/sidebar/components/attention_requested_toggle.vue';
let wrapper;
function factory(propsData = {}) {
wrapper = mount(AttentionRequestedToggle, { propsData });
}
const findToggle = () => wrapper.findComponent(GlButton);
describe('Attention require toggle', () => {
afterEach(() => {
wrapper.destroy();
});
it('renders button', () => {
factory({
type: 'reviewer',
user: { attention_requested: false, can_update_merge_request: true },
});
expect(findToggle().exists()).toBe(true);
});
it.each`
attentionRequested | icon
${true} | ${'attention-solid'}
${false} | ${'attention'}
`(
'renders $icon icon when attention_requested is $attentionRequested',
({ attentionRequested, icon }) => {
factory({
type: 'reviewer',
user: { attention_requested: attentionRequested, can_update_merge_request: true },
});
expect(findToggle().props('icon')).toBe(icon);
},
);
it.each`
attentionRequested | variant
${true} | ${'warning'}
${false} | ${'default'}
`(
'renders button with variant $variant when attention_requested is $attentionRequested',
({ attentionRequested, variant }) => {
factory({
type: 'reviewer',
user: { attention_requested: attentionRequested, can_update_merge_request: true },
});
expect(findToggle().props('variant')).toBe(variant);
},
);
it('emits toggle-attention-requested on click', async () => {
factory({
type: 'reviewer',
user: { attention_requested: true, can_update_merge_request: true },
});
await findToggle().trigger('click');
expect(wrapper.emitted('toggle-attention-requested')[0]).toEqual([
{
user: { attention_requested: true, can_update_merge_request: true },
callback: expect.anything(),
},
]);
});
it('does not emit toggle-attention-requested on click if can_update_merge_request is false', async () => {
factory({
type: 'reviewer',
user: { attention_requested: true, can_update_merge_request: false },
});
await findToggle().trigger('click');
expect(wrapper.emitted('toggle-attention-requested')).toBe(undefined);
});
it('sets loading on click', async () => {
factory({
type: 'reviewer',
user: { attention_requested: true, can_update_merge_request: true },
});
await findToggle().trigger('click');
expect(findToggle().props('loading')).toBe(true);
});
it.each`
type | attentionRequested | tooltip | canUpdateMergeRequest
${'reviewer'} | ${true} | ${AttentionRequestedToggle.i18n.removeAttentionRequested} | ${true}
${'reviewer'} | ${false} | ${AttentionRequestedToggle.i18n.attentionRequestedReviewer} | ${true}
${'assignee'} | ${false} | ${AttentionRequestedToggle.i18n.attentionRequestedAssignee} | ${true}
${'reviewer'} | ${true} | ${AttentionRequestedToggle.i18n.attentionRequestedNoPermission} | ${false}
${'reviewer'} | ${false} | ${AttentionRequestedToggle.i18n.noAttentionRequestedNoPermission} | ${false}
${'assignee'} | ${true} | ${AttentionRequestedToggle.i18n.attentionRequestedNoPermission} | ${false}
${'assignee'} | ${false} | ${AttentionRequestedToggle.i18n.noAttentionRequestedNoPermission} | ${false}
`(
'sets tooltip as $tooltip when attention_requested is $attentionRequested, type is $type and, can_update_merge_request is $canUpdateMergeRequest',
({ type, attentionRequested, tooltip, canUpdateMergeRequest }) => {
factory({
type,
user: {
attention_requested: attentionRequested,
can_update_merge_request: canUpdateMergeRequest,
},
});
expect(findToggle().attributes('aria-label')).toBe(tooltip);
},
);
});
|
