124 lines
3.4 KiB
JavaScript
124 lines
3.4 KiB
JavaScript
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();
|
|
});
|
|
});
|