diff options
Diffstat (limited to 'spec/frontend/organizations/shared/components/new_edit_form_spec.js')
-rw-r--r-- | spec/frontend/organizations/shared/components/new_edit_form_spec.js | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/spec/frontend/organizations/shared/components/new_edit_form_spec.js b/spec/frontend/organizations/shared/components/new_edit_form_spec.js index 43c099fbb1c..93f022a3259 100644 --- a/spec/frontend/organizations/shared/components/new_edit_form_spec.js +++ b/spec/frontend/organizations/shared/components/new_edit_form_spec.js @@ -1,6 +1,7 @@ import { GlButton, GlInputGroupText, GlTruncate } from '@gitlab/ui'; import NewEditForm from '~/organizations/shared/components/new_edit_form.vue'; +import { FORM_FIELD_NAME, FORM_FIELD_ID, FORM_FIELD_PATH } from '~/organizations/shared/constants'; import { mountExtended } from 'helpers/vue_test_utils_helper'; describe('NewEditForm', () => { @@ -27,6 +28,7 @@ describe('NewEditForm', () => { }; const findNameField = () => wrapper.findByLabelText('Organization name'); + const findIdField = () => wrapper.findByLabelText('Organization ID'); const findUrlField = () => wrapper.findByLabelText('Organization URL'); const submitForm = async () => { await wrapper.findByRole('button', { name: 'Create organization' }).trigger('click'); @@ -47,6 +49,56 @@ describe('NewEditForm', () => { expect(findUrlField().exists()).toBe(true); }); + it('requires `Organization URL` field to be a minimum of two characters', async () => { + createComponent(); + + await findUrlField().setValue('f'); + await submitForm(); + + expect( + wrapper.findByText('Organization URL must be a minimum of two characters.').exists(), + ).toBe(true); + }); + + describe('when `fieldsToRender` prop is set', () => { + beforeEach(() => { + createComponent({ propsData: { fieldsToRender: [FORM_FIELD_ID] } }); + }); + + it('only renders provided fields', () => { + expect(findNameField().exists()).toBe(false); + expect(findIdField().exists()).toBe(true); + expect(findUrlField().exists()).toBe(false); + }); + }); + + describe('when `initialFormValues` prop is set', () => { + beforeEach(() => { + createComponent({ + propsData: { + fieldsToRender: [FORM_FIELD_NAME, FORM_FIELD_ID, FORM_FIELD_PATH], + initialFormValues: { + [FORM_FIELD_NAME]: 'Foo bar', + [FORM_FIELD_ID]: 1, + [FORM_FIELD_PATH]: 'foo-bar', + }, + }, + }); + }); + + it('sets initial values for fields', () => { + expect(findNameField().element.value).toBe('Foo bar'); + expect(findIdField().element.value).toBe('1'); + expect(findUrlField().element.value).toBe('foo-bar'); + }); + }); + + it('renders `Organization ID` field as disabled', () => { + createComponent({ propsData: { fieldsToRender: [FORM_FIELD_ID] } }); + + expect(findIdField().attributes('disabled')).toBe('disabled'); + }); + describe('when form is submitted without filling in required fields', () => { beforeEach(async () => { createComponent(); @@ -100,6 +152,30 @@ describe('NewEditForm', () => { }); }); + describe('when `Organization URL` field is not rendered', () => { + beforeEach(async () => { + createComponent({ + propsData: { + fieldsToRender: [FORM_FIELD_NAME, FORM_FIELD_ID], + initialFormValues: { + [FORM_FIELD_NAME]: 'Foo bar', + [FORM_FIELD_ID]: 1, + [FORM_FIELD_PATH]: 'foo-bar', + }, + }, + }); + + await findNameField().setValue('Foo bar baz'); + await submitForm(); + }); + + it('does not modify `Organization URL` when typing in `Organization name`', () => { + expect(wrapper.emitted('submit')).toEqual([ + [{ name: 'Foo bar baz', id: 1, path: 'foo-bar' }], + ]); + }); + }); + describe('when `loading` prop is `true`', () => { beforeEach(() => { createComponent({ propsData: { loading: true } }); @@ -109,4 +185,46 @@ describe('NewEditForm', () => { expect(wrapper.findComponent(GlButton).props('loading')).toBe(true); }); }); + + describe('when `showCancelButton` prop is `false`', () => { + beforeEach(() => { + createComponent({ propsData: { showCancelButton: false } }); + }); + + it('does not show cancel button', () => { + expect(wrapper.findByRole('link', { name: 'Cancel' }).exists()).toBe(false); + }); + }); + + describe('when `showCancelButton` prop is `true`', () => { + beforeEach(() => { + createComponent(); + }); + + it('shows cancel button', () => { + expect(wrapper.findByRole('link', { name: 'Cancel' }).attributes('href')).toBe( + defaultProvide.organizationsPath, + ); + }); + }); + + describe('when `submitButtonText` prop is not set', () => { + beforeEach(() => { + createComponent(); + }); + + it('defaults to `Create organization`', () => { + expect(wrapper.findByRole('button', { name: 'Create organization' }).exists()).toBe(true); + }); + }); + + describe('when `submitButtonText` prop is set', () => { + beforeEach(() => { + createComponent({ propsData: { submitButtonText: 'Save changes' } }); + }); + + it('uses it for submit button', () => { + expect(wrapper.findByRole('button', { name: 'Save changes' }).exists()).toBe(true); + }); + }); }); |