refactor(forms): move value accessor tests into own spec (#18356)
PR Close #18356
This commit is contained in:
Kara Erickson
Miško Hevery
parent
d20ac14fe2
commit
fae47d86b3
|
|
@ -6,14 +6,15 @@
|
|||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Component, Directive, EventEmitter, Input, Output, Type, forwardRef} from '@angular/core';
|
||||
import {Component, Directive, Input, Type, forwardRef} from '@angular/core';
|
||||
import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
|
||||
import {AbstractControl, AsyncValidator, AsyncValidatorFn, COMPOSITION_BUFFER_MODE, ControlValueAccessor, FormArray, FormControl, FormGroup, FormGroupDirective, FormsModule, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl, ReactiveFormsModule, Validators} from '@angular/forms';
|
||||
import {AbstractControl, AsyncValidator, AsyncValidatorFn, COMPOSITION_BUFFER_MODE, FormArray, FormControl, FormGroup, FormGroupDirective, FormsModule, NG_ASYNC_VALIDATORS, NG_VALIDATORS, ReactiveFormsModule, Validators} from '@angular/forms';
|
||||
import {By} from '@angular/platform-browser/src/dom/debug/by';
|
||||
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
|
||||
import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
|
||||
import {timer} from 'rxjs/observable/timer';
|
||||
import {_do} from 'rxjs/operator/do';
|
||||
import {MyInput, MyInputForm} from './value_accessor_integration_spec';
|
||||
|
||||
export function main() {
|
||||
describe('reactive forms integration tests', () => {
|
||||
|
|
@ -75,7 +76,7 @@ export function main() {
|
|||
|
||||
});
|
||||
|
||||
describe('rebound form groups', () => {
|
||||
describe('re-bound form groups', () => {
|
||||
|
||||
it('should update DOM elements initially', () => {
|
||||
const fixture = initTest(FormGroupComp);
|
||||
|
|
@ -110,24 +111,6 @@ export function main() {
|
|||
expect(input.nativeElement.value).toEqual('Carson');
|
||||
});
|
||||
|
||||
it('should work with radio buttons when reusing control', () => {
|
||||
const fixture = initTest(FormControlRadioButtons);
|
||||
const food = new FormControl('chicken');
|
||||
fixture.componentInstance.form =
|
||||
new FormGroup({'food': food, 'drink': new FormControl('')});
|
||||
fixture.detectChanges();
|
||||
|
||||
const newForm = new FormGroup({'food': food, 'drink': new FormControl('')});
|
||||
fixture.componentInstance.form = newForm;
|
||||
fixture.detectChanges();
|
||||
|
||||
newForm.setValue({food: 'fish', drink: ''});
|
||||
fixture.detectChanges();
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
expect(inputs[0].nativeElement.checked).toBe(false);
|
||||
expect(inputs[1].nativeElement.checked).toBe(true);
|
||||
});
|
||||
|
||||
it('should update nested form group model when UI changes', () => {
|
||||
const fixture = initTest(NestedFormGroupComp);
|
||||
fixture.componentInstance.form = new FormGroup(
|
||||
|
|
@ -340,95 +323,6 @@ export function main() {
|
|||
|
||||
});
|
||||
|
||||
describe('select controls', () => {
|
||||
it(`should support primitive values`, () => {
|
||||
const fixture = initTest(FormControlNameSelect);
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
const select = fixture.debugElement.query(By.css('select'));
|
||||
const sfOption = fixture.debugElement.query(By.css('option'));
|
||||
expect(select.nativeElement.value).toEqual('SF');
|
||||
expect(sfOption.nativeElement.selected).toBe(true);
|
||||
|
||||
select.nativeElement.value = 'NY';
|
||||
dispatchEvent(select.nativeElement, 'change');
|
||||
fixture.detectChanges();
|
||||
|
||||
// view -> model
|
||||
expect(sfOption.nativeElement.selected).toBe(false);
|
||||
expect(fixture.componentInstance.form.value).toEqual({'city': 'NY'});
|
||||
});
|
||||
|
||||
it(`should support objects`, () => {
|
||||
const fixture = initTest(FormControlSelectNgValue);
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
const select = fixture.debugElement.query(By.css('select'));
|
||||
const sfOption = fixture.debugElement.query(By.css('option'));
|
||||
expect(select.nativeElement.value).toEqual('0: Object');
|
||||
expect(sfOption.nativeElement.selected).toBe(true);
|
||||
});
|
||||
|
||||
it('should throw an error if compareWith is not a function', () => {
|
||||
const fixture = initTest(FormControlSelectWithCompareFn);
|
||||
fixture.componentInstance.compareFn = null !;
|
||||
expect(() => fixture.detectChanges())
|
||||
.toThrowError(/compareWith must be a function, but received null/);
|
||||
});
|
||||
|
||||
it('should compare options using provided compareWith function', () => {
|
||||
const fixture = initTest(FormControlSelectWithCompareFn);
|
||||
fixture.detectChanges();
|
||||
|
||||
const select = fixture.debugElement.query(By.css('select'));
|
||||
const sfOption = fixture.debugElement.query(By.css('option'));
|
||||
expect(select.nativeElement.value).toEqual('0: Object');
|
||||
expect(sfOption.nativeElement.selected).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('select multiple controls', () => {
|
||||
it('should support primitive values', () => {
|
||||
const fixture = initTest(FormControlSelectMultiple);
|
||||
fixture.detectChanges();
|
||||
|
||||
const select = fixture.debugElement.query(By.css('select'));
|
||||
const sfOption = fixture.debugElement.query(By.css('option'));
|
||||
expect(select.nativeElement.value).toEqual(`0: 'SF'`);
|
||||
expect(sfOption.nativeElement.selected).toBe(true);
|
||||
});
|
||||
|
||||
it('should support objects', () => {
|
||||
const fixture = initTest(FormControlSelectMultipleNgValue);
|
||||
fixture.detectChanges();
|
||||
|
||||
const select = fixture.debugElement.query(By.css('select'));
|
||||
const sfOption = fixture.debugElement.query(By.css('option'));
|
||||
expect(select.nativeElement.value).toEqual('0: Object');
|
||||
expect(sfOption.nativeElement.selected).toBe(true);
|
||||
});
|
||||
|
||||
it('should throw an error when compareWith is not a function', () => {
|
||||
const fixture = initTest(FormControlSelectMultipleWithCompareFn);
|
||||
fixture.componentInstance.compareFn = null !;
|
||||
expect(() => fixture.detectChanges())
|
||||
.toThrowError(/compareWith must be a function, but received null/);
|
||||
});
|
||||
|
||||
it('should compare options using provided compareWith function', fakeAsync(() => {
|
||||
const fixture = initTest(FormControlSelectMultipleWithCompareFn);
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
const select = fixture.debugElement.query(By.css('select'));
|
||||
const sfOption = fixture.debugElement.query(By.css('option'));
|
||||
expect(select.nativeElement.value).toEqual('0: Object');
|
||||
expect(sfOption.nativeElement.selected).toBe(true);
|
||||
}));
|
||||
});
|
||||
|
||||
describe('form arrays', () => {
|
||||
it('should support form arrays', () => {
|
||||
const fixture = initTest(FormArrayComp);
|
||||
|
|
@ -837,482 +731,6 @@ export function main() {
|
|||
|
||||
});
|
||||
|
||||
describe('value accessors', () => {
|
||||
|
||||
it('should support <input> without type', () => {
|
||||
TestBed.overrideComponent(
|
||||
FormControlComp, {set: {template: `<input [formControl]="control">`}});
|
||||
const fixture = initTest(FormControlComp);
|
||||
const control = new FormControl('old');
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
expect(input.nativeElement.value).toEqual('old');
|
||||
|
||||
input.nativeElement.value = 'new';
|
||||
dispatchEvent(input.nativeElement, 'input');
|
||||
|
||||
// view -> model
|
||||
expect(control.value).toEqual('new');
|
||||
});
|
||||
|
||||
it('should support <input type=text>', () => {
|
||||
const fixture = initTest(FormGroupComp);
|
||||
const form = new FormGroup({'login': new FormControl('old')});
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
expect(input.nativeElement.value).toEqual('old');
|
||||
|
||||
input.nativeElement.value = 'new';
|
||||
dispatchEvent(input.nativeElement, 'input');
|
||||
|
||||
// view -> model
|
||||
expect(form.value).toEqual({'login': 'new'});
|
||||
});
|
||||
|
||||
it('should ignore the change event for <input type=text>', () => {
|
||||
const fixture = initTest(FormGroupComp);
|
||||
const form = new FormGroup({'login': new FormControl('oldValue')});
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
form.valueChanges.subscribe({next: (value) => { throw 'Should not happen'; }});
|
||||
input.nativeElement.value = 'updatedValue';
|
||||
|
||||
dispatchEvent(input.nativeElement, 'change');
|
||||
});
|
||||
|
||||
it('should support <textarea>', () => {
|
||||
TestBed.overrideComponent(
|
||||
FormControlComp, {set: {template: `<textarea [formControl]="control"></textarea>`}});
|
||||
const fixture = initTest(FormControlComp);
|
||||
const control = new FormControl('old');
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
const textarea = fixture.debugElement.query(By.css('textarea'));
|
||||
expect(textarea.nativeElement.value).toEqual('old');
|
||||
|
||||
textarea.nativeElement.value = 'new';
|
||||
dispatchEvent(textarea.nativeElement, 'input');
|
||||
|
||||
// view -> model
|
||||
expect(control.value).toEqual('new');
|
||||
});
|
||||
|
||||
it('should support <type=checkbox>', () => {
|
||||
TestBed.overrideComponent(
|
||||
FormControlComp, {set: {template: `<input type="checkbox" [formControl]="control">`}});
|
||||
const fixture = initTest(FormControlComp);
|
||||
const control = new FormControl(true);
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
expect(input.nativeElement.checked).toBe(true);
|
||||
|
||||
input.nativeElement.checked = false;
|
||||
dispatchEvent(input.nativeElement, 'change');
|
||||
|
||||
// view -> model
|
||||
expect(control.value).toBe(false);
|
||||
});
|
||||
|
||||
describe('should support <type=number>', () => {
|
||||
it('with basic use case', () => {
|
||||
const fixture = initTest(FormControlNumberInput);
|
||||
const control = new FormControl(10);
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
expect(input.nativeElement.value).toEqual('10');
|
||||
|
||||
input.nativeElement.value = '20';
|
||||
dispatchEvent(input.nativeElement, 'input');
|
||||
|
||||
// view -> model
|
||||
expect(control.value).toEqual(20);
|
||||
});
|
||||
|
||||
it('when value is cleared in the UI', () => {
|
||||
const fixture = initTest(FormControlNumberInput);
|
||||
const control = new FormControl(10, Validators.required);
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
input.nativeElement.value = '';
|
||||
dispatchEvent(input.nativeElement, 'input');
|
||||
|
||||
expect(control.valid).toBe(false);
|
||||
expect(control.value).toEqual(null);
|
||||
|
||||
input.nativeElement.value = '0';
|
||||
dispatchEvent(input.nativeElement, 'input');
|
||||
|
||||
expect(control.valid).toBe(true);
|
||||
expect(control.value).toEqual(0);
|
||||
});
|
||||
|
||||
it('when value is cleared programmatically', () => {
|
||||
const fixture = initTest(FormControlNumberInput);
|
||||
const control = new FormControl(10);
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
control.setValue(null);
|
||||
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
expect(input.nativeElement.value).toEqual('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('should support <type=radio>', () => {
|
||||
|
||||
it('should support basic functionality', () => {
|
||||
const fixture = initTest(FormControlRadioButtons);
|
||||
const form =
|
||||
new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')});
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
expect(inputs[0].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[1].nativeElement.checked).toEqual(true);
|
||||
|
||||
dispatchEvent(inputs[0].nativeElement, 'change');
|
||||
fixture.detectChanges();
|
||||
|
||||
// view -> model
|
||||
expect(form.get('food') !.value).toEqual('chicken');
|
||||
expect(inputs[1].nativeElement.checked).toEqual(false);
|
||||
|
||||
form.get('food') !.setValue('fish');
|
||||
fixture.detectChanges();
|
||||
|
||||
// programmatic change -> view
|
||||
expect(inputs[0].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[1].nativeElement.checked).toEqual(true);
|
||||
});
|
||||
|
||||
it('should support an initial undefined value', () => {
|
||||
const fixture = initTest(FormControlRadioButtons);
|
||||
const form = new FormGroup({'food': new FormControl(), 'drink': new FormControl()});
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
expect(inputs[0].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[1].nativeElement.checked).toEqual(false);
|
||||
});
|
||||
|
||||
it('should reset properly', () => {
|
||||
const fixture = initTest(FormControlRadioButtons);
|
||||
const form =
|
||||
new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')});
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
form.reset();
|
||||
fixture.detectChanges();
|
||||
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
expect(inputs[0].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[1].nativeElement.checked).toEqual(false);
|
||||
});
|
||||
|
||||
it('should set value to null and undefined properly', () => {
|
||||
const fixture = initTest(FormControlRadioButtons);
|
||||
const form = new FormGroup(
|
||||
{'food': new FormControl('chicken'), 'drink': new FormControl('sprite')});
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
form.get('food') !.setValue(null);
|
||||
fixture.detectChanges();
|
||||
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
expect(inputs[0].nativeElement.checked).toEqual(false);
|
||||
|
||||
form.get('food') !.setValue('chicken');
|
||||
fixture.detectChanges();
|
||||
|
||||
form.get('food') !.setValue(undefined);
|
||||
fixture.detectChanges();
|
||||
expect(inputs[0].nativeElement.checked).toEqual(false);
|
||||
});
|
||||
|
||||
it('should use formControlName to group radio buttons when name is absent', () => {
|
||||
const fixture = initTest(FormControlRadioButtons);
|
||||
const foodCtrl = new FormControl('fish');
|
||||
const drinkCtrl = new FormControl('sprite');
|
||||
fixture.componentInstance.form = new FormGroup({'food': foodCtrl, 'drink': drinkCtrl});
|
||||
fixture.detectChanges();
|
||||
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
expect(inputs[0].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[1].nativeElement.checked).toEqual(true);
|
||||
expect(inputs[2].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[3].nativeElement.checked).toEqual(true);
|
||||
|
||||
dispatchEvent(inputs[0].nativeElement, 'change');
|
||||
inputs[0].nativeElement.checked = true;
|
||||
fixture.detectChanges();
|
||||
|
||||
const value = fixture.componentInstance.form.value;
|
||||
expect(value.food).toEqual('chicken');
|
||||
expect(inputs[1].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[2].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[3].nativeElement.checked).toEqual(true);
|
||||
|
||||
drinkCtrl.setValue('cola');
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(inputs[0].nativeElement.checked).toEqual(true);
|
||||
expect(inputs[1].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[2].nativeElement.checked).toEqual(true);
|
||||
expect(inputs[3].nativeElement.checked).toEqual(false);
|
||||
});
|
||||
|
||||
it('should support removing controls from <type=radio>', () => {
|
||||
const fixture = initTest(FormControlRadioButtons);
|
||||
const showRadio = new FormControl('yes');
|
||||
const form =
|
||||
new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')});
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.componentInstance.showRadio = showRadio;
|
||||
showRadio.valueChanges.subscribe((change) => {
|
||||
(change === 'yes') ? form.addControl('food', new FormControl('fish')) :
|
||||
form.removeControl('food');
|
||||
});
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = fixture.debugElement.query(By.css('[value="no"]'));
|
||||
dispatchEvent(input.nativeElement, 'change');
|
||||
|
||||
fixture.detectChanges();
|
||||
expect(form.value).toEqual({drink: 'sprite'});
|
||||
});
|
||||
|
||||
it('should differentiate controls on different levels with the same name', () => {
|
||||
TestBed.overrideComponent(FormControlRadioButtons, {
|
||||
set: {
|
||||
template: `
|
||||
<div [formGroup]="form">
|
||||
<input type="radio" formControlName="food" value="chicken">
|
||||
<input type="radio" formControlName="food" value="fish">
|
||||
<div formGroupName="nested">
|
||||
<input type="radio" formControlName="food" value="chicken">
|
||||
<input type="radio" formControlName="food" value="fish">
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
});
|
||||
const fixture = initTest(FormControlRadioButtons);
|
||||
const form = new FormGroup({
|
||||
food: new FormControl('fish'),
|
||||
nested: new FormGroup({food: new FormControl('fish')})
|
||||
});
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
expect(inputs[0].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[1].nativeElement.checked).toEqual(true);
|
||||
expect(inputs[2].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[3].nativeElement.checked).toEqual(true);
|
||||
|
||||
dispatchEvent(inputs[0].nativeElement, 'change');
|
||||
fixture.detectChanges();
|
||||
|
||||
// view -> model
|
||||
expect(form.get('food') !.value).toEqual('chicken');
|
||||
expect(form.get('nested.food') !.value).toEqual('fish');
|
||||
|
||||
expect(inputs[1].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[2].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[3].nativeElement.checked).toEqual(true);
|
||||
|
||||
});
|
||||
|
||||
it('should disable all radio buttons when disable() is called', () => {
|
||||
const fixture = initTest(FormControlRadioButtons);
|
||||
const form =
|
||||
new FormGroup({food: new FormControl('fish'), drink: new FormControl('cola')});
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
expect(inputs[0].nativeElement.disabled).toEqual(false);
|
||||
expect(inputs[1].nativeElement.disabled).toEqual(false);
|
||||
expect(inputs[2].nativeElement.disabled).toEqual(false);
|
||||
expect(inputs[3].nativeElement.disabled).toEqual(false);
|
||||
|
||||
form.get('food') !.disable();
|
||||
expect(inputs[0].nativeElement.disabled).toEqual(true);
|
||||
expect(inputs[1].nativeElement.disabled).toEqual(true);
|
||||
expect(inputs[2].nativeElement.disabled).toEqual(false);
|
||||
expect(inputs[3].nativeElement.disabled).toEqual(false);
|
||||
|
||||
form.disable();
|
||||
expect(inputs[0].nativeElement.disabled).toEqual(true);
|
||||
expect(inputs[1].nativeElement.disabled).toEqual(true);
|
||||
expect(inputs[2].nativeElement.disabled).toEqual(true);
|
||||
expect(inputs[3].nativeElement.disabled).toEqual(true);
|
||||
|
||||
form.enable();
|
||||
expect(inputs[0].nativeElement.disabled).toEqual(false);
|
||||
expect(inputs[1].nativeElement.disabled).toEqual(false);
|
||||
expect(inputs[2].nativeElement.disabled).toEqual(false);
|
||||
expect(inputs[3].nativeElement.disabled).toEqual(false);
|
||||
});
|
||||
|
||||
it('should disable all radio buttons when initially disabled', () => {
|
||||
const fixture = initTest(FormControlRadioButtons);
|
||||
const form = new FormGroup({
|
||||
food: new FormControl({value: 'fish', disabled: true}),
|
||||
drink: new FormControl('cola')
|
||||
});
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
expect(inputs[0].nativeElement.disabled).toEqual(true);
|
||||
expect(inputs[1].nativeElement.disabled).toEqual(true);
|
||||
expect(inputs[2].nativeElement.disabled).toEqual(false);
|
||||
expect(inputs[3].nativeElement.disabled).toEqual(false);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('should support <type=range>', () => {
|
||||
it('with basic use case', () => {
|
||||
const fixture = initTest(FormControlRangeInput);
|
||||
const control = new FormControl(10);
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
expect(input.nativeElement.value).toEqual('10');
|
||||
|
||||
input.nativeElement.value = '20';
|
||||
dispatchEvent(input.nativeElement, 'input');
|
||||
|
||||
// view -> model
|
||||
expect(control.value).toEqual(20);
|
||||
});
|
||||
|
||||
it('when value is cleared in the UI', () => {
|
||||
const fixture = initTest(FormControlNumberInput);
|
||||
const control = new FormControl(10, Validators.required);
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
input.nativeElement.value = '';
|
||||
dispatchEvent(input.nativeElement, 'input');
|
||||
|
||||
expect(control.valid).toBe(false);
|
||||
expect(control.value).toEqual(null);
|
||||
|
||||
input.nativeElement.value = '0';
|
||||
dispatchEvent(input.nativeElement, 'input');
|
||||
|
||||
expect(control.valid).toBe(true);
|
||||
expect(control.value).toEqual(0);
|
||||
});
|
||||
|
||||
it('when value is cleared programmatically', () => {
|
||||
const fixture = initTest(FormControlNumberInput);
|
||||
const control = new FormControl(10);
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
control.setValue(null);
|
||||
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
expect(input.nativeElement.value).toEqual('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('custom value accessors', () => {
|
||||
it('should support basic functionality', () => {
|
||||
const fixture = initTest(WrappedValueForm, WrappedValue);
|
||||
const form = new FormGroup({'login': new FormControl('aa')});
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
expect(input.nativeElement.value).toEqual('!aa!');
|
||||
|
||||
input.nativeElement.value = '!bb!';
|
||||
dispatchEvent(input.nativeElement, 'input');
|
||||
|
||||
// view -> model
|
||||
expect(form.value).toEqual({'login': 'bb'});
|
||||
|
||||
// custom validator
|
||||
expect(form.get('login') !.errors).toEqual({'err': true});
|
||||
form.setValue({login: 'expected'});
|
||||
expect(form.get('login') !.errors).toEqual(null);
|
||||
});
|
||||
|
||||
it('should support non builtin input elements that fire a change event without a \'target\' property',
|
||||
() => {
|
||||
const fixture = initTest(MyInputForm, MyInput);
|
||||
fixture.componentInstance.form = new FormGroup({'login': new FormControl('aa')});
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = fixture.debugElement.query(By.css('my-input'));
|
||||
expect(input.componentInstance.value).toEqual('!aa!');
|
||||
|
||||
input.componentInstance.value = '!bb!';
|
||||
input.componentInstance.onInput.subscribe((value: any) => {
|
||||
expect(fixture.componentInstance.form.value).toEqual({'login': 'bb'});
|
||||
});
|
||||
input.componentInstance.dispatchChangeEvent();
|
||||
});
|
||||
|
||||
it('should support custom accessors without setDisabledState - formControlName', () => {
|
||||
const fixture = initTest(WrappedValueForm, WrappedValue);
|
||||
fixture.componentInstance.form = new FormGroup({
|
||||
'login': new FormControl({value: 'aa', disabled: true}),
|
||||
});
|
||||
fixture.detectChanges();
|
||||
expect(fixture.componentInstance.form.status).toEqual('DISABLED');
|
||||
expect(fixture.componentInstance.form.get('login') !.status).toEqual('DISABLED');
|
||||
});
|
||||
|
||||
it('should support custom accessors without setDisabledState - formControlDirective',
|
||||
() => {
|
||||
TestBed.overrideComponent(
|
||||
FormControlComp,
|
||||
{set: {template: `<input type="text" [formControl]="control" wrapped-value>`}});
|
||||
const fixture = initTest(FormControlComp);
|
||||
fixture.componentInstance.control = new FormControl({value: 'aa', disabled: true});
|
||||
fixture.detectChanges();
|
||||
expect(fixture.componentInstance.control.status).toEqual('DISABLED');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('ngModel interactions', () => {
|
||||
|
||||
it('should support ngModel for complex forms', fakeAsync(() => {
|
||||
|
|
@ -1992,44 +1410,6 @@ export function main() {
|
|||
});
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[wrapped-value]',
|
||||
host: {'(input)': 'handleOnInput($event.target.value)', '[value]': 'value'},
|
||||
providers: [
|
||||
{provide: NG_VALUE_ACCESSOR, multi: true, useExisting: WrappedValue},
|
||||
{provide: NG_VALIDATORS, multi: true, useExisting: WrappedValue}
|
||||
]
|
||||
})
|
||||
class WrappedValue implements ControlValueAccessor {
|
||||
value: any;
|
||||
onChange: Function;
|
||||
|
||||
writeValue(value: any) { this.value = `!${value}!`; }
|
||||
|
||||
registerOnChange(fn: (value: any) => void) { this.onChange = fn; }
|
||||
registerOnTouched(fn: any) {}
|
||||
|
||||
handleOnInput(value: any) { this.onChange(value.substring(1, value.length - 1)); }
|
||||
|
||||
validate(c: AbstractControl) { return c.value === 'expected' ? null : {'err': true}; }
|
||||
}
|
||||
|
||||
@Component({selector: 'my-input', template: ''})
|
||||
class MyInput implements ControlValueAccessor {
|
||||
@Output('input') onInput = new EventEmitter();
|
||||
value: string;
|
||||
|
||||
constructor(cd: NgControl) { cd.valueAccessor = this; }
|
||||
|
||||
writeValue(value: any) { this.value = `!${value}!`; }
|
||||
|
||||
registerOnChange(fn: (value: any) => void) { this.onInput.subscribe({next: fn}); }
|
||||
|
||||
registerOnTouched(fn: any) {}
|
||||
|
||||
dispatchChangeEvent() { this.onInput.emit(this.value.substring(1, this.value.length - 1)); }
|
||||
}
|
||||
|
||||
function uniqLoginAsyncValidator(expectedValue: string, timeout: number = 0) {
|
||||
return (c: AbstractControl) => {
|
||||
let resolve: (result: any) => void;
|
||||
|
|
@ -2109,39 +1489,6 @@ class NestedFormGroupComp {
|
|||
form: FormGroup;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'form-control-number-input',
|
||||
template: `<input type="number" [formControl]="control">`
|
||||
})
|
||||
class FormControlNumberInput {
|
||||
control: FormControl;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'form-control-range-input',
|
||||
template: `<input type="range" [formControl]="control">`
|
||||
})
|
||||
class FormControlRangeInput {
|
||||
control: FormControl;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'form-control-radio-buttons',
|
||||
template: `
|
||||
<form [formGroup]="form" *ngIf="showRadio.value === 'yes'">
|
||||
<input type="radio" formControlName="food" value="chicken">
|
||||
<input type="radio" formControlName="food" value="fish">
|
||||
<input type="radio" formControlName="drink" value="cola">
|
||||
<input type="radio" formControlName="drink" value="sprite">
|
||||
</form>
|
||||
<input type="radio" [formControl]="showRadio" value="yes">
|
||||
<input type="radio" [formControl]="showRadio" value="no">`
|
||||
})
|
||||
class FormControlRadioButtons {
|
||||
form: FormGroup;
|
||||
showRadio = new FormControl('yes');
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'form-array-comp',
|
||||
template: `
|
||||
|
|
@ -2175,115 +1522,6 @@ class FormArrayNestedGroup {
|
|||
cityArray: FormArray;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'form-control-name-select',
|
||||
template: `
|
||||
<div [formGroup]="form">
|
||||
<select formControlName="city">
|
||||
<option *ngFor="let c of cities" [value]="c"></option>
|
||||
</select>
|
||||
</div>`
|
||||
})
|
||||
class FormControlNameSelect {
|
||||
cities = ['SF', 'NY'];
|
||||
form = new FormGroup({city: new FormControl('SF')});
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'form-control-select-ngValue',
|
||||
template: `
|
||||
<div [formGroup]="form">
|
||||
<select formControlName="city">
|
||||
<option *ngFor="let c of cities" [ngValue]="c">{{c.name}}</option>
|
||||
</select>
|
||||
</div>`
|
||||
})
|
||||
class FormControlSelectNgValue {
|
||||
cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
|
||||
form = new FormGroup({city: new FormControl(this.cities[0])});
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'form-control-select-compare-with',
|
||||
template: `
|
||||
<div [formGroup]="form">
|
||||
<select formControlName="city" [compareWith]="compareFn">
|
||||
<option *ngFor="let c of cities" [ngValue]="c">{{c.name}}</option>
|
||||
</select>
|
||||
</div>`
|
||||
})
|
||||
class FormControlSelectWithCompareFn {
|
||||
compareFn:
|
||||
(o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2;
|
||||
cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
|
||||
form = new FormGroup({city: new FormControl({id: 1, name: 'SF'})});
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'form-control-select-multiple',
|
||||
template: `
|
||||
<div [formGroup]="form">
|
||||
<select multiple formControlName="city">
|
||||
<option *ngFor="let c of cities" [value]="c">{{c}}</option>
|
||||
</select>
|
||||
</div>`
|
||||
})
|
||||
class FormControlSelectMultiple {
|
||||
cities = ['SF', 'NY'];
|
||||
form = new FormGroup({city: new FormControl(['SF'])});
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'form-control-select-multiple',
|
||||
template: `
|
||||
<div [formGroup]="form">
|
||||
<select multiple formControlName="city">
|
||||
<option *ngFor="let c of cities" [ngValue]="c">{{c.name}}</option>
|
||||
</select>
|
||||
</div>`
|
||||
})
|
||||
class FormControlSelectMultipleNgValue {
|
||||
cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
|
||||
form = new FormGroup({city: new FormControl([this.cities[0]])});
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'form-control-select-multiple-compare-with',
|
||||
template: `
|
||||
<div [formGroup]="form">
|
||||
<select multiple formControlName="city" [compareWith]="compareFn">
|
||||
<option *ngFor="let c of cities" [ngValue]="c">{{c.name}}</option>
|
||||
</select>
|
||||
</div>`
|
||||
})
|
||||
class FormControlSelectMultipleWithCompareFn {
|
||||
compareFn:
|
||||
(o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2;
|
||||
cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
|
||||
form = new FormGroup({city: new FormControl([{id: 1, name: 'SF'}])});
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'wrapped-value-form',
|
||||
template: `
|
||||
<div [formGroup]="form">
|
||||
<input type="text" formControlName="login" wrapped-value>
|
||||
</div>`
|
||||
})
|
||||
class WrappedValueForm {
|
||||
form: FormGroup;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'my-input-form',
|
||||
template: `
|
||||
<div [formGroup]="form">
|
||||
<my-input formControlName="login"></my-input>
|
||||
</div>`
|
||||
})
|
||||
class MyInputForm {
|
||||
form: FormGroup;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'form-group-ng-model',
|
||||
|
|
|
|||
|
|
@ -6,12 +6,13 @@
|
|||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Component, Directive, Input, Type, forwardRef} from '@angular/core';
|
||||
import {Component, Directive, Type, forwardRef} from '@angular/core';
|
||||
import {ComponentFixture, TestBed, async, fakeAsync, tick} from '@angular/core/testing';
|
||||
import {AbstractControl, AsyncValidator, COMPOSITION_BUFFER_MODE, ControlValueAccessor, FormsModule, NG_ASYNC_VALIDATORS, NG_VALUE_ACCESSOR, NgForm} from '@angular/forms';
|
||||
import {AbstractControl, AsyncValidator, COMPOSITION_BUFFER_MODE, FormsModule, NG_ASYNC_VALIDATORS, NgForm} from '@angular/forms';
|
||||
import {By} from '@angular/platform-browser/src/dom/debug/by';
|
||||
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
|
||||
import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
|
||||
import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integration_spec';
|
||||
|
||||
export function main() {
|
||||
describe('template-driven forms integration tests', () => {
|
||||
|
|
@ -488,393 +489,6 @@ export function main() {
|
|||
expect(input.nativeElement.disabled).toEqual(false);
|
||||
}));
|
||||
|
||||
it('should disable radio controls properly with programmatic call', fakeAsync(() => {
|
||||
const fixture = initTest(NgModelRadioForm);
|
||||
fixture.componentInstance.food = 'fish';
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
const form = fixture.debugElement.children[0].injector.get(NgForm);
|
||||
form.control.get('food') !.disable();
|
||||
tick();
|
||||
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
expect(inputs[0].nativeElement.disabled).toBe(true);
|
||||
expect(inputs[1].nativeElement.disabled).toBe(true);
|
||||
expect(inputs[2].nativeElement.disabled).toBe(false);
|
||||
expect(inputs[3].nativeElement.disabled).toBe(false);
|
||||
|
||||
form.control.disable();
|
||||
tick();
|
||||
|
||||
expect(inputs[0].nativeElement.disabled).toBe(true);
|
||||
expect(inputs[1].nativeElement.disabled).toBe(true);
|
||||
expect(inputs[2].nativeElement.disabled).toBe(true);
|
||||
expect(inputs[3].nativeElement.disabled).toBe(true);
|
||||
|
||||
form.control.enable();
|
||||
tick();
|
||||
|
||||
expect(inputs[0].nativeElement.disabled).toBe(false);
|
||||
expect(inputs[1].nativeElement.disabled).toBe(false);
|
||||
expect(inputs[2].nativeElement.disabled).toBe(false);
|
||||
expect(inputs[3].nativeElement.disabled).toBe(false);
|
||||
}));
|
||||
|
||||
});
|
||||
|
||||
describe('range control', () => {
|
||||
it('should support <type=range>', fakeAsync(() => {
|
||||
const fixture = initTest(NgModelRangeForm);
|
||||
// model -> view
|
||||
fixture.componentInstance.val = 4;
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
expect(input.nativeElement.value).toBe('4');
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
const newVal = '4';
|
||||
input.triggerEventHandler('input', {target: {value: newVal}});
|
||||
tick();
|
||||
// view -> model
|
||||
fixture.detectChanges();
|
||||
expect(typeof(fixture.componentInstance.val)).toBe('number');
|
||||
}));
|
||||
});
|
||||
|
||||
describe('radio controls', () => {
|
||||
it('should support <type=radio>', fakeAsync(() => {
|
||||
const fixture = initTest(NgModelRadioForm);
|
||||
fixture.componentInstance.food = 'fish';
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
// model -> view
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
expect(inputs[0].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[1].nativeElement.checked).toEqual(true);
|
||||
|
||||
dispatchEvent(inputs[0].nativeElement, 'change');
|
||||
tick();
|
||||
|
||||
// view -> model
|
||||
expect(fixture.componentInstance.food).toEqual('chicken');
|
||||
expect(inputs[1].nativeElement.checked).toEqual(false);
|
||||
}));
|
||||
|
||||
it('should support multiple named <type=radio> groups', fakeAsync(() => {
|
||||
const fixture = initTest(NgModelRadioForm);
|
||||
fixture.componentInstance.food = 'fish';
|
||||
fixture.componentInstance.drink = 'sprite';
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
expect(inputs[0].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[1].nativeElement.checked).toEqual(true);
|
||||
expect(inputs[2].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[3].nativeElement.checked).toEqual(true);
|
||||
|
||||
dispatchEvent(inputs[0].nativeElement, 'change');
|
||||
tick();
|
||||
|
||||
expect(fixture.componentInstance.food).toEqual('chicken');
|
||||
expect(fixture.componentInstance.drink).toEqual('sprite');
|
||||
expect(inputs[1].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[2].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[3].nativeElement.checked).toEqual(true);
|
||||
}));
|
||||
|
||||
it('should support initial undefined value', fakeAsync(() => {
|
||||
const fixture = initTest(NgModelRadioForm);
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
expect(inputs[0].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[1].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[2].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[3].nativeElement.checked).toEqual(false);
|
||||
}));
|
||||
|
||||
it('should support resetting properly', fakeAsync(() => {
|
||||
const fixture = initTest(NgModelRadioForm);
|
||||
fixture.componentInstance.food = 'chicken';
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
const form = fixture.debugElement.query(By.css('form'));
|
||||
dispatchEvent(form.nativeElement, 'reset');
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
expect(inputs[0].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[1].nativeElement.checked).toEqual(false);
|
||||
}));
|
||||
|
||||
it('should support setting value to null and undefined', fakeAsync(() => {
|
||||
const fixture = initTest(NgModelRadioForm);
|
||||
fixture.componentInstance.food = 'chicken';
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
fixture.componentInstance.food = null !;
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
expect(inputs[0].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[1].nativeElement.checked).toEqual(false);
|
||||
|
||||
fixture.componentInstance.food = 'chicken';
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
fixture.componentInstance.food = undefined !;
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
expect(inputs[0].nativeElement.checked).toEqual(false);
|
||||
expect(inputs[1].nativeElement.checked).toEqual(false);
|
||||
}));
|
||||
|
||||
});
|
||||
|
||||
describe('select controls', () => {
|
||||
it('with option values that are objects', fakeAsync(() => {
|
||||
const fixture = initTest(NgModelSelectForm);
|
||||
const comp = fixture.componentInstance;
|
||||
comp.cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
|
||||
comp.selectedCity = comp.cities[1];
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
const select = fixture.debugElement.query(By.css('select'));
|
||||
const nycOption = fixture.debugElement.queryAll(By.css('option'))[1];
|
||||
|
||||
// model -> view
|
||||
expect(select.nativeElement.value).toEqual('1: Object');
|
||||
expect(nycOption.nativeElement.selected).toBe(true);
|
||||
|
||||
select.nativeElement.value = '2: Object';
|
||||
dispatchEvent(select.nativeElement, 'change');
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
// view -> model
|
||||
expect(comp.selectedCity['name']).toEqual('Buffalo');
|
||||
}));
|
||||
|
||||
it('when new options are added', fakeAsync(() => {
|
||||
const fixture = initTest(NgModelSelectForm);
|
||||
const comp = fixture.componentInstance;
|
||||
comp.cities = [{'name': 'SF'}, {'name': 'NYC'}];
|
||||
comp.selectedCity = comp.cities[1];
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
comp.cities.push({'name': 'Buffalo'});
|
||||
comp.selectedCity = comp.cities[2];
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
const select = fixture.debugElement.query(By.css('select'));
|
||||
const buffalo = fixture.debugElement.queryAll(By.css('option'))[2];
|
||||
expect(select.nativeElement.value).toEqual('2: Object');
|
||||
expect(buffalo.nativeElement.selected).toBe(true);
|
||||
}));
|
||||
|
||||
it('when options are removed', fakeAsync(() => {
|
||||
const fixture = initTest(NgModelSelectForm);
|
||||
const comp = fixture.componentInstance;
|
||||
comp.cities = [{'name': 'SF'}, {'name': 'NYC'}];
|
||||
comp.selectedCity = comp.cities[1];
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
const select = fixture.debugElement.query(By.css('select'));
|
||||
expect(select.nativeElement.value).toEqual('1: Object');
|
||||
|
||||
comp.cities.pop();
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
expect(select.nativeElement.value).not.toEqual('1: Object');
|
||||
}));
|
||||
|
||||
it('when option values have same content, but different identities', fakeAsync(() => {
|
||||
const fixture = initTest(NgModelSelectForm);
|
||||
const comp = fixture.componentInstance;
|
||||
comp.cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'NYC'}];
|
||||
comp.selectedCity = comp.cities[0];
|
||||
fixture.detectChanges();
|
||||
|
||||
comp.selectedCity = comp.cities[2];
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
const select = fixture.debugElement.query(By.css('select'));
|
||||
const secondNYC = fixture.debugElement.queryAll(By.css('option'))[2];
|
||||
expect(select.nativeElement.value).toEqual('2: Object');
|
||||
expect(secondNYC.nativeElement.selected).toBe(true);
|
||||
}));
|
||||
|
||||
it('should work with null option', fakeAsync(() => {
|
||||
const fixture = initTest(NgModelSelectWithNullForm);
|
||||
const comp = fixture.componentInstance;
|
||||
comp.cities = [{'name': 'SF'}, {'name': 'NYC'}];
|
||||
comp.selectedCity = null !;
|
||||
fixture.detectChanges();
|
||||
|
||||
const select = fixture.debugElement.query(By.css('select'));
|
||||
|
||||
select.nativeElement.value = '2: Object';
|
||||
dispatchEvent(select.nativeElement, 'change');
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
expect(comp.selectedCity['name']).toEqual('NYC');
|
||||
|
||||
select.nativeElement.value = '0: null';
|
||||
dispatchEvent(select.nativeElement, 'change');
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
expect(comp.selectedCity).toEqual(null);
|
||||
}));
|
||||
|
||||
it('should throw an error when compareWith is not a function', () => {
|
||||
const fixture = initTest(NgModelSelectWithCustomCompareFnForm);
|
||||
const comp = fixture.componentInstance;
|
||||
comp.compareFn = null !;
|
||||
expect(() => fixture.detectChanges())
|
||||
.toThrowError(/compareWith must be a function, but received null/);
|
||||
});
|
||||
|
||||
it('should compare options using provided compareWith function', fakeAsync(() => {
|
||||
const fixture = initTest(NgModelSelectWithCustomCompareFnForm);
|
||||
const comp = fixture.componentInstance;
|
||||
comp.selectedCity = {id: 1, name: 'SF'};
|
||||
comp.cities = [{id: 1, name: 'SF'}, {id: 2, name: 'LA'}];
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
const select = fixture.debugElement.query(By.css('select'));
|
||||
const sfOption = fixture.debugElement.query(By.css('option'));
|
||||
expect(select.nativeElement.value).toEqual('0: Object');
|
||||
expect(sfOption.nativeElement.selected).toBe(true);
|
||||
}));
|
||||
});
|
||||
|
||||
describe('select multiple controls', () => {
|
||||
describe('select options', () => {
|
||||
let fixture: ComponentFixture<NgModelSelectMultipleForm>;
|
||||
let comp: NgModelSelectMultipleForm;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = initTest(NgModelSelectMultipleForm);
|
||||
comp = fixture.componentInstance;
|
||||
comp.cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
|
||||
});
|
||||
|
||||
const detectChangesAndTick = (): void => {
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
};
|
||||
|
||||
const setSelectedCities = (selectedCities: any): void => {
|
||||
comp.selectedCities = selectedCities;
|
||||
detectChangesAndTick();
|
||||
};
|
||||
|
||||
const selectOptionViaUI = (valueString: string): void => {
|
||||
const select = fixture.debugElement.query(By.css('select'));
|
||||
select.nativeElement.value = valueString;
|
||||
dispatchEvent(select.nativeElement, 'change');
|
||||
detectChangesAndTick();
|
||||
};
|
||||
|
||||
const assertOptionElementSelectedState = (selectedStates: boolean[]): void => {
|
||||
const options = fixture.debugElement.queryAll(By.css('option'));
|
||||
if (options.length !== selectedStates.length) {
|
||||
throw 'the selected state values to assert does not match the number of options';
|
||||
}
|
||||
for (let i = 0; i < selectedStates.length; i++) {
|
||||
expect(options[i].nativeElement.selected).toBe(selectedStates[i]);
|
||||
}
|
||||
};
|
||||
|
||||
it('should reflect state of model after option selected and new options subsequently added',
|
||||
fakeAsync(() => {
|
||||
setSelectedCities([]);
|
||||
|
||||
selectOptionViaUI('1: Object');
|
||||
assertOptionElementSelectedState([false, true, false]);
|
||||
|
||||
comp.cities.push({'name': 'Chicago'});
|
||||
detectChangesAndTick();
|
||||
|
||||
assertOptionElementSelectedState([false, true, false, false]);
|
||||
}));
|
||||
|
||||
it('should reflect state of model after option selected and then other options removed',
|
||||
fakeAsync(() => {
|
||||
setSelectedCities([]);
|
||||
|
||||
selectOptionViaUI('1: Object');
|
||||
assertOptionElementSelectedState([false, true, false]);
|
||||
|
||||
comp.cities.pop();
|
||||
detectChangesAndTick();
|
||||
|
||||
assertOptionElementSelectedState([false, true]);
|
||||
}));
|
||||
});
|
||||
|
||||
it('should throw an error when compareWith is not a function', () => {
|
||||
const fixture = initTest(NgModelSelectMultipleWithCustomCompareFnForm);
|
||||
const comp = fixture.componentInstance;
|
||||
comp.compareFn = null !;
|
||||
expect(() => fixture.detectChanges())
|
||||
.toThrowError(/compareWith must be a function, but received null/);
|
||||
});
|
||||
|
||||
it('should compare options using provided compareWith function', fakeAsync(() => {
|
||||
const fixture = initTest(NgModelSelectMultipleWithCustomCompareFnForm);
|
||||
const comp = fixture.componentInstance;
|
||||
comp.cities = [{id: 1, name: 'SF'}, {id: 2, name: 'LA'}];
|
||||
comp.selectedCities = [comp.cities[0]];
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
const select = fixture.debugElement.query(By.css('select'));
|
||||
const sfOption = fixture.debugElement.query(By.css('option'));
|
||||
expect(select.nativeElement.value).toEqual('0: Object');
|
||||
expect(sfOption.nativeElement.selected).toBe(true);
|
||||
}));
|
||||
});
|
||||
|
||||
describe('custom value accessors', () => {
|
||||
it('should support standard writing to view and model', async(() => {
|
||||
const fixture = initTest(NgModelCustomWrapper, NgModelCustomComp);
|
||||
fixture.componentInstance.name = 'Nancy';
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
// model -> view
|
||||
const customInput = fixture.debugElement.query(By.css('[name="custom"]'));
|
||||
expect(customInput.nativeElement.value).toEqual('Nancy');
|
||||
|
||||
customInput.nativeElement.value = 'Carson';
|
||||
dispatchEvent(customInput.nativeElement, 'input');
|
||||
fixture.detectChanges();
|
||||
|
||||
// view -> model
|
||||
expect(fixture.componentInstance.name).toEqual('Carson');
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
});
|
||||
|
||||
describe('validation directives', () => {
|
||||
|
|
@ -1381,132 +995,6 @@ class NgModelOptionsStandalone {
|
|||
two: string;
|
||||
}
|
||||
|
||||
@Component({selector: 'ng-model-range-form', template: '<input type="range" [(ngModel)]="val">'})
|
||||
class NgModelRangeForm {
|
||||
val: any;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ng-model-radio-form',
|
||||
template: `
|
||||
<form>
|
||||
<input type="radio" name="food" [(ngModel)]="food" value="chicken">
|
||||
<input type="radio" name="food" [(ngModel)]="food" value="fish">
|
||||
|
||||
<input type="radio" name="drink" [(ngModel)]="drink" value="cola">
|
||||
<input type="radio" name="drink" [(ngModel)]="drink" value="sprite">
|
||||
</form>
|
||||
`
|
||||
})
|
||||
class NgModelRadioForm {
|
||||
food: string;
|
||||
drink: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ng-model-select-form',
|
||||
template: `
|
||||
<select [(ngModel)]="selectedCity">
|
||||
<option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
|
||||
</select>
|
||||
`
|
||||
})
|
||||
class NgModelSelectForm {
|
||||
selectedCity: {[k: string]: string} = {};
|
||||
cities: any[] = [];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ng-model-select-null-form',
|
||||
template: `
|
||||
<select [(ngModel)]="selectedCity">
|
||||
<option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
|
||||
<option [ngValue]="null">Unspecified</option>
|
||||
</select>
|
||||
`
|
||||
})
|
||||
class NgModelSelectWithNullForm {
|
||||
selectedCity: {[k: string]: string} = {};
|
||||
cities: any[] = [];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ng-model-select-compare-with',
|
||||
template: `
|
||||
<select [(ngModel)]="selectedCity" [compareWith]="compareFn">
|
||||
<option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
|
||||
</select>
|
||||
`
|
||||
})
|
||||
class NgModelSelectWithCustomCompareFnForm {
|
||||
compareFn:
|
||||
(o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2;
|
||||
selectedCity: any = {};
|
||||
cities: any[] = [];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ng-model-select-multiple-compare-with',
|
||||
template: `
|
||||
<select multiple [(ngModel)]="selectedCities" [compareWith]="compareFn">
|
||||
<option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
|
||||
</select>
|
||||
`
|
||||
})
|
||||
class NgModelSelectMultipleWithCustomCompareFnForm {
|
||||
compareFn:
|
||||
(o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2;
|
||||
selectedCities: any[] = [];
|
||||
cities: any[] = [];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ng-model-select-multiple-form',
|
||||
template: `
|
||||
<select multiple [(ngModel)]="selectedCities">
|
||||
<option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
|
||||
</select>
|
||||
`
|
||||
})
|
||||
class NgModelSelectMultipleForm {
|
||||
selectedCities: any[];
|
||||
cities: any[] = [];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ng-model-custom-comp',
|
||||
template: `
|
||||
<input name="custom" [(ngModel)]="model" (ngModelChange)="changeFn($event)" [disabled]="isDisabled">
|
||||
`,
|
||||
providers: [{provide: NG_VALUE_ACCESSOR, multi: true, useExisting: NgModelCustomComp}]
|
||||
})
|
||||
class NgModelCustomComp implements ControlValueAccessor {
|
||||
model: string;
|
||||
@Input('disabled') isDisabled: boolean = false;
|
||||
changeFn: (value: any) => void;
|
||||
|
||||
writeValue(value: any) { this.model = value; }
|
||||
|
||||
registerOnChange(fn: (value: any) => void) { this.changeFn = fn; }
|
||||
|
||||
registerOnTouched() {}
|
||||
|
||||
setDisabledState(isDisabled: boolean) { this.isDisabled = isDisabled; }
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ng-model-custom-wrapper',
|
||||
template: `
|
||||
<form>
|
||||
<ng-model-custom-comp name="name" [(ngModel)]="name" [disabled]="isDisabled"></ng-model-custom-comp>
|
||||
</form>
|
||||
`
|
||||
})
|
||||
class NgModelCustomWrapper {
|
||||
name: string;
|
||||
isDisabled = false;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ng-model-validation-bindings',
|
||||
template: `
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue