diff options
Diffstat (limited to 'spec/frontend/integrations/integration_settings_form_spec.js')
| -rw-r--r-- | spec/frontend/integrations/integration_settings_form_spec.js | 195 |
1 files changed, 31 insertions, 164 deletions
diff --git a/spec/frontend/integrations/integration_settings_form_spec.js b/spec/frontend/integrations/integration_settings_form_spec.js index c117a37ff2f..bba851ad796 100644 --- a/spec/frontend/integrations/integration_settings_form_spec.js +++ b/spec/frontend/integrations/integration_settings_form_spec.js @@ -1,7 +1,9 @@ -import $ from 'jquery'; import MockAdaptor from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; import IntegrationSettingsForm from '~/integrations/integration_settings_form'; +import toast from '~/vue_shared/plugins/global_toast'; + +jest.mock('~/vue_shared/plugins/global_toast'); describe('IntegrationSettingsForm', () => { const FIXTURE = 'services/edit_service.html'; @@ -11,7 +13,7 @@ describe('IntegrationSettingsForm', () => { loadFixtures(FIXTURE); }); - describe('contructor', () => { + describe('constructor', () => { let integrationSettingsForm; beforeEach(() => { @@ -24,16 +26,10 @@ describe('IntegrationSettingsForm', () => { 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(); }); }); @@ -59,69 +55,6 @@ describe('IntegrationSettingsForm', () => { }); }); - 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; @@ -133,6 +66,8 @@ describe('IntegrationSettingsForm', () => { jest.spyOn(axios, 'put'); integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form'); + integrationSettingsForm.init(); + // eslint-disable-next-line no-jquery/no-serialize formData = integrationSettingsForm.$form.serialize(); }); @@ -141,128 +76,60 @@ describe('IntegrationSettingsForm', () => { 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, - }); + it('should make an ajax request with provided `formData`', async () => { + await integrationSettingsForm.testSettings(formData); - 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'); - }); + expect(axios.put).toHaveBeenCalledWith(integrationSettingsForm.testEndPoint, formData); }); - 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', () => { + it('should show success message if test is successful', async () => { jest.spyOn(integrationSettingsForm.$form, 'submit').mockImplementation(() => {}); mock.onPut(integrationSettingsForm.testEndPoint).reply(200, { error: false, }); - return integrationSettingsForm.testSettings(formData).then(() => { - expect(integrationSettingsForm.$form.submit).toHaveBeenCalled(); - }); - }); + await integrationSettingsForm.testSettings(formData); - it('should submit form when clicked on `Save anyway` action of error Flash', () => { - jest.spyOn(integrationSettingsForm.$form, 'submit').mockImplementation(() => {}); + expect(toast).toHaveBeenCalledWith('Connection successful.'); + }); + it('should show error message if ajax request responds with test error', async () => { const errorMessage = 'Test failed.'; + const serviceResponse = 'some error'; + mock.onPut(integrationSettingsForm.testEndPoint).reply(200, { error: true, message: errorMessage, - test_failed: true, + service_response: serviceResponse, + test_failed: false, }); - return integrationSettingsForm - .testSettings(formData) - .then(() => { - const $flashAction = $('.flash-container .flash-action'); + await integrationSettingsForm.testSettings(formData); - expect($flashAction).toBeDefined(); - - $flashAction.get(0).click(); - }) - .then(() => { - expect(integrationSettingsForm.$form.submit).toHaveBeenCalled(); - }); + expect(toast).toHaveBeenCalledWith(`${errorMessage} ${serviceResponse}`); }); - it('should show error Flash if ajax request failed', () => { + it('should show error message if ajax request failed', async () => { 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); - }); + await integrationSettingsForm.testSettings(formData); + + expect(toast).toHaveBeenCalledWith(errorMessage); }); - it('should always call `toggleSubmitBtnState` with `false` once request is completed', () => { + it('should always dispatch `setIsTesting` with `false` once request is completed', async () => { + const dispatchSpy = jest.fn(); + mock.onPut(integrationSettingsForm.testEndPoint).networkError(); - jest.spyOn(integrationSettingsForm, 'toggleSubmitBtnState').mockImplementation(() => {}); + integrationSettingsForm.vue.$store = { dispatch: dispatchSpy }; - return integrationSettingsForm.testSettings(formData).then(() => { - expect(integrationSettingsForm.toggleSubmitBtnState).toHaveBeenCalledWith(false); - }); + await integrationSettingsForm.testSettings(formData); + + expect(dispatchSpy).toHaveBeenCalledWith('setIsTesting', false); }); }); }); |