Add latest changes from gitlab-org/gitlab@master

1 files changed, 84 insertions, 12 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);
+      });
+    });
+  });
 });