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
|
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import createMockApollo from 'helpers/mock_apollo_helper';
import waitForPromises from 'helpers/wait_for_promises';
import { createAlert } from '~/flash';
import CrmContacts from '~/sidebar/components/crm_contacts/crm_contacts.vue';
import getIssueCrmContactsQuery from '~/sidebar/components/crm_contacts/queries/get_issue_crm_contacts.query.graphql';
import issueCrmContactsSubscription from '~/sidebar/components/crm_contacts/queries/issue_crm_contacts.subscription.graphql';
import {
getIssueCrmContactsQueryResponse,
issueCrmContactsUpdateResponse,
issueCrmContactsUpdateNullResponse,
} from './mock_data';
jest.mock('~/flash');
describe('Issue crm contacts component', () => {
Vue.use(VueApollo);
let wrapper;
let fakeApollo;
const successQueryHandler = jest.fn().mockResolvedValue(getIssueCrmContactsQueryResponse);
const successSubscriptionHandler = jest.fn().mockResolvedValue(issueCrmContactsUpdateResponse);
const nullSubscriptionHandler = jest.fn().mockResolvedValue(issueCrmContactsUpdateNullResponse);
const mountComponent = ({
queryHandler = successQueryHandler,
subscriptionHandler = successSubscriptionHandler,
} = {}) => {
fakeApollo = createMockApollo([
[getIssueCrmContactsQuery, queryHandler],
[issueCrmContactsSubscription, subscriptionHandler],
]);
wrapper = shallowMountExtended(CrmContacts, {
propsData: { issueId: '123', groupIssuesPath: '/groups/flightjs/-/issues' },
apolloProvider: fakeApollo,
});
};
afterEach(() => {
wrapper.destroy();
fakeApollo = null;
});
it('should render error message on reject', async () => {
mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') });
await waitForPromises();
expect(createAlert).toHaveBeenCalled();
});
it('calls the query with correct variables', () => {
mountComponent();
expect(successQueryHandler).toHaveBeenCalledWith({
id: 'gid://gitlab/Issue/123',
});
});
it('calls the subscription with correct variable for issue', () => {
mountComponent();
expect(successSubscriptionHandler).toHaveBeenCalledWith({
id: 'gid://gitlab/Issue/123',
});
});
it('renders correct initial results', async () => {
mountComponent({ subscriptionHandler: nullSubscriptionHandler });
await waitForPromises();
expect(wrapper.find('#contact_0').text()).toContain('Someone Important');
expect(wrapper.find('#contact_0').attributes('href')).toBe(
'/groups/flightjs/-/issues?crm_contact_id=1',
);
expect(wrapper.find('#contact_container_0').text()).toContain('si@gitlab.com');
expect(wrapper.find('#contact_1').text()).toContain('Marty McFly');
expect(wrapper.find('#contact_1').attributes('href')).toBe(
'/groups/flightjs/-/issues?crm_contact_id=5',
);
});
it('renders correct results after subscription update', async () => {
mountComponent();
await waitForPromises();
const contact = ['Dave Davies', 'dd@gitlab.com', '+44 20 1111 2222', 'Vice President'];
contact.forEach((property) => {
expect(wrapper.find('#contact_container_0').text()).toContain(property);
});
expect(wrapper.find('#contact_0').attributes('href')).toBe(
'/groups/flightjs/-/issues?crm_contact_id=13',
);
});
});
|
