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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
|
import { GlModal, GlFormCheckbox } from '@gitlab/ui';
import { nextTick } from 'vue';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import { useFakeDate } from 'helpers/fake_date';
import { initEmojiMock, clearEmojiMock } from 'helpers/emoji';
import * as UserApi from '~/api/user_api';
import EmojiPicker from '~/emoji/components/picker.vue';
import { createAlert } from '~/alert';
import stubChildren from 'helpers/stub_children';
import SetStatusModalWrapper from '~/set_status_modal/set_status_modal_wrapper.vue';
import { AVAILABILITY_STATUS } from '~/set_status_modal/constants';
import SetStatusForm from '~/set_status_modal/set_status_form.vue';
jest.mock('~/alert');
describe('SetStatusModalWrapper', () => {
let wrapper;
const $toast = {
show: jest.fn(),
};
const defaultEmoji = 'speech_balloon';
const defaultMessage = "They're comin' in too fast!";
const defaultProps = {
currentEmoji: defaultEmoji,
currentMessage: defaultMessage,
defaultEmoji,
};
const EmojiPickerStub = {
props: EmojiPicker.props,
template: '<div></div>',
};
const createComponent = (props = {}) => {
return mountExtended(SetStatusModalWrapper, {
propsData: {
...defaultProps,
...props,
},
stubs: {
...stubChildren(SetStatusModalWrapper),
GlFormInput: false,
GlFormInputGroup: false,
SetStatusForm: false,
EmojiPicker: EmojiPickerStub,
},
mocks: {
$toast,
},
});
};
const findModal = () => wrapper.findComponent(GlModal);
const findMessageField = () =>
wrapper.findByPlaceholderText(SetStatusForm.i18n.statusMessagePlaceholder);
const findClearStatusButton = () => wrapper.find('.js-clear-user-status-button');
const findAvailabilityCheckbox = () => wrapper.findComponent(GlFormCheckbox);
const getEmojiPicker = () => wrapper.findComponent(EmojiPickerStub);
const initModal = async ({ mockOnUpdateSuccess = true, mockOnUpdateFailure = true } = {}) => {
const modal = findModal();
// mock internal emoji methods
wrapper.vm.showEmojiMenu = jest.fn();
wrapper.vm.hideEmojiMenu = jest.fn();
if (mockOnUpdateSuccess) wrapper.vm.onUpdateSuccess = jest.fn();
if (mockOnUpdateFailure) wrapper.vm.onUpdateFail = jest.fn();
modal.vm.$emit('shown');
await nextTick();
};
afterEach(() => {
clearEmojiMock();
});
describe('with minimum props', () => {
beforeEach(async () => {
await initEmojiMock();
wrapper = createComponent();
return initModal();
});
it('sets the message field', () => {
const field = findMessageField();
expect(field.exists()).toBe(true);
expect(field.element.value).toBe(defaultMessage);
});
it('sets the availability field to false', () => {
const field = findAvailabilityCheckbox();
expect(field.exists()).toBe(true);
expect(field.element.checked).toBeUndefined();
});
it('has a clear status button', () => {
expect(findClearStatusButton().exists()).toBe(true);
});
it('displays the clear status at dropdown', () => {
expect(wrapper.find('[data-testid="clear-status-at-dropdown"]').exists()).toBe(true);
});
it('renders emoji picker dropdown with custom positioning', () => {
expect(getEmojiPicker().props()).toMatchObject({
right: false,
boundary: 'viewport',
});
});
it('passes emoji to `SetStatusForm`', async () => {
await getEmojiPicker().vm.$emit('click', 'thumbsup');
expect(wrapper.findComponent(SetStatusForm).props('emoji')).toBe('thumbsup');
});
});
describe('with no currentMessage set', () => {
beforeEach(async () => {
await initEmojiMock();
wrapper = createComponent({ currentMessage: '' });
return initModal();
});
it('does not set the message field', () => {
expect(findMessageField().element.value).toBe('');
});
it('hides the clear status button', () => {
expect(findClearStatusButton().exists()).toBe(false);
});
});
describe('with currentClearStatusAfter set', () => {
useFakeDate(2022, 11, 5);
beforeEach(async () => {
await initEmojiMock();
wrapper = createComponent({ currentClearStatusAfter: '2022-12-06 11:00:00 UTC' });
return initModal();
});
it('displays date and time that status will expire in dropdown toggle button', () => {
expect(wrapper.findByRole('button', { name: 'Dec 6, 2022 11:00am' }).exists()).toBe(true);
});
});
describe('update status', () => {
describe('succeeds', () => {
beforeEach(async () => {
await initEmojiMock();
wrapper = createComponent();
await initModal();
jest.spyOn(UserApi, 'updateUserStatus').mockResolvedValue();
});
it('clicking "removeStatus" clears the emoji and message fields', async () => {
findModal().vm.$emit('secondary');
await nextTick();
expect(findMessageField().element.value).toBe('');
});
it('clicking "setStatus" submits the user status', async () => {
// set the availability status
findAvailabilityCheckbox().vm.$emit('input', true);
// set the currentClearStatusAfter to 30 minutes
await wrapper.find('[data-testid="thirtyMinutes"]').trigger('click');
findModal().vm.$emit('primary');
await nextTick();
expect(UserApi.updateUserStatus).toHaveBeenCalledWith({
availability: AVAILABILITY_STATUS.BUSY,
clearStatusAfter: '30_minutes',
emoji: defaultEmoji,
message: defaultMessage,
});
});
describe('when `Clear status after` field has not been set', () => {
it('does not include `clearStatusAfter` in API request', async () => {
findModal().vm.$emit('primary');
await nextTick();
expect(UserApi.updateUserStatus).toHaveBeenCalledWith({
availability: AVAILABILITY_STATUS.NOT_SET,
emoji: defaultEmoji,
message: defaultMessage,
});
});
});
it('calls the "onUpdateSuccess" handler', async () => {
findModal().vm.$emit('primary');
await nextTick();
expect(wrapper.vm.onUpdateSuccess).toHaveBeenCalled();
});
});
describe('success message', () => {
beforeEach(async () => {
await initEmojiMock();
wrapper = createComponent({ currentEmoji: '', currentMessage: '' });
jest.spyOn(UserApi, 'updateUserStatus').mockResolvedValue();
return initModal({ mockOnUpdateSuccess: false });
});
it('displays a toast success message', async () => {
findModal().vm.$emit('primary');
await nextTick();
expect($toast.show).toHaveBeenCalledWith('Status updated');
});
});
describe('with errors', () => {
beforeEach(async () => {
await initEmojiMock();
wrapper = createComponent();
await initModal();
jest.spyOn(UserApi, 'updateUserStatus').mockRejectedValue();
});
it('calls the "onUpdateFail" handler', async () => {
findModal().vm.$emit('primary');
await nextTick();
expect(wrapper.vm.onUpdateFail).toHaveBeenCalled();
});
});
describe('error message', () => {
beforeEach(async () => {
await initEmojiMock();
wrapper = createComponent({ currentEmoji: '', currentMessage: '' });
jest.spyOn(UserApi, 'updateUserStatus').mockRejectedValue();
return initModal({ mockOnUpdateFailure: false });
});
it('alerts an error message', async () => {
findModal().vm.$emit('primary');
await nextTick();
expect(createAlert).toHaveBeenCalledWith({
message: "Sorry, we weren't able to set your status. Please try again later.",
});
});
});
});
});
|