diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-05-20 14:34:42 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-05-20 14:34:42 +0000 |
commit | 9f46488805e86b1bc341ea1620b866016c2ce5ed (patch) | |
tree | f9748c7e287041e37d6da49e0a29c9511dc34768 /spec/frontend/integrations/integration_settings_form_spec.js | |
parent | dfc92d081ea0332d69c8aca2f0e745cb48ae5e6d (diff) | |
download | gitlab-ce-9f46488805e86b1bc341ea1620b866016c2ce5ed.tar.gz |
Add latest changes from gitlab-org/gitlab@13-0-stable-ee
Diffstat (limited to 'spec/frontend/integrations/integration_settings_form_spec.js')
-rw-r--r-- | spec/frontend/integrations/integration_settings_form_spec.js | 268 |
1 files changed, 268 insertions, 0 deletions
diff --git a/spec/frontend/integrations/integration_settings_form_spec.js b/spec/frontend/integrations/integration_settings_form_spec.js new file mode 100644 index 00000000000..c117a37ff2f --- /dev/null +++ b/spec/frontend/integrations/integration_settings_form_spec.js @@ -0,0 +1,268 @@ +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'; + preloadFixtures(FIXTURE); + + beforeEach(() => { + loadFixtures(FIXTURE); + }); + + describe('contructor', () => { + 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.prop('nodeName')).toEqual('FORM'); + expect(integrationSettingsForm.formActive).toBeDefined(); + + // Form Child Elements + 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.formActive = true; + integrationSettingsForm.toggleServiceState(); + + expect(integrationSettingsForm.$form.attr('novalidate')).not.toBeDefined(); + }); + + it('should set `novalidate` attribute to form when called with `false`', () => { + integrationSettingsForm.formActive = false; + integrationSettingsForm.toggleServiceState(); + + 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.formActive = true; + + integrationSettingsForm.toggleSubmitBtnLabel(); + + 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.formActive = false; + + integrationSettingsForm.toggleSubmitBtnLabel(); + + expect(integrationSettingsForm.$submitBtnLabel.text()).toEqual('Save changes'); + + integrationSettingsForm.formActive = true; + + integrationSettingsForm.toggleSubmitBtnLabel(); + + expect(integrationSettingsForm.$submitBtnLabel.text()).toEqual('Save changes'); + + integrationSettingsForm.canTestService = true; + integrationSettingsForm.formActive = false; + + integrationSettingsForm.toggleSubmitBtnLabel(); + + 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); + + jest.spyOn(axios, 'put'); + + integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form'); + // eslint-disable-next-line no-jquery/no-serialize + formData = integrationSettingsForm.$form.serialize(); + }); + + afterEach(() => { + mock.restore(); + }); + + it('should make an ajax request with provided `formData`', () => { + return integrationSettingsForm.testSettings(formData).then(() => { + expect(axios.put).toHaveBeenCalledWith(integrationSettingsForm.testEndPoint, formData); + }); + }); + + it('should show error Flash with `Save anyway` action if ajax request responds with error in test', () => { + const errorMessage = 'Test failed.'; + mock.onPut(integrationSettingsForm.testEndPoint).reply(200, { + error: true, + message: errorMessage, + service_response: 'some error', + test_failed: true, + }); + + return 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'); + }); + }); + + it('should not show error Flash with `Save anyway` action if ajax request responds with error in validation', () => { + const errorMessage = 'Validations failed.'; + mock.onPut(integrationSettingsForm.testEndPoint).reply(200, { + error: true, + message: errorMessage, + service_response: 'some error', + test_failed: false, + }); + + return 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(''); + }); + }); + + it('should submit form if ajax request responds without any error in test', () => { + jest.spyOn(integrationSettingsForm.$form, 'submit').mockImplementation(() => {}); + + mock.onPut(integrationSettingsForm.testEndPoint).reply(200, { + error: false, + }); + + return integrationSettingsForm.testSettings(formData).then(() => { + expect(integrationSettingsForm.$form.submit).toHaveBeenCalled(); + }); + }); + + it('should submit form when clicked on `Save anyway` action of error Flash', () => { + jest.spyOn(integrationSettingsForm.$form, 'submit').mockImplementation(() => {}); + + const errorMessage = 'Test failed.'; + mock.onPut(integrationSettingsForm.testEndPoint).reply(200, { + error: true, + message: errorMessage, + test_failed: true, + }); + + return integrationSettingsForm + .testSettings(formData) + .then(() => { + const $flashAction = $('.flash-container .flash-action'); + + expect($flashAction).toBeDefined(); + + $flashAction.get(0).click(); + }) + .then(() => { + expect(integrationSettingsForm.$form.submit).toHaveBeenCalled(); + }); + }); + + it('should show error Flash if ajax request failed', () => { + const errorMessage = 'Something went wrong on our end.'; + + mock.onPut(integrationSettingsForm.testEndPoint).networkError(); + + return integrationSettingsForm.testSettings(formData).then(() => { + expect( + $('.flash-container .flash-text') + .text() + .trim(), + ).toEqual(errorMessage); + }); + }); + + it('should always call `toggleSubmitBtnState` with `false` once request is completed', () => { + mock.onPut(integrationSettingsForm.testEndPoint).networkError(); + + jest.spyOn(integrationSettingsForm, 'toggleSubmitBtnState').mockImplementation(() => {}); + + return integrationSettingsForm.testSettings(formData).then(() => { + expect(integrationSettingsForm.toggleSubmitBtnState).toHaveBeenCalledWith(false); + }); + }); + }); +}); |