From 8c7f4e9d5f36cff46365a7f8c4b9c21578c1e781 Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Thu, 18 Jun 2020 11:18:50 +0000 Subject: Add latest changes from gitlab-org/gitlab@13-1-stable-ee --- .../edit/components/dynamic_field_spec.js | 179 +++++++++++++++++++++ .../edit/components/integration_form_spec.js | 21 +++ 2 files changed, 200 insertions(+) create mode 100644 spec/frontend/integrations/edit/components/dynamic_field_spec.js (limited to 'spec/frontend/integrations') diff --git a/spec/frontend/integrations/edit/components/dynamic_field_spec.js b/spec/frontend/integrations/edit/components/dynamic_field_spec.js new file mode 100644 index 00000000000..e5710641f81 --- /dev/null +++ b/spec/frontend/integrations/edit/components/dynamic_field_spec.js @@ -0,0 +1,179 @@ +import { mount } from '@vue/test-utils'; +import DynamicField from '~/integrations/edit/components/dynamic_field.vue'; +import { GlFormGroup, GlFormCheckbox, GlFormInput, GlFormSelect, GlFormTextarea } from '@gitlab/ui'; + +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', + }; + + const createComponent = props => { + wrapper = mount(DynamicField, { + propsData: { ...defaultProps, ...props }, + }); + }; + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } + }); + + const findGlFormGroup = () => wrapper.find(GlFormGroup); + const findGlFormCheckbox = () => wrapper.find(GlFormCheckbox); + const findGlFormInput = () => wrapper.find(GlFormInput); + const findGlFormSelect = () => wrapper.find(GlFormSelect); + const findGlFormTextarea = () => wrapper.find(GlFormTextarea); + + describe('template', () => { + describe('dynamic field', () => { + describe('type is checkbox', () => { + beforeEach(() => { + createComponent({ + type: 'checkbox', + }); + }); + + it('renders GlFormCheckbox', () => { + expect(findGlFormCheckbox().exists()).toBe(true); + }); + + it('does not render other types of input', () => { + expect(findGlFormSelect().exists()).toBe(false); + expect(findGlFormTextarea().exists()).toBe(false); + expect(findGlFormInput().exists()).toBe(false); + }); + }); + + describe('type is select', () => { + beforeEach(() => { + createComponent({ + type: 'select', + choices: [['all', 'All details'], ['standard', 'Standard']], + }); + }); + + it('renders findGlFormSelect', () => { + expect(findGlFormSelect().exists()).toBe(true); + expect(findGlFormSelect().findAll('option')).toHaveLength(2); + }); + + it('does not render other types of input', () => { + expect(findGlFormCheckbox().exists()).toBe(false); + expect(findGlFormTextarea().exists()).toBe(false); + expect(findGlFormInput().exists()).toBe(false); + }); + }); + + describe('type is textarea', () => { + beforeEach(() => { + createComponent({ + type: 'textarea', + }); + }); + + it('renders findGlFormTextarea', () => { + expect(findGlFormTextarea().exists()).toBe(true); + }); + + it('does not render other types of input', () => { + expect(findGlFormCheckbox().exists()).toBe(false); + expect(findGlFormSelect().exists()).toBe(false); + expect(findGlFormInput().exists()).toBe(false); + }); + }); + + describe('type is password', () => { + beforeEach(() => { + createComponent({ + type: 'password', + }); + }); + + it('renders GlFormInput', () => { + expect(findGlFormInput().exists()).toBe(true); + expect(findGlFormInput().attributes('type')).toBe('password'); + }); + + it('does not render other types of input', () => { + expect(findGlFormCheckbox().exists()).toBe(false); + expect(findGlFormSelect().exists()).toBe(false); + expect(findGlFormTextarea().exists()).toBe(false); + }); + }); + + describe('type is text', () => { + beforeEach(() => { + createComponent({ + type: 'text', + required: true, + }); + }); + + it('renders GlFormInput', () => { + expect(findGlFormInput().exists()).toBe(true); + expect(findGlFormInput().attributes()).toMatchObject({ + type: 'text', + id: 'service_project_url', + name: 'service[project_url]', + placeholder: defaultProps.placeholder, + required: 'required', + }); + }); + + it('does not render other types of input', () => { + expect(findGlFormCheckbox().exists()).toBe(false); + expect(findGlFormSelect().exists()).toBe(false); + expect(findGlFormTextarea().exists()).toBe(false); + }); + }); + }); + + describe('help text', () => { + it('renders description with help text', () => { + createComponent(); + + expect( + findGlFormGroup() + .find('small') + .text(), + ).toBe(defaultProps.help); + }); + }); + + describe('label text', () => { + it('renders label with title', () => { + createComponent(); + + expect( + findGlFormGroup() + .find('label') + .text(), + ).toBe(defaultProps.title); + }); + + describe('for password field with some value (hidden by backend)', () => { + it('renders label with new password title', () => { + createComponent({ + type: 'password', + value: 'true', + }); + + expect( + findGlFormGroup() + .find('label') + .text(), + ).toBe(`Enter new ${defaultProps.title}`); + }); + }); + }); + }); +}); diff --git a/spec/frontend/integrations/edit/components/integration_form_spec.js b/spec/frontend/integrations/edit/components/integration_form_spec.js index c93f63b11d0..b598a71cea8 100644 --- a/spec/frontend/integrations/edit/components/integration_form_spec.js +++ b/spec/frontend/integrations/edit/components/integration_form_spec.js @@ -3,6 +3,7 @@ import IntegrationForm from '~/integrations/edit/components/integration_form.vue import ActiveToggle from '~/integrations/edit/components/active_toggle.vue'; import JiraTriggerFields from '~/integrations/edit/components/jira_trigger_fields.vue'; import TriggerFields from '~/integrations/edit/components/trigger_fields.vue'; +import DynamicField from '~/integrations/edit/components/dynamic_field.vue'; describe('IntegrationForm', () => { let wrapper; @@ -95,5 +96,25 @@ describe('IntegrationForm', () => { expect(findTriggerFields().props('type')).toBe(type); }); }); + + describe('fields is present', () => { + it('renders DynamicField for each field', () => { + const fields = [ + { name: 'username', type: 'text' }, + { name: 'API token', type: 'password' }, + ]; + + createComponent({ + fields, + }); + + const dynamicFields = wrapper.findAll(DynamicField); + + expect(dynamicFields).toHaveLength(2); + dynamicFields.wrappers.forEach((field, index) => { + expect(field.props()).toMatchObject(fields[index]); + }); + }); + }); }); }); -- cgit v1.2.3