diff options
Diffstat (limited to 'spec/frontend/registry/settings/components/expiration_input_spec.js')
-rw-r--r-- | spec/frontend/registry/settings/components/expiration_input_spec.js | 169 |
1 files changed, 0 insertions, 169 deletions
diff --git a/spec/frontend/registry/settings/components/expiration_input_spec.js b/spec/frontend/registry/settings/components/expiration_input_spec.js deleted file mode 100644 index b91599a2789..00000000000 --- a/spec/frontend/registry/settings/components/expiration_input_spec.js +++ /dev/null @@ -1,169 +0,0 @@ -import { GlSprintf, GlFormInput, GlLink } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; -import { GlFormGroup } from 'jest/registry/shared/stubs'; -import component from '~/registry/settings/components/expiration_input.vue'; -import { NAME_REGEX_LENGTH } from '~/registry/settings/constants'; - -describe('ExpirationInput', () => { - let wrapper; - - const defaultProps = { - name: 'foo', - label: 'label-bar', - placeholder: 'placeholder-baz', - description: '%{linkStart}description-foo%{linkEnd}', - }; - - const tagsRegexHelpPagePath = 'fooPath'; - - const findInput = () => wrapper.find(GlFormInput); - const findFormGroup = () => wrapper.find(GlFormGroup); - const findLabel = () => wrapper.find('[data-testid="label"]'); - const findDescription = () => wrapper.find('[data-testid="description"]'); - const findDescriptionLink = () => wrapper.find(GlLink); - - const mountComponent = (props) => { - wrapper = shallowMount(component, { - stubs: { - GlSprintf, - GlFormGroup, - }, - provide: { - tagsRegexHelpPagePath, - }, - propsData: { - ...defaultProps, - ...props, - }, - }); - }; - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - describe('structure', () => { - it('has a label', () => { - mountComponent(); - - expect(findLabel().text()).toBe(defaultProps.label); - }); - - it('has a textarea component', () => { - mountComponent(); - - expect(findInput().exists()).toBe(true); - }); - - it('has a description', () => { - mountComponent(); - - expect(findDescription().text()).toMatchInterpolatedText(defaultProps.description); - }); - - it('has a description link', () => { - mountComponent(); - - const link = findDescriptionLink(); - expect(link.exists()).toBe(true); - expect(link.attributes('href')).toBe(tagsRegexHelpPagePath); - }); - }); - - describe('model', () => { - it('assigns the right props to the textarea component', () => { - const value = 'foobar'; - const disabled = true; - - mountComponent({ value, disabled }); - - expect(findInput().attributes()).toMatchObject({ - id: defaultProps.name, - value, - placeholder: defaultProps.placeholder, - disabled: `${disabled}`, - trim: '', - }); - }); - - it('emits input event when textarea emits input', () => { - const emittedValue = 'barfoo'; - - mountComponent(); - - findInput().vm.$emit('input', emittedValue); - expect(wrapper.emitted('input')).toEqual([[emittedValue]]); - }); - }); - - describe('regex textarea validation', () => { - const invalidString = new Array(NAME_REGEX_LENGTH + 2).join(','); - - describe('when error contains an error message', () => { - const errorMessage = 'something went wrong'; - - it('shows the error message on the relevant field', () => { - mountComponent({ error: errorMessage }); - - expect(findFormGroup().attributes('invalid-feedback')).toBe(errorMessage); - }); - - it('gives precedence to API errors compared to local ones', () => { - mountComponent({ - error: errorMessage, - value: invalidString, - }); - - expect(findFormGroup().attributes('invalid-feedback')).toBe(errorMessage); - }); - }); - - describe('when error is empty', () => { - describe('if the user did not type', () => { - it('validation is not emitted', () => { - mountComponent(); - - expect(wrapper.emitted('validation')).toBeUndefined(); - }); - - it('no error message is shown', () => { - mountComponent(); - - expect(findFormGroup().props('state')).toBe(true); - expect(findFormGroup().attributes('invalid-feedback')).toBe(''); - }); - }); - - describe('when the user typed something', () => { - describe(`when name regex is longer than ${NAME_REGEX_LENGTH}`, () => { - beforeEach(() => { - // since the component has no state we both emit the event and set the prop - mountComponent({ value: invalidString }); - - findInput().vm.$emit('input', invalidString); - }); - - it('textAreaValidation state is false', () => { - expect(findFormGroup().props('state')).toBe(false); - expect(findInput().attributes('state')).toBeUndefined(); - }); - - it('emits the @validation event with false payload', () => { - expect(wrapper.emitted('validation')).toEqual([[false]]); - }); - }); - - it(`when user input is less than ${NAME_REGEX_LENGTH} state is "true"`, () => { - mountComponent(); - - findInput().vm.$emit('input', 'foo'); - - expect(findFormGroup().props('state')).toBe(true); - expect(findInput().attributes('state')).toBe('true'); - expect(wrapper.emitted('validation')).toEqual([[true]]); - }); - }); - }); - }); -}); |