Add latest changes from gitlab-org/gitlab@master

7 files changed, 33 insertions, 407 deletions

diff --git a/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap b/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap
deleted file mode 100644
index 06f73c8f456..00000000000
--- a/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap
+++ /dev/null
@@ -1,188 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Settings Form renders 1`] = `
-<form>
-  <div
-    class="card"
-  >
-    <!---->
-    <div
-      class="card-header"
-    >
-      
-      Tag expiration policy
-    
-    </div>
-    <div
-      class="card-body"
-    >
-      <!---->
-      <!---->
-        
-      <glformgroup-stub
-        id="expiration-policy-toggle-group"
-        label="Expiration policy:"
-        label-align="right"
-        label-cols="3"
-        label-for="expiration-policy-toggle"
-      >
-        <div
-          class="d-flex align-items-start"
-        >
-          <gltoggle-stub
-            id="expiration-policy-toggle"
-            labeloff="Toggle Status: OFF"
-            labelon="Toggle Status: ON"
-          />
-           
-          <span
-            class="mb-2 ml-1 lh-2"
-          >
-            Docker tag expiration policy is 
-            <strong>
-              disabled
-            </strong>
-          </span>
-        </div>
-      </glformgroup-stub>
-       
-      <glformgroup-stub
-        id="expiration-policy-interval-group"
-        label="Expiration interval:"
-        label-align="right"
-        label-cols="3"
-        label-for="expiration-policy-interval"
-      >
-        <glformselect-stub
-          disabled="true"
-          id="expiration-policy-interval"
-          value="bar"
-        >
-          <option
-            value="foo"
-          >
-            
-            Foo
-          
-          </option>
-          <option
-            value="bar"
-          >
-            
-            Bar
-          
-          </option>
-        </glformselect-stub>
-      </glformgroup-stub>
-       
-      <glformgroup-stub
-        id="expiration-policy-schedule-group"
-        label="Expiration schedule:"
-        label-align="right"
-        label-cols="3"
-        label-for="expiration-policy-schedule"
-      >
-        <glformselect-stub
-          disabled="true"
-          id="expiration-policy-schedule"
-          value="bar"
-        >
-          <option
-            value="foo"
-          >
-            
-            Foo
-          
-          </option>
-          <option
-            value="bar"
-          >
-            
-            Bar
-          
-          </option>
-        </glformselect-stub>
-      </glformgroup-stub>
-       
-      <glformgroup-stub
-        id="expiration-policy-latest-group"
-        label="Number of tags to retain:"
-        label-align="right"
-        label-cols="3"
-        label-for="expiration-policy-latest"
-      >
-        <glformselect-stub
-          disabled="true"
-          id="expiration-policy-latest"
-          value="bar"
-        >
-          <option
-            value="foo"
-          >
-            
-            Foo
-          
-          </option>
-          <option
-            value="bar"
-          >
-            
-            Bar
-          
-          </option>
-        </glformselect-stub>
-      </glformgroup-stub>
-       
-      <glformgroup-stub
-        id="expiration-policy-name-matching-group"
-        invalid-feedback="The value of this input should be less than 255 characters"
-        label="Docker tags with names matching this regex pattern will expire:"
-        label-align="right"
-        label-cols="3"
-        label-for="expiration-policy-name-matching"
-      >
-        <glformtextarea-stub
-          disabled="true"
-          id="expiration-policy-name-matching"
-          placeholder=".*"
-          trim=""
-          value=""
-        />
-      </glformgroup-stub>
-       
-    </div>
-    <div
-      class="card-footer"
-    >
-      <div
-        class="d-flex justify-content-end"
-      >
-        <glbutton-stub
-          class="mr-2 d-block"
-          disabled="true"
-          size="md"
-          type="reset"
-          variant="secondary"
-        >
-          
-          Cancel
-        
-        </glbutton-stub>
-         
-        <glbutton-stub
-          class="d-flex justify-content-center align-items-center js-no-auto-disable"
-          size="md"
-          type="submit"
-          variant="success"
-        >
-          
-          Save expiration policy
-          
-          <!---->
-        </glbutton-stub>
-      </div>
-    </div>
-    <!---->
-  </div>
-</form>
-`;
diff --git a/spec/frontend/registry/settings/components/registry_settings_app_spec.js b/spec/frontend/registry/settings/components/registry_settings_app_spec.js
index 8a5c5d84198..e9ba65e4387 100644
--- a/spec/frontend/registry/settings/components/registry_settings_app_spec.js
+++ b/spec/frontend/registry/settings/components/registry_settings_app_spec.js
@@ -4,7 +4,7 @@ import component from '~/registry/settings/components/registry_settings_app.vue'
 import SettingsForm from '~/registry/settings/components/settings_form.vue';
 import { createStore } from '~/registry/settings/store/';
 import { SET_IS_DISABLED } from '~/registry/settings/store/mutation_types';
-import { FETCH_SETTINGS_ERROR_MESSAGE } from '~/registry/settings/constants';
+import { FETCH_SETTINGS_ERROR_MESSAGE } from '~/registry/shared/constants';
 
 describe('Registry Settings App', () => {
   let wrapper;
diff --git a/spec/frontend/registry/settings/components/settings_form_spec.js b/spec/frontend/registry/settings/components/settings_form_spec.js
index 89dd161ec3e..eefb0313a0b 100644
--- a/spec/frontend/registry/settings/components/settings_form_spec.js
+++ b/spec/frontend/registry/settings/components/settings_form_spec.js
@@ -1,49 +1,33 @@
-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import Tracking from '~/tracking';
-import stubChildren from 'helpers/stub_children';
 import component from '~/registry/settings/components/settings_form.vue';
+import expirationPolicyForm from '~/registry/shared/components/expiration_policy_form.vue';
 import { createStore } from '~/registry/settings/store/';
 import {
-  NAME_REGEX_LENGTH,
   UPDATE_SETTINGS_ERROR_MESSAGE,
   UPDATE_SETTINGS_SUCCESS_MESSAGE,
-} from '~/registry/settings/constants';
-import { stringifiedFormOptions } from '../mock_data';
+} from '~/registry/shared/constants';
+import { stringifiedFormOptions } from '../../shared/mock_data';
 
 describe('Settings Form', () => {
   let wrapper;
   let store;
   let dispatchSpy;
 
-  const FORM_ELEMENTS_ID_PREFIX = '#expiration-policy';
   const trackingPayload = {
     label: 'docker_container_retention_and_expiration_policies',
   };
 
-  const GlLoadingIcon = { name: 'gl-loading-icon-stub', template: '<svg></svg>' };
+  const findForm = () => wrapper.find(expirationPolicyForm);
 
-  const findFormGroup = name => wrapper.find(`${FORM_ELEMENTS_ID_PREFIX}-${name}-group`);
-  const findFormElements = (name, parent = wrapper) =>
-    parent.find(`${FORM_ELEMENTS_ID_PREFIX}-${name}`);
-  const findCancelButton = () => wrapper.find({ ref: 'cancel-button' });
-  const findSaveButton = () => wrapper.find({ ref: 'save-button' });
-  const findForm = () => wrapper.find({ ref: 'form-element' });
-  const findLoadingIcon = (parent = wrapper) => parent.find(GlLoadingIcon);
-
-  const mountComponent = (options = {}) => {
-    wrapper = mount(component, {
-      stubs: {
-        ...stubChildren(component),
-        GlCard: false,
-        GlLoadingIcon,
-      },
+  const mountComponent = () => {
+    wrapper = shallowMount(component, {
       mocks: {
         $toast: {
           show: jest.fn(),
         },
       },
       store,
-      ...options,
     });
   };
 
@@ -59,170 +43,50 @@ describe('Settings Form', () => {
     wrapper.destroy();
   });
 
-  it('renders', () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  describe.each`
-    elementName        | modelName       | value    | disabledByToggle
-    ${'toggle'}        | ${'enabled'}    | ${true}  | ${'not disabled'}
-    ${'interval'}      | ${'older_than'} | ${'foo'} | ${'disabled'}
-    ${'schedule'}      | ${'cadence'}    | ${'foo'} | ${'disabled'}
-    ${'latest'}        | ${'keep_n'}     | ${'foo'} | ${'disabled'}
-    ${'name-matching'} | ${'name_regex'} | ${'foo'} | ${'disabled'}
-  `(
-    `${FORM_ELEMENTS_ID_PREFIX}-$elementName form element`,
-    ({ elementName, modelName, value, disabledByToggle }) => {
-      let formGroup;
-      beforeEach(() => {
-        formGroup = findFormGroup(elementName);
-      });
-      it(`${elementName} form group exist in the dom`, () => {
-        expect(formGroup.exists()).toBe(true);
-      });
-
-      it(`${elementName} form group has a label-for property`, () => {
-        expect(formGroup.attributes('label-for')).toBe(`expiration-policy-${elementName}`);
-      });
-
-      it(`${elementName} form group has a label-cols property`, () => {
-        expect(formGroup.attributes('label-cols')).toBe(`${wrapper.vm.$options.labelsConfig.cols}`);
-      });
-
-      it(`${elementName} form group has a label-align property`, () => {
-        expect(formGroup.attributes('label-align')).toBe(
-          `${wrapper.vm.$options.labelsConfig.align}`,
-        );
-      });
-
-      it(`${elementName} form group contains an input element`, () => {
-        expect(findFormElements(elementName, formGroup).exists()).toBe(true);
-      });
-
-      it(`${elementName} form element change updated ${modelName} with ${value}`, () => {
-        const element = findFormElements(elementName, formGroup);
-        const modelUpdateEvent = element.vm.$options.model
-          ? element.vm.$options.model.event
-          : 'input';
-        element.vm.$emit(modelUpdateEvent, value);
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm[modelName]).toBe(value);
-        });
-      });
-
-      it(`${elementName} is ${disabledByToggle} by enabled set to false`, () => {
-        store.dispatch('updateSettings', { enabled: false });
-        const expectation = disabledByToggle === 'disabled' ? 'true' : undefined;
-        expect(findFormElements(elementName, formGroup).attributes('disabled')).toBe(expectation);
-      });
-    },
-  );
-
-  describe('form actions', () => {
+  describe('form', () => {
     let form;
     beforeEach(() => {
       form = findForm();
     });
 
-    describe('cancel button', () => {
-      it('has type reset', () => {
-        expect(findCancelButton().attributes('type')).toBe('reset');
-      });
-
-      it('is disabled the form was not changed from his original value', () => {
-        store.dispatch('receiveSettingsSuccess', { foo: 'bar' });
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findCancelButton().attributes('disabled')).toBe('true');
-        });
-      });
-
-      it('is disabled when the form data is loading', () => {
-        store.dispatch('toggleLoading');
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findCancelButton().attributes('disabled')).toBe('true');
-        });
-      });
-
-      it('is enabled when the user changed something in the form and the data is not being loaded', () => {
-        store.dispatch('receiveSettingsSuccess', { foo: 'bar' });
-        store.dispatch('updateSettings', { foo: 'baz' });
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findCancelButton().attributes('disabled')).toBe(undefined);
-        });
+    describe('data binding', () => {
+      it('v-model change update the settings property', () => {
+        dispatchSpy.mockReturnValue();
+        form.vm.$emit('input', 'foo');
+        expect(dispatchSpy).toHaveBeenCalledWith('updateSettings', { settings: 'foo' });
       });
     });
 
-    describe('form cancel event', () => {
+    describe('form reset event', () => {
       it('calls the appropriate function', () => {
         dispatchSpy.mockReturnValue();
-        form.trigger('reset');
+        form.vm.$emit('reset');
         expect(dispatchSpy).toHaveBeenCalledWith('resetSettings');
       });
 
       it('tracks the reset event', () => {
         dispatchSpy.mockReturnValue();
-        form.trigger('reset');
+        form.vm.$emit('reset');
         expect(Tracking.event).toHaveBeenCalledWith(undefined, 'reset_form', trackingPayload);
       });
     });
 
-    it('save has type submit', () => {
-      expect(findSaveButton().attributes('type')).toBe('submit');
-    });
-
-    describe('when isLoading is true', () => {
-      beforeEach(() => {
-        store.dispatch('toggleLoading');
-      });
-
-      afterEach(() => {
-        store.dispatch('toggleLoading');
-      });
-
-      it.each`
-        elementName
-        ${'toggle'}
-        ${'interval'}
-        ${'schedule'}
-        ${'latest'}
-        ${'name-matching'}
-      `(`${FORM_ELEMENTS_ID_PREFIX}-$elementName is disabled`, ({ elementName }) => {
-        expect(findFormElements(elementName).attributes('disabled')).toBe('true');
-      });
-
-      it('submit button is disabled and shows a spinner', () => {
-        const button = findSaveButton();
-        expect(button.attributes('disabled')).toBeTruthy();
-        expect(findLoadingIcon(button)).toExist();
-      });
-
-      it('cancel button is disabled', () => {
-        expect(findCancelButton().attributes('disabled')).toBeTruthy();
-      });
-    });
-
     describe('form submit event ', () => {
-      it('calls the appropriate function', () => {
-        dispatchSpy.mockResolvedValue();
-        form.trigger('submit');
-        expect(dispatchSpy).toHaveBeenCalled();
-      });
-
       it('dispatches the saveSettings action', () => {
         dispatchSpy.mockResolvedValue();
-        form.trigger('submit');
+        form.vm.$emit('submit');
         expect(dispatchSpy).toHaveBeenCalledWith('saveSettings');
       });
 
       it('tracks the submit event', () => {
         dispatchSpy.mockResolvedValue();
-        form.trigger('submit');
+        form.vm.$emit('submit');
         expect(Tracking.event).toHaveBeenCalledWith(undefined, 'submit_form', trackingPayload);
       });
 
       it('show a success toast when submit succeed', () => {
         dispatchSpy.mockResolvedValue();
-        form.trigger('submit');
+        form.vm.$emit('submit');
         return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_SUCCESS_MESSAGE, {
             type: 'success',
@@ -232,7 +96,7 @@ describe('Settings Form', () => {
 
       it('show an error toast when submit fails', () => {
         dispatchSpy.mockRejectedValue();
-        form.trigger('submit');
+        form.vm.$emit('submit');
         return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_ERROR_MESSAGE, {
             type: 'error',
@@ -241,45 +105,4 @@ describe('Settings Form', () => {
       });
     });
   });
-
-  describe('form validation', () => {
-    describe(`when name regex is longer than ${NAME_REGEX_LENGTH}`, () => {
-      const invalidString = new Array(NAME_REGEX_LENGTH + 2).join(',');
-      beforeEach(() => {
-        store.dispatch('updateSettings', { name_regex: invalidString });
-      });
-
-      it('save btn is disabled', () => {
-        expect(findSaveButton().attributes('disabled')).toBeTruthy();
-      });
-
-      it('nameRegexState is false', () => {
-        expect(wrapper.vm.nameRegexState).toBe(false);
-      });
-    });
-
-    it('if the user did not type validation is null', () => {
-      store.dispatch('updateSettings', { name_regex: null });
-      expect(wrapper.vm.nameRegexState).toBe(null);
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findSaveButton().attributes('disabled')).toBeFalsy();
-      });
-    });
-
-    it(`if the user typed and is less than ${NAME_REGEX_LENGTH} state is true`, () => {
-      store.dispatch('updateSettings', { name_regex: 'abc' });
-      expect(wrapper.vm.nameRegexState).toBe(true);
-    });
-  });
-
-  describe('help text', () => {
-    it('toggleDescriptionText text reflects enabled property', () => {
-      const toggleHelpText = findFormGroup('toggle').find('span');
-      expect(toggleHelpText.html()).toContain('disabled');
-      wrapper.setData({ enabled: true });
-      return wrapper.vm.$nextTick().then(() => {
-        expect(toggleHelpText.html()).toContain('enabled');
-      });
-    });
-  });
 });
diff --git a/spec/frontend/registry/settings/mock_data.js b/spec/frontend/registry/settings/mock_data.js
deleted file mode 100644
index 411363c2c95..00000000000
--- a/spec/frontend/registry/settings/mock_data.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export const options = [{ key: 'foo', label: 'Foo' }, { key: 'bar', label: 'Bar', default: true }];
-export const stringifiedOptions = JSON.stringify(options);
-export const stringifiedFormOptions = {
-  cadenceOptions: stringifiedOptions,
-  keepNOptions: stringifiedOptions,
-  olderThanOptions: stringifiedOptions,
-};
-export const formOptions = {
-  cadence: options,
-  keepN: options,
-  olderThan: options,
-};
diff --git a/spec/frontend/registry/settings/store/actions_spec.js b/spec/frontend/registry/settings/store/actions_spec.js
index f904d0b660a..5038dc82416 100644
--- a/spec/frontend/registry/settings/store/actions_spec.js
+++ b/spec/frontend/registry/settings/store/actions_spec.js
@@ -10,11 +10,14 @@ describe('Actions Registry Store', () => {
     ${'updateSettings'}  | ${types.UPDATE_SETTINGS}   | ${'foo'}
     ${'toggleLoading'}   | ${types.TOGGLE_LOADING}    | ${undefined}
     ${'resetSettings'}   | ${types.RESET_SETTINGS}    | ${undefined}
-  `('%s action invokes %s mutation with payload %s', ({ actionName, mutationName, payload }) => {
-    it('should set the initial state', done => {
-      testAction(actions[actionName], payload, {}, [{ type: mutationName, payload }], [], done);
-    });
-  });
+  `(
+    '$actionName invokes $mutationName with payload $payload',
+    ({ actionName, mutationName, payload }) => {
+      it('should set state', done => {
+        testAction(actions[actionName], payload, {}, [{ type: mutationName, payload }], [], done);
+      });
+    },
+  );
 
   describe('receiveSettingsSuccess', () => {
     it('calls SET_SETTINGS when data is present', () => {
diff --git a/spec/frontend/registry/settings/store/getters_spec.js b/spec/frontend/registry/settings/store/getters_spec.js
index d9ee53766d6..44631b97a39 100644
--- a/spec/frontend/registry/settings/store/getters_spec.js
+++ b/spec/frontend/registry/settings/store/getters_spec.js
@@ -1,6 +1,6 @@
 import * as getters from '~/registry/settings/store/getters';
-import * as utils from '~/registry/settings/utils';
-import { formOptions } from '../mock_data';
+import * as utils from '~/registry/shared/utils';
+import { formOptions } from '../../shared/mock_data';
 
 describe('Getters registry settings store', () => {
   const settings = {
diff --git a/spec/frontend/registry/settings/store/mutations_spec.js b/spec/frontend/registry/settings/store/mutations_spec.js
index deb59089d60..8ab0196fd4d 100644
--- a/spec/frontend/registry/settings/store/mutations_spec.js
+++ b/spec/frontend/registry/settings/store/mutations_spec.js
@@ -1,7 +1,7 @@
 import mutations from '~/registry/settings/store/mutations';
 import * as types from '~/registry/settings/store/mutation_types';
 import createState from '~/registry/settings/store/state';
-import { formOptions, stringifiedFormOptions } from '../mock_data';
+import { formOptions, stringifiedFormOptions } from '../../shared/mock_data';
 
 describe('Mutations Registry Store', () => {
   let mockState;
@@ -28,7 +28,7 @@ describe('Mutations Registry Store', () => {
       mockState.settings = { foo: 'bar' };
       const payload = { foo: 'baz' };
       const expectedState = { ...mockState, settings: payload };
-      mutations[types.UPDATE_SETTINGS](mockState, payload);
+      mutations[types.UPDATE_SETTINGS](mockState, { settings: payload });
       expect(mockState.settings).toEqual(expectedState.settings);
     });
   });