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
117
118
119
120
121
122
123
124
|
import { shallowMount } from '@vue/test-utils';
import { GlFormText } from '@gitlab/ui';
import IntegrationView from '~/profile/preferences/components/integration_view.vue';
import IntegrationHelpText from '~/vue_shared/components/integrations_help_text.vue';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
import { integrationViews, userFields } from '../mock_data';
const viewProps = convertObjectPropsToCamelCase(integrationViews[0]);
describe('IntegrationView component', () => {
let wrapper;
const defaultProps = {
config: {
title: 'Foo',
label: 'Enable foo',
formName: 'foo_enabled',
},
...viewProps,
};
function createComponent(options = {}) {
const { props = {}, provide = {} } = options;
return shallowMount(IntegrationView, {
provide: {
userFields,
...provide,
},
propsData: {
...defaultProps,
...props,
},
});
}
function findCheckbox() {
return wrapper.find('[data-testid="profile-preferences-integration-checkbox"]');
}
function findFormGroup() {
return wrapper.find('[data-testid="profile-preferences-integration-form-group"]');
}
function findHiddenField() {
return wrapper.find('[data-testid="profile-preferences-integration-hidden-field"]');
}
function findFormGroupLabel() {
return wrapper.find('[data-testid="profile-preferences-integration-form-group"] label');
}
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
it('should render the title correctly', () => {
wrapper = createComponent();
expect(wrapper.find('label.label-bold').text()).toBe('Foo');
});
it('should render the form correctly', () => {
wrapper = createComponent();
expect(findFormGroup().exists()).toBe(true);
expect(findHiddenField().exists()).toBe(true);
expect(findCheckbox().exists()).toBe(true);
expect(findCheckbox().attributes('id')).toBe('user_foo_enabled');
expect(findCheckbox().attributes('name')).toBe('user[foo_enabled]');
});
it('should have the checkbox value to be set to 1', () => {
wrapper = createComponent();
expect(findCheckbox().attributes('value')).toBe('1');
});
it('should have the hidden value to be set to 0', () => {
wrapper = createComponent();
expect(findHiddenField().attributes('value')).toBe('0');
});
it('should set the checkbox value to be true', () => {
wrapper = createComponent();
expect(findCheckbox().element.checked).toBe(true);
});
it('should set the checkbox value to be false when false is provided', () => {
wrapper = createComponent({
provide: {
userFields: {
foo_enabled: false,
},
},
});
expect(findCheckbox().element.checked).toBe(false);
});
it('should set the checkbox value to be false when not provided', () => {
wrapper = createComponent({ provide: { userFields: {} } });
expect(findCheckbox().element.checked).toBe(false);
});
it('should render the help text', () => {
wrapper = createComponent();
expect(wrapper.find(GlFormText).exists()).toBe(true);
expect(wrapper.find(IntegrationHelpText).exists()).toBe(true);
});
it('should render the label correctly', () => {
wrapper = createComponent();
expect(findFormGroupLabel().text()).toBe('Enable foo');
});
it('should render IntegrationView properly', () => {
wrapper = createComponent();
expect(wrapper.element).toMatchSnapshot();
});
});
|