Improvements to integration_seetings_form_spec

- Move toast/error messages to constants file
- limit beforeEach for readability
- test event handling rather than unit-testing class methods
- add missing coverage for some event types

app/assets/javascripts/integrations/constants.js

-import { s__ } from '~/locale';
+import { s__, __ } from '~/locale';
 
 export const TEST_INTEGRATION_EVENT = 'testIntegration';
 export const SAVE_INTEGRATION_EVENT = 'saveIntegration';
@@ -21,3 +21,9 @@ export const overrideDropdownDescriptions = {
     'Integrations|Default settings are inherited from the instance level.',
   ),
 };
+
+export const I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE = s__(
+  'Integrations|Connection failed. Please check your settings.',
+);
+export const I18N_DEFAULT_ERROR_MESSAGE = __('Something went wrong on our end.');
+export const I18N_SUCCESSFUL_CONNECTION_MESSAGE = s__('Integrations|Connection successful.');

app/assets/javascripts/integrations/integration_settings_form.js

 import { delay } from 'lodash';
-import { __, s__ } from '~/locale';
 import toast from '~/vue_shared/plugins/global_toast';
 import axios from '../lib/utils/axios_utils';
 import initForm from './edit';
@@ -10,6 +9,9 @@ import {
   GET_JIRA_ISSUE_TYPES_EVENT,
   TOGGLE_INTEGRATION_EVENT,
   VALIDATE_INTEGRATION_FORM_EVENT,
+  I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE,
+  I18N_DEFAULT_ERROR_MESSAGE,
+  I18N_SUCCESSFUL_CONNECTION_MESSAGE,
 } from './constants';
 
 export default class IntegrationSettingsForm {
@@ -104,11 +106,7 @@ export default class IntegrationSettingsForm {
     return this.fetchTestSettings(formData)
       .then(
         ({
-          data: {
-            issuetypes,
-            error,
-            message = s__('Integrations|Connection failed. Please check your settings.'),
-          },
+          data: { issuetypes, error, message = I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE },
         }) => {
           if (error || !issuetypes?.length) {
             eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT);
@@ -118,7 +116,7 @@ export default class IntegrationSettingsForm {
           dispatch('receiveJiraIssueTypesSuccess', issuetypes);
         },
       )
-      .catch(({ message = __('Something went wrong on our end.') }) => {
+      .catch(({ message = I18N_DEFAULT_ERROR_MESSAGE }) => {
         dispatch('receiveJiraIssueTypesError', message);
       });
   }
@@ -140,11 +138,11 @@ export default class IntegrationSettingsForm {
           toast(`${data.message} ${data.service_response}`);
         } else {
           this.vue.$store.dispatch('receiveJiraIssueTypesSuccess', data.issuetypes);
-          toast(s__('Integrations|Connection successful.'));
+          toast(I18N_SUCCESSFUL_CONNECTION_MESSAGE);
         }
       })
       .catch(() => {
-        toast(__('Something went wrong on our end.'));
+        toast(I18N_DEFAULT_ERROR_MESSAGE);
       })
       .finally(() => {
         this.vue.$store.dispatch('setIsTesting', false);

spec/frontend/integrations/integration_settings_form_spec.js

 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 toast from '~/vue_shared/plugins/global_toast';
+import {
+  I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE,
+  I18N_SUCCESSFUL_CONNECTION_MESSAGE,
+  I18N_DEFAULT_ERROR_MESSAGE,
+  GET_JIRA_ISSUE_TYPES_EVENT,
+  TOGGLE_INTEGRATION_EVENT,
+  TEST_INTEGRATION_EVENT,
+  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';
 
 describe('IntegrationSettingsForm', () => {
-  const FIXTURE = 'services/edit_service.html';
+  let integrationSettingsForm;
+
+  const mockVuexDispatch = () => {
+    const dispatchSpy = jest.fn();
+    integrationSettingsForm.vue.$store = { dispatch: dispatchSpy };
+    return dispatchSpy;
+  };
 
   beforeEach(() => {
     loadFixtures(FIXTURE);
+
+    integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
+    integrationSettingsForm.init();
   });
 
   describe('constructor', () => {
-    let integrationSettingsForm;
-
-    beforeEach(() => {
-      integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
-      jest.spyOn(integrationSettingsForm, 'init').mockImplementation(() => {});
-    });
-
     it('should initialize form element refs on class object', () => {
-      // Form Reference
       expect(integrationSettingsForm.$form).toBeDefined();
       expect(integrationSettingsForm.$form.nodeName).toBe('FORM');
       expect(integrationSettingsForm.formActive).toBeDefined();
@@ -32,180 +47,206 @@ describe('IntegrationSettingsForm', () => {
     });
   });
 
-  describe('toggleServiceState', () => {
-    let integrationSettingsForm;
+  describe('event handling', () => {
+    let mockAxios;
 
     beforeEach(() => {
-      integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
-    });
-
-    it('should remove `novalidate` attribute to form when called with `true`', () => {
-      integrationSettingsForm.formActive = true;
-      integrationSettingsForm.toggleServiceState();
-
-      expect(integrationSettingsForm.$form.getAttribute('novalidate')).toBe(null);
-    });
-
-    it('should set `novalidate` attribute to form when called with `false`', () => {
-      integrationSettingsForm.formActive = false;
-      integrationSettingsForm.toggleServiceState();
-
-      expect(integrationSettingsForm.$form.getAttribute('novalidate')).toBeDefined();
-    });
-  });
-
-  describe('testSettings', () => {
-    let integrationSettingsForm;
-    let formData;
-    let mock;
-
-    beforeEach(() => {
-      mock = new MockAdaptor(axios);
-
+      mockAxios = new MockAdaptor(axios);
       jest.spyOn(axios, 'put');
-
-      integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
-      integrationSettingsForm.init();
-
-      formData = new FormData(integrationSettingsForm.$form);
     });
 
     afterEach(() => {
-      mock.restore();
+      mockAxios.restore();
+      eventHub.dispose(); // clear event hub handlers
     });
 
-    it('should make an ajax request with provided `formData`', async () => {
-      await integrationSettingsForm.testSettings(formData);
+    describe('when event hub receives `TOGGLE_INTEGRATION_EVENT`', () => {
+      it('should remove `novalidate` attribute to form when called with `true`', () => {
+        eventHub.$emit(TOGGLE_INTEGRATION_EVENT, true);
 
-      expect(axios.put).toHaveBeenCalledWith(integrationSettingsForm.testEndPoint, formData);
-    });
+        expect(integrationSettingsForm.$form.getAttribute('novalidate')).toBe(null);
+      });
 
-    it('should show success message if test is successful', async () => {
-      jest.spyOn(integrationSettingsForm.$form, 'submit').mockImplementation(() => {});
+      it('should set `novalidate` attribute to form when called with `false`', () => {
+        eventHub.$emit(TOGGLE_INTEGRATION_EVENT, false);
 
-      mock.onPut(integrationSettingsForm.testEndPoint).reply(200, {
-        error: false,
+        expect(integrationSettingsForm.$form.getAttribute('novalidate')).toBe('novalidate');
       });
+    });
 
-      await integrationSettingsForm.testSettings(formData);
+    describe('when event hub receives `TEST_INTEGRATION_EVENT`', () => {
+      describe('when form is valid', () => {
+        beforeEach(() => {
+          jest.spyOn(integrationSettingsForm.$form, 'checkValidity').mockReturnValue(true);
+        });
 
-      expect(toast).toHaveBeenCalledWith('Connection successful.');
-    });
+        it('should make an ajax request with provided `formData`', async () => {
+          eventHub.$emit(TEST_INTEGRATION_EVENT);
+          await waitForPromises();
 
-    it('should show error message if ajax request responds with test error', async () => {
-      const errorMessage = 'Test failed.';
-      const serviceResponse = 'some error';
+          expect(axios.put).toHaveBeenCalledWith(
+            integrationSettingsForm.testEndPoint,
+            new FormData(integrationSettingsForm.$form),
+          );
+        });
 
-      mock.onPut(integrationSettingsForm.testEndPoint).reply(200, {
-        error: true,
-        message: errorMessage,
-        service_response: serviceResponse,
-        test_failed: false,
-      });
+        it('should show success message if test is successful', async () => {
+          jest.spyOn(integrationSettingsForm.$form, 'submit').mockImplementation(() => {});
 
-      await integrationSettingsForm.testSettings(formData);
+          mockAxios.onPut(integrationSettingsForm.testEndPoint).reply(200, {
+            error: false,
+          });
 
-      expect(toast).toHaveBeenCalledWith(`${errorMessage} ${serviceResponse}`);
-    });
+          eventHub.$emit(TEST_INTEGRATION_EVENT);
+          await waitForPromises();
 
-    it('should show error message if ajax request failed', async () => {
-      const errorMessage = 'Something went wrong on our end.';
+          expect(toast).toHaveBeenCalledWith(I18N_SUCCESSFUL_CONNECTION_MESSAGE);
+        });
 
-      mock.onPut(integrationSettingsForm.testEndPoint).networkError();
+        it('should show error message if ajax request responds with test error', async () => {
+          const errorMessage = 'Test failed.';
+          const serviceResponse = 'some error';
 
-      await integrationSettingsForm.testSettings(formData);
+          mockAxios.onPut(integrationSettingsForm.testEndPoint).reply(200, {
+            error: true,
+            message: errorMessage,
+            service_response: serviceResponse,
+            test_failed: false,
+          });
 
-      expect(toast).toHaveBeenCalledWith(errorMessage);
-    });
+          eventHub.$emit(TEST_INTEGRATION_EVENT);
+          await waitForPromises();
 
-    it('should always dispatch `setIsTesting` with `false` once request is completed', async () => {
-      const dispatchSpy = jest.fn();
+          expect(toast).toHaveBeenCalledWith(`${errorMessage} ${serviceResponse}`);
+        });
 
-      mock.onPut(integrationSettingsForm.testEndPoint).networkError();
+        it('should show error message if ajax request failed', async () => {
+          mockAxios.onPut(integrationSettingsForm.testEndPoint).networkError();
 
-      integrationSettingsForm.vue.$store = { dispatch: dispatchSpy };
+          eventHub.$emit(TEST_INTEGRATION_EVENT);
+          await waitForPromises();
 
-      await integrationSettingsForm.testSettings(formData);
+          expect(toast).toHaveBeenCalledWith(I18N_DEFAULT_ERROR_MESSAGE);
+        });
 
-      expect(dispatchSpy).toHaveBeenCalledWith('setIsTesting', false);
-    });
-  });
+        it('should always dispatch `setIsTesting` with `false` once request is completed', async () => {
+          const dispatchSpy = mockVuexDispatch();
+          mockAxios.onPut(integrationSettingsForm.testEndPoint).networkError();
 
-  describe('getJiraIssueTypes', () => {
-    let integrationSettingsForm;
-    let formData;
-    let mock;
+          eventHub.$emit(TEST_INTEGRATION_EVENT);
+          await waitForPromises();
 
-    beforeEach(() => {
-      mock = new MockAdaptor(axios);
+          expect(dispatchSpy).toHaveBeenCalledWith('setIsTesting', false);
+        });
+      });
 
-      jest.spyOn(axios, 'put');
+      describe('when form is invalid', () => {
+        beforeEach(() => {
+          jest.spyOn(integrationSettingsForm.$form, 'checkValidity').mockReturnValue(false);
+          jest.spyOn(integrationSettingsForm, 'testSettings');
+        });
 
-      integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
-      integrationSettingsForm.init();
+        it('should dispatch `setIsTesting` with `false` and not call `testSettings`', async () => {
+          const dispatchSpy = mockVuexDispatch();
 
-      formData = new FormData(integrationSettingsForm.$form);
-    });
+          eventHub.$emit(TEST_INTEGRATION_EVENT);
+          await waitForPromises();
 
-    afterEach(() => {
-      mock.restore();
+          expect(dispatchSpy).toHaveBeenCalledWith('setIsTesting', false);
+          expect(integrationSettingsForm.testSettings).not.toHaveBeenCalled();
+        });
+      });
     });
 
-    it('should always dispatch `requestJiraIssueTypes`', async () => {
-      const dispatchSpy = jest.fn();
-
-      mock.onPut(integrationSettingsForm.testEndPoint).networkError();
+    describe('when event hub receives `GET_JIRA_ISSUE_TYPES_EVENT`', () => {
+      it('should always dispatch `requestJiraIssueTypes`', () => {
+        const dispatchSpy = mockVuexDispatch();
+        mockAxios.onPut(integrationSettingsForm.testEndPoint).networkError();
 
-      integrationSettingsForm.vue.$store = { dispatch: dispatchSpy };
+        eventHub.$emit(GET_JIRA_ISSUE_TYPES_EVENT);
 
-      await integrationSettingsForm.getJiraIssueTypes();
+        expect(dispatchSpy).toHaveBeenCalledWith('requestJiraIssueTypes');
+      });
 
-      expect(dispatchSpy).toHaveBeenCalledWith('requestJiraIssueTypes');
-    });
+      it('should make an ajax request with provided `formData`', () => {
+        eventHub.$emit(GET_JIRA_ISSUE_TYPES_EVENT);
 
-    it('should make an ajax request with provided `formData`', async () => {
-      await integrationSettingsForm.getJiraIssueTypes(formData);
+        expect(axios.put).toHaveBeenCalledWith(
+          integrationSettingsForm.testEndPoint,
+          new FormData(integrationSettingsForm.$form),
+        );
+      });
 
-      expect(axios.put).toHaveBeenCalledWith(integrationSettingsForm.testEndPoint, formData);
-    });
+      it('should dispatch `receiveJiraIssueTypesSuccess` with the correct payload if ajax request is successful', async () => {
+        const dispatchSpy = mockVuexDispatch();
+        const mockData = ['ISSUE', 'EPIC'];
+        mockAxios.onPut(integrationSettingsForm.testEndPoint).reply(200, {
+          error: false,
+          issuetypes: mockData,
+        });
 
-    it('should dispatch `receiveJiraIssueTypesSuccess` with the correct payload if ajax request is successful', async () => {
-      const mockData = ['ISSUE', 'EPIC'];
-      const dispatchSpy = jest.fn();
+        eventHub.$emit(GET_JIRA_ISSUE_TYPES_EVENT);
+        await waitForPromises();
 
-      mock.onPut(integrationSettingsForm.testEndPoint).reply(200, {
-        error: false,
-        issuetypes: mockData,
+        expect(dispatchSpy).toHaveBeenCalledWith('receiveJiraIssueTypesSuccess', mockData);
       });
 
-      integrationSettingsForm.vue.$store = { dispatch: dispatchSpy };
-
-      await integrationSettingsForm.getJiraIssueTypes(formData);
+      it.each(['Custom error message here', undefined])(
+        'should dispatch "receiveJiraIssueTypesError" with a message if the backend responds with error',
+        async (responseErrorMessage) => {
+          const dispatchSpy = mockVuexDispatch();
+
+          const expectedErrorMessage =
+            responseErrorMessage || I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE;
+          mockAxios.onPut(integrationSettingsForm.testEndPoint).reply(200, {
+            error: true,
+            message: responseErrorMessage,
+          });
+
+          eventHub.$emit(GET_JIRA_ISSUE_TYPES_EVENT);
+          await waitForPromises();
+
+          expect(dispatchSpy).toHaveBeenCalledWith(
+            'receiveJiraIssueTypesError',
+            expectedErrorMessage,
+          );
+        },
+      );
+    });
+
+    describe('when event hub receives `SAVE_INTEGRATION_EVENT`', () => {
+      describe('when form is valid', () => {
+        beforeEach(() => {
+          jest.spyOn(integrationSettingsForm.$form, 'checkValidity').mockReturnValue(true);
+          jest.spyOn(integrationSettingsForm.$form, 'submit');
+        });
 
-      expect(dispatchSpy).toHaveBeenCalledWith('receiveJiraIssueTypesSuccess', mockData);
-    });
+        it('should submit the form', async () => {
+          eventHub.$emit(SAVE_INTEGRATION_EVENT);
+          await waitForPromises();
 
-    it.each(['something went wrong', undefined])(
-      'should dispatch "receiveJiraIssueTypesError" with a message if the backend responds with error',
-      async (responseErrorMessage) => {
-        const defaultErrorMessage = 'Connection failed. Please check your settings.';
-        const expectedErrorMessage = responseErrorMessage || defaultErrorMessage;
-        const dispatchSpy = jest.fn();
+          expect(integrationSettingsForm.$form.submit).toHaveBeenCalled();
+          expect(integrationSettingsForm.$form.submit).toHaveBeenCalledTimes(1);
+        });
+      });
 
-        mock.onPut(integrationSettingsForm.testEndPoint).reply(200, {
-          error: true,
-          message: responseErrorMessage,
+      describe('when form is invalid', () => {
+        beforeEach(() => {
+          jest.spyOn(integrationSettingsForm.$form, 'checkValidity').mockReturnValue(false);
+          jest.spyOn(integrationSettingsForm.$form, 'submit');
         });
 
-        integrationSettingsForm.vue.$store = { dispatch: dispatchSpy };
+        it('should dispatch `setIsSaving` with `false` and not submit form', async () => {
+          const dispatchSpy = mockVuexDispatch();
 
-        await integrationSettingsForm.getJiraIssueTypes(formData);
+          eventHub.$emit(SAVE_INTEGRATION_EVENT);
 
-        expect(dispatchSpy).toHaveBeenCalledWith(
-          'receiveJiraIssueTypesError',
-          expectedErrorMessage,
-        );
-      },
-    );
+          await waitForPromises();
+
+          expect(dispatchSpy).toHaveBeenCalledWith('setIsSaving', false);
+          expect(integrationSettingsForm.$form.submit).not.toHaveBeenCalled();
+        });
+      });
+    });
   });
 });