integration_settings_form_spec.js

import $ from 'jquery';
import MockAdaptor from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import IntegrationSettingsForm from '~/integrations/integration_settings_form';

describe('IntegrationSettingsForm', () => {
  const FIXTURE = 'services/edit_service.html.raw';
  preloadFixtures(FIXTURE);

  beforeEach(() => {
    loadFixtures(FIXTURE);
  });

  describe('contructor', () => {
    let integrationSettingsForm;

    beforeEach(() => {
      integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
      spyOn(integrationSettingsForm, 'init');
    });

    it('should initialize form element refs on class object', () => {
      // Form Reference
      expect(integrationSettingsForm.$form).toBeDefined();
      expect(integrationSettingsForm.$form.prop('nodeName')).toEqual('FORM');

      // Form Child Elements
      expect(integrationSettingsForm.$serviceToggle).toBeDefined();
      expect(integrationSettingsForm.$submitBtn).toBeDefined();
      expect(integrationSettingsForm.$submitBtnLoader).toBeDefined();
      expect(integrationSettingsForm.$submitBtnLabel).toBeDefined();
    });

    it('should initialize form metadata on class object', () => {
      expect(integrationSettingsForm.testEndPoint).toBeDefined();
      expect(integrationSettingsForm.canTestService).toBeDefined();
    });
  });

  describe('toggleServiceState', () => {
    let integrationSettingsForm;

    beforeEach(() => {
      integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
    });

    it('should remove `novalidate` attribute to form when called with `true`', () => {
      integrationSettingsForm.toggleServiceState(true);

      expect(integrationSettingsForm.$form.attr('novalidate')).not.toBeDefined();
    });

    it('should set `novalidate` attribute to form when called with `false`', () => {
      integrationSettingsForm.toggleServiceState(false);

      expect(integrationSettingsForm.$form.attr('novalidate')).toBeDefined();
    });
  });

  describe('toggleSubmitBtnLabel', () => {
    let integrationSettingsForm;

    beforeEach(() => {
      integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
    });

    it('should set Save button label to "Test settings and save changes" when serviceActive & canTestService are `true`', () => {
      integrationSettingsForm.canTestService = true;

      integrationSettingsForm.toggleSubmitBtnLabel(true);

      expect(integrationSettingsForm.$submitBtnLabel.text()).toEqual(
        'Test settings and save changes',
      );
    });

    it('should set Save button label to "Save changes" when either serviceActive or canTestService (or both) is `false`', () => {
      integrationSettingsForm.canTestService = false;

      integrationSettingsForm.toggleSubmitBtnLabel(false);

      expect(integrationSettingsForm.$submitBtnLabel.text()).toEqual('Save changes');

      integrationSettingsForm.toggleSubmitBtnLabel(true);

      expect(integrationSettingsForm.$submitBtnLabel.text()).toEqual('Save changes');

      integrationSettingsForm.canTestService = true;

      integrationSettingsForm.toggleSubmitBtnLabel(false);

      expect(integrationSettingsForm.$submitBtnLabel.text()).toEqual('Save changes');
    });
  });

  describe('toggleSubmitBtnState', () => {
    let integrationSettingsForm;

    beforeEach(() => {
      integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
    });

    it('should disable Save button and show loader animation when called with `true`', () => {
      integrationSettingsForm.toggleSubmitBtnState(true);

      expect(integrationSettingsForm.$submitBtn.is(':disabled')).toBeTruthy();
      expect(integrationSettingsForm.$submitBtnLoader.hasClass('hidden')).toBeFalsy();
    });

    it('should enable Save button and hide loader animation when called with `false`', () => {
      integrationSettingsForm.toggleSubmitBtnState(false);

      expect(integrationSettingsForm.$submitBtn.is(':disabled')).toBeFalsy();
      expect(integrationSettingsForm.$submitBtnLoader.hasClass('hidden')).toBeTruthy();
    });
  });

  describe('testSettings', () => {
    let integrationSettingsForm;
    let formData;
    let mock;

    beforeEach(() => {
      mock = new MockAdaptor(axios);

      spyOn(axios, 'put').and.callThrough();

      integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
      formData = integrationSettingsForm.$form.serialize();
    });

    afterEach(() => {
      mock.restore();
    });

    it('should make an ajax request with provided `formData`', done => {
      integrationSettingsForm
        .testSettings(formData)
        .then(() => {
          expect(axios.put).toHaveBeenCalledWith(integrationSettingsForm.testEndPoint, formData);

          done();
        })
        .catch(done.fail);
    });

    it('should show error Flash with `Save anyway` action if ajax request responds with error in test', done => {
      const errorMessage = 'Test failed.';
      mock.onPut(integrationSettingsForm.testEndPoint).reply(200, {
        error: true,
        message: errorMessage,
        service_response: 'some error',
        test_failed: true,
      });

      integrationSettingsForm
        .testSettings(formData)
        .then(() => {
          const $flashContainer = $('.flash-container');

          expect(
            $flashContainer
              .find('.flash-text')
              .text()
              .trim(),
          ).toEqual('Test failed. some error');

          expect($flashContainer.find('.flash-action')).toBeDefined();
          expect(
            $flashContainer
              .find('.flash-action')
              .text()
              .trim(),
          ).toEqual('Save anyway');

          done();
        })
        .catch(done.fail);
    });

    it('should not show error Flash with `Save anyway` action if ajax request responds with error in validation', done => {
      const errorMessage = 'Validations failed.';
      mock.onPut(integrationSettingsForm.testEndPoint).reply(200, {
        error: true,
        message: errorMessage,
        service_response: 'some error',
        test_failed: false,
      });

      integrationSettingsForm
        .testSettings(formData)
        .then(() => {
          const $flashContainer = $('.flash-container');

          expect(
            $flashContainer
              .find('.flash-text')
              .text()
              .trim(),
          ).toEqual('Validations failed. some error');

          expect($flashContainer.find('.flash-action')).toBeDefined();
          expect(
            $flashContainer
              .find('.flash-action')
              .text()
              .trim(),
          ).toEqual('');

          done();
        })
        .catch(done.fail);
    });

    it('should submit form if ajax request responds without any error in test', done => {
      spyOn(integrationSettingsForm.$form, 'submit');

      mock.onPut(integrationSettingsForm.testEndPoint).reply(200, {
        error: false,
      });

      integrationSettingsForm
        .testSettings(formData)
        .then(() => {
          expect(integrationSettingsForm.$form.submit).toHaveBeenCalled();

          done();
        })
        .catch(done.fail);
    });

    it('should submit form when clicked on `Save anyway` action of error Flash', done => {
      spyOn(integrationSettingsForm.$form, 'submit');

      const errorMessage = 'Test failed.';
      mock.onPut(integrationSettingsForm.testEndPoint).reply(200, {
        error: true,
        message: errorMessage,
        test_failed: true,
      });

      integrationSettingsForm
        .testSettings(formData)
        .then(() => {
          const $flashAction = $('.flash-container .flash-action');

          expect($flashAction).toBeDefined();

          $flashAction.get(0).click();
        })
        .then(() => {
          expect(integrationSettingsForm.$form.submit).toHaveBeenCalled();

          done();
        })
        .catch(done.fail);
    });

    it('should show error Flash if ajax request failed', done => {
      const errorMessage = 'Something went wrong on our end.';

      mock.onPut(integrationSettingsForm.testEndPoint).networkError();

      integrationSettingsForm
        .testSettings(formData)
        .then(() => {
          expect(
            $('.flash-container .flash-text')
              .text()
              .trim(),
          ).toEqual(errorMessage);

          done();
        })
        .catch(done.fail);
    });

    it('should always call `toggleSubmitBtnState` with `false` once request is completed', done => {
      mock.onPut(integrationSettingsForm.testEndPoint).networkError();

      spyOn(integrationSettingsForm, 'toggleSubmitBtnState');

      integrationSettingsForm
        .testSettings(formData)
        .then(() => {
          expect(integrationSettingsForm.toggleSubmitBtnState).toHaveBeenCalledWith(false);

          done();
        })
        .catch(done.fail);
    });
  });
});