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
|
import VueApollo from 'vue-apollo';
import Vue, { nextTick } from 'vue';
import { GlDatepicker } from '@gitlab/ui';
import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises';
import TimelineEventsForm from '~/issues/show/components/incidents/timeline_events_form.vue';
import MarkdownField from '~/vue_shared/components/markdown/field.vue';
import { timelineFormI18n } from '~/issues/show/components/incidents/constants';
import { createAlert } from '~/flash';
import { useFakeDate } from 'helpers/fake_date';
Vue.use(VueApollo);
jest.mock('~/flash');
const fakeDate = '2020-07-08T00:00:00.000Z';
const mockInputDate = new Date('2021-08-12');
describe('Timeline events form', () => {
// July 8 2020
useFakeDate(fakeDate);
let wrapper;
const mountComponent = ({ mountMethod = shallowMountExtended }) => {
wrapper = mountMethod(TimelineEventsForm, {
propsData: {
showSaveAndAdd: true,
isEventProcessed: false,
},
});
};
afterEach(() => {
createAlert.mockReset();
wrapper.destroy();
});
const findMarkdownField = () => wrapper.findComponent(MarkdownField);
const findSubmitButton = () => wrapper.findByText(timelineFormI18n.save);
const findSubmitAndAddButton = () => wrapper.findByText(timelineFormI18n.saveAndAdd);
const findCancelButton = () => wrapper.findByText(timelineFormI18n.cancel);
const findDatePicker = () => wrapper.findComponent(GlDatepicker);
const findHourInput = () => wrapper.findByTestId('input-hours');
const findMinuteInput = () => wrapper.findByTestId('input-minutes');
const setDatetime = () => {
findDatePicker().vm.$emit('input', mockInputDate);
findHourInput().setValue(5);
findMinuteInput().setValue(45);
};
const submitForm = async () => {
findSubmitButton().trigger('click');
await waitForPromises();
};
const submitFormAndAddAnother = async () => {
findSubmitAndAddButton().trigger('click');
await waitForPromises();
};
const cancelForm = async () => {
findCancelButton().trigger('click');
await waitForPromises();
};
it('renders markdown-field component with correct list of toolbar items', () => {
mountComponent({ mountMethod: mountExtended });
expect(findMarkdownField().props('restrictedToolBarItems')).toEqual([
'quote',
'strikethrough',
'bullet-list',
'numbered-list',
'task-list',
'collapsible-section',
'table',
'attach-file',
'full-screen',
]);
});
describe('form button behaviour', () => {
beforeEach(() => {
mountComponent({ mountMethod: mountExtended });
});
it('should save event on submit', async () => {
await submitForm();
expect(wrapper.emitted()).toEqual({
'save-event': [[{ note: '', occurredAt: fakeDate }, false]],
});
});
it('should save event on "submit and add another"', async () => {
await submitFormAndAddAnother();
expect(wrapper.emitted()).toEqual({
'save-event': [[{ note: '', occurredAt: fakeDate }, true]],
});
});
it('should emit cancel on cancel', async () => {
await cancelForm();
expect(wrapper.emitted()).toEqual({ cancel: [[]] });
});
it('should clear the form', async () => {
setDatetime();
await nextTick();
expect(findDatePicker().props('value')).toBe(mockInputDate);
expect(findHourInput().element.value).toBe('5');
expect(findMinuteInput().element.value).toBe('45');
wrapper.vm.clear();
await nextTick();
expect(findDatePicker().props('value')).toStrictEqual(new Date(fakeDate));
expect(findHourInput().element.value).toBe('0');
expect(findMinuteInput().element.value).toBe('0');
});
});
});
|
