Merge branch '31511-jira-settings' into 'master'

Simplify test&save actions when setting a service integration

Closes #31511

See merge request !11599

2 files changed, 230 insertions, 0 deletions

diff --git a/spec/javascripts/fixtures/services.rb b/spec/javascripts/fixtures/services.rb
new file mode 100644
index 00000000000..554451d1bbf
--- /dev/null
+++ b/spec/javascripts/fixtures/services.rb
@@ -0,0 +1,31 @@
+require 'spec_helper'
+
+describe Projects::ServicesController, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  let(:admin)     { create(:admin) }
+  let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
+  let(:project)   { create(:project_empty_repo, namespace: namespace, path: 'services-project') }
+  let!(:service)  { create(:custom_issue_tracker_service, project: project, title: 'Custom Issue Tracker') }
+  
+
+  render_views
+
+  before(:all) do
+    clean_frontend_fixtures('services/')
+  end
+
+  before(:each) do
+    sign_in(admin)
+  end
+
+  it 'services/edit_service.html.raw' do |example|
+    get :edit,
+      namespace_id: namespace,
+      project_id: project,
+      id: service.to_param
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
+end
diff --git a/spec/javascripts/integrations/integration_settings_form_spec.js b/spec/javascripts/integrations/integration_settings_form_spec.js
new file mode 100644
index 00000000000..45909d4e70e
--- /dev/null
+++ b/spec/javascripts/integrations/integration_settings_form_spec.js
@@ -0,0 +1,199 @@
+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;
+
+    beforeEach(() => {
+      integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
+      formData = integrationSettingsForm.$form.serialize();
+    });
+
+    it('should make an ajax request with provided `formData`', () => {
+      const deferred = $.Deferred();
+      spyOn($, 'ajax').and.returnValue(deferred.promise());
+
+      integrationSettingsForm.testSettings(formData);
+
+      expect($.ajax).toHaveBeenCalledWith({
+        type: 'PUT',
+        url: integrationSettingsForm.testEndPoint,
+        data: formData,
+      });
+    });
+
+    it('should show error Flash with `Save anyway` action if ajax request responds with error in test', () => {
+      const errorMessage = 'Test failed.';
+      const deferred = $.Deferred();
+      spyOn($, 'ajax').and.returnValue(deferred.promise());
+
+      integrationSettingsForm.testSettings(formData);
+
+      deferred.resolve({ error: true, message: errorMessage });
+
+      const $flashContainer = $('.flash-container');
+      expect($flashContainer.find('.flash-text').text()).toEqual(errorMessage);
+      expect($flashContainer.find('.flash-action')).toBeDefined();
+      expect($flashContainer.find('.flash-action').text()).toEqual('Save anyway');
+    });
+
+    it('should submit form if ajax request responds without any error in test', () => {
+      const deferred = $.Deferred();
+      spyOn($, 'ajax').and.returnValue(deferred.promise());
+
+      integrationSettingsForm.testSettings(formData);
+
+      spyOn(integrationSettingsForm.$form, 'submit');
+      deferred.resolve({ error: false });
+
+      expect(integrationSettingsForm.$form.submit).toHaveBeenCalled();
+    });
+
+    it('should submit form when clicked on `Save anyway` action of error Flash', () => {
+      const errorMessage = 'Test failed.';
+      const deferred = $.Deferred();
+      spyOn($, 'ajax').and.returnValue(deferred.promise());
+
+      integrationSettingsForm.testSettings(formData);
+
+      deferred.resolve({ error: true, message: errorMessage });
+
+      const $flashAction = $('.flash-container .flash-action');
+      expect($flashAction).toBeDefined();
+
+      spyOn(integrationSettingsForm.$form, 'submit');
+      $flashAction.trigger('click');
+      expect(integrationSettingsForm.$form.submit).toHaveBeenCalled();
+    });
+
+    it('should show error Flash if ajax request failed', () => {
+      const errorMessage = 'Something went wrong on our end.';
+      const deferred = $.Deferred();
+      spyOn($, 'ajax').and.returnValue(deferred.promise());
+
+      integrationSettingsForm.testSettings(formData);
+
+      deferred.reject();
+
+      expect($('.flash-container .flash-text').text()).toEqual(errorMessage);
+    });
+
+    it('should always call `toggleSubmitBtnState` with `false` once request is completed', () => {
+      const deferred = $.Deferred();
+      spyOn($, 'ajax').and.returnValue(deferred.promise());
+
+      integrationSettingsForm.testSettings(formData);
+
+      spyOn(integrationSettingsForm, 'toggleSubmitBtnState');
+      deferred.reject();
+
+      expect(integrationSettingsForm.toggleSubmitBtnState).toHaveBeenCalledWith(false);
+    });
+  });
+});