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
|
import { GlBadge } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { billingPlans, billingPlanNames } from '~/integrations/constants';
import DynamicField from '~/integrations/edit/components/dynamic_field.vue';
import IntegrationFormSection from '~/integrations/edit/components/integration_forms/section.vue';
import IntegrationSectionConnection from '~/integrations/edit/components/sections/connection.vue';
import { createStore } from '~/integrations/edit/store';
import {
mockIntegrationProps,
mockSectionConnection,
mockSectionJiraIssues,
} from '../../mock_data';
describe('Integration Form Section', () => {
let wrapper;
const defaultProps = {
section: mockSectionConnection,
isValidated: false,
};
const createComponent = ({
customStateProps = {},
props = {},
mountFn = shallowMountExtended,
} = {}) => {
const store = createStore({
customState: {
...mockIntegrationProps,
...customStateProps,
},
});
wrapper = mountFn(IntegrationFormSection, {
store,
propsData: {
...defaultProps,
...props,
},
stubs: {
IntegrationSectionConnection,
},
});
};
const findGlBadge = () => wrapper.findComponent(GlBadge);
const findFieldsComponent = () => wrapper.findComponent(IntegrationSectionConnection);
const findAllDynamicFields = () => wrapper.findAllComponents(DynamicField);
beforeEach(() => {
createComponent();
});
it('renders title, description and the correct dynamic component', () => {
expect(wrapper.findByText(mockSectionConnection.title).exists()).toBe(true);
expect(wrapper.findByText(mockSectionConnection.description).exists()).toBe(true);
expect(findGlBadge().exists()).toBe(false);
});
it('renders GlBadge when `plan` is present', () => {
createComponent({
props: {
section: mockSectionJiraIssues,
},
});
expect(findGlBadge().exists()).toBe(true);
expect(findGlBadge().text()).toMatchInterpolatedText(billingPlanNames[billingPlans.PREMIUM]);
});
it('renders only fields for this section type', () => {
const sectionFields = [
{ name: 'username', type: 'text', section: mockSectionConnection.type },
{ name: 'API token', type: 'password', section: mockSectionConnection.type },
];
const nonSectionFields = [{ name: 'branch', type: 'text' }];
createComponent({
customStateProps: {
fields: [...sectionFields, ...nonSectionFields],
},
});
expect(findAllDynamicFields()).toHaveLength(2);
sectionFields.forEach((field, index) => {
expect(findAllDynamicFields().at(index).props('name')).toBe(field.name);
});
});
describe('events proxy from the section', () => {
let section;
const dummyPayload = 'foo';
beforeEach(() => {
section = findFieldsComponent();
});
it('toggle-integration-active', () => {
section.vm.$emit('toggle-integration-active', dummyPayload);
expect(wrapper.emitted('toggle-integration-active')).toEqual([[dummyPayload]]);
});
it('request-jira-issue-types', () => {
section.vm.$emit('request-jira-issue-types', dummyPayload);
expect(wrapper.emitted('request-jira-issue-types')).toEqual([[dummyPayload]]);
});
});
});
|
