2020-05-24 23:13:21 +05:30
|
|
|
import { range as rge, throttle } from 'lodash';
|
2018-12-13 13:39:08 +05:30
|
|
|
import DirtySubmitForm from '~/dirty_submit/dirty_submit_form';
|
2019-03-02 22:35:43 +05:30
|
|
|
import { getInputValue, setInputValue, createForm } from './helper';
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2021-03-08 18:12:59 +05:30
|
|
|
jest.mock('lodash/throttle', () => jest.fn((fn) => fn));
|
2020-05-24 23:13:21 +05:30
|
|
|
const lodash = jest.requireActual('lodash');
|
|
|
|
|
2018-12-13 13:39:08 +05:30
|
|
|
function expectToToggleDisableOnDirtyUpdate(submit, input) {
|
2019-03-02 22:35:43 +05:30
|
|
|
const originalValue = getInputValue(input);
|
2018-12-13 13:39:08 +05:30
|
|
|
|
|
|
|
expect(submit.disabled).toBe(true);
|
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
setInputValue(input, `${originalValue} changes`);
|
|
|
|
expect(submit.disabled).toBe(false);
|
|
|
|
setInputValue(input, originalValue);
|
|
|
|
expect(submit.disabled).toBe(true);
|
2018-12-13 13:39:08 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
describe('DirtySubmitForm', () => {
|
2019-09-04 21:01:54 +05:30
|
|
|
describe('submit button tests', () => {
|
2020-05-24 23:13:21 +05:30
|
|
|
it('disables submit until there are changes', () => {
|
2019-09-04 21:01:54 +05:30
|
|
|
const { form, input, submit } = createForm();
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2019-09-04 21:01:54 +05:30
|
|
|
new DirtySubmitForm(form); // eslint-disable-line no-new
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
expectToToggleDisableOnDirtyUpdate(submit, input);
|
2019-09-04 21:01:54 +05:30
|
|
|
});
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
it('disables submit until there are changes when initializing with a falsy value', () => {
|
2019-09-04 21:01:54 +05:30
|
|
|
const { form, input, submit } = createForm();
|
|
|
|
input.value = '';
|
|
|
|
|
|
|
|
new DirtySubmitForm(form); // eslint-disable-line no-new
|
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
expectToToggleDisableOnDirtyUpdate(submit, input);
|
2019-09-04 21:01:54 +05:30
|
|
|
});
|
2019-03-02 22:35:43 +05:30
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
it('disables submit until there are changes for radio inputs', () => {
|
2019-09-04 21:01:54 +05:30
|
|
|
const { form, input, submit } = createForm('radio');
|
2019-03-02 22:35:43 +05:30
|
|
|
|
2019-09-04 21:01:54 +05:30
|
|
|
new DirtySubmitForm(form); // eslint-disable-line no-new
|
2019-03-02 22:35:43 +05:30
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
expectToToggleDisableOnDirtyUpdate(submit, input);
|
2019-09-04 21:01:54 +05:30
|
|
|
});
|
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
it('disables submit until there are changes for checkbox inputs', () => {
|
2019-09-04 21:01:54 +05:30
|
|
|
const { form, input, submit } = createForm('checkbox');
|
|
|
|
|
|
|
|
new DirtySubmitForm(form); // eslint-disable-line no-new
|
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
expectToToggleDisableOnDirtyUpdate(submit, input);
|
2019-09-04 21:01:54 +05:30
|
|
|
});
|
2019-03-02 22:35:43 +05:30
|
|
|
});
|
|
|
|
|
2019-09-04 21:01:54 +05:30
|
|
|
describe('throttling tests', () => {
|
|
|
|
beforeEach(() => {
|
2020-05-24 23:13:21 +05:30
|
|
|
throttle.mockImplementation(lodash.throttle);
|
|
|
|
jest.useFakeTimers();
|
2019-09-04 21:01:54 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
2020-05-24 23:13:21 +05:30
|
|
|
throttle.mockReset();
|
2019-09-04 21:01:54 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('throttles updates when rapid changes are made to a single form element', () => {
|
|
|
|
const { form, input } = createForm();
|
2020-05-24 23:13:21 +05:30
|
|
|
const updateDirtyInputSpy = jest.spyOn(new DirtySubmitForm(form), 'updateDirtyInput');
|
2019-09-04 21:01:54 +05:30
|
|
|
|
2021-03-08 18:12:59 +05:30
|
|
|
rge(10).forEach((i) => {
|
2019-09-04 21:01:54 +05:30
|
|
|
setInputValue(input, `change ${i}`, false);
|
|
|
|
});
|
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
jest.runOnlyPendingTimers();
|
2019-09-04 21:01:54 +05:30
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
expect(updateDirtyInputSpy).toHaveBeenCalledTimes(1);
|
2019-09-04 21:01:54 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('does not throttle updates when rapid changes are made to different form elements', () => {
|
|
|
|
const form = document.createElement('form');
|
2020-04-08 14:13:33 +05:30
|
|
|
const range = rge(10);
|
2021-03-08 18:12:59 +05:30
|
|
|
range.forEach((i) => {
|
2019-09-04 21:01:54 +05:30
|
|
|
form.innerHTML += `<input type="text" name="input-${i}" class="js-input-${i}"/>`;
|
|
|
|
});
|
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
const updateDirtyInputSpy = jest.spyOn(new DirtySubmitForm(form), 'updateDirtyInput');
|
2019-09-04 21:01:54 +05:30
|
|
|
|
2021-03-08 18:12:59 +05:30
|
|
|
range.forEach((i) => {
|
2019-09-04 21:01:54 +05:30
|
|
|
const input = form.querySelector(`.js-input-${i}`);
|
|
|
|
setInputValue(input, `change`, false);
|
|
|
|
});
|
2019-03-02 22:35:43 +05:30
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
jest.runOnlyPendingTimers();
|
2019-03-02 22:35:43 +05:30
|
|
|
|
2019-09-04 21:01:54 +05:30
|
|
|
expect(updateDirtyInputSpy).toHaveBeenCalledTimes(range.length);
|
|
|
|
});
|
2019-03-02 22:35:43 +05:30
|
|
|
});
|
2018-12-13 13:39:08 +05:30
|
|
|
});
|