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
|
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises';
import createMockApollo from 'helpers/mock_apollo_helper';
import ContactFormWrapper from '~/crm/contacts/components/contact_form_wrapper.vue';
import ContactForm from '~/crm/components/form.vue';
import getGroupContactsQuery from '~/crm/contacts/components/graphql/get_group_contacts.query.graphql';
import createContactMutation from '~/crm/contacts/components/graphql/create_contact.mutation.graphql';
import updateContactMutation from '~/crm/contacts/components/graphql/update_contact.mutation.graphql';
import getGroupOrganizationsQuery from '~/crm/organizations/components/graphql/get_group_organizations.query.graphql';
import { getGroupContactsQueryResponse, getGroupOrganizationsQueryResponse } from './mock_data';
describe('Customer relations contact form wrapper', () => {
Vue.use(VueApollo);
let wrapper;
let fakeApollo;
const findContactForm = () => wrapper.findComponent(ContactForm);
const $route = {
params: {
id: 7,
},
};
const contacts = [{ id: 'gid://gitlab/CustomerRelations::Contact/7' }];
const mountComponent = ({ isEditMode = false } = {}) => {
wrapper = shallowMountExtended(ContactFormWrapper, {
propsData: {
isEditMode,
},
provide: {
groupFullPath: 'flightjs',
groupId: 26,
},
apolloProvider: fakeApollo,
mocks: { $route },
});
};
beforeEach(() => {
fakeApollo = createMockApollo([
[getGroupContactsQuery, jest.fn().mockResolvedValue(getGroupContactsQueryResponse)],
[getGroupOrganizationsQuery, jest.fn().mockResolvedValue(getGroupOrganizationsQueryResponse)],
]);
});
afterEach(() => {
wrapper.destroy();
fakeApollo = null;
});
describe.each`
mode | title | successMessage | mutation | existingId
${'edit'} | ${'Edit contact'} | ${'Contact has been updated.'} | ${updateContactMutation} | ${contacts[0].id}
${'create'} | ${'New contact'} | ${'Contact has been added.'} | ${createContactMutation} | ${null}
`('in $mode mode', ({ mode, title, successMessage, mutation, existingId }) => {
const isEditMode = mode === 'edit';
beforeEach(() => {
mountComponent({ isEditMode });
return waitForPromises();
});
it('renders correct getQuery prop', () => {
expect(findContactForm().props('getQueryNodePath')).toBe('group.contacts');
});
it('renders correct mutation prop', () => {
expect(findContactForm().props('mutation')).toBe(mutation);
});
it('renders correct additionalCreateParams prop', () => {
expect(findContactForm().props('additionalCreateParams')).toMatchObject({
groupId: 'gid://gitlab/Group/26',
});
});
it('renders correct existingId prop', () => {
expect(findContactForm().props('existingId')).toBe(existingId);
});
it('renders correct fields prop', () => {
const fields = [
{ name: 'firstName', label: 'First name', required: true },
{ name: 'lastName', label: 'Last name', required: true },
{ name: 'email', label: 'Email', required: true },
{ name: 'phone', label: 'Phone' },
{
name: 'organizationId',
label: 'Organization',
values: [
{ text: 'No organization', value: null },
{ text: 'ABC Company', value: 'gid://gitlab/CustomerRelations::Organization/2' },
{ text: 'GitLab', value: 'gid://gitlab/CustomerRelations::Organization/3' },
{ text: 'Test Inc', value: 'gid://gitlab/CustomerRelations::Organization/1' },
],
},
{ name: 'description', label: 'Description' },
];
if (isEditMode) fields.push({ name: 'active', label: 'Active', required: true, bool: true });
expect(findContactForm().props('fields')).toEqual(fields);
});
it('renders correct title prop', () => {
expect(findContactForm().props('title')).toBe(title);
});
it('renders correct successMessage prop', () => {
expect(findContactForm().props('successMessage')).toBe(successMessage);
});
});
});
|
