Add latest changes from gitlab-org/gitlab@master

7 files changed, 417 insertions, 10 deletions

diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/container_expiration_policy_form_spec.js.snap b/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/container_expiration_policy_form_spec.js.snap
index faa313118f3..108d9478788 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/container_expiration_policy_form_spec.js.snap
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/container_expiration_policy_form_spec.js.snap
@@ -4,6 +4,7 @@ exports[`Container Expiration Policy Settings Form Cadence matches snapshot 1`]
 <expiration-dropdown-stub
   class="gl-mr-7 gl-mb-0!"
   data-testid="cadence-dropdown"
+  description=""
   formoptions="[object Object],[object Object],[object Object],[object Object],[object Object]"
   label="Run cleanup:"
   name="cadence"
@@ -22,6 +23,7 @@ exports[`Container Expiration Policy Settings Form Enable matches snapshot 1`] =
 exports[`Container Expiration Policy Settings Form Keep N matches snapshot 1`] = `
 <expiration-dropdown-stub
   data-testid="keep-n-dropdown"
+  description=""
   formoptions="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
   label="Keep the most recent:"
   name="keep-n"
@@ -44,6 +46,7 @@ exports[`Container Expiration Policy Settings Form Keep Regex matches snapshot 1
 exports[`Container Expiration Policy Settings Form OlderThan matches snapshot 1`] = `
 <expiration-dropdown-stub
   data-testid="older-than-dropdown"
+  description=""
   formoptions="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
   label="Remove tags older than:"
   name="older-than"
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_spec.js
index aa3506771fa..d83c717da6a 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_spec.js
@@ -43,11 +43,6 @@ describe('Container expiration policy project settings', () => {
         GlSprintf,
         SettingsBlock,
       },
-      mocks: {
-        $toast: {
-          show: jest.fn(),
-        },
-      },
       provide,
       ...config,
     });
@@ -98,7 +93,7 @@ describe('Container expiration policy project settings', () => {
     await waitForPromises();
 
     expect(findFormComponent().exists()).toBe(true);
-    expect(findSettingsBlock().props('collapsible')).toBe(false);
+    expect(findSettingsBlock().exists()).toBe(true);
   });
 
   describe('the form is disabled', () => {
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_dropdown_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_dropdown_spec.js
index 5c9ade7f785..8b99ac6b06c 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_dropdown_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_dropdown_spec.js
@@ -16,6 +16,7 @@ describe('ExpirationDropdown', () => {
 
   const findFormSelect = () => wrapper.find(GlFormSelect);
   const findFormGroup = () => wrapper.find(GlFormGroup);
+  const findDescription = () => wrapper.find('[data-testid="description"]');
   const findOptions = () => wrapper.findAll('[data-testid="option"]');
 
   const mountComponent = (props) => {
@@ -47,6 +48,14 @@ describe('ExpirationDropdown', () => {
 
       expect(findOptions()).toHaveLength(defaultProps.formOptions.length);
     });
+
+    it('renders the description if passed', () => {
+      mountComponent({
+        description: 'test description',
+      });
+
+      expect(findDescription().html()).toContain('test description');
+    });
   });
 
   describe('model', () => {
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
new file mode 100644
index 00000000000..86f45d78bae
--- /dev/null
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
@@ -0,0 +1,267 @@
+import VueApollo from 'vue-apollo';
+import Vue from 'vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { GlLoadingIcon } from 'jest/packages_and_registries/shared/stubs';
+import component from '~/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue';
+import {
+  UPDATE_SETTINGS_ERROR_MESSAGE,
+  UPDATE_SETTINGS_SUCCESS_MESSAGE,
+  KEEP_N_DUPLICATED_PACKAGE_FILES_LABEL,
+  KEEP_N_DUPLICATED_PACKAGE_FILES_DESCRIPTION,
+} from '~/packages_and_registries/settings/project/constants';
+import updatePackagesCleanupPolicyMutation from '~/packages_and_registries/settings/project/graphql/mutations/update_packages_cleanup_policy.mutation.graphql';
+import Tracking from '~/tracking';
+import { packagesCleanupPolicyPayload, packagesCleanupPolicyMutationPayload } from '../mock_data';
+
+Vue.use(VueApollo);
+
+describe('Packages Cleanup Policy Settings Form', () => {
+  let wrapper;
+  let fakeApollo;
+
+  const defaultProvidedValues = {
+    projectPath: 'path',
+  };
+
+  const {
+    data: {
+      project: { packagesCleanupPolicy },
+    },
+  } = packagesCleanupPolicyPayload();
+
+  const defaultProps = {
+    value: { ...packagesCleanupPolicy },
+  };
+
+  const trackingPayload = {
+    label: 'packages_cleanup_policies',
+  };
+
+  const findForm = () => wrapper.find({ ref: 'form-element' });
+  const findSaveButton = () => wrapper.findByTestId('save-button');
+  const findKeepNDuplicatedPackageFilesDropdown = () =>
+    wrapper.findByTestId('keep-n-duplicated-package-files-dropdown');
+
+  const submitForm = async () => {
+    findForm().trigger('submit');
+    return waitForPromises();
+  };
+
+  const mountComponent = ({
+    props = defaultProps,
+    data,
+    config,
+    provide = defaultProvidedValues,
+  } = {}) => {
+    wrapper = shallowMountExtended(component, {
+      stubs: {
+        GlLoadingIcon,
+      },
+      propsData: { ...props },
+      provide,
+      data() {
+        return {
+          ...data,
+        };
+      },
+      mocks: {
+        $toast: {
+          show: jest.fn(),
+        },
+      },
+      ...config,
+    });
+  };
+
+  const mountComponentWithApollo = ({
+    provide = defaultProvidedValues,
+    mutationResolver,
+    queryPayload = packagesCleanupPolicyPayload(),
+  } = {}) => {
+    const requestHandlers = [[updatePackagesCleanupPolicyMutation, mutationResolver]];
+
+    fakeApollo = createMockApollo(requestHandlers);
+
+    const {
+      data: {
+        project: { packagesCleanupPolicy: value },
+      },
+    } = queryPayload;
+
+    mountComponent({
+      provide,
+      props: {
+        ...defaultProps,
+        value,
+      },
+      config: {
+        apolloProvider: fakeApollo,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    jest.spyOn(Tracking, 'event');
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    fakeApollo = null;
+  });
+
+  describe('keepNDuplicatedPackageFiles', () => {
+    it('renders dropdown', () => {
+      mountComponent();
+
+      const element = findKeepNDuplicatedPackageFilesDropdown();
+
+      expect(element.exists()).toBe(true);
+      expect(element.props('label')).toMatchInterpolatedText(KEEP_N_DUPLICATED_PACKAGE_FILES_LABEL);
+      expect(element.props('description')).toEqual(KEEP_N_DUPLICATED_PACKAGE_FILES_DESCRIPTION);
+    });
+
+    it('input event triggers a model update', () => {
+      mountComponent();
+
+      findKeepNDuplicatedPackageFilesDropdown().vm.$emit('input', 'foo');
+      expect(wrapper.emitted('input')[0][0]).toMatchObject({
+        keepNDuplicatedPackageFiles: 'foo',
+      });
+    });
+
+    it('shows the default option when none are selected', () => {
+      mountComponent({ props: { value: {} } });
+      expect(findKeepNDuplicatedPackageFilesDropdown().props('value')).toEqual('ALL_PACKAGE_FILES');
+    });
+
+    it.each`
+      isLoading | mutationLoading
+      ${true}   | ${false}
+      ${true}   | ${true}
+      ${false}  | ${true}
+    `(
+      'is disabled when is loading is $isLoading and mutationLoading is $mutationLoading',
+      ({ isLoading, mutationLoading }) => {
+        mountComponent({
+          props: { isLoading, value: {} },
+          data: { mutationLoading },
+        });
+        expect(findKeepNDuplicatedPackageFilesDropdown().props('disabled')).toEqual(true);
+      },
+    );
+
+    it('has the correct formOptions', () => {
+      mountComponent();
+      expect(findKeepNDuplicatedPackageFilesDropdown().props('formOptions')).toEqual(
+        wrapper.vm.$options.formOptions.keepNDuplicatedPackageFiles,
+      );
+    });
+  });
+
+  describe('form', () => {
+    describe('actions', () => {
+      describe('submit button', () => {
+        it('has type submit', () => {
+          mountComponent();
+
+          expect(findSaveButton().attributes('type')).toBe('submit');
+        });
+
+        it.each`
+          isLoading | mutationLoading | disabled
+          ${true}   | ${true}         | ${true}
+          ${true}   | ${false}        | ${true}
+          ${false}  | ${true}         | ${true}
+          ${false}  | ${false}        | ${false}
+        `(
+          'when isLoading is $isLoading and mutationLoading is $mutationLoading is disabled',
+          ({ isLoading, mutationLoading, disabled }) => {
+            mountComponent({
+              props: { ...defaultProps, isLoading },
+              data: { mutationLoading },
+            });
+
+            expect(findSaveButton().props('disabled')).toBe(disabled);
+            expect(findKeepNDuplicatedPackageFilesDropdown().props('disabled')).toBe(disabled);
+          },
+        );
+
+        it.each`
+          isLoading | mutationLoading | showLoading
+          ${true}   | ${true}         | ${true}
+          ${true}   | ${false}        | ${true}
+          ${false}  | ${true}         | ${true}
+          ${false}  | ${false}        | ${false}
+        `(
+          'when isLoading is $isLoading and mutationLoading is $mutationLoading is $showLoading that the loading icon is shown',
+          ({ isLoading, mutationLoading, showLoading }) => {
+            mountComponent({
+              props: { ...defaultProps, isLoading },
+              data: { mutationLoading },
+            });
+
+            expect(findSaveButton().props('loading')).toBe(showLoading);
+          },
+        );
+      });
+    });
+
+    describe('form submit event', () => {
+      it('dispatches the correct apollo mutation', () => {
+        const mutationResolver = jest
+          .fn()
+          .mockResolvedValue(packagesCleanupPolicyMutationPayload());
+        mountComponentWithApollo({
+          mutationResolver,
+        });
+
+        findForm().trigger('submit');
+
+        expect(mutationResolver).toHaveBeenCalledWith({
+          input: {
+            keepNDuplicatedPackageFiles: 'ALL_PACKAGE_FILES',
+            projectPath: 'path',
+          },
+        });
+      });
+
+      it('tracks the submit event', () => {
+        mountComponentWithApollo({
+          mutationResolver: jest.fn().mockResolvedValue(packagesCleanupPolicyMutationPayload()),
+        });
+
+        findForm().trigger('submit');
+
+        expect(Tracking.event).toHaveBeenCalledWith(
+          undefined,
+          'submit_packages_cleanup_form',
+          trackingPayload,
+        );
+      });
+
+      it('show a success toast when submit succeed', async () => {
+        mountComponentWithApollo({
+          mutationResolver: jest.fn().mockResolvedValue(packagesCleanupPolicyMutationPayload()),
+        });
+
+        await submitForm();
+
+        expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_SUCCESS_MESSAGE);
+      });
+
+      describe('when submit fails', () => {
+        it('shows an error', async () => {
+          mountComponentWithApollo({
+            mutationResolver: jest.fn().mockRejectedValue(packagesCleanupPolicyMutationPayload()),
+          });
+
+          await submitForm();
+
+          expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_ERROR_MESSAGE);
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js
new file mode 100644
index 00000000000..6dfeeca6862
--- /dev/null
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js
@@ -0,0 +1,81 @@
+import { GlAlert, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import component from '~/packages_and_registries/settings/project/components/packages_cleanup_policy.vue';
+import PackagesCleanupPolicyForm from '~/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue';
+import { FETCH_SETTINGS_ERROR_MESSAGE } from '~/packages_and_registries/settings/project/constants';
+import packagesCleanupPolicyQuery from '~/packages_and_registries/settings/project/graphql/queries/get_packages_cleanup_policy.query.graphql';
+import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
+
+import { packagesCleanupPolicyPayload, packagesCleanupPolicyData } from '../mock_data';
+
+Vue.use(VueApollo);
+
+describe('Packages cleanup policy project settings', () => {
+  let wrapper;
+  let fakeApollo;
+
+  const defaultProvidedValues = {
+    projectPath: 'path',
+  };
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findFormComponent = () => wrapper.findComponent(PackagesCleanupPolicyForm);
+  const findSettingsBlock = () => wrapper.findComponent(SettingsBlock);
+
+  const mountComponent = (provide = defaultProvidedValues, config) => {
+    wrapper = shallowMount(component, {
+      stubs: {
+        GlSprintf,
+        SettingsBlock,
+      },
+      provide,
+      ...config,
+    });
+  };
+
+  const mountComponentWithApollo = ({ provide = defaultProvidedValues, resolver } = {}) => {
+    const requestHandlers = [[packagesCleanupPolicyQuery, resolver]];
+
+    fakeApollo = createMockApollo(requestHandlers);
+    mountComponent(provide, {
+      apolloProvider: fakeApollo,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    fakeApollo = null;
+  });
+
+  it('renders the setting form', async () => {
+    mountComponentWithApollo({
+      resolver: jest.fn().mockResolvedValue(packagesCleanupPolicyPayload()),
+    });
+    await waitForPromises();
+
+    expect(findFormComponent().exists()).toBe(true);
+    expect(findFormComponent().props('value')).toEqual(packagesCleanupPolicyData);
+    expect(findSettingsBlock().exists()).toBe(true);
+  });
+
+  describe('fetchSettingsError', () => {
+    beforeEach(async () => {
+      mountComponentWithApollo({
+        resolver: jest.fn().mockRejectedValue(new Error('GraphQL error')),
+      });
+      await waitForPromises();
+    });
+
+    it('the form is hidden', () => {
+      expect(findFormComponent().exists()).toBe(false);
+    });
+
+    it('shows an alert', () => {
+      expect(findAlert().html()).toContain(FETCH_SETTINGS_ERROR_MESSAGE);
+    });
+  });
+});
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
index 337991dfae0..f576bc79eae 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
@@ -1,19 +1,41 @@
 import { shallowMount } from '@vue/test-utils';
 import component from '~/packages_and_registries/settings/project/components/registry_settings_app.vue';
 import ContainerExpirationPolicy from '~/packages_and_registries/settings/project/components/container_expiration_policy.vue';
+import PackagesCleanupPolicy from '~/packages_and_registries/settings/project/components/packages_cleanup_policy.vue';
 
 describe('Registry Settings app', () => {
   let wrapper;
+
   const findContainerExpirationPolicy = () => wrapper.find(ContainerExpirationPolicy);
+  const findPackagesCleanupPolicy = () => wrapper.find(PackagesCleanupPolicy);
 
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
 
-  it('renders container expiration policy component', () => {
-    wrapper = shallowMount(component);
+  const mountComponent = (provide) => {
+    wrapper = shallowMount(component, {
+      provide,
+    });
+  };
 
-    expect(findContainerExpirationPolicy().exists()).toBe(true);
-  });
+  it.each`
+    showContainerRegistrySettings | showPackageRegistrySettings
+    ${true}                       | ${false}
+    ${true}                       | ${true}
+    ${false}                      | ${true}
+    ${false}                      | ${false}
+  `(
+    'container expiration policy $showContainerRegistrySettings and package cleanup policy is $showPackageRegistrySettings',
+    ({ showContainerRegistrySettings, showPackageRegistrySettings }) => {
+      mountComponent({
+        showContainerRegistrySettings,
+        showPackageRegistrySettings,
+      });
+
+      expect(findContainerExpirationPolicy().exists()).toBe(showContainerRegistrySettings);
+      expect(findPackagesCleanupPolicy().exists()).toBe(showPackageRegistrySettings);
+    },
+  );
 });
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js b/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
index 33406c98f4b..d4b6c66ddeb 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
@@ -40,3 +40,33 @@ export const expirationPolicyMutationPayload = ({ override, errors = [] } = {})
     },
   },
 });
+
+export const packagesCleanupPolicyData = {
+  keepNDuplicatedPackageFiles: 'ALL_PACKAGE_FILES',
+  nextRunAt: '2020-11-19T07:37:03.941Z',
+};
+
+export const packagesCleanupPolicyPayload = (override) => ({
+  data: {
+    project: {
+      id: '1',
+      packagesCleanupPolicy: {
+        __typename: 'PackagesCleanupPolicy',
+        ...packagesCleanupPolicyData,
+        ...override,
+      },
+    },
+  },
+});
+
+export const packagesCleanupPolicyMutationPayload = ({ override, errors = [] } = {}) => ({
+  data: {
+    updatePackagesCleanupPolicy: {
+      packagesCleanupPolicy: {
+        ...packagesCleanupPolicyData,
+        ...override,
+      },
+      errors,
+    },
+  },
+});