Merge branch '222885-update-design-of-the-container-registry-cleanup-policy-for-tags' into 'master'

Add components for Expiration Policy UI redesign

See merge request gitlab-org/gitlab!47778

app/assets/javascripts/registry/settings/components/expiration_dropdown.vue

+<script>
+import { GlFormGroup, GlFormSelect } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlFormSelect,
+  },
+  props: {
+    formOptions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    value: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-form-group :id="`${name}-form-group`" :label-for="name" :label="label">
+    <gl-form-select :id="name" :value="value" :disabled="disabled" @input="$emit('input', $event)">
+      <option
+        v-for="option in formOptions"
+        :key="option.key"
+        :value="option.key"
+        data-testid="option"
+      >
+        {{ option.label }}
+      </option>
+    </gl-form-select>
+  </gl-form-group>
+</template>

app/assets/javascripts/registry/settings/components/expiration_run_text.vue

+<script>
+import { GlFormGroup, GlFormInput } from '@gitlab/ui';
+import { NEXT_CLEANUP_LABEL, NOT_SCHEDULED_POLICY_TEXT } from '~/registry/settings/constants';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlFormInput,
+  },
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: NOT_SCHEDULED_POLICY_TEXT,
+    },
+  },
+  i18n: {
+    NEXT_CLEANUP_LABEL,
+  },
+};
+</script>
+
+<template>
+  <gl-form-group
+    id="expiration-policy-info-text-group"
+    :label="$options.i18n.NEXT_CLEANUP_LABEL"
+    label-for="expiration-policy-info-text"
+  >
+    <gl-form-input id="expiration-policy-info-text" class="gl-pl-0!" plaintext :value="value" />
+  </gl-form-group>
+</template>

app/assets/javascripts/registry/settings/components/expiration_textarea.vue

+<script>
+import { GlFormGroup, GlFormTextarea, GlSprintf, GlLink } from '@gitlab/ui';
+import { NAME_REGEX_LENGTH, TEXT_AREA_INVALID_FEEDBACK } from '../constants';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlFormTextarea,
+    GlSprintf,
+    GlLink,
+  },
+  inject: ['tagsRegexHelpPagePath'],
+  props: {
+    error: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    value: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    textAreaLengthErrorMessage() {
+      return this.isInputValid(this.value) ? '' : TEXT_AREA_INVALID_FEEDBACK;
+    },
+    textAreaValidation() {
+      const nameRegexErrors = this.error || this.textAreaLengthErrorMessage;
+      return {
+        state: nameRegexErrors === null ? null : !nameRegexErrors,
+        message: nameRegexErrors,
+      };
+    },
+    internalValue: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit('input', value);
+        this.$emit('validation', this.isInputValid(value));
+      },
+    },
+  },
+  methods: {
+    isInputValid(value) {
+      return !value || value.length <= NAME_REGEX_LENGTH;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-form-group
+    :id="`${name}-form-group`"
+    :label-for="name"
+    :state="textAreaValidation.state"
+    :invalid-feedback="textAreaValidation.message"
+  >
+    <template #label>
+      <span data-testid="label">
+        <gl-sprintf :message="label">
+          <template #italic="{content}">
+            <i>{{ content }}</i>
+          </template>
+        </gl-sprintf>
+      </span>
+    </template>
+    <gl-form-textarea
+      :id="name"
+      v-model="internalValue"
+      :placeholder="placeholder"
+      :state="textAreaValidation.state"
+      :disabled="disabled"
+      trim
+    />
+    <template #description>
+      <span data-testid="description" class="gl-text-gray-400">
+        <gl-sprintf :message="description">
+          <template #link="{content}">
+            <gl-link :href="tagsRegexHelpPagePath" target="_blank">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </span>
+    </template>
+  </gl-form-group>
+</template>

app/assets/javascripts/registry/settings/components/expiration_toggle.vue

+<script>
+import { GlFormGroup, GlToggle, GlSprintf } from '@gitlab/ui';
+import { ENABLED_TEXT, DISABLED_TEXT, ENABLE_TOGGLE_DESCRIPTION } from '../constants';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlToggle,
+    GlSprintf,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    value: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  i18n: {
+    ENABLE_TOGGLE_DESCRIPTION,
+  },
+  computed: {
+    enabled: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit('input', value);
+      },
+    },
+    toggleStatusText() {
+      return this.enabled ? ENABLED_TEXT : DISABLED_TEXT;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-form-group id="expiration-policy-toggle-group" label-for="expiration-policy-toggle">
+    <div class="gl-display-flex">
+      <gl-toggle id="expiration-policy-toggle" v-model="enabled" :disabled="disabled" />
+      <span class="gl-ml-5 gl-line-height-24" data-testid="description">
+        <gl-sprintf :message="$options.i18n.ENABLE_TOGGLE_DESCRIPTION">
+          <template #toggleStatus>
+            <strong>{{ toggleStatusText }}</strong>
+          </template>
+        </gl-sprintf>
+      </span>
+    </div>
+  </gl-form-group>
+</template>

app/assets/javascripts/registry/settings/constants.js

 import { s__, __ } from '~/locale';
 
-export const SET_CLEANUP_POLICY_BUTTON = s__('ContainerRegistry|Set cleanup policy');
+export const SET_CLEANUP_POLICY_BUTTON = __('Save');
 export const CLEANUP_POLICY_CARD_HEADER = s__('ContainerRegistry|Tag expiration policy');
 export const UNAVAILABLE_FEATURE_TITLE = s__(
   `ContainerRegistry|Cleanup policy for tags is disabled`,
@@ -12,3 +12,46 @@ export const UNAVAILABLE_USER_FEATURE_TEXT = __(`Please contact your administrat
 export const UNAVAILABLE_ADMIN_FEATURE_TEXT = s__(
   `ContainerRegistry| Please visit the %{linkStart}administration settings%{linkEnd} to enable this feature.`,
 );
+
+export const TEXT_AREA_INVALID_FEEDBACK = s__(
+  'ContainerRegistry|The value of this input should be less than 256 characters',
+);
+
+export const KEEP_HEADER_TEXT = s__('ContainerRegistry|Keep these tags');
+export const KEEP_INFO_TEXT = s__(
+  'ContainerRegistry|Tags that match these rules will always be %{strongStart}kept%{strongEnd}, even if they match a removal rule below. The %{secondStrongStart}latest%{secondStrongEnd} tag will always be kept.',
+);
+export const KEEP_N_LABEL = s__('ContainerRegistry|Keep the most recent:');
+export const NAME_REGEX_KEEP_LABEL = s__('ContainerRegistry|Keep tags matching:');
+export const NAME_REGEX_KEEP_PLACEHOLDER = 'production-v.*';
+export const NAME_REGEX_KEEP_DESCRIPTION = s__(
+  'ContainerRegistry|Tags with names matching this regex pattern will be kept. %{linkStart}More information%{linkEnd}',
+);
+
+export const REMOVE_HEADER_TEXT = s__('ContainerRegistry|Remove these tags');
+export const REMOVE_INFO_TEXT = s__(
+  'ContainerRegistry|Tags that match these rules will be %{strongStart}removed%{strongEnd}, unless kept by a rule above.',
+);
+export const EXPIRATION_SCHEDULE_LABEL = s__('ContainerRegistry|Remove tags older than:');
+export const NAME_REGEX_LABEL = s__('ContainerRegistry|Remove tags matching:');
+export const NAME_REGEX_PLACEHOLDER = '.*';
+export const NAME_REGEX_DESCRIPTION = s__(
+  'ContainerRegistry|Tags with names matching this regex pattern will be removed. %{linkStart}More information%{linkEnd}',
+);
+
+export const ENABLED_TEXT = __('Enabled');
+export const DISABLED_TEXT = __('Disabled');
+
+export const ENABLE_TOGGLE_DESCRIPTION = s__(
+  'ContainerRegistry|%{toggleStatus} - Tags matching the rules defined below will be automatically scheduled for deletion.',
+);
+
+export const CADENCE_LABEL = s__('ContainerRegistry|Run cleanup every:');
+
+export const NEXT_CLEANUP_LABEL = s__('ContainerRegistry|Next cleanup scheduled to run on:');
+export const NOT_SCHEDULED_POLICY_TEXT = s__('ContainerRegistry|Not yet scheduled');
+export const EXPIRATION_POLICY_FOOTER_NOTE = s__(
+  'ContainerRegistry|Note: Any policy update will result in a change to the scheduled run date and time',
+);
+
+export const NAME_REGEX_LENGTH = 255;

app/assets/javascripts/registry/settings/graphql/fragments/container_expiration_policy.fragment.graphql

@@ -5,4 +5,5 @@ fragment ContainerExpirationPolicyFields on ContainerExpirationPolicy {
   nameRegex
   nameRegexKeep
   olderThan
+  nextRunAt
 }

app/assets/javascripts/registry/settings/registry_settings_bundle.js

@@ -13,7 +13,13 @@ export default () => {
   if (!el) {
     return null;
   }
-  const { projectPath, isAdmin, adminSettingsPath, enableHistoricEntries } = el.dataset;
+  const {
+    isAdmin,
+    enableHistoricEntries,
+    projectPath,
+    adminSettingsPath,
+    tagsRegexHelpPagePath,
+  } = el.dataset;
   return new Vue({
     el,
     apolloProvider,
@@ -21,10 +27,11 @@ export default () => {
       RegistrySettingsApp,
     },
     provide: {
-      projectPath,
       isAdmin: parseBoolean(isAdmin),
-      adminSettingsPath,
       enableHistoricEntries: parseBoolean(enableHistoricEntries),
+      projectPath,
+      adminSettingsPath,
+      tagsRegexHelpPagePath,
     },
     render(createElement) {
       return createElement('registry-settings-app', {});

app/views/projects/registry/settings/_index.haml

@@ -5,4 +5,5 @@
     older_than_options: older_than_options.to_json,
     is_admin: current_user&.admin.to_s,
     admin_settings_path: ci_cd_admin_application_settings_path(anchor: 'js-registry-settings'),
-    enable_historic_entries: container_expiration_policies_historic_entry_enabled?(@project).to_s} }
+    enable_historic_entries: container_expiration_policies_historic_entry_enabled?(@project).to_s,
+    tags_regex_help_page_path: help_page_path('user/packages/container_registry/index', anchor: 'regex-pattern-examples') } }

locale/gitlab.pot

@@ -7246,6 +7246,9 @@ msgstr ""
 msgid "ContainerRegistry|%{toggleStatus} - Tags matching the patterns defined below will be scheduled for deletion"
 msgstr ""
 
+msgid "ContainerRegistry|%{toggleStatus} - Tags matching the rules defined below will be automatically scheduled for deletion."
+msgstr ""
+
 msgid "ContainerRegistry|Build an image"
 msgstr ""
 
@@ -7321,6 +7324,15 @@ msgstr ""
 msgid "ContainerRegistry|Invalid tag: missing manifest digest"
 msgstr ""
 
+msgid "ContainerRegistry|Keep tags matching:"
+msgstr ""
+
+msgid "ContainerRegistry|Keep the most recent:"
+msgstr ""
+
+msgid "ContainerRegistry|Keep these tags"
+msgstr ""
+
 msgid "ContainerRegistry|Login"
 msgstr ""
 
@@ -7330,6 +7342,15 @@ msgstr ""
 msgid "ContainerRegistry|Missing or insufficient permission, delete button disabled"
 msgstr ""
 
+msgid "ContainerRegistry|Next cleanup scheduled to run on:"
+msgstr ""
+
+msgid "ContainerRegistry|Not yet scheduled"
+msgstr ""
+
+msgid "ContainerRegistry|Note: Any policy update will result in a change to the scheduled run date and time"
+msgstr ""
+
 msgid "ContainerRegistry|Number of tags to retain:"
 msgstr ""
 
@@ -7353,7 +7374,16 @@ msgid_plural "ContainerRegistry|Remove tags"
 msgstr[0] ""
 msgstr[1] ""
 
-msgid "ContainerRegistry|Set cleanup policy"
+msgid "ContainerRegistry|Remove tags matching:"
+msgstr ""
+
+msgid "ContainerRegistry|Remove tags older than:"
+msgstr ""
+
+msgid "ContainerRegistry|Remove these tags"
+msgstr ""
+
+msgid "ContainerRegistry|Run cleanup every:"
 msgstr ""
 
 msgid "ContainerRegistry|Some tags were not deleted"
@@ -7395,12 +7425,24 @@ msgstr ""
 msgid "ContainerRegistry|Tags successfully marked for deletion."
 msgstr ""
 
+msgid "ContainerRegistry|Tags that match these rules will always be %{strongStart}kept%{strongEnd}, even if they match a removal rule below. The %{secondStrongStart}latest%{secondStrongEnd} tag will always be kept."
+msgstr ""
+
+msgid "ContainerRegistry|Tags that match these rules will be %{strongStart}removed%{strongEnd}, unless kept by a rule above."
+msgstr ""
+
 msgid "ContainerRegistry|Tags with names matching this regex pattern will %{italicStart}be preserved:%{italicEnd}"
 msgstr ""
 
 msgid "ContainerRegistry|Tags with names matching this regex pattern will %{italicStart}expire:%{italicEnd}"
 msgstr ""
 
+msgid "ContainerRegistry|Tags with names matching this regex pattern will be kept. %{linkStart}More information%{linkEnd}"
+msgstr ""
+
+msgid "ContainerRegistry|Tags with names matching this regex pattern will be removed. %{linkStart}More information%{linkEnd}"
+msgstr ""
+
 msgid "ContainerRegistry|The cleanup policy timed out before it could delete all tags. An administrator can %{adminLinkStart}manually run cleanup now%{adminLinkEnd} or you can wait for the cleanup policy to automatically run again. %{docLinkStart}More information%{docLinkEnd}"
 msgstr ""
 

spec/frontend/registry/settings/components/expiration_dropdown_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlFormGroup, GlFormSelect } from 'jest/registry/shared/stubs';
+import component from '~/registry/settings/components/expiration_dropdown.vue';
+
+describe('ExpirationDropdown', () => {
+  let wrapper;
+
+  const defaultProps = {
+    name: 'foo',
+    label: 'label-bar',
+    formOptions: [{ key: 'foo', label: 'bar' }, { key: 'baz', label: 'zab' }],
+  };
+
+  const findFormSelect = () => wrapper.find(GlFormSelect);
+  const findFormGroup = () => wrapper.find(GlFormGroup);
+  const findOptions = () => wrapper.findAll('[data-testid="option"]');
+
+  const mountComponent = props => {
+    wrapper = shallowMount(component, {
+      stubs: {
+        GlFormGroup,
+        GlFormSelect,
+      },
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('structure', () => {
+    it('has a form-select component', () => {
+      mountComponent();
+      expect(findFormSelect().exists()).toBe(true);
+    });
+
+    it('has the correct options', () => {
+      mountComponent();
+
+      expect(findOptions()).toHaveLength(defaultProps.formOptions.length);
+    });
+  });
+
+  describe('model', () => {
+    it('assign the right props to the form-select component', () => {
+      const value = 'foobar';
+      const disabled = true;
+
+      mountComponent({ value, disabled });
+
+      expect(findFormSelect().props()).toMatchObject({
+        value,
+        disabled,
+      });
+      expect(findFormSelect().attributes('id')).toBe(defaultProps.name);
+    });
+
+    it('assign the right props to the form-group component', () => {
+      mountComponent();
+
+      expect(findFormGroup().attributes()).toMatchObject({
+        id: `${defaultProps.name}-form-group`,
+        'label-for': defaultProps.name,
+        label: defaultProps.label,
+      });
+    });
+
+    it('emits input event when form-select emits input', () => {
+      const emittedValue = 'barfoo';
+
+      mountComponent();
+
+      findFormSelect().vm.$emit('input', emittedValue);
+
+      expect(wrapper.emitted('input')).toEqual([[emittedValue]]);
+    });
+  });
+});

spec/frontend/registry/settings/components/expiration_run_text_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlFormInput } from '@gitlab/ui';
+import { GlFormGroup } from 'jest/registry/shared/stubs';
+import component from '~/registry/settings/components/expiration_run_text.vue';
+import { NEXT_CLEANUP_LABEL, NOT_SCHEDULED_POLICY_TEXT } from '~/registry/settings/constants';
+
+describe('ExpirationToggle', () => {
+  let wrapper;
+  const value = 'foo';
+
+  const findInput = () => wrapper.find(GlFormInput);
+  const findFormGroup = () => wrapper.find(GlFormGroup);
+
+  const mountComponent = propsData => {
+    wrapper = shallowMount(component, {
+      stubs: {
+        GlFormGroup,
+      },
+      propsData,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('structure', () => {
+    it('has an input component', () => {
+      mountComponent();
+      expect(findInput().exists()).toBe(true);
+    });
+  });
+
+  describe('model', () => {
+    it('assigns the right props to the input component', () => {
+      mountComponent({ value, disabled: true });
+
+      expect(findInput().attributes()).toMatchObject({
+        value,
+      });
+    });
+
+    it('assigns the right props to the form-group component', () => {
+      mountComponent();
+
+      expect(findFormGroup().attributes()).toMatchObject({
+        label: NEXT_CLEANUP_LABEL,
+      });
+    });
+  });
+
+  describe('formattedValue', () => {
+    it('displays the values when it exists', () => {
+      mountComponent({ value });
+
+      expect(findInput().attributes('value')).toBe(value);
+    });
+
+    it('displays a placeholder when no value is present', () => {
+      mountComponent();
+
+      expect(findInput().attributes('value')).toBe(NOT_SCHEDULED_POLICY_TEXT);
+    });
+  });
+});

spec/frontend/registry/settings/components/expiration_textarea_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlSprintf, GlFormTextarea, GlLink } from '@gitlab/ui';
+import { GlFormGroup } from 'jest/registry/shared/stubs';
+import component from '~/registry/settings/components/expiration_textarea.vue';
+import { NAME_REGEX_LENGTH } from '~/registry/shared/constants';
+
+describe('ExpirationTextarea', () => {
+  let wrapper;
+
+  const defaultProps = {
+    name: 'foo',
+    label: 'label-bar',
+    placeholder: 'placeholder-baz',
+    description: '%{linkStart}description-foo%{linkEnd}',
+  };
+
+  const tagsRegexHelpPagePath = 'fooPath';
+
+  const findTextArea = () => wrapper.find(GlFormTextarea);
+  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(findTextArea().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(findTextArea().attributes()).toMatchObject({
+        id: defaultProps.name,
+        value,
+        placeholder: defaultProps.placeholder,
+        disabled: `${disabled}`,
+        trim: '',
+      });
+    });
+
+    it('emits input event when textarea emits input', () => {
+      const emittedValue = 'barfoo';
+
+      mountComponent();
+
+      findTextArea().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 });
+
+            findTextArea().vm.$emit('input', invalidString);
+          });
+
+          it('textAreaValidation state is false', () => {
+            expect(findFormGroup().props('state')).toBe(false);
+            expect(findTextArea().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();
+
+          findTextArea().vm.$emit('input', 'foo');
+
+          expect(findFormGroup().props('state')).toBe(true);
+          expect(findTextArea().attributes('state')).toBe('true');
+          expect(wrapper.emitted('validation')).toEqual([[true]]);
+        });
+      });
+    });
+  });
+});

spec/frontend/registry/settings/components/expiration_toggle_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlToggle, GlSprintf } from '@gitlab/ui';
+import { GlFormGroup } from 'jest/registry/shared/stubs';
+import component from '~/registry/settings/components/expiration_toggle.vue';
+import {
+  ENABLE_TOGGLE_DESCRIPTION,
+  ENABLED_TEXT,
+  DISABLED_TEXT,
+} from '~/registry/settings/constants';
+
+describe('ExpirationToggle', () => {
+  let wrapper;
+
+  const findToggle = () => wrapper.find(GlToggle);
+  const findDescription = () => wrapper.find('[data-testid="description"]');
+
+  const mountComponent = propsData => {
+    wrapper = shallowMount(component, {
+      stubs: {
+        GlFormGroup,
+        GlSprintf,
+      },
+      propsData,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('structure', () => {
+    it('has a toggle component', () => {
+      mountComponent();
+
+      expect(findToggle().exists()).toBe(true);
+    });
+
+    it('has a description', () => {
+      mountComponent();
+
+      expect(findDescription().text()).toContain(
+        ENABLE_TOGGLE_DESCRIPTION.replace('%{toggleStatus}', ''),
+      );
+    });
+  });
+
+  describe('model', () => {
+    it('assigns the right props to the toggle component', () => {
+      mountComponent({ value: true, disabled: true });
+
+      expect(findToggle().props()).toMatchObject({
+        value: true,
+        disabled: true,
+      });
+    });
+
+    it('emits input event when toggle is updated', () => {
+      mountComponent();
+
+      findToggle().vm.$emit('change', false);
+
+      expect(wrapper.emitted('input')).toEqual([[false]]);
+    });
+  });
+
+  describe('toggle description', () => {
+    it('says enabled when the toggle is on', () => {
+      mountComponent({ value: true });
+
+      expect(findDescription().text()).toContain(ENABLED_TEXT);
+    });
+
+    it('says disabled when the toggle is off', () => {
+      mountComponent({ value: false });
+
+      expect(findDescription().text()).toContain(DISABLED_TEXT);
+    });
+  });
+});

spec/frontend/registry/settings/mock_data.js

+export const containerExpirationPolicyData = () => ({
+  cadence: 'EVERY_DAY',
+  enabled: true,
+  keepN: 'TEN_TAGS',
+  nameRegex: 'asdasdssssdfdf',
+  nameRegexKeep: 'sss',
+  olderThan: 'FOURTEEN_DAYS',
+  nextRunAt: '2020-11-19T07:37:03.941Z',
+});
+
 export const expirationPolicyPayload = override => ({
   data: {
     project: {
       containerExpirationPolicy: {
-        cadence: 'EVERY_DAY',
-        enabled: true,
-        keepN: 'TEN_TAGS',
-        nameRegex: 'asdasdssssdfdf',
-        nameRegexKeep: 'sss',
-        olderThan: 'FOURTEEN_DAYS',
+        ...containerExpirationPolicyData(),
         ...override,
       },
     },
@@ -26,12 +31,7 @@ export const expirationPolicyMutationPayload = ({ override, errors = [] } = {})
   data: {
     updateContainerExpirationPolicy: {
       containerExpirationPolicy: {
-        cadence: 'EVERY_DAY',
-        enabled: true,
-        keepN: 'TEN_TAGS',
-        nameRegex: 'asdasdssssdfdf',
-        nameRegexKeep: 'sss',
-        olderThan: 'FOURTEEN_DAYS',
+        ...containerExpirationPolicyData(),
         ...override,
       },
       errors,

spec/frontend/registry/shared/stubs.js

@@ -9,3 +9,23 @@ export const GlCard = {
 </div>
 `,
 };
+
+export const GlFormGroup = {
+  name: 'gl-form-group-stub',
+  props: ['state'],
+  template: `
+  <div>
+    <slot name="label"></slot>
+    <slot></slot>
+    <slot name="description"></slot>
+  </div>`,
+};
+
+export const GlFormSelect = {
+  name: 'gl-form-select-stub',
+  props: ['disabled', 'value'],
+  template: `
+  <div>
+    <slot></slot>
+  </div>`,
+};