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 { GlLoadingIcon } from '@gitlab/ui';
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises';
import NewEnvironment from '~/environments/components/new_environment.vue';
import createEnvironment from '~/environments/graphql/mutations/create_environment.mutation.graphql';
import { createAlert } from '~/alert';
import { visitUrl } from '~/lib/utils/url_utility';
import { __ } from '~/locale';
import createMockApollo from '../__helpers__/mock_apollo_helper';
jest.mock('~/lib/utils/url_utility');
jest.mock('~/alert');
const provide = {
projectEnvironmentsPath: '/projects/environments',
projectPath: '/path/to/project',
};
const environmentCreate = { environment: { id: '1', path: 'path/to/environment' }, errors: [] };
const environmentCreateError = {
environment: null,
errors: [{ message: 'uh oh!' }],
};
describe('~/environments/components/new.vue', () => {
let wrapper;
const createMockApolloProvider = (mutationResult) => {
Vue.use(VueApollo);
return createMockApollo([
[
createEnvironment,
jest.fn().mockResolvedValue({ data: { environmentCreate: mutationResult } }),
],
]);
};
const createWrapperWithApollo = async (mutationResult = environmentCreate) => {
wrapper = mountExtended(NewEnvironment, {
provide,
apolloProvider: createMockApolloProvider(mutationResult),
});
await waitForPromises();
};
const findNameInput = () => wrapper.findByLabelText(__('Name'));
const findExternalUrlInput = () => wrapper.findByLabelText(__('External URL'));
const findForm = () => wrapper.findByRole('form', { name: __('New environment') });
const showsLoading = () => wrapper.findComponent(GlLoadingIcon).exists();
const submitForm = async () => {
await findNameInput().setValue('test');
await findExternalUrlInput().setValue('https://google.ca');
await findForm().trigger('submit');
};
describe('default', () => {
beforeEach(() => {
createWrapperWithApollo();
});
it('sets the title to New environment', () => {
const header = wrapper.findByRole('heading', { name: 'New environment' });
expect(header.exists()).toBe(true);
});
it.each`
input | value
${() => findNameInput()} | ${'test'}
${() => findExternalUrlInput()} | ${'https://example.org'}
`('changes the value of the input to $value', ({ input, value }) => {
input().setValue(value);
expect(input().element.value).toBe(value);
});
});
describe('when mutation successful', () => {
beforeEach(() => {
createWrapperWithApollo();
});
it('shows loader after form is submitted', async () => {
expect(showsLoading()).toBe(false);
await submitForm();
expect(showsLoading()).toBe(true);
});
it('submits the new environment on submit', async () => {
submitForm();
await waitForPromises();
expect(visitUrl).toHaveBeenCalledWith('path/to/environment');
});
});
describe('when failed', () => {
beforeEach(async () => {
createWrapperWithApollo(environmentCreateError);
submitForm();
await waitForPromises();
});
it('display errors', () => {
expect(createAlert).toHaveBeenCalledWith({ message: 'uh oh!' });
expect(showsLoading()).toBe(false);
});
});
});
|
