Add latest changes from gitlab-org/gitlab@master

5 files changed, 70 insertions, 149 deletions

diff --git a/spec/frontend/integrations/edit/components/integration_form_spec.js b/spec/frontend/integrations/edit/components/integration_form_spec.js
index 9622cdf0cfe..4c1394f3a87 100644
--- a/spec/frontend/integrations/edit/components/integration_form_spec.js
+++ b/spec/frontend/integrations/edit/components/integration_form_spec.js
@@ -18,7 +18,6 @@ import {
   integrationLevels,
   I18N_SUCCESSFUL_CONNECTION_MESSAGE,
   VALIDATE_INTEGRATION_FORM_EVENT,
-  SAVE_INTEGRATION_EVENT,
   I18N_DEFAULT_ERROR_MESSAGE,
 } from '~/integrations/constants';
 import { createStore } from '~/integrations/edit/store';
@@ -34,6 +33,7 @@ describe('IntegrationForm', () => {
   let wrapper;
   let dispatch;
   let mockAxios;
+  let mockForm;
 
   const createComponent = ({
     customStateProps = {},
@@ -69,11 +69,10 @@ describe('IntegrationForm', () => {
   };
 
   const createForm = ({ isValid = true } = {}) => {
-    const mockForm = document.createElement('form');
+    mockForm = document.createElement('form');
     jest.spyOn(document, 'querySelector').mockReturnValue(mockForm);
     jest.spyOn(mockForm, 'checkValidity').mockReturnValue(isValid);
-
-    return mockForm;
+    jest.spyOn(mockForm, 'submit');
   };
 
   const findOverrideDropdown = () => wrapper.findComponent(OverrideDropdown);
@@ -365,12 +364,8 @@ describe('IntegrationForm', () => {
     `(
       'when `toggle-integration-active` is emitted with $formActive',
       ({ formActive, novalidate }) => {
-        let mockForm;
-
         beforeEach(async () => {
-          mockForm = document.createElement('form');
-          jest.spyOn(document, 'querySelector').mockReturnValue(mockForm);
-
+          createForm();
           createComponent({
             customStateProps: {
               showActive: true,
@@ -389,41 +384,86 @@ describe('IntegrationForm', () => {
   });
 
   describe('when `save` button is clicked', () => {
-    let mockForm;
+    describe('buttons', () => {
+      beforeEach(async () => {
+        createForm();
+        createComponent({
+          customStateProps: {
+            showActive: true,
+            canTest: true,
+            initialActivated: true,
+          },
+        });
+
+        await findSaveButton().vm.$emit('click', new Event('click'));
+      });
+
+      it('sets save button `loading` prop to `true`', () => {
+        expect(findSaveButton().props('loading')).toBe(true);
+      });
+
+      it('sets test button `disabled` prop to `true`', () => {
+        expect(findTestButton().props('disabled')).toBe(true);
+      });
+    });
 
     describe.each`
-      checkValidityReturn | integrationActive | formValid
-      ${true}             | ${false}          | ${true}
-      ${true}             | ${true}           | ${true}
-      ${false}            | ${true}           | ${false}
-      ${false}            | ${false}          | ${true}
+      checkValidityReturn | integrationActive
+      ${true}             | ${false}
+      ${true}             | ${true}
+      ${false}            | ${false}
     `(
-      'when form checkValidity returns $checkValidityReturn and integrationActive is $integrationActive',
-      ({ formValid, integrationActive, checkValidityReturn }) => {
-        beforeEach(() => {
-          mockForm = document.createElement('form');
-          jest.spyOn(document, 'querySelector').mockReturnValue(mockForm);
-          jest.spyOn(mockForm, 'checkValidity').mockReturnValue(checkValidityReturn);
-
+      'when form is valid (checkValidity returns $checkValidityReturn and integrationActive is $integrationActive)',
+      ({ integrationActive, checkValidityReturn }) => {
+        beforeEach(async () => {
+          createForm({ isValid: checkValidityReturn });
           createComponent({
             customStateProps: {
               showActive: true,
+              canTest: true,
               initialActivated: integrationActive,
             },
           });
 
-          findSaveButton().vm.$emit('click', new Event('click'));
-        });
-
-        it('dispatches setIsSaving action', () => {
-          expect(dispatch).toHaveBeenCalledWith('setIsSaving', true);
+          await findSaveButton().vm.$emit('click', new Event('click'));
         });
 
-        it(`emits \`SAVE_INTEGRATION_EVENT\` event with payload \`${formValid}\``, () => {
-          expect(eventHub.$emit).toHaveBeenCalledWith(SAVE_INTEGRATION_EVENT, formValid);
+        it('submit form', () => {
+          expect(mockForm.submit).toHaveBeenCalledTimes(1);
         });
       },
     );
+
+    describe('when form is invalid (checkValidity returns false and integrationActive is true)', () => {
+      beforeEach(async () => {
+        createForm({ isValid: false });
+        createComponent({
+          customStateProps: {
+            showActive: true,
+            canTest: true,
+            initialActivated: true,
+          },
+        });
+
+        await findSaveButton().vm.$emit('click', new Event('click'));
+      });
+
+      it('does not submit form', () => {
+        expect(mockForm.submit).not.toHaveBeenCalled();
+      });
+
+      it('sets save button `loading` prop to `false`', () => {
+        expect(findSaveButton().props('loading')).toBe(false);
+      });
+
+      it('sets test button `disabled` prop to `false`', () => {
+        expect(findTestButton().props('disabled')).toBe(false);
+      });
+
+      it('emits `VALIDATE_INTEGRATION_FORM_EVENT`', () => {
+        expect(eventHub.$emit).toHaveBeenCalledWith(VALIDATE_INTEGRATION_FORM_EVENT);
+      });
+    });
   });
 
   describe('when `test` button is clicked', () => {
diff --git a/spec/frontend/integrations/edit/store/actions_spec.js b/spec/frontend/integrations/edit/store/actions_spec.js
index dff435578a7..b413de2b286 100644
--- a/spec/frontend/integrations/edit/store/actions_spec.js
+++ b/spec/frontend/integrations/edit/store/actions_spec.js
@@ -4,7 +4,6 @@ import testAction from 'helpers/vuex_action_helper';
 import { I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE } from '~/integrations/constants';
 import {
   setOverride,
-  setIsSaving,
   setIsResetting,
   requestResetIntegration,
   receiveResetIntegrationSuccess,
@@ -39,12 +38,6 @@ describe('Integration form store actions', () => {
     });
   });
 
-  describe('setIsSaving', () => {
-    it('should commit isSaving mutation', () => {
-      return testAction(setIsSaving, true, state, [{ type: types.SET_IS_SAVING, payload: true }]);
-    });
-  });
-
   describe('setIsResetting', () => {
     it('should commit isResetting mutation', () => {
       return testAction(setIsResetting, true, state, [
diff --git a/spec/frontend/integrations/edit/store/getters_spec.js b/spec/frontend/integrations/edit/store/getters_spec.js
index 037629d22a6..3353e0c84cc 100644
--- a/spec/frontend/integrations/edit/store/getters_spec.js
+++ b/spec/frontend/integrations/edit/store/getters_spec.js
@@ -1,11 +1,4 @@
-import {
-  currentKey,
-  isInheriting,
-  isDisabled,
-  propsSource,
-} from '~/integrations/edit/store/getters';
-import * as types from '~/integrations/edit/store/mutation_types';
-import mutations from '~/integrations/edit/store/mutations';
+import { currentKey, isInheriting, propsSource } from '~/integrations/edit/store/getters';
 import createState from '~/integrations/edit/store/state';
 import { mockIntegrationProps } from '../mock_data';
 
@@ -52,24 +45,6 @@ describe('Integration form store getters', () => {
     });
   });
 
-  describe('isDisabled', () => {
-    it.each`
-      isSaving | isResetting | expected
-      ${false} | ${false}    | ${false}
-      ${true}  | ${false}    | ${true}
-      ${false} | ${true}     | ${true}
-      ${true}  | ${true}     | ${true}
-    `(
-      'when isSaving = $isSaving, isResetting = $isResetting then isDisabled = $expected',
-      ({ isSaving, isResetting, expected }) => {
-        mutations[types.SET_IS_SAVING](state, isSaving);
-        mutations[types.SET_IS_RESETTING](state, isResetting);
-
-        expect(isDisabled(state)).toBe(expected);
-      },
-    );
-  });
-
   describe('propsSource', () => {
     beforeEach(() => {
       state.defaultState = defaultState;
diff --git a/spec/frontend/integrations/edit/store/mutations_spec.js b/spec/frontend/integrations/edit/store/mutations_spec.js
index 9f27a7ed6be..641547550d1 100644
--- a/spec/frontend/integrations/edit/store/mutations_spec.js
+++ b/spec/frontend/integrations/edit/store/mutations_spec.js
@@ -17,14 +17,6 @@ describe('Integration form store mutations', () => {
     });
   });
 
-  describe(`${types.SET_IS_SAVING}`, () => {
-    it('sets isSaving', () => {
-      mutations[types.SET_IS_SAVING](state, true);
-
-      expect(state.isSaving).toBe(true);
-    });
-  });
-
   describe(`${types.SET_IS_RESETTING}`, () => {
     it('sets isResetting', () => {
       mutations[types.SET_IS_RESETTING](state, true);
diff --git a/spec/frontend/integrations/integration_settings_form_spec.js b/spec/frontend/integrations/integration_settings_form_spec.js
deleted file mode 100644
index 344d4799889..00000000000
--- a/spec/frontend/integrations/integration_settings_form_spec.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import MockAdaptor from 'axios-mock-adapter';
-import IntegrationSettingsForm from '~/integrations/integration_settings_form';
-import eventHub from '~/integrations/edit/event_hub';
-import axios from '~/lib/utils/axios_utils';
-import { SAVE_INTEGRATION_EVENT } from '~/integrations/constants';
-import waitForPromises from 'helpers/wait_for_promises';
-
-jest.mock('~/vue_shared/plugins/global_toast');
-jest.mock('lodash/delay', () => (callback) => callback());
-
-const FIXTURE = 'services/edit_service.html';
-const mockFormSelector = '.js-integration-settings-form';
-
-describe('IntegrationSettingsForm', () => {
-  let integrationSettingsForm;
-
-  const mockStoreDispatch = () => jest.spyOn(integrationSettingsForm.vue.$store, 'dispatch');
-
-  beforeEach(() => {
-    loadFixtures(FIXTURE);
-
-    integrationSettingsForm = new IntegrationSettingsForm(mockFormSelector);
-    integrationSettingsForm.init();
-  });
-
-  afterEach(() => {
-    eventHub.dispose(); // clear event hub handlers
-  });
-
-  describe('constructor', () => {
-    it('should initialize form element refs on class object', () => {
-      expect(integrationSettingsForm.$form).toBeDefined();
-      expect(integrationSettingsForm.$form.nodeName).toBe('FORM');
-      expect(integrationSettingsForm.formSelector).toBe(mockFormSelector);
-    });
-
-    it('should initialize form metadata on class object', () => {
-      expect(integrationSettingsForm.testEndPoint).toBeDefined();
-    });
-  });
-
-  describe('event handling', () => {
-    let mockAxios;
-
-    beforeEach(() => {
-      mockAxios = new MockAdaptor(axios);
-      jest.spyOn(axios, 'put');
-      jest.spyOn(integrationSettingsForm.$form, 'submit');
-    });
-
-    afterEach(() => {
-      mockAxios.restore();
-    });
-
-    describe('when event hub receives `SAVE_INTEGRATION_EVENT`', () => {
-      describe('when form is valid', () => {
-        it('should submit the form', async () => {
-          eventHub.$emit(SAVE_INTEGRATION_EVENT, true);
-          await waitForPromises();
-
-          expect(integrationSettingsForm.$form.submit).toHaveBeenCalledTimes(1);
-        });
-      });
-
-      describe('when form is invalid', () => {
-        it('should dispatch `setIsSaving` with `false` and not submit form', async () => {
-          const dispatchSpy = mockStoreDispatch();
-
-          eventHub.$emit(SAVE_INTEGRATION_EVENT, false);
-
-          await waitForPromises();
-
-          expect(dispatchSpy).toHaveBeenCalledWith('setIsSaving', false);
-          expect(integrationSettingsForm.$form.submit).not.toHaveBeenCalled();
-        });
-      });
-    });
-  });
-});