Skip to content

G
gitlab-ce
Commit 7ca18982 authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Merge branch 'tomquirk/342463-final-improve-integration-settings-form-spec' into 'master' 

Improvements to integration_settings_form_spec.js

See merge request gitlab-org/gitlab!72743
parents 47077623 a7e73ed0
Hide whitespace changes
Inline Side-by-side
Showing with 184 additions and 143 deletions
app/assets/javascripts/integrations/constants.js
View file @ 7ca18982
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
View file @ 7ca18982
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
View file @ 7ca18982
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 mockStoreDispatch = () => jest.spyOn(integrationSettingsForm.vue.$store, 'dispatch');
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 +43,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 = mockStoreDispatch();
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 = mockStoreDispatch();
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 = mockStoreDispatch();
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 = mockStoreDispatch();
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 = mockStoreDispatch();
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 = mockStoreDispatch();
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();
});
});
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7