1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
import _ from 'underscore';
import DirtySubmitForm from '~/dirty_submit/dirty_submit_form';
import { getInputValue, setInputValue, createForm } from './helper';
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));
}
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 => {
const { form, input, submit } = createForm();
new DirtySubmitForm(form); // eslint-disable-line no-new
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');
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');
new DirtySubmitForm(form); // eslint-disable-line no-new
return expectToToggleDisableOnDirtyUpdate(submit, input)
.then(done)
.catch(done.fail);
});
});
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);
});
jasmine.clock().tick(101);
expect(updateDirtyInputSpy).toHaveBeenCalledTimes(range.length);
});
});
});
|
