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 { GlAlert } from '@gitlab/ui';
import VueApollo from 'vue-apollo';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import createMockApollo from 'helpers/mock_apollo_helper';
import waitForPromises from 'helpers/wait_for_promises';
import Form from '~/custom_emoji/components/form.vue';
import createCustomEmojiMutation from '~/custom_emoji/queries/create_custom_emoji.mutation.graphql';
import { CREATED_CUSTOM_EMOJI, CREATED_CUSTOM_EMOJI_WITH_ERROR } from '../mock_data';
let wrapper;
let createCustomEmojiResponseSpy;
function createMockApolloProvider(response) {
Vue.use(VueApollo);
createCustomEmojiResponseSpy = jest.fn().mockResolvedValue(response);
const requestHandlers = [[createCustomEmojiMutation, createCustomEmojiResponseSpy]];
return createMockApollo(requestHandlers);
}
function createComponent(response = CREATED_CUSTOM_EMOJI) {
const mockApollo = createMockApolloProvider(response);
return mountExtended(Form, {
provide: {
groupPath: 'gitlab-org',
},
apolloProvider: mockApollo,
});
}
const findCustomEmojiNameInput = () => wrapper.findByTestId('custom-emoji-name-input');
const findCustomEmojiNameFormGroup = () => wrapper.findByTestId('custom-emoji-name-form-group');
const findCustomEmojiUrlInput = () => wrapper.findByTestId('custom-emoji-url-input');
const findCustomEmojiUrlFormGroup = () => wrapper.findByTestId('custom-emoji-url-form-group');
const findCustomEmojiFrom = () => wrapper.findByTestId('custom-emoji-form');
const findAlerts = () => wrapper.findAllComponents(GlAlert);
const findSubmitBtn = () => wrapper.findByTestId('custom-emoji-form-submit-btn');
function completeForm() {
findCustomEmojiNameInput().setValue('Test');
findCustomEmojiUrlInput().setValue('https://example.com');
findCustomEmojiFrom().trigger('submit');
}
describe('Custom emoji form component', () => {
describe('creates custom emoji', () => {
it('calls apollo mutation', async () => {
wrapper = createComponent();
completeForm();
await waitForPromises();
expect(createCustomEmojiResponseSpy).toHaveBeenCalledWith({
groupPath: 'gitlab-org',
url: 'https://example.com',
name: 'Test',
});
});
it('does not submit when form validation fails', async () => {
wrapper = createComponent();
findCustomEmojiFrom().trigger('submit');
await waitForPromises();
expect(createCustomEmojiResponseSpy).not.toHaveBeenCalled();
});
it.each`
findFormGroup | findInput | fieldName
${findCustomEmojiNameFormGroup} | ${findCustomEmojiUrlInput} | ${'name'}
${findCustomEmojiUrlFormGroup} | ${findCustomEmojiNameInput} | ${'URL'}
`('shows errors for empty $fieldName input', async ({ findFormGroup, findInput }) => {
wrapper = createComponent(CREATED_CUSTOM_EMOJI_WITH_ERROR);
findInput().setValue('Test');
findCustomEmojiFrom().trigger('submit');
await waitForPromises();
expect(findFormGroup().classes('is-invalid')).toBe(true);
});
it('displays errors when mutation fails', async () => {
wrapper = createComponent(CREATED_CUSTOM_EMOJI_WITH_ERROR);
completeForm();
await waitForPromises();
const alertMessages = findAlerts().wrappers.map((x) => x.text());
expect(alertMessages).toEqual(CREATED_CUSTOM_EMOJI_WITH_ERROR.data.createCustomEmoji.errors);
});
it('shows loading state when saving', async () => {
wrapper = createComponent();
completeForm();
await nextTick();
expect(findSubmitBtn().props('loading')).toBe(true);
await waitForPromises();
expect(findSubmitBtn().props('loading')).toBe(false);
});
});
});
|
