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
|
import Vue, { nextTick } from 'vue';
import { mount } from '@vue/test-utils';
import { GlAlert } from '@gitlab/ui';
import VueApollo from 'vue-apollo';
import createdSavedReplyResponse from 'test_fixtures/graphql/saved_replies/create_saved_reply.mutation.graphql.json';
import createdSavedReplyErrorResponse from 'test_fixtures/graphql/saved_replies/create_saved_reply_with_errors.mutation.graphql.json';
import createMockApollo from 'helpers/mock_apollo_helper';
import waitForPromises from 'helpers/wait_for_promises';
import Form from '~/saved_replies/components/form.vue';
import createSavedReplyMutation from '~/saved_replies/queries/create_saved_reply.mutation.graphql';
let wrapper;
let createSavedReplyResponseSpy;
function createMockApolloProvider(response) {
Vue.use(VueApollo);
createSavedReplyResponseSpy = jest.fn().mockResolvedValue(response);
const requestHandlers = [[createSavedReplyMutation, createSavedReplyResponseSpy]];
return createMockApollo(requestHandlers);
}
function createComponent(response = createdSavedReplyResponse) {
const mockApollo = createMockApolloProvider(response);
return mount(Form, {
apolloProvider: mockApollo,
});
}
const findSavedReplyNameInput = () => wrapper.find('[data-testid="saved-reply-name-input"]');
const findSavedReplyNameFormGroup = () =>
wrapper.find('[data-testid="saved-reply-name-form-group"]');
const findSavedReplyContentInput = () => wrapper.find('[data-testid="saved-reply-content-input"]');
const findSavedReplyContentFormGroup = () =>
wrapper.find('[data-testid="saved-reply-content-form-group"]');
const findSavedReplyFrom = () => wrapper.find('[data-testid="saved-reply-form"]');
const findAlerts = () => wrapper.findAllComponents(GlAlert);
const findSubmitBtn = () => wrapper.find('[data-testid="saved-reply-form-submit-btn"]');
describe('Saved replies form component', () => {
describe('create saved reply', () => {
it('calls apollo mutation', async () => {
wrapper = createComponent();
findSavedReplyNameInput().setValue('Test');
findSavedReplyContentInput().setValue('Test content');
findSavedReplyFrom().trigger('submit');
await waitForPromises();
expect(createSavedReplyResponseSpy).toHaveBeenCalledWith({
content: 'Test content',
name: 'Test',
});
});
it('does not submit when form validation fails', async () => {
wrapper = createComponent();
findSavedReplyFrom().trigger('submit');
await waitForPromises();
expect(createSavedReplyResponseSpy).not.toHaveBeenCalled();
});
it.each`
findFormGroup | findInput | fieldName
${findSavedReplyNameFormGroup} | ${findSavedReplyContentInput} | ${'name'}
${findSavedReplyContentFormGroup} | ${findSavedReplyNameInput} | ${'content'}
`('shows errors for empty $fieldName input', async ({ findFormGroup, findInput }) => {
wrapper = createComponent(createdSavedReplyErrorResponse);
findInput().setValue('Test');
findSavedReplyFrom().trigger('submit');
await waitForPromises();
expect(findFormGroup().classes('is-invalid')).toBe(true);
});
it('displays errors when mutation fails', async () => {
wrapper = createComponent(createdSavedReplyErrorResponse);
findSavedReplyNameInput().setValue('Test');
findSavedReplyContentInput().setValue('Test content');
findSavedReplyFrom().trigger('submit');
await waitForPromises();
const { errors } = createdSavedReplyErrorResponse;
const alertMessages = findAlerts().wrappers.map((x) => x.text());
expect(alertMessages).toEqual(errors.map((x) => x.message));
});
it('shows loading state when saving', async () => {
wrapper = createComponent();
findSavedReplyNameInput().setValue('Test');
findSavedReplyContentInput().setValue('Test content');
findSavedReplyFrom().trigger('submit');
await nextTick();
expect(findSubmitBtn().props('loading')).toBe(true);
await waitForPromises();
expect(findSubmitBtn().props('loading')).toBe(false);
});
});
});
|
