Commit c5daf89f authored by Nathan Friend's avatar Nathan Friend

Merge branch '194229-migrate-spec-javascripts-dirty_submit-to-jest' into 'master'

Migrate dirty_submit to Jest

Closes #194229

See merge request gitlab-org/gitlab!30294
parents e0df3690 0c98e528
import DirtySubmitCollection from '~/dirty_submit/dirty_submit_collection';
import { setInputValue, createForm } from './helper';
jest.mock('lodash/throttle', () => jest.fn(fn => fn));
describe('DirtySubmitCollection', () => {
const testElementsCollection = [createForm(), createForm()];
const forms = testElementsCollection.map(testElements => testElements.form);
new DirtySubmitCollection(forms); // eslint-disable-line no-new
it.each(testElementsCollection)('disables submits until there are changes', testElements => {
const { input, submit } = testElements;
const originalValue = input.value;
expect(submit.disabled).toBe(true);
setInputValue(input, `${originalValue} changes`);
expect(submit.disabled).toBe(false);
setInputValue(input, originalValue);
expect(submit.disabled).toBe(true);
});
});
import { range as rge } from 'lodash';
import { range as rge, throttle } from 'lodash';
import DirtySubmitForm from '~/dirty_submit/dirty_submit_form';
import { getInputValue, setInputValue, createForm } from './helper';
jest.mock('lodash/throttle', () => jest.fn(fn => fn));
const lodash = jest.requireActual('lodash');
function expectToToggleDisableOnDirtyUpdate(submit, input) {
const originalValue = getInputValue(input);
expect(submit.disabled).toBe(true);
return setInputValue(input, `${originalValue} changes`)
.then(() => expect(submit.disabled).toBe(false))
.then(() => setInputValue(input, originalValue))
.then(() => expect(submit.disabled).toBe(true));
setInputValue(input, `${originalValue} changes`);
expect(submit.disabled).toBe(false);
setInputValue(input, originalValue);
expect(submit.disabled).toBe(true);
}
describe('DirtySubmitForm', () => {
const originalThrottleDuration = DirtySubmitForm.THROTTLE_DURATION;
describe('submit button tests', () => {
beforeEach(() => {
DirtySubmitForm.THROTTLE_DURATION = 0;
});
afterEach(() => {
DirtySubmitForm.THROTTLE_DURATION = originalThrottleDuration;
});
it('disables submit until there are changes', done => {
it('disables submit until there are changes', () => {
const { form, input, submit } = createForm();
new DirtySubmitForm(form); // eslint-disable-line no-new
return expectToToggleDisableOnDirtyUpdate(submit, input)
.then(done)
.catch(done.fail);
expectToToggleDisableOnDirtyUpdate(submit, input);
});
it('disables submit until there are changes when initializing with a falsy value', done => {
it('disables submit until there are changes when initializing with a falsy value', () => {
const { form, input, submit } = createForm();
input.value = '';
new DirtySubmitForm(form); // eslint-disable-line no-new
return expectToToggleDisableOnDirtyUpdate(submit, input)
.then(done)
.catch(done.fail);
expectToToggleDisableOnDirtyUpdate(submit, input);
});
it('disables submit until there are changes for radio inputs', done => {
it('disables submit until there are changes for radio inputs', () => {
const { form, input, submit } = createForm('radio');
new DirtySubmitForm(form); // eslint-disable-line no-new
return expectToToggleDisableOnDirtyUpdate(submit, input)
.then(done)
.catch(done.fail);
expectToToggleDisableOnDirtyUpdate(submit, input);
});
it('disables submit until there are changes for checkbox inputs', done => {
it('disables submit until there are changes for checkbox inputs', () => {
const { form, input, submit } = createForm('checkbox');
new DirtySubmitForm(form); // eslint-disable-line no-new
return expectToToggleDisableOnDirtyUpdate(submit, input)
.then(done)
.catch(done.fail);
expectToToggleDisableOnDirtyUpdate(submit, input);
});
});
describe('throttling tests', () => {
beforeEach(() => {
jasmine.clock().install();
jasmine.clock().mockDate();
DirtySubmitForm.THROTTLE_DURATION = 100;
throttle.mockImplementation(lodash.throttle);
jest.useFakeTimers();
});
afterEach(() => {
jasmine.clock().uninstall();
DirtySubmitForm.THROTTLE_DURATION = originalThrottleDuration;
throttle.mockReset();
});
it('throttles updates when rapid changes are made to a single form element', () => {
const { form, input } = createForm();
const updateDirtyInputSpy = spyOn(new DirtySubmitForm(form), 'updateDirtyInput');
const updateDirtyInputSpy = jest.spyOn(new DirtySubmitForm(form), 'updateDirtyInput');
rge(10).forEach(i => {
setInputValue(input, `change ${i}`, false);
});
jasmine.clock().tick(101);
jest.runOnlyPendingTimers();
expect(updateDirtyInputSpy).toHaveBeenCalledTimes(2);
expect(updateDirtyInputSpy).toHaveBeenCalledTimes(1);
});
it('does not throttle updates when rapid changes are made to different form elements', () => {
......@@ -99,14 +82,14 @@ describe('DirtySubmitForm', () => {
form.innerHTML += `<input type="text" name="input-${i}" class="js-input-${i}"/>`;
});
const updateDirtyInputSpy = spyOn(new DirtySubmitForm(form), 'updateDirtyInput');
const updateDirtyInputSpy = jest.spyOn(new DirtySubmitForm(form), 'updateDirtyInput');
range.forEach(i => {
const input = form.querySelector(`.js-input-${i}`);
setInputValue(input, `change`, false);
});
jasmine.clock().tick(101);
jest.runOnlyPendingTimers();
expect(updateDirtyInputSpy).toHaveBeenCalledTimes(range.length);
});
......
import DirtySubmitForm from '~/dirty_submit/dirty_submit_form';
import setTimeoutPromiseHelper from '../helpers/set_timeout_promise_helper';
function isCheckableType(type) {
return /^(radio|checkbox)$/.test(type);
}
......@@ -22,8 +19,6 @@ export function setInputValue(element, value) {
bubbles: true,
}),
);
return setTimeoutPromiseHelper(DirtySubmitForm.THROTTLE_DURATION);
}
export function getInputValue(input) {
......
import DirtySubmitCollection from '~/dirty_submit/dirty_submit_collection';
import { setInputValue, createForm } from './helper';
describe('DirtySubmitCollection', () => {
it('disables submits until there are changes', done => {
const testElementsCollection = [createForm(), createForm()];
const forms = testElementsCollection.map(testElements => testElements.form);
new DirtySubmitCollection(forms); // eslint-disable-line no-new
testElementsCollection.forEach(testElements => {
const { input, submit } = testElements;
const originalValue = input.value;
expect(submit.disabled).toBe(true);
return setInputValue(input, `${originalValue} changes`)
.then(() => {
expect(submit.disabled).toBe(false);
})
.then(() => setInputValue(input, originalValue))
.then(() => {
expect(submit.disabled).toBe(true);
})
.then(done)
.catch(done.fail);
});
});
});
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