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
|
import { shallowMount } from '@vue/test-utils';
import { GlLoadingIcon } from '@gitlab/ui';
import { mockTracking, triggerEvent } from 'helpers/tracking_helper';
import Component from '~/sidebar/components/assignees/assignee_title.vue';
describe('AssigneeTitle component', () => {
let wrapper;
const createComponent = (props) => {
return shallowMount(Component, {
propsData: {
numberOfAssignees: 0,
editable: false,
changing: false,
...props,
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('assignee title', () => {
it('renders assignee', () => {
wrapper = createComponent({
numberOfAssignees: 1,
editable: false,
});
expect(wrapper.vm.$el.innerText.trim()).toEqual('Assignee');
});
it('renders 2 assignees', () => {
wrapper = createComponent({
numberOfAssignees: 2,
editable: false,
});
expect(wrapper.vm.$el.innerText.trim()).toEqual('2 Assignees');
});
});
describe('gutter toggle', () => {
it('does not show toggle by default', () => {
wrapper = createComponent({
numberOfAssignees: 2,
editable: false,
});
expect(wrapper.vm.$el.querySelector('.gutter-toggle')).toBeNull();
});
it('shows toggle when showToggle is true', () => {
wrapper = createComponent({
numberOfAssignees: 2,
editable: false,
showToggle: true,
});
expect(wrapper.vm.$el.querySelector('.gutter-toggle')).toEqual(expect.any(Object));
});
});
describe('when changing is false', () => {
it('renders "Edit"', () => {
wrapper = createComponent({ editable: true });
expect(wrapper.find('[data-test-id="edit-link"]').text()).toEqual('Edit');
});
});
describe('when changing is true', () => {
it('renders "Edit"', () => {
wrapper = createComponent({ editable: true, changing: true });
expect(wrapper.find('[data-test-id="edit-link"]').text()).toEqual('Apply');
});
});
it('does not render spinner by default', () => {
wrapper = createComponent({
numberOfAssignees: 0,
editable: false,
});
expect(wrapper.find(GlLoadingIcon).exists()).toBeFalsy();
});
it('renders spinner when loading', () => {
wrapper = createComponent({
loading: true,
numberOfAssignees: 0,
editable: false,
});
expect(wrapper.find(GlLoadingIcon).exists()).toBeTruthy();
});
it('does not render edit link when not editable', () => {
wrapper = createComponent({
numberOfAssignees: 0,
editable: false,
});
expect(wrapper.vm.$el.querySelector('.edit-link')).toBeNull();
});
it('renders edit link when editable', () => {
wrapper = createComponent({
numberOfAssignees: 0,
editable: true,
});
expect(wrapper.vm.$el.querySelector('.edit-link')).not.toBeNull();
});
it('tracks the event when edit is clicked', () => {
wrapper = createComponent({
numberOfAssignees: 0,
editable: true,
});
const spy = mockTracking('_category_', wrapper.element, jest.spyOn);
triggerEvent('.js-sidebar-dropdown-toggle');
expect(spy).toHaveBeenCalledWith('_category_', 'click_edit_button', {
label: 'right_sidebar',
property: 'assignee',
});
});
});
|
