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
|
import VueApollo from 'vue-apollo';
import Vue, { nextTick } from 'vue';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import App from '~/organizations/new/components/app.vue';
import resolvers from '~/organizations/shared/graphql/resolvers';
import NewEditForm from '~/organizations/shared/components/new_edit_form.vue';
import { visitUrlWithAlerts } from '~/lib/utils/url_utility';
import { createOrganizationResponse } from '~/organizations/mock_data';
import { createAlert } from '~/alert';
import createMockApollo from 'helpers/mock_apollo_helper';
import waitForPromises from 'helpers/wait_for_promises';
Vue.use(VueApollo);
jest.useFakeTimers();
jest.mock('~/lib/utils/url_utility');
jest.mock('~/alert');
describe('OrganizationNewApp', () => {
let wrapper;
let mockApollo;
const createComponent = ({ mockResolvers = resolvers } = {}) => {
mockApollo = createMockApollo([], mockResolvers);
wrapper = shallowMountExtended(App, { apolloProvider: mockApollo });
};
const findForm = () => wrapper.findComponent(NewEditForm);
const submitForm = async () => {
findForm().vm.$emit('submit', { name: 'Foo bar', path: 'foo-bar' });
await nextTick();
};
afterEach(() => {
mockApollo = null;
});
it('renders form', () => {
createComponent();
expect(findForm().exists()).toBe(true);
});
describe('when form is submitted', () => {
describe('when API is loading', () => {
beforeEach(async () => {
const mockResolvers = {
Mutation: {
createOrganization: jest.fn().mockReturnValueOnce(new Promise(() => {})),
},
};
createComponent({ mockResolvers });
await submitForm();
});
it('sets `NewEditForm` `loading` prop to `true`', () => {
expect(findForm().props('loading')).toBe(true);
});
});
describe('when API request is successful', () => {
beforeEach(async () => {
createComponent();
await submitForm();
jest.runAllTimers();
await waitForPromises();
});
it('redirects user to organization path', () => {
expect(visitUrlWithAlerts).toHaveBeenCalledWith(
createOrganizationResponse.organization.path,
[
{
id: 'organization-successfully-created',
title: 'Organization successfully created.',
message: 'You can now start using your new organization.',
variant: 'success',
},
],
);
});
});
describe('when API request is not successful', () => {
const error = new Error();
beforeEach(async () => {
const mockResolvers = {
Mutation: {
createOrganization: jest.fn().mockRejectedValueOnce(error),
},
};
createComponent({ mockResolvers });
await submitForm();
jest.runAllTimers();
await waitForPromises();
});
it('displays error alert', () => {
expect(createAlert).toHaveBeenCalledWith({
message: 'An error occurred creating an organization. Please try again.',
error,
captureError: true,
});
});
});
});
});
|
