Add latest changes from gitlab-org/gitlab@master

4 files changed, 235 insertions, 281 deletions

diff --git a/spec/frontend/registry/settings/components/settings_form_spec.js b/spec/frontend/registry/settings/components/settings_form_spec.js
index eefb0313a0b..2b3e529b283 100644
--- a/spec/frontend/registry/settings/components/settings_form_spec.js
+++ b/spec/frontend/registry/settings/components/settings_form_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import Tracking from '~/tracking';
 import component from '~/registry/settings/components/settings_form.vue';
-import expirationPolicyForm from '~/registry/shared/components/expiration_policy_form.vue';
+import expirationPolicyFields from '~/registry/shared/components/expiration_policy_fields.vue';
 import { createStore } from '~/registry/settings/store/';
 import {
   UPDATE_SETTINGS_ERROR_MESSAGE,
@@ -14,14 +14,34 @@ describe('Settings Form', () => {
   let store;
   let dispatchSpy;
 
+  const GlLoadingIcon = { name: 'gl-loading-icon-stub', template: '<svg></svg>' };
+  const GlCard = {
+    name: 'gl-card-stub',
+    template: `
+  <div>
+    <slot name="header"></slot>
+    <slot></slot>
+    <slot name="footer"></slot>
+  </div>
+  `,
+  };
+
   const trackingPayload = {
     label: 'docker_container_retention_and_expiration_policies',
   };
 
-  const findForm = () => wrapper.find(expirationPolicyForm);
+  const findForm = () => wrapper.find({ ref: 'form-element' });
+  const findFields = () => wrapper.find(expirationPolicyFields);
+  const findCancelButton = () => wrapper.find({ ref: 'cancel-button' });
+  const findSaveButton = () => wrapper.find({ ref: 'save-button' });
+  const findLoadingIcon = (parent = wrapper) => parent.find(GlLoadingIcon);
 
   const mountComponent = () => {
     wrapper = shallowMount(component, {
+      stubs: {
+        GlCard,
+        GlLoadingIcon,
+      },
       mocks: {
         $toast: {
           show: jest.fn(),
@@ -47,46 +67,50 @@ describe('Settings Form', () => {
     let form;
     beforeEach(() => {
       form = findForm();
+      dispatchSpy.mockReturnValue();
     });
 
     describe('data binding', () => {
       it('v-model change update the settings property', () => {
-        dispatchSpy.mockReturnValue();
-        form.vm.$emit('input', 'foo');
+        findFields().vm.$emit('input', 'foo');
         expect(dispatchSpy).toHaveBeenCalledWith('updateSettings', { settings: 'foo' });
       });
     });
 
     describe('form reset event', () => {
+      beforeEach(() => {
+        form.trigger('reset');
+      });
       it('calls the appropriate function', () => {
-        dispatchSpy.mockReturnValue();
-        form.vm.$emit('reset');
         expect(dispatchSpy).toHaveBeenCalledWith('resetSettings');
       });
 
       it('tracks the reset event', () => {
-        dispatchSpy.mockReturnValue();
-        form.vm.$emit('reset');
         expect(Tracking.event).toHaveBeenCalledWith(undefined, 'reset_form', trackingPayload);
       });
     });
 
     describe('form submit event ', () => {
+      it('save has type submit', () => {
+        mountComponent();
+        expect(findSaveButton().attributes('type')).toBe('submit');
+      });
+
       it('dispatches the saveSettings action', () => {
         dispatchSpy.mockResolvedValue();
-        form.vm.$emit('submit');
+        form.trigger('submit');
         expect(dispatchSpy).toHaveBeenCalledWith('saveSettings');
       });
 
       it('tracks the submit event', () => {
         dispatchSpy.mockResolvedValue();
-        form.vm.$emit('submit');
+        form.trigger('submit');
         expect(Tracking.event).toHaveBeenCalledWith(undefined, 'submit_form', trackingPayload);
       });
 
       it('show a success toast when submit succeed', () => {
         dispatchSpy.mockResolvedValue();
-        form.vm.$emit('submit');
+        form.trigger('submit');
         return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_SUCCESS_MESSAGE, {
             type: 'success',
@@ -96,7 +120,7 @@ describe('Settings Form', () => {
 
       it('show an error toast when submit fails', () => {
         dispatchSpy.mockRejectedValue();
-        form.vm.$emit('submit');
+        form.trigger('submit');
         return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_ERROR_MESSAGE, {
             type: 'error',
@@ -105,4 +129,52 @@ describe('Settings Form', () => {
       });
     });
   });
+
+  describe('form actions', () => {
+    describe('cancel button', () => {
+      beforeEach(() => {
+        store.commit('SET_SETTINGS', { foo: 'bar' });
+      });
+
+      it('has type reset', () => {
+        expect(findCancelButton().attributes('type')).toBe('reset');
+      });
+
+      it('is disabled when isEdited is false', () =>
+        wrapper.vm.$nextTick().then(() => {
+          expect(findCancelButton().attributes('disabled')).toBe('true');
+        }));
+
+      it('is disabled isLoading is true', () => {
+        store.commit('TOGGLE_LOADING');
+        store.commit('UPDATE_SETTINGS', { settings: { foo: 'baz' } });
+        return wrapper.vm.$nextTick().then(() => {
+          expect(findCancelButton().attributes('disabled')).toBe('true');
+          store.commit('TOGGLE_LOADING');
+        });
+      });
+
+      it('is enabled when isLoading is false and isEdited is true', () => {
+        store.commit('UPDATE_SETTINGS', { settings: { foo: 'baz' } });
+        return wrapper.vm.$nextTick().then(() => {
+          expect(findCancelButton().attributes('disabled')).toBe(undefined);
+        });
+      });
+    });
+
+    describe('when isLoading is true', () => {
+      beforeEach(() => {
+        store.commit('TOGGLE_LOADING');
+      });
+      afterEach(() => {
+        store.commit('TOGGLE_LOADING');
+      });
+
+      it('submit button is disabled and shows a spinner', () => {
+        const button = findSaveButton();
+        expect(button.attributes('disabled')).toBeTruthy();
+        expect(findLoadingIcon(button).exists()).toBe(true);
+      });
+    });
+  });
 });
diff --git a/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap b/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap
new file mode 100644
index 00000000000..c5f5ea68d9e
--- /dev/null
+++ b/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap
@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Expiration Policy Form renders 1`] = `
+<div
+  class="lh-2"
+>
+  <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"
+    >
+      <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"
+    >
+      <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"
+    >
+      <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>
+`;
diff --git a/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_form_spec.js.snap b/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_form_spec.js.snap
deleted file mode 100644
index b53736951e1..00000000000
--- a/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_form_spec.js.snap
+++ /dev/null
@@ -1,186 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Expiration Policy Form renders 1`] = `
-<form
-  class="lh-2"
->
-  <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"
-        >
-          <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"
-        >
-          <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"
-        >
-          <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"
-          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/shared/components/expiration_policy_form_spec.js b/spec/frontend/registry/shared/components/expiration_policy_fields_spec.js
index b51519925f1..b384fd62406 100644
--- a/spec/frontend/registry/shared/components/expiration_policy_form_spec.js
+++ b/spec/frontend/registry/shared/components/expiration_policy_fields_spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import stubChildren from 'helpers/stub_children';
-import component from '~/registry/shared/components/expiration_policy_form.vue';
+import component from '~/registry/shared/components/expiration_policy_fields.vue';
 
 import { NAME_REGEX_LENGTH } from '~/registry/shared/constants';
 import { formOptions } from '../mock_data';
@@ -10,22 +10,14 @@ describe('Expiration Policy Form', () => {
 
   const FORM_ELEMENTS_ID_PREFIX = '#expiration-policy';
 
-  const GlLoadingIcon = { name: 'gl-loading-icon-stub', template: '<svg></svg>' };
-
   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 = props => {
     wrapper = mount(component, {
       stubs: {
         ...stubChildren(component),
-        GlCard: false,
-        GlLoadingIcon,
       },
       propsData: {
         formOptions,
@@ -114,77 +106,20 @@ describe('Expiration Policy Form', () => {
     },
   );
 
-  describe('form actions', () => {
-    describe('cancel button', () => {
-      it('has type reset', () => {
-        mountComponent();
-        expect(findCancelButton().attributes('type')).toBe('reset');
-      });
-
-      it('is disabled when disableCancelButton is true', () => {
-        mountComponent({ disableCancelButton: true });
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findCancelButton().attributes('disabled')).toBe('true');
-        });
-      });
-
-      it('is disabled isLoading is true', () => {
-        mountComponent({ isLoading: true });
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findCancelButton().attributes('disabled')).toBe('true');
-        });
-      });
-
-      it('is enabled when isLoading and disableCancelButton are false', () => {
-        mountComponent({ disableCancelButton: false, isLoading: false });
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findCancelButton().attributes('disabled')).toBe(undefined);
-        });
-      });
-    });
-
-    describe('form cancel event', () => {
-      it('calls the appropriate function', () => {
-        mountComponent();
-        findForm().trigger('reset');
-        expect(wrapper.emitted('reset')).toBeTruthy();
-      });
-    });
-
-    it('save has type submit', () => {
-      mountComponent();
-      expect(findSaveButton().attributes('type')).toBe('submit');
-    });
-
-    describe('when isLoading is true', () => {
-      beforeEach(() => {
-        mountComponent({ isLoading: true });
-      });
-
-      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();
-      });
+  describe('when isLoading is true', () => {
+    beforeEach(() => {
+      mountComponent({ isLoading: true });
     });
 
-    describe('form submit event ', () => {
-      it('calls the appropriate function', () => {
-        mountComponent();
-        findForm().trigger('submit');
-        expect(wrapper.emitted('submit')).toBeTruthy();
-      });
+    it.each`
+      elementName
+      ${'toggle'}
+      ${'interval'}
+      ${'schedule'}
+      ${'latest'}
+      ${'name-matching'}
+    `(`${FORM_ELEMENTS_ID_PREFIX}-$elementName is disabled`, ({ elementName }) => {
+      expect(findFormElements(elementName).attributes('disabled')).toBe('true');
     });
   });
 
@@ -196,20 +131,20 @@ describe('Expiration Policy Form', () => {
         mountComponent({ value: { name_regex: invalidString } });
       });
 
-      it('save btn is disabled', () => {
-        expect(findSaveButton().attributes('disabled')).toBeTruthy();
-      });
-
       it('nameRegexState is false', () => {
         expect(wrapper.vm.nameRegexState).toBe(false);
       });
+
+      it('emit the @invalidated event', () => {
+        expect(wrapper.emitted('invalidated')).toBeTruthy();
+      });
     });
 
     it('if the user did not type validation is null', () => {
       mountComponent({ value: { name_regex: '' } });
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.vm.nameRegexState).toBe(null);
-        expect(findSaveButton().attributes('disabled')).toBeFalsy();
+        expect(wrapper.emitted('validated')).toBeTruthy();
       });
     });