diff options
author | Nathan Friend <nathan@gitlab.com> | 2019-05-17 20:05:15 +0300 |
---|---|---|
committer | Nathan Friend <nathan@gitlab.com> | 2019-05-17 20:05:15 +0300 |
commit | 2a4a732db94652a131aae0fc57801a8f09fabead (patch) | |
tree | b8a201b60826683c8d262d590e2a79d2b7d8cc26 /spec/javascripts/dirty_submit | |
parent | 913bc9649b012b178ef1acb9ef254fcc565be248 (diff) |
Fix throttling issue in form dirty checking
This commit fixes an issue that was causing the "Save changes" button
to be incorrectly enabled or disabled when changes were made to a form.
(Specifically, some of the subsections in the project settings pages.)
Diffstat (limited to 'spec/javascripts/dirty_submit')
-rw-r--r-- | spec/javascripts/dirty_submit/dirty_submit_form_spec.js | 111 |
1 files changed, 83 insertions, 28 deletions
diff --git a/spec/javascripts/dirty_submit/dirty_submit_form_spec.js b/spec/javascripts/dirty_submit/dirty_submit_form_spec.js index 95cc90dcb0f..b1017e0c4f0 100644 --- a/spec/javascripts/dirty_submit/dirty_submit_form_spec.js +++ b/spec/javascripts/dirty_submit/dirty_submit_form_spec.js @@ -1,3 +1,4 @@ +import _ from 'underscore'; import DirtySubmitForm from '~/dirty_submit/dirty_submit_form'; import { getInputValue, setInputValue, createForm } from './helper'; @@ -13,46 +14,100 @@ function expectToToggleDisableOnDirtyUpdate(submit, input) { } describe('DirtySubmitForm', () => { - DirtySubmitForm.THROTTLE_DURATION = 0; + const originalThrottleDuration = DirtySubmitForm.THROTTLE_DURATION; - it('disables submit until there are changes', done => { - const { form, input, submit } = createForm(); + describe('submit button tests', () => { + beforeEach(() => { + DirtySubmitForm.THROTTLE_DURATION = 0; + }); - new DirtySubmitForm(form); // eslint-disable-line no-new + afterEach(() => { + DirtySubmitForm.THROTTLE_DURATION = originalThrottleDuration; + }); - return expectToToggleDisableOnDirtyUpdate(submit, input) - .then(done) - .catch(done.fail); - }); + it('disables submit until there are changes', done => { + const { form, input, submit } = createForm(); - it('disables submit until there are changes when initializing with a falsy value', done => { - const { form, input, submit } = createForm(); - input.value = ''; + new DirtySubmitForm(form); // eslint-disable-line no-new - new DirtySubmitForm(form); // eslint-disable-line no-new + return expectToToggleDisableOnDirtyUpdate(submit, input) + .then(done) + .catch(done.fail); + }); - return expectToToggleDisableOnDirtyUpdate(submit, input) - .then(done) - .catch(done.fail); - }); + it('disables submit until there are changes when initializing with a falsy value', done => { + const { form, input, submit } = createForm(); + input.value = ''; + + new DirtySubmitForm(form); // eslint-disable-line no-new + + return expectToToggleDisableOnDirtyUpdate(submit, input) + .then(done) + .catch(done.fail); + }); - it('disables submit until there are changes for radio inputs', done => { - const { form, input, submit } = createForm('radio'); + it('disables submit until there are changes for radio inputs', done => { + const { form, input, submit } = createForm('radio'); - new DirtySubmitForm(form); // eslint-disable-line no-new + new DirtySubmitForm(form); // eslint-disable-line no-new - return expectToToggleDisableOnDirtyUpdate(submit, input) - .then(done) - .catch(done.fail); + return expectToToggleDisableOnDirtyUpdate(submit, input) + .then(done) + .catch(done.fail); + }); + + it('disables submit until there are changes for checkbox inputs', done => { + const { form, input, submit } = createForm('checkbox'); + + new DirtySubmitForm(form); // eslint-disable-line no-new + + return expectToToggleDisableOnDirtyUpdate(submit, input) + .then(done) + .catch(done.fail); + }); }); - it('disables submit until there are changes for checkbox inputs', done => { - const { form, input, submit } = createForm('checkbox'); + describe('throttling tests', () => { + beforeEach(() => { + jasmine.clock().install(); + DirtySubmitForm.THROTTLE_DURATION = 100; + }); + + afterEach(() => { + jasmine.clock().uninstall(); + DirtySubmitForm.THROTTLE_DURATION = originalThrottleDuration; + }); + + it('throttles updates when rapid changes are made to a single form element', () => { + const { form, input } = createForm(); + const updateDirtyInputSpy = spyOn(new DirtySubmitForm(form), 'updateDirtyInput'); + + _.range(10).forEach(i => { + setInputValue(input, `change ${i}`, false); + }); + + jasmine.clock().tick(101); + + expect(updateDirtyInputSpy).toHaveBeenCalledTimes(2); + }); + + it('does not throttle updates when rapid changes are made to different form elements', () => { + const form = document.createElement('form'); + const range = _.range(10); + range.forEach(i => { + form.innerHTML += `<input type="text" name="input-${i}" class="js-input-${i}"/>`; + }); + + const updateDirtyInputSpy = spyOn(new DirtySubmitForm(form), 'updateDirtyInput'); + + range.forEach(i => { + const input = form.querySelector(`.js-input-${i}`); + setInputValue(input, `change`, false); + }); - new DirtySubmitForm(form); // eslint-disable-line no-new + jasmine.clock().tick(101); - return expectToToggleDisableOnDirtyUpdate(submit, input) - .then(done) - .catch(done.fail); + expect(updateDirtyInputSpy).toHaveBeenCalledTimes(range.length); + }); }); }); |