diff options
Diffstat (limited to 'spec/frontend/packages_and_registries/settings/group')
7 files changed, 251 insertions, 58 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 index f2087733d2b..5b56cb7f74e 100644 --- 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 @@ -3,7 +3,7 @@ exports[`settings_titles renders properly 1`] = ` <div> <h5 - class="gl-border-b-solid gl-border-b-1 gl-border-gray-200" + class="gl-border-b-solid gl-border-b-1 gl-border-gray-200 gl-pb-3" > foo 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 d3a970e86eb..f6c1d212b51 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 @@ -1,6 +1,7 @@ -import { GlSprintf, GlLink, GlToggle } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { GlSprintf, GlToggle } from '@gitlab/ui'; +import { createLocalVue } from '@vue/test-utils'; import VueApollo from 'vue-apollo'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; @@ -12,14 +13,21 @@ import { } from '~/packages_and_registries/settings/group/constants'; import updateDependencyProxySettings from '~/packages_and_registries/settings/group/graphql/mutations/update_dependency_proxy_settings.mutation.graphql'; +import updateDependencyProxyImageTtlGroupPolicy from '~/packages_and_registries/settings/group/graphql/mutations/update_dependency_proxy_image_ttl_group_policy.mutation.graphql'; import getGroupPackagesSettingsQuery from '~/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.graphql'; import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue'; -import { updateGroupDependencyProxySettingsOptimisticResponse } from '~/packages_and_registries/settings/group/graphql/utils/optimistic_responses'; +import SettingsTitles from '~/packages_and_registries/settings/group/components/settings_titles.vue'; import { - dependencyProxySettings, + updateGroupDependencyProxySettingsOptimisticResponse, + updateDependencyProxyImageTtlGroupPolicyOptimisticResponse, +} from '~/packages_and_registries/settings/group/graphql/utils/optimistic_responses'; +import { + dependencyProxySettings as dependencyProxySettingsMock, + dependencyProxyImageTtlPolicy as dependencyProxyImageTtlPolicyMock, dependencyProxySettingMutationMock, groupPackageSettingsMock, - dependencyProxySettingMutationErrorMock, + mutationErrorMock, + dependencyProxyUpdateTllPolicyMutationMock, } from '../mock_data'; jest.mock('~/flash'); @@ -30,46 +38,68 @@ const localVue = createLocalVue(); describe('DependencyProxySettings', () => { let wrapper; let apolloProvider; + let updateSettingsMutationResolver; + let updateTtlPoliciesMutationResolver; const defaultProvide = { defaultExpanded: false, groupPath: 'foo_group_path', + groupDependencyProxyPath: 'group_dependency_proxy_path', }; localVue.use(VueApollo); const mountComponent = ({ provide = defaultProvide, - mutationResolver = jest.fn().mockResolvedValue(dependencyProxySettingMutationMock()), isLoading = false, + dependencyProxySettings = dependencyProxySettingsMock(), + dependencyProxyImageTtlPolicy = dependencyProxyImageTtlPolicyMock(), } = {}) => { - const requestHandlers = [[updateDependencyProxySettings, mutationResolver]]; + const requestHandlers = [ + [updateDependencyProxySettings, updateSettingsMutationResolver], + [updateDependencyProxyImageTtlGroupPolicy, updateTtlPoliciesMutationResolver], + ]; apolloProvider = createMockApollo(requestHandlers); - wrapper = shallowMount(component, { + wrapper = shallowMountExtended(component, { localVue, apolloProvider, provide, propsData: { - dependencyProxySettings: dependencyProxySettings(), + dependencyProxySettings, + dependencyProxyImageTtlPolicy, isLoading, }, stubs: { GlSprintf, + GlToggle, SettingsBlock, }, }); }; + beforeEach(() => { + updateSettingsMutationResolver = jest + .fn() + .mockResolvedValue(dependencyProxySettingMutationMock()); + updateTtlPoliciesMutationResolver = jest + .fn() + .mockResolvedValue(dependencyProxyUpdateTllPolicyMutationMock()); + }); + afterEach(() => { wrapper.destroy(); }); const findSettingsBlock = () => wrapper.findComponent(SettingsBlock); - const findDescription = () => wrapper.find('[data-testid="description"'); - const findLink = () => wrapper.findComponent(GlLink); - const findToggle = () => wrapper.findComponent(GlToggle); + const findSettingsTitles = () => wrapper.findComponent(SettingsTitles); + const findDescription = () => wrapper.findByTestId('description'); + const findDescriptionLink = () => wrapper.findByTestId('description-link'); + const findEnableProxyToggle = () => wrapper.findByTestId('dependency-proxy-setting-toggle'); + const findEnableTtlPoliciesToggle = () => + wrapper.findByTestId('dependency-proxy-ttl-policies-toggle'); + const findToggleHelpLink = () => wrapper.findByTestId('toggle-help-link'); const fillApolloCache = () => { apolloProvider.defaultClient.cache.writeQuery({ @@ -81,10 +111,6 @@ describe('DependencyProxySettings', () => { }); }; - const emitSettingsUpdate = (value = false) => { - findToggle().vm.$emit('change', value); - }; - it('renders a settings block', () => { mountComponent(); @@ -112,19 +138,93 @@ describe('DependencyProxySettings', () => { it('has the correct link', () => { mountComponent(); - expect(findLink().attributes()).toMatchObject({ + expect(findDescriptionLink().attributes()).toMatchObject({ href: DEPENDENCY_PROXY_DOCS_PATH, }); - expect(findLink().text()).toBe('Learn more'); + expect(findDescriptionLink().text()).toBe('Learn more'); + }); + + describe('enable toggle', () => { + it('exists', () => { + mountComponent(); + + expect(findEnableProxyToggle().props()).toMatchObject({ + label: component.i18n.enabledProxyLabel, + }); + }); + + describe('when enabled', () => { + beforeEach(() => { + mountComponent(); + }); + + it('has the help prop correctly set', () => { + expect(findEnableProxyToggle().props()).toMatchObject({ + help: component.i18n.enabledProxyHelpText, + }); + }); + + it('has help text with a link', () => { + expect(findEnableProxyToggle().text()).toContain( + 'To see the image prefix and what is in the cache, visit the Dependency Proxy', + ); + expect(findToggleHelpLink().attributes()).toMatchObject({ + href: defaultProvide.groupDependencyProxyPath, + }); + }); + }); + + describe('when disabled', () => { + beforeEach(() => { + mountComponent({ + dependencyProxySettings: dependencyProxySettingsMock({ enabled: false }), + }); + }); + + it('has the help prop set to empty', () => { + expect(findEnableProxyToggle().props()).toMatchObject({ + help: '', + }); + }); + + it('the help text is not visible', () => { + expect(findToggleHelpLink().exists()).toBe(false); + }); + }); + }); + + describe('storage settings', () => { + it('the component has the settings title', () => { + mountComponent(); + + expect(findSettingsTitles().props()).toMatchObject({ + title: component.i18n.storageSettingsTitle, + }); + }); + + describe('enable proxy ttl policies', () => { + it('exists', () => { + mountComponent(); + + expect(findEnableTtlPoliciesToggle().props()).toMatchObject({ + label: component.i18n.ttlPolicyEnabledLabel, + help: component.i18n.ttlPolicyEnabledHelpText, + }); + }); + }); }); - describe('settings update', () => { + describe.each` + toggleName | toggleFinder | localErrorMock | optimisticResponse + ${'enable proxy'} | ${findEnableProxyToggle} | ${dependencyProxySettingMutationMock} | ${updateGroupDependencyProxySettingsOptimisticResponse} + ${'enable ttl policies'} | ${findEnableTtlPoliciesToggle} | ${dependencyProxyUpdateTllPolicyMutationMock} | ${updateDependencyProxyImageTtlGroupPolicyOptimisticResponse} + `('$toggleName settings update ', ({ optimisticResponse, toggleFinder, localErrorMock }) => { describe('success state', () => { it('emits a success event', async () => { mountComponent(); fillApolloCache(); - emitSettingsUpdate(); + toggleFinder().vm.$emit('change', false); await waitForPromises(); @@ -136,26 +236,28 @@ describe('DependencyProxySettings', () => { fillApolloCache(); - expect(findToggle().props('value')).toBe(true); + expect(toggleFinder().props('value')).toBe(true); - emitSettingsUpdate(); + toggleFinder().vm.$emit('change', false); - expect(updateGroupDependencyProxySettingsOptimisticResponse).toHaveBeenCalledWith({ - enabled: false, - }); + expect(optimisticResponse).toHaveBeenCalledWith( + expect.objectContaining({ + enabled: false, + }), + ); }); }); describe('errors', () => { it('mutation payload with root level errors', async () => { - const mutationResolver = jest - .fn() - .mockResolvedValue(dependencyProxySettingMutationErrorMock); - mountComponent({ mutationResolver }); + updateSettingsMutationResolver = jest.fn().mockResolvedValue(mutationErrorMock); + updateTtlPoliciesMutationResolver = jest.fn().mockResolvedValue(mutationErrorMock); + + mountComponent(); fillApolloCache(); - emitSettingsUpdate(); + toggleFinder().vm.$emit('change', false); await waitForPromises(); @@ -163,14 +265,16 @@ describe('DependencyProxySettings', () => { }); it.each` - type | mutationResolver - ${'local'} | ${jest.fn().mockResolvedValue(dependencyProxySettingMutationMock({ errors: ['foo'] }))} + type | mutationResolverMock + ${'local'} | ${jest.fn().mockResolvedValue(localErrorMock({ errors: ['foo'] }))} ${'network'} | ${jest.fn().mockRejectedValue()} - `('mutation payload with $type error', async ({ mutationResolver }) => { - mountComponent({ mutationResolver }); + `('mutation payload with $type error', async ({ mutationResolverMock }) => { + updateSettingsMutationResolver = mutationResolverMock; + updateTtlPoliciesMutationResolver = mutationResolverMock; + mountComponent(); fillApolloCache(); - emitSettingsUpdate(); + toggleFinder().vm.$emit('change', false); await waitForPromises(); @@ -180,10 +284,16 @@ describe('DependencyProxySettings', () => { }); describe('when isLoading is true', () => { - it('disables enable toggle', () => { + it('disables enable proxy toggle', () => { + mountComponent({ isLoading: true }); + + expect(findEnableProxyToggle().props('disabled')).toBe(true); + }); + + it('disables enable ttl policies toggle', () => { mountComponent({ isLoading: true }); - expect(findToggle().props('disabled')).toBe(true); + expect(findEnableTtlPoliciesToggle().props('disabled')).toBe(true); }); }); }); diff --git a/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js b/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js index e4d62bc6a6e..933dac7f5a8 100644 --- a/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js +++ b/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js @@ -10,7 +10,12 @@ import DependencyProxySettings from '~/packages_and_registries/settings/group/co import component from '~/packages_and_registries/settings/group/components/group_settings_app.vue'; import getGroupPackagesSettingsQuery from '~/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.graphql'; -import { groupPackageSettingsMock, packageSettings, dependencyProxySettings } from '../mock_data'; +import { + groupPackageSettingsMock, + packageSettings, + dependencyProxySettings, + dependencyProxyImageTtlPolicy, +} from '../mock_data'; jest.mock('~/flash'); @@ -66,11 +71,17 @@ describe('Group Settings App', () => { await nextTick(); }; + const packageSettingsProps = { packageSettings: packageSettings() }; + const dependencyProxyProps = { + dependencyProxySettings: dependencyProxySettings(), + dependencyProxyImageTtlPolicy: dependencyProxyImageTtlPolicy(), + }; + describe.each` - finder | entityProp | entityValue | successMessage | errorMessage - ${findPackageSettings} | ${'packageSettings'} | ${packageSettings()} | ${'Settings saved successfully'} | ${'An error occurred while saving the settings'} - ${findDependencyProxySettings} | ${'dependencyProxySettings'} | ${dependencyProxySettings()} | ${'Setting saved successfully'} | ${'An error occurred while saving the setting'} - `('settings blocks', ({ finder, entityProp, entityValue, successMessage, errorMessage }) => { + finder | entitySpecificProps | successMessage | errorMessage + ${findPackageSettings} | ${packageSettingsProps} | ${'Settings saved successfully'} | ${'An error occurred while saving the settings'} + ${findDependencyProxySettings} | ${dependencyProxyProps} | ${'Setting saved successfully'} | ${'An error occurred while saving the setting'} + `('settings blocks', ({ finder, entitySpecificProps, successMessage, errorMessage }) => { beforeEach(() => { mountComponent(); return waitForApolloQueryAndRender(); @@ -83,7 +94,7 @@ describe('Group Settings App', () => { it('binds the correctProps', () => { expect(finder().props()).toMatchObject({ isLoading: false, - [entityProp]: entityValue, + ...entitySpecificProps, }); }); 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 index a61edad8685..fcfad4b42b8 100644 --- 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 @@ -4,15 +4,19 @@ import SettingsTitles from '~/packages_and_registries/settings/group/components/ describe('settings_titles', () => { let wrapper; - const mountComponent = () => { + const defaultProps = { + title: 'foo', + subTitle: 'bar', + }; + + const mountComponent = (propsData = defaultProps) => { wrapper = shallowMount(SettingsTitles, { - propsData: { - title: 'foo', - subTitle: 'bar', - }, + propsData, }); }; + const findSubTitle = () => wrapper.find('p'); + afterEach(() => { wrapper.destroy(); }); @@ -22,4 +26,10 @@ describe('settings_titles', () => { 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); + }); }); diff --git a/spec/frontend/packages_and_registries/settings/group/graphl/utils/cache_update_spec.js b/spec/frontend/packages_and_registries/settings/group/graphl/utils/cache_update_spec.js index 9d8504a1124..a5b571a0241 100644 --- a/spec/frontend/packages_and_registries/settings/group/graphl/utils/cache_update_spec.js +++ b/spec/frontend/packages_and_registries/settings/group/graphl/utils/cache_update_spec.js @@ -17,6 +17,13 @@ describe('Package and Registries settings group cache updates', () => { }, }; + const updateDependencyProxyImageTtlGroupPolicyPayload = { + dependencyProxyImageTtlPolicy: { + enabled: false, + ttl: 45, + }, + }; + const cacheMock = { group: { packageSettings: { @@ -26,6 +33,10 @@ describe('Package and Registries settings group cache updates', () => { dependencyProxySetting: { enabled: true, }, + dependencyProxyImageTtlPolicy: { + enabled: true, + ttl: 45, + }, }, }; @@ -42,15 +53,26 @@ describe('Package and Registries settings group cache updates', () => { }); describe.each` - updateNamespacePackageSettings | updateDependencyProxySettings - ${updateNamespacePackageSettingsPayload} | ${updateDependencyProxySettingsPayload} - ${undefined} | ${updateDependencyProxySettingsPayload} - ${updateNamespacePackageSettingsPayload} | ${undefined} - ${undefined} | ${undefined} + updateNamespacePackageSettings | updateDependencyProxySettings | updateDependencyProxyImageTtlGroupPolicy + ${updateNamespacePackageSettingsPayload} | ${updateDependencyProxySettingsPayload} | ${undefined} + ${undefined} | ${updateDependencyProxySettingsPayload} | ${undefined} + ${updateNamespacePackageSettingsPayload} | ${undefined} | ${undefined} + ${undefined} | ${undefined} | ${updateDependencyProxyImageTtlGroupPolicyPayload} + ${undefined} | ${undefined} | ${undefined} `( 'updateGroupPackageSettings', - ({ updateNamespacePackageSettings, updateDependencyProxySettings }) => { - const payload = { data: { updateNamespacePackageSettings, updateDependencyProxySettings } }; + ({ + updateNamespacePackageSettings, + updateDependencyProxySettings, + updateDependencyProxyImageTtlGroupPolicy, + }) => { + const payload = { + data: { + updateNamespacePackageSettings, + updateDependencyProxySettings, + updateDependencyProxyImageTtlGroupPolicy, + }, + }; it('calls readQuery', () => { updateGroupPackageSettings('foo')(client, payload); expect(client.readQuery).toHaveBeenCalledWith(queryAndVariables); @@ -65,6 +87,7 @@ describe('Package and Registries settings group cache updates', () => { ...cacheMock.group, ...payload.data.updateNamespacePackageSettings, ...payload.data.updateDependencyProxySettings, + ...payload.data.updateDependencyProxyImageTtlGroupPolicy, }, }, }); diff --git a/spec/frontend/packages_and_registries/settings/group/graphl/utils/optimistic_responses_spec.js b/spec/frontend/packages_and_registries/settings/group/graphl/utils/optimistic_responses_spec.js index debeb9aa89c..b4efda3e7b2 100644 --- a/spec/frontend/packages_and_registries/settings/group/graphl/utils/optimistic_responses_spec.js +++ b/spec/frontend/packages_and_registries/settings/group/graphl/utils/optimistic_responses_spec.js @@ -1,6 +1,7 @@ import { updateGroupPackagesSettingsOptimisticResponse, updateGroupDependencyProxySettingsOptimisticResponse, + updateDependencyProxyImageTtlGroupPolicyOptimisticResponse, } from '~/packages_and_registries/settings/group/graphql/utils/optimistic_responses'; describe('Optimistic responses', () => { @@ -38,4 +39,22 @@ describe('Optimistic responses', () => { `); }); }); + + describe('updateDependencyProxyImageTtlGroupPolicyOptimisticResponse', () => { + it('returns the correct structure', () => { + expect(updateDependencyProxyImageTtlGroupPolicyOptimisticResponse({ foo: 'bar' })) + .toMatchInlineSnapshot(` + Object { + "__typename": "Mutation", + "updateDependencyProxyImageTtlGroupPolicy": Object { + "__typename": "UpdateDependencyProxyImageTtlGroupPolicyPayload", + "dependencyProxyImageTtlPolicy": Object { + "foo": "bar", + }, + "errors": Array [], + }, + } + `); + }); + }); }); diff --git a/spec/frontend/packages_and_registries/settings/group/mock_data.js b/spec/frontend/packages_and_registries/settings/group/mock_data.js index 81ba0795b7d..d53446de910 100644 --- a/spec/frontend/packages_and_registries/settings/group/mock_data.js +++ b/spec/frontend/packages_and_registries/settings/group/mock_data.js @@ -5,16 +5,25 @@ export const packageSettings = () => ({ genericDuplicateExceptionRegex: '', }); -export const dependencyProxySettings = () => ({ +export const dependencyProxySettings = (extend) => ({ enabled: true, + ...extend, +}); + +export const dependencyProxyImageTtlPolicy = (extend) => ({ + ttl: 90, + enabled: true, + ...extend, }); export const groupPackageSettingsMock = { data: { group: { + id: '1', fullPath: 'foo_group_path', packageSettings: packageSettings(), dependencyProxySetting: dependencyProxySettings(), + dependencyProxyImageTtlPolicy: dependencyProxyImageTtlPolicy(), }, }, }; @@ -44,6 +53,16 @@ export const dependencyProxySettingMutationMock = (override) => ({ }, }); +export const dependencyProxyUpdateTllPolicyMutationMock = (override) => ({ + data: { + updateDependencyProxyImageTtlGroupPolicy: { + dependencyProxyImageTtlPolicy: dependencyProxyImageTtlPolicy(), + errors: [], + ...override, + }, + }, +}); + export const groupPackageSettingsMutationErrorMock = { errors: [ { @@ -68,7 +87,8 @@ export const groupPackageSettingsMutationErrorMock = { }, ], }; -export const dependencyProxySettingMutationErrorMock = { + +export const mutationErrorMock = { errors: [ { message: 'Some error', |