diff options
Diffstat (limited to 'spec/frontend/packages_and_registries/settings/group/components')
8 files changed, 188 insertions, 341 deletions
diff --git a/spec/frontend/packages_and_registries/settings/group/components/__snapshots__/settings_titles_spec.js.snap b/spec/frontend/packages_and_registries/settings/group/components/__snapshots__/settings_titles_spec.js.snap deleted file mode 100644 index 5b56cb7f74e..00000000000 --- a/spec/frontend/packages_and_registries/settings/group/components/__snapshots__/settings_titles_spec.js.snap +++ /dev/null @@ -1,18 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`settings_titles renders properly 1`] = ` -<div> - <h5 - class="gl-border-b-solid gl-border-b-1 gl-border-gray-200 gl-pb-3" - > - - foo - - </h5> - - <p> - bar - </p> - -</div> -`; diff --git a/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js index 9d4c7f4737b..796d89231f4 100644 --- a/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js +++ b/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js @@ -169,7 +169,7 @@ describe('DependencyProxySettings', () => { toggleName | toggleFinder | localErrorMock | optimisticResponse ${'enable proxy'} | ${findEnableProxyToggle} | ${dependencyProxySettingMutationMock} | ${updateGroupDependencyProxySettingsOptimisticResponse} ${'enable ttl policies'} | ${findEnableTtlPoliciesToggle} | ${dependencyProxyUpdateTllPolicyMutationMock} | ${updateDependencyProxyImageTtlGroupPolicyOptimisticResponse} - `('$toggleName settings update ', ({ optimisticResponse, toggleFinder, localErrorMock }) => { + `('$toggleName settings update', ({ optimisticResponse, toggleFinder, localErrorMock }) => { describe('success state', () => { it('emits a success event', async () => { mountComponent(); diff --git a/spec/frontend/packages_and_registries/settings/group/components/duplicates_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/duplicates_settings_spec.js deleted file mode 100644 index 3eecdeb5b1f..00000000000 --- a/spec/frontend/packages_and_registries/settings/group/components/duplicates_settings_spec.js +++ /dev/null @@ -1,143 +0,0 @@ -import { GlSprintf, GlToggle, GlFormGroup, GlFormInput } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; -import component from '~/packages_and_registries/settings/group/components/duplicates_settings.vue'; - -import { - DUPLICATES_TOGGLE_LABEL, - DUPLICATES_SETTING_EXCEPTION_TITLE, - DUPLICATES_SETTINGS_EXCEPTION_LEGEND, -} from '~/packages_and_registries/settings/group/constants'; - -describe('Duplicates Settings', () => { - let wrapper; - - const defaultProps = { - duplicatesAllowed: false, - duplicateExceptionRegex: 'foo', - modelNames: { - allowed: 'allowedModel', - exception: 'exceptionModel', - }, - }; - - const mountComponent = (propsData = defaultProps) => { - wrapper = shallowMount(component, { - propsData, - stubs: { - GlSprintf, - }, - }); - }; - - afterEach(() => { - wrapper.destroy(); - }); - - const findToggle = () => wrapper.findComponent(GlToggle); - - const findInputGroup = () => wrapper.findComponent(GlFormGroup); - const findInput = () => wrapper.findComponent(GlFormInput); - - it('has a toggle', () => { - mountComponent(); - - expect(findToggle().exists()).toBe(true); - expect(findToggle().props()).toMatchObject({ - label: DUPLICATES_TOGGLE_LABEL, - value: !defaultProps.duplicatesAllowed, - }); - }); - - it('toggle emits an update event', () => { - mountComponent(); - - findToggle().vm.$emit('change', false); - - expect(wrapper.emitted('update')).toStrictEqual([ - [{ [defaultProps.modelNames.allowed]: true }], - ]); - }); - - describe('when the duplicates are disabled', () => { - it('shows a form group with an input field', () => { - mountComponent(); - - expect(findInputGroup().exists()).toBe(true); - - expect(findInputGroup().attributes()).toMatchObject({ - 'label-for': 'maven-duplicated-settings-regex-input', - label: DUPLICATES_SETTING_EXCEPTION_TITLE, - description: DUPLICATES_SETTINGS_EXCEPTION_LEGEND, - }); - }); - - it('shows an input field', () => { - mountComponent(); - - expect(findInput().exists()).toBe(true); - - expect(findInput().attributes()).toMatchObject({ - id: 'maven-duplicated-settings-regex-input', - value: defaultProps.duplicateExceptionRegex, - }); - }); - - it('input change event emits an update event', () => { - mountComponent(); - - findInput().vm.$emit('change', 'bar'); - - expect(wrapper.emitted('update')).toStrictEqual([ - [{ [defaultProps.modelNames.exception]: 'bar' }], - ]); - }); - - describe('valid state', () => { - it('form group has correct props', () => { - mountComponent(); - - expect(findInputGroup().attributes()).toMatchObject({ - state: 'true', - 'invalid-feedback': '', - }); - }); - }); - - describe('invalid state', () => { - it('form group has correct props', () => { - const propsWithError = { - ...defaultProps, - duplicateExceptionRegexError: 'some error string', - }; - - mountComponent(propsWithError); - - expect(findInputGroup().attributes()).toMatchObject({ - 'invalid-feedback': propsWithError.duplicateExceptionRegexError, - }); - }); - }); - }); - - describe('when the duplicates are enabled', () => { - it('hides the form input group', () => { - mountComponent({ ...defaultProps, duplicatesAllowed: true }); - - expect(findInputGroup().exists()).toBe(false); - }); - }); - - describe('loading', () => { - beforeEach(() => { - mountComponent({ ...defaultProps, loading: true }); - }); - - it('disables the enable toggle', () => { - expect(findToggle().props('disabled')).toBe(true); - }); - - it('disables the form input', () => { - expect(findInput().attributes('disabled')).toBe('true'); - }); - }); -}); diff --git a/spec/frontend/packages_and_registries/settings/group/components/exceptions_input_spec.js b/spec/frontend/packages_and_registries/settings/group/components/exceptions_input_spec.js new file mode 100644 index 00000000000..86f14961690 --- /dev/null +++ b/spec/frontend/packages_and_registries/settings/group/components/exceptions_input_spec.js @@ -0,0 +1,108 @@ +import { GlSprintf, GlFormGroup, GlFormInput } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import component from '~/packages_and_registries/settings/group/components/exceptions_input.vue'; + +import { DUPLICATES_SETTING_EXCEPTION_TITLE } from '~/packages_and_registries/settings/group/constants'; + +describe('Exceptions Input', () => { + let wrapper; + + const defaultProps = { + duplicatesAllowed: false, + duplicateExceptionRegex: 'foo', + id: 'maven-duplicated-settings-regex-input', + name: 'exceptionModel', + }; + + const mountComponent = (propsData = defaultProps) => { + wrapper = shallowMount(component, { + propsData, + stubs: { + GlSprintf, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + const findInputGroup = () => wrapper.findComponent(GlFormGroup); + const findInput = () => wrapper.findComponent(GlFormInput); + + it('shows a form group with an input field', () => { + mountComponent(); + + expect(findInputGroup().exists()).toBe(true); + + expect(findInputGroup().attributes()).toMatchObject({ + 'label-for': defaultProps.id, + label: DUPLICATES_SETTING_EXCEPTION_TITLE, + 'label-sr-only': '', + }); + }); + + it('shows an input field', () => { + mountComponent(); + + expect(findInput().exists()).toBe(true); + + expect(findInput().attributes()).toMatchObject({ + id: 'maven-duplicated-settings-regex-input', + value: defaultProps.duplicateExceptionRegex, + }); + }); + + it('input change event emits an update event', () => { + mountComponent(); + + findInput().vm.$emit('change', 'bar'); + + expect(wrapper.emitted('update')).toStrictEqual([[{ [defaultProps.name]: 'bar' }]]); + }); + + describe('valid state', () => { + beforeEach(() => { + mountComponent(); + }); + + it('form group has correct props', () => { + expect(findInputGroup().attributes('input-feedback')).toBeUndefined(); + }); + + it('form input has correct props', () => { + expect(findInput().attributes('state')).toBe('true'); + }); + }); + + describe('invalid state', () => { + const propsWithError = { + ...defaultProps, + duplicateExceptionRegexError: 'some error string', + }; + + beforeEach(() => { + mountComponent(propsWithError); + }); + + it('form group has correct props', () => { + expect(findInputGroup().attributes('invalid-feedback')).toBe( + propsWithError.duplicateExceptionRegexError, + ); + }); + + it('form input has correct props', () => { + expect(findInput().attributes('state')).toBeUndefined(); + }); + }); + + describe('loading', () => { + beforeEach(() => { + mountComponent({ ...defaultProps, loading: true }); + }); + + it('disables the form input', () => { + expect(findInput().attributes('disabled')).toBe('true'); + }); + }); +}); diff --git a/spec/frontend/packages_and_registries/settings/group/components/generic_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/generic_settings_spec.js deleted file mode 100644 index 4eafeedd55e..00000000000 --- a/spec/frontend/packages_and_registries/settings/group/components/generic_settings_spec.js +++ /dev/null @@ -1,54 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import GenericSettings from '~/packages_and_registries/settings/group/components/generic_settings.vue'; -import SettingsTitles from '~/packages_and_registries/settings/group/components/settings_titles.vue'; - -describe('generic_settings', () => { - let wrapper; - - const mountComponent = () => { - wrapper = shallowMount(GenericSettings, { - scopedSlots: { - default: '<div data-testid="default-slot">{{props.modelNames}}</div>', - }, - }); - }; - - const findSettingsTitle = () => wrapper.findComponent(SettingsTitles); - const findDefaultSlot = () => wrapper.find('[data-testid="default-slot"]'); - - afterEach(() => { - wrapper.destroy(); - }); - - describe('title component', () => { - it('has a title component', () => { - mountComponent(); - - expect(findSettingsTitle().exists()).toBe(true); - }); - - it('passes the correct props', () => { - mountComponent(); - - expect(findSettingsTitle().props()).toMatchObject({ - title: 'Generic', - subTitle: 'Settings for Generic packages', - }); - }); - }); - - describe('default slot', () => { - it('accept a default slots', () => { - mountComponent(); - - expect(findDefaultSlot().exists()).toBe(true); - }); - - it('binds model names', () => { - mountComponent(); - - expect(findDefaultSlot().text()).toContain('genericDuplicatesAllowed'); - expect(findDefaultSlot().text()).toContain('genericDuplicateExceptionRegex'); - }); - }); -}); diff --git a/spec/frontend/packages_and_registries/settings/group/components/maven_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/maven_settings_spec.js deleted file mode 100644 index 22644b97b43..00000000000 --- a/spec/frontend/packages_and_registries/settings/group/components/maven_settings_spec.js +++ /dev/null @@ -1,54 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import MavenSettings from '~/packages_and_registries/settings/group/components/maven_settings.vue'; -import SettingsTitles from '~/packages_and_registries/settings/group/components/settings_titles.vue'; - -describe('maven_settings', () => { - let wrapper; - - const mountComponent = () => { - wrapper = shallowMount(MavenSettings, { - scopedSlots: { - default: '<div data-testid="default-slot">{{props.modelNames}}</div>', - }, - }); - }; - - const findSettingsTitle = () => wrapper.findComponent(SettingsTitles); - const findDefaultSlot = () => wrapper.find('[data-testid="default-slot"]'); - - afterEach(() => { - wrapper.destroy(); - }); - - describe('title component', () => { - it('has a title component', () => { - mountComponent(); - - expect(findSettingsTitle().exists()).toBe(true); - }); - - it('passes the correct props', () => { - mountComponent(); - - expect(findSettingsTitle().props()).toMatchObject({ - title: 'Maven', - subTitle: 'Settings for Maven packages', - }); - }); - }); - - describe('default slot', () => { - it('accept a default slots', () => { - mountComponent(); - - expect(findDefaultSlot().exists()).toBe(true); - }); - - it('binds model names', () => { - mountComponent(); - - expect(findDefaultSlot().text()).toContain('mavenDuplicatesAllowed'); - expect(findDefaultSlot().text()).toContain('mavenDuplicateExceptionRegex'); - }); - }); -}); diff --git a/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js index 274930ce668..13eba39ec8c 100644 --- a/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js +++ b/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js @@ -1,13 +1,13 @@ import Vue, { nextTick } from 'vue'; +import { GlToggle } from '@gitlab/ui'; import VueApollo from 'vue-apollo'; -import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; -import DuplicatesSettings from '~/packages_and_registries/settings/group/components/duplicates_settings.vue'; -import GenericSettings from '~/packages_and_registries/settings/group/components/generic_settings.vue'; +import ExceptionsInput from '~/packages_and_registries/settings/group/components/exceptions_input.vue'; import component from '~/packages_and_registries/settings/group/components/packages_settings.vue'; -import MavenSettings from '~/packages_and_registries/settings/group/components/maven_settings.vue'; import { + DUPLICATES_TOGGLE_LABEL, PACKAGE_SETTINGS_HEADER, PACKAGE_SETTINGS_DESCRIPTION, } from '~/packages_and_registries/settings/group/constants'; @@ -35,6 +35,7 @@ describe('Packages Settings', () => { }; const mountComponent = ({ + mountFn = shallowMountExtended, mutationResolver = jest.fn().mockResolvedValue(groupPackageSettingsMutationMock()), } = {}) => { Vue.use(VueApollo); @@ -43,7 +44,7 @@ describe('Packages Settings', () => { apolloProvider = createMockApollo(requestHandlers); - wrapper = shallowMountExtended(component, { + wrapper = mountFn(component, { apolloProvider, provide: defaultProvide, propsData: { @@ -51,8 +52,6 @@ describe('Packages Settings', () => { }, stubs: { SettingsBlock, - MavenSettings, - GenericSettings, }, }); }; @@ -63,11 +62,15 @@ describe('Packages Settings', () => { const findSettingsBlock = () => wrapper.findComponent(SettingsBlock); const findDescription = () => wrapper.findByTestId('description'); - const findMavenSettings = () => wrapper.findComponent(MavenSettings); - const findMavenDuplicatedSettings = () => findMavenSettings().findComponent(DuplicatesSettings); - const findGenericSettings = () => wrapper.findComponent(GenericSettings); - const findGenericDuplicatedSettings = () => - findGenericSettings().findComponent(DuplicatesSettings); + const findMavenSettings = () => wrapper.findByTestId('maven-settings'); + const findGenericSettings = () => wrapper.findByTestId('generic-settings'); + + const findMavenDuplicatedSettingsToggle = () => findMavenSettings().findComponent(GlToggle); + const findGenericDuplicatedSettingsToggle = () => findGenericSettings().findComponent(GlToggle); + const findMavenDuplicatedSettingsExceptionsInput = () => + findMavenSettings().findComponent(ExceptionsInput); + const findGenericDuplicatedSettingsExceptionsInput = () => + findGenericSettings().findComponent(ExceptionsInput); const fillApolloCache = () => { apolloProvider.defaultClient.cache.writeQuery({ @@ -80,7 +83,7 @@ describe('Packages Settings', () => { }; const emitMavenSettingsUpdate = (override) => { - findMavenDuplicatedSettings().vm.$emit('update', { + findGenericDuplicatedSettingsExceptionsInput().vm.$emit('update', { mavenDuplicateExceptionRegex: ')', ...override, }); @@ -106,27 +109,46 @@ describe('Packages Settings', () => { describe('maven settings', () => { it('exists', () => { - mountComponent(); + mountComponent({ mountFn: mountExtended }); + + expect(findMavenSettings().find('td').text()).toBe('Maven'); + }); + + it('renders toggle', () => { + mountComponent({ mountFn: mountExtended }); - expect(findMavenSettings().exists()).toBe(true); + const { mavenDuplicatesAllowed } = packageSettings(); + + expect(findMavenDuplicatedSettingsToggle().exists()).toBe(true); + + expect(findMavenDuplicatedSettingsToggle().props()).toMatchObject({ + label: DUPLICATES_TOGGLE_LABEL, + value: mavenDuplicatesAllowed, + disabled: false, + labelPosition: 'hidden', + }); }); - it('assigns duplication allowness and exception props', async () => { - mountComponent(); + it('renders ExceptionsInput and assigns duplication allowness and exception props', () => { + mountComponent({ mountFn: mountExtended }); const { mavenDuplicatesAllowed, mavenDuplicateExceptionRegex } = packageSettings(); - expect(findMavenDuplicatedSettings().props()).toMatchObject({ + expect(findMavenDuplicatedSettingsExceptionsInput().exists()).toBe(true); + + expect(findMavenDuplicatedSettingsExceptionsInput().props()).toMatchObject({ duplicatesAllowed: mavenDuplicatesAllowed, duplicateExceptionRegex: mavenDuplicateExceptionRegex, duplicateExceptionRegexError: '', loading: false, + name: 'mavenDuplicateExceptionRegex', + id: 'maven-duplicated-settings-regex-input', }); }); it('on update event calls the mutation', () => { const mutationResolver = jest.fn().mockResolvedValue(groupPackageSettingsMutationMock()); - mountComponent({ mutationResolver }); + mountComponent({ mountFn: mountExtended, mutationResolver }); fillApolloCache(); @@ -140,31 +162,47 @@ describe('Packages Settings', () => { describe('generic settings', () => { it('exists', () => { - mountComponent(); + mountComponent({ mountFn: mountExtended }); - expect(findGenericSettings().exists()).toBe(true); + expect(findGenericSettings().find('td').text()).toBe('Generic'); }); - it('assigns duplication allowness and exception props', async () => { - mountComponent(); + it('renders toggle', () => { + mountComponent({ mountFn: mountExtended }); + + const { genericDuplicatesAllowed } = packageSettings(); + + expect(findGenericDuplicatedSettingsToggle().exists()).toBe(true); + expect(findGenericDuplicatedSettingsToggle().props()).toMatchObject({ + label: DUPLICATES_TOGGLE_LABEL, + value: genericDuplicatesAllowed, + disabled: false, + labelPosition: 'hidden', + }); + }); + + it('renders ExceptionsInput and assigns duplication allowness and exception props', async () => { + mountComponent({ mountFn: mountExtended }); const { genericDuplicatesAllowed, genericDuplicateExceptionRegex } = packageSettings(); - expect(findGenericDuplicatedSettings().props()).toMatchObject({ + expect(findGenericDuplicatedSettingsExceptionsInput().props()).toMatchObject({ duplicatesAllowed: genericDuplicatesAllowed, duplicateExceptionRegex: genericDuplicateExceptionRegex, duplicateExceptionRegexError: '', loading: false, + name: 'genericDuplicateExceptionRegex', + id: 'generic-duplicated-settings-regex-input', }); }); it('on update event calls the mutation', async () => { const mutationResolver = jest.fn().mockResolvedValue(groupPackageSettingsMutationMock()); - mountComponent({ mutationResolver }); + mountComponent({ mountFn: mountExtended, mutationResolver }); fillApolloCache(); - findMavenDuplicatedSettings().vm.$emit('update', { + findGenericDuplicatedSettingsExceptionsInput().vm.$emit('update', { genericDuplicateExceptionRegex: ')', }); @@ -176,9 +214,11 @@ describe('Packages Settings', () => { describe('settings update', () => { describe('success state', () => { - it('emits a success event', async () => { - mountComponent(); + beforeEach(() => { + mountComponent({ mountFn: mountExtended }); + }); + it('emits a success event', async () => { fillApolloCache(); emitMavenSettingsUpdate(); @@ -189,11 +229,12 @@ describe('Packages Settings', () => { it('has an optimistic response', () => { const mavenDuplicateExceptionRegex = 'latest[main]something'; - mountComponent(); fillApolloCache(); - expect(findMavenDuplicatedSettings().props('duplicateExceptionRegex')).toBe(''); + expect( + findGenericDuplicatedSettingsExceptionsInput().props('duplicateExceptionRegex'), + ).toBe(''); emitMavenSettingsUpdate({ mavenDuplicateExceptionRegex }); @@ -209,7 +250,7 @@ describe('Packages Settings', () => { // note this is a complex test that covers all the path around errors that are shown in the form // it's one single it case, due to the expensive preparation and execution const mutationResolver = jest.fn().mockResolvedValue(groupPackageSettingsMutationErrorMock); - mountComponent({ mutationResolver }); + mountComponent({ mountFn: mountExtended, mutationResolver }); fillApolloCache(); @@ -218,9 +259,9 @@ describe('Packages Settings', () => { await waitForPromises(); // errors are bound to the component - expect(findMavenDuplicatedSettings().props('duplicateExceptionRegexError')).toBe( - groupPackageSettingsMutationErrorMock.errors[0].extensions.problems[0].message, - ); + expect( + findMavenDuplicatedSettingsExceptionsInput().props('duplicateExceptionRegexError'), + ).toBe(groupPackageSettingsMutationErrorMock.errors[0].extensions.problems[0].message); // general error message is shown @@ -231,7 +272,9 @@ describe('Packages Settings', () => { await nextTick(); // errors are reset on mutation call - expect(findMavenDuplicatedSettings().props('duplicateExceptionRegexError')).toBe(''); + expect( + findMavenDuplicatedSettingsExceptionsInput().props('duplicateExceptionRegexError'), + ).toBe(''); }); it.each` @@ -239,7 +282,7 @@ describe('Packages Settings', () => { ${'local'} | ${jest.fn().mockResolvedValue(groupPackageSettingsMutationMock({ errors: ['foo'] }))} ${'network'} | ${jest.fn().mockRejectedValue()} `('mutation payload with $type error', async ({ mutationResolver }) => { - mountComponent({ mutationResolver }); + mountComponent({ mountFn: mountExtended, mutationResolver }); fillApolloCache(); emitMavenSettingsUpdate(); diff --git a/spec/frontend/packages_and_registries/settings/group/components/settings_titles_spec.js b/spec/frontend/packages_and_registries/settings/group/components/settings_titles_spec.js deleted file mode 100644 index fcfad4b42b8..00000000000 --- a/spec/frontend/packages_and_registries/settings/group/components/settings_titles_spec.js +++ /dev/null @@ -1,35 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import SettingsTitles from '~/packages_and_registries/settings/group/components/settings_titles.vue'; - -describe('settings_titles', () => { - let wrapper; - - const defaultProps = { - title: 'foo', - subTitle: 'bar', - }; - - const mountComponent = (propsData = defaultProps) => { - wrapper = shallowMount(SettingsTitles, { - propsData, - }); - }; - - const findSubTitle = () => wrapper.find('p'); - - afterEach(() => { - wrapper.destroy(); - }); - - it('renders properly', () => { - mountComponent(); - - expect(wrapper.element).toMatchSnapshot(); - }); - - it('does not render the subtitle paragraph when no subtitle is passed', () => { - mountComponent({ title: defaultProps.title }); - - expect(findSubTitle().exists()).toBe(false); - }); -}); |