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
150
151
152
153
154
155
156
157
158
159
160
161
|
import { GlForm, GlCollapsibleListbox, GlLoadingIcon } from '@gitlab/ui';
import { nextTick } from 'vue';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import { __ } from '~/locale';
import WorkItemSidebarDropdownWidgetWithEdit from '~/work_items/components/shared/work_item_sidebar_dropdown_widget_with_edit.vue';
describe('WorkItemSidebarDropdownWidgetWithEdit component', () => {
let wrapper;
const findHeader = () => wrapper.find('h3');
const findEditButton = () => wrapper.findByTestId('edit-button');
const findApplyButton = () => wrapper.findByTestId('apply-button');
const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
const findLabel = () => wrapper.find('label');
const findForm = () => wrapper.findComponent(GlForm);
const findCollapsibleListbox = () => wrapper.findComponent(GlCollapsibleListbox);
const createComponent = ({
itemValue = null,
canUpdate = true,
isEditing = false,
updateInProgress = false,
} = {}) => {
wrapper = mountExtended(WorkItemSidebarDropdownWidgetWithEdit, {
propsData: {
dropdownLabel: __('Iteration'),
dropdownName: 'iteration',
listItems: [],
itemValue,
canUpdate,
updateInProgress,
headerText: __('Select iteration'),
},
});
if (isEditing) {
findEditButton().vm.$emit('click');
}
};
describe('label', () => {
it('shows header when not editing', () => {
createComponent();
expect(findHeader().exists()).toBe(true);
expect(findHeader().classes('gl-sr-only')).toBe(false);
expect(findLabel().exists()).toBe(false);
});
it('shows label and hides header while editing', async () => {
createComponent();
findEditButton().vm.$emit('click');
await nextTick();
expect(findLabel().exists()).toBe(true);
expect(findHeader().classes('gl-sr-only')).toBe(true);
});
});
describe('edit button', () => {
it('is not shown if user cannot edit', () => {
createComponent({ canUpdate: false });
expect(findEditButton().exists()).toBe(false);
});
it('is shown if user can edit', () => {
createComponent({ canUpdate: true });
expect(findEditButton().exists()).toBe(true);
});
it('triggers edit mode on click', async () => {
createComponent();
findEditButton().vm.$emit('click');
await nextTick();
expect(findLabel().exists()).toBe(true);
expect(findForm().exists()).toBe(true);
});
it('is replaced by Apply button while editing', async () => {
createComponent();
findEditButton().vm.$emit('click');
await nextTick();
expect(findEditButton().exists()).toBe(false);
expect(findApplyButton().exists()).toBe(true);
});
});
describe('loading icon', () => {
it('shows loading icon while update is in progress', async () => {
createComponent({ updateInProgress: true });
await nextTick();
expect(findLoadingIcon().exists()).toBe(true);
});
});
describe('value', () => {
it('shows None when no item value is set', () => {
createComponent({ itemValue: null });
expect(wrapper.text()).toContain('None');
});
});
describe('form', () => {
it('is not shown while not editing', () => {
createComponent();
expect(findForm().exists()).toBe(false);
});
it('is shown while editing', async () => {
createComponent({ isEditing: true });
await nextTick();
expect(findForm().exists()).toBe(true);
});
});
describe('Dropdown', () => {
it('is not shown while not editing', () => {
createComponent();
expect(findCollapsibleListbox().exists()).toBe(false);
});
it('renders the collapsible listbox with required props', async () => {
createComponent({ isEditing: true });
await nextTick();
expect(findCollapsibleListbox().exists()).toBe(true);
expect(findCollapsibleListbox().props()).toMatchObject({
items: [],
headerText: 'Select iteration',
category: 'primary',
loading: false,
isCheckCentered: true,
searchable: true,
searching: false,
infiniteScroll: false,
noResultsText: 'No matching results',
toggleText: 'None',
searchPlaceholder: 'Search',
resetButtonLabel: 'Clear',
});
});
});
});
|
