fix(forms): updateOn should check if change occurred (#20358)

Fixes #20259.

PR Close #20358
This commit is contained in:
Kara Erickson
2017-11-11 02:54:36 -08:00
committed by Miško Hevery
parent 365712e2f0
commit 69c53c3e03
4 changed files with 253 additions and 5 deletions

View File

@ -947,6 +947,55 @@ export function main() {
sub.unsubscribe();
});
it('should not emit valueChanges or statusChanges on blur if value unchanged', () => {
const fixture = initTest(FormControlComp);
const control = new FormControl('', {validators: Validators.required, updateOn: 'blur'});
fixture.componentInstance.control = control;
fixture.detectChanges();
const values: string[] = [];
const sub =
merge(control.valueChanges, control.statusChanges).subscribe(val => values.push(val));
const input = fixture.debugElement.query(By.css('input')).nativeElement;
dispatchEvent(input, 'blur');
fixture.detectChanges();
expect(values).toEqual(
[], 'Expected no valueChanges or statusChanges if value unchanged.');
input.value = 'Nancy';
dispatchEvent(input, 'input');
fixture.detectChanges();
expect(values).toEqual([], 'Expected no valueChanges or statusChanges on input.');
dispatchEvent(input, 'blur');
fixture.detectChanges();
expect(values).toEqual(
['Nancy', 'VALID'],
'Expected valueChanges and statusChanges on blur if value changed.');
dispatchEvent(input, 'blur');
fixture.detectChanges();
expect(values).toEqual(
['Nancy', 'VALID'],
'Expected valueChanges and statusChanges not to fire again on blur unless value changed.');
input.value = 'Bess';
dispatchEvent(input, 'input');
fixture.detectChanges();
expect(values).toEqual(
['Nancy', 'VALID'],
'Expected valueChanges and statusChanges not to fire on input after blur.');
dispatchEvent(input, 'blur');
fixture.detectChanges();
expect(values).toEqual(
['Nancy', 'VALID', 'Bess', 'VALID'],
'Expected valueChanges and statusChanges to fire again on blur if value changed.');
sub.unsubscribe();
});
it('should mark as pristine properly if pending dirty', () => {
const fixture = initTest(FormControlComp);
const control = new FormControl('', {updateOn: 'blur'});
@ -1272,6 +1321,65 @@ export function main() {
sub.unsubscribe();
});
it('should not emit valueChanges or statusChanges on submit if value unchanged', () => {
const fixture = initTest(FormGroupComp);
const control =
new FormControl('', {validators: Validators.required, updateOn: 'submit'});
const formGroup = new FormGroup({login: control});
fixture.componentInstance.form = formGroup;
fixture.detectChanges();
const values: string[] = [];
const streams = merge(
control.valueChanges, control.statusChanges, formGroup.valueChanges,
formGroup.statusChanges);
const sub = streams.subscribe(val => values.push(val));
const form = fixture.debugElement.query(By.css('form')).nativeElement;
dispatchEvent(form, 'submit');
fixture.detectChanges();
expect(values).toEqual(
[], 'Expected no valueChanges or statusChanges if value unchanged.');
const input = fixture.debugElement.query(By.css('input')).nativeElement;
input.value = 'Nancy';
dispatchEvent(input, 'input');
fixture.detectChanges();
expect(values).toEqual([], 'Expected no valueChanges or statusChanges on input.');
dispatchEvent(form, 'submit');
fixture.detectChanges();
expect(values).toEqual(
['Nancy', 'VALID', {login: 'Nancy'}, 'VALID'],
'Expected valueChanges and statusChanges on submit if value changed.');
dispatchEvent(form, 'submit');
fixture.detectChanges();
expect(values).toEqual(
['Nancy', 'VALID', {login: 'Nancy'}, 'VALID'],
'Expected valueChanges and statusChanges not to fire again if value unchanged.');
input.value = 'Bess';
dispatchEvent(input, 'input');
fixture.detectChanges();
expect(values).toEqual(
['Nancy', 'VALID', {login: 'Nancy'}, 'VALID'],
'Expected valueChanges and statusChanges not to fire on input after submit.');
dispatchEvent(form, 'submit');
fixture.detectChanges();
expect(values).toEqual(
[
'Nancy', 'VALID', {login: 'Nancy'}, 'VALID', 'Bess', 'VALID', {login: 'Bess'},
'VALID'
],
'Expected valueChanges and statusChanges to fire again on submit if value changed.');
sub.unsubscribe();
});
it('should not run validation for onChange controls on submit', () => {
const validatorSpy = jasmine.createSpy('validator');
const groupValidatorSpy = jasmine.createSpy('groupValidatorSpy');