debian-mirror-gitlab/spec/frontend/integrations/edit/components/dynamic_field_spec.js

230 lines
7.1 KiB
JavaScript
Raw Normal View History

2020-06-23 00:09:42 +05:30
import { GlFormGroup, GlFormCheckbox, GlFormInput, GlFormSelect, GlFormTextarea } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { mount } from '@vue/test-utils';
2021-09-04 01:27:46 +05:30
2020-10-24 23:57:45 +05:30
import DynamicField from '~/integrations/edit/components/dynamic_field.vue';
2020-06-23 00:09:42 +05:30
describe('DynamicField', () => {
let wrapper;
const defaultProps = {
help: 'The URL of the project',
name: 'project_url',
placeholder: 'https://jira.example.com',
title: 'Project URL',
type: 'text',
value: '1',
};
2020-07-28 23:09:34 +05:30
const createComponent = (props, isInheriting = false) => {
2020-06-23 00:09:42 +05:30
wrapper = mount(DynamicField, {
propsData: { ...defaultProps, ...props },
2020-07-28 23:09:34 +05:30
computed: {
isInheriting: () => isInheriting,
},
2020-06-23 00:09:42 +05:30
});
};
afterEach(() => {
2021-09-04 01:27:46 +05:30
wrapper.destroy();
2020-06-23 00:09:42 +05:30
});
2021-09-04 01:27:46 +05:30
const findGlFormGroup = () => wrapper.findComponent(GlFormGroup);
const findGlFormCheckbox = () => wrapper.findComponent(GlFormCheckbox);
const findGlFormInput = () => wrapper.findComponent(GlFormInput);
const findGlFormSelect = () => wrapper.findComponent(GlFormSelect);
const findGlFormTextarea = () => wrapper.findComponent(GlFormTextarea);
2020-06-23 00:09:42 +05:30
describe('template', () => {
2021-03-08 18:12:59 +05:30
describe.each([
[true, 'disabled', 'readonly'],
[false, undefined, undefined],
])('dynamic field, when isInheriting = `%p`', (isInheriting, disabled, readonly) => {
describe('type is checkbox', () => {
beforeEach(() => {
createComponent(
{
type: 'checkbox',
},
isInheriting,
);
});
2020-06-23 00:09:42 +05:30
2021-03-08 18:12:59 +05:30
it(`renders GlFormCheckbox, which ${isInheriting ? 'is' : 'is not'} disabled`, () => {
expect(findGlFormCheckbox().exists()).toBe(true);
expect(findGlFormCheckbox().find('[type=checkbox]').attributes('disabled')).toBe(
disabled,
);
2020-06-23 00:09:42 +05:30
});
2021-03-08 18:12:59 +05:30
it('does not render other types of input', () => {
expect(findGlFormSelect().exists()).toBe(false);
expect(findGlFormTextarea().exists()).toBe(false);
expect(findGlFormInput().exists()).toBe(false);
});
});
2020-06-23 00:09:42 +05:30
2021-03-08 18:12:59 +05:30
describe('type is select', () => {
beforeEach(() => {
createComponent(
{
type: 'select',
choices: [
['all', 'All details'],
['standard', 'Standard'],
],
},
isInheriting,
);
});
2020-06-23 00:09:42 +05:30
2021-03-08 18:12:59 +05:30
it(`renders GlFormSelect, which ${isInheriting ? 'is' : 'is not'} disabled`, () => {
expect(findGlFormSelect().exists()).toBe(true);
expect(findGlFormSelect().findAll('option')).toHaveLength(2);
expect(findGlFormSelect().find('select').attributes('disabled')).toBe(disabled);
2020-06-23 00:09:42 +05:30
});
2021-03-08 18:12:59 +05:30
it('does not render other types of input', () => {
expect(findGlFormCheckbox().exists()).toBe(false);
expect(findGlFormTextarea().exists()).toBe(false);
expect(findGlFormInput().exists()).toBe(false);
});
});
2020-06-23 00:09:42 +05:30
2021-03-08 18:12:59 +05:30
describe('type is textarea', () => {
beforeEach(() => {
createComponent(
{
type: 'textarea',
},
isInheriting,
);
});
2020-06-23 00:09:42 +05:30
2021-03-08 18:12:59 +05:30
it(`renders GlFormTextarea, which ${isInheriting ? 'is' : 'is not'} readonly`, () => {
expect(findGlFormTextarea().exists()).toBe(true);
expect(findGlFormTextarea().find('textarea').attributes('readonly')).toBe(readonly);
2020-06-23 00:09:42 +05:30
});
2021-03-08 18:12:59 +05:30
it('does not render other types of input', () => {
expect(findGlFormCheckbox().exists()).toBe(false);
expect(findGlFormSelect().exists()).toBe(false);
expect(findGlFormInput().exists()).toBe(false);
});
});
2020-06-23 00:09:42 +05:30
2021-03-08 18:12:59 +05:30
describe('type is password', () => {
beforeEach(() => {
createComponent(
{
type: 'password',
},
isInheriting,
);
});
2020-06-23 00:09:42 +05:30
2021-03-08 18:12:59 +05:30
it(`renders GlFormInput, which ${isInheriting ? 'is' : 'is not'} readonly`, () => {
expect(findGlFormInput().exists()).toBe(true);
expect(findGlFormInput().attributes('type')).toBe('password');
expect(findGlFormInput().attributes('readonly')).toBe(readonly);
2020-06-23 00:09:42 +05:30
});
2021-03-08 18:12:59 +05:30
it('does not render other types of input', () => {
expect(findGlFormCheckbox().exists()).toBe(false);
expect(findGlFormSelect().exists()).toBe(false);
expect(findGlFormTextarea().exists()).toBe(false);
});
});
2020-06-23 00:09:42 +05:30
2021-03-08 18:12:59 +05:30
describe('type is text', () => {
beforeEach(() => {
createComponent(
{
2020-07-28 23:09:34 +05:30
type: 'text',
2021-03-08 18:12:59 +05:30
required: true,
},
isInheriting,
);
});
2020-06-23 00:09:42 +05:30
2021-03-08 18:12:59 +05:30
it(`renders GlFormInput, which ${isInheriting ? 'is' : 'is not'} readonly`, () => {
expect(findGlFormInput().exists()).toBe(true);
expect(findGlFormInput().attributes()).toMatchObject({
type: 'text',
id: 'service_project_url',
name: 'service[project_url]',
placeholder: defaultProps.placeholder,
required: 'required',
2020-07-28 23:09:34 +05:30
});
2021-03-08 18:12:59 +05:30
expect(findGlFormInput().attributes('readonly')).toBe(readonly);
2020-06-23 00:09:42 +05:30
});
2021-03-08 18:12:59 +05:30
it('does not render other types of input', () => {
expect(findGlFormCheckbox().exists()).toBe(false);
expect(findGlFormSelect().exists()).toBe(false);
expect(findGlFormTextarea().exists()).toBe(false);
});
});
});
2020-06-23 00:09:42 +05:30
describe('help text', () => {
it('renders description with help text', () => {
createComponent();
2021-03-08 18:12:59 +05:30
expect(findGlFormGroup().find('small').text()).toBe(defaultProps.help);
2020-06-23 00:09:42 +05:30
});
2020-07-28 23:09:34 +05:30
it('renders description with help text as HTML', () => {
const helpHTML = 'The <strong>URL</strong> of the project';
createComponent({
help: helpHTML,
});
2021-03-08 18:12:59 +05:30
expect(findGlFormGroup().find('small').html()).toContain(helpHTML);
2020-07-28 23:09:34 +05:30
});
2020-06-23 00:09:42 +05:30
});
describe('label text', () => {
it('renders label with title', () => {
createComponent();
2021-03-08 18:12:59 +05:30
expect(findGlFormGroup().find('label').text()).toBe(defaultProps.title);
2020-06-23 00:09:42 +05:30
});
});
2020-07-28 23:09:34 +05:30
describe('validations', () => {
describe('password field', () => {
beforeEach(() => {
createComponent({
type: 'password',
required: true,
value: null,
});
wrapper.vm.validated = true;
});
describe('without value', () => {
it('requires validation', () => {
expect(wrapper.vm.valid).toBe(false);
expect(findGlFormGroup().classes('is-invalid')).toBe(true);
expect(findGlFormInput().classes('is-invalid')).toBe(true);
});
});
describe('with value', () => {
beforeEach(() => {
wrapper.setProps({ value: 'true' });
});
it('does not require validation', () => {
expect(wrapper.vm.valid).toBe(true);
expect(findGlFormGroup().classes('is-valid')).toBe(true);
expect(findGlFormInput().classes('is-valid')).toBe(true);
});
});
});
});
2020-06-23 00:09:42 +05:30
});
});