refactor(tests): simplify code (#11485)
This commit is contained in:
Victor Berchet
committed by
Evan Martin
Evan Martin
parent
f5d44a42c9
commit
5a4e46db20
@ -6,9 +6,8 @@
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {NgFor, NgIf} from '@angular/common';
|
||||
import {Component, Directive, EventEmitter, Input, Output, forwardRef} from '@angular/core';
|
||||
import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
|
||||
import {TestBed, fakeAsync, tick} from '@angular/core/testing';
|
||||
import {ControlValueAccessor, FormArray, FormControl, FormGroup, FormGroupDirective, FormsModule, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, ReactiveFormsModule, Validator, Validators} from '@angular/forms';
|
||||
import {By} from '@angular/platform-browser/src/dom/debug/by';
|
||||
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
|
||||
@ -37,7 +36,7 @@ export function main() {
|
||||
it('should work with single controls', () => {
|
||||
const fixture = TestBed.createComponent(FormControlComp);
|
||||
const control = new FormControl('old value');
|
||||
fixture.debugElement.componentInstance.control = control;
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
@ -53,8 +52,7 @@ export function main() {
|
||||
|
||||
it('should work with formGroups (model -> view)', () => {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
fixture.debugElement.componentInstance.form =
|
||||
new FormGroup({'login': new FormControl('loginValue')});
|
||||
fixture.componentInstance.form = new FormGroup({'login': new FormControl('loginValue')});
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
@ -64,7 +62,7 @@ export function main() {
|
||||
it('work with formGroups (view -> model)', () => {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
const form = new FormGroup({'login': new FormControl('oldValue')});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
@ -80,12 +78,10 @@ export function main() {
|
||||
|
||||
it('should update DOM elements initially', () => {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
fixture.debugElement.componentInstance.form =
|
||||
new FormGroup({'login': new FormControl('oldValue')});
|
||||
fixture.componentInstance.form = new FormGroup({'login': new FormControl('oldValue')});
|
||||
fixture.detectChanges();
|
||||
|
||||
fixture.debugElement.componentInstance.form =
|
||||
new FormGroup({'login': new FormControl('newValue')});
|
||||
fixture.componentInstance.form = new FormGroup({'login': new FormControl('newValue')});
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
@ -94,12 +90,11 @@ export function main() {
|
||||
|
||||
it('should update model when UI changes', () => {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
fixture.debugElement.componentInstance.form =
|
||||
new FormGroup({'login': new FormControl('oldValue')});
|
||||
fixture.componentInstance.form = new FormGroup({'login': new FormControl('oldValue')});
|
||||
fixture.detectChanges();
|
||||
|
||||
const newForm = new FormGroup({'login': new FormControl('newValue')});
|
||||
fixture.debugElement.componentInstance.form = newForm;
|
||||
fixture.componentInstance.form = newForm;
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
@ -117,12 +112,12 @@ export function main() {
|
||||
it('should work with radio buttons when reusing control', () => {
|
||||
const fixture = TestBed.createComponent(FormControlRadioButtons);
|
||||
const food = new FormControl('chicken');
|
||||
fixture.debugElement.componentInstance.form =
|
||||
fixture.componentInstance.form =
|
||||
new FormGroup({'food': food, 'drink': new FormControl('')});
|
||||
fixture.detectChanges();
|
||||
|
||||
const newForm = new FormGroup({'food': food, 'drink': new FormControl('')});
|
||||
fixture.debugElement.componentInstance.form = newForm;
|
||||
fixture.componentInstance.form = newForm;
|
||||
fixture.detectChanges();
|
||||
|
||||
newForm.setValue({food: 'fish', drink: ''});
|
||||
@ -134,7 +129,7 @@ export function main() {
|
||||
|
||||
it('should update nested form group model when UI changes', () => {
|
||||
const fixture = TestBed.createComponent(NestedFormGroupComp);
|
||||
fixture.debugElement.componentInstance.form = new FormGroup(
|
||||
fixture.componentInstance.form = new FormGroup(
|
||||
{'signin': new FormGroup({'login': new FormControl(), 'password': new FormControl()})});
|
||||
fixture.detectChanges();
|
||||
|
||||
@ -142,7 +137,7 @@ export function main() {
|
||||
'signin': new FormGroup(
|
||||
{'login': new FormControl('Nancy'), 'password': new FormControl('secret')})
|
||||
});
|
||||
fixture.debugElement.componentInstance.form = newForm;
|
||||
fixture.componentInstance.form = newForm;
|
||||
fixture.detectChanges();
|
||||
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
@ -168,7 +163,7 @@ export function main() {
|
||||
'max': new FormControl(''),
|
||||
'pattern': new FormControl('')
|
||||
});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
expect(form.get('login').errors).toEqual({required: true});
|
||||
|
||||
@ -178,7 +173,7 @@ export function main() {
|
||||
'max': new FormControl(''),
|
||||
'pattern': new FormControl('')
|
||||
});
|
||||
fixture.debugElement.componentInstance.form = newForm;
|
||||
fixture.componentInstance.form = newForm;
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(newForm.get('login').errors).toEqual({required: true});
|
||||
@ -190,7 +185,7 @@ export function main() {
|
||||
'signin':
|
||||
new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
|
||||
});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
expect(form.get('signin').valid).toBe(false);
|
||||
|
||||
@ -198,7 +193,7 @@ export function main() {
|
||||
'signin':
|
||||
new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
|
||||
});
|
||||
fixture.debugElement.componentInstance.form = newForm;
|
||||
fixture.componentInstance.form = newForm;
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(form.get('signin').valid).toBe(false);
|
||||
@ -210,7 +205,7 @@ export function main() {
|
||||
'signin':
|
||||
new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
|
||||
});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
form.addControl('email', new FormControl('email'));
|
||||
@ -223,7 +218,7 @@ export function main() {
|
||||
'signin':
|
||||
new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
|
||||
});
|
||||
fixture.debugElement.componentInstance.form = newForm;
|
||||
fixture.componentInstance.form = newForm;
|
||||
fixture.detectChanges();
|
||||
|
||||
emailInput = fixture.debugElement.query(By.css('[formControlName="email"]'));
|
||||
@ -234,8 +229,8 @@ export function main() {
|
||||
const fixture = TestBed.createComponent(FormArrayComp);
|
||||
const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]);
|
||||
const form = new FormGroup({cities: cityArray});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.debugElement.componentInstance.cityArray = cityArray;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.componentInstance.cityArray = cityArray;
|
||||
fixture.detectChanges();
|
||||
|
||||
let inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
@ -248,8 +243,8 @@ export function main() {
|
||||
|
||||
const newArr = new FormArray([new FormControl('SF'), new FormControl('NY')]);
|
||||
const newForm = new FormGroup({cities: newArr});
|
||||
fixture.debugElement.componentInstance.form = newForm;
|
||||
fixture.debugElement.componentInstance.cityArray = newArr;
|
||||
fixture.componentInstance.form = newForm;
|
||||
fixture.componentInstance.cityArray = newArr;
|
||||
fixture.detectChanges();
|
||||
|
||||
inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
@ -261,7 +256,7 @@ export function main() {
|
||||
it('should attach dir to control when leaf control changes', () => {
|
||||
const form = new FormGroup({'login': new FormControl('oldValue')});
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
form.removeControl('login');
|
||||
@ -288,7 +283,7 @@ export function main() {
|
||||
signin: new FormGroup(
|
||||
{login: new FormControl('oldLogin'), password: new FormControl('oldPassword')})
|
||||
});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
form.removeControl('signin');
|
||||
@ -318,8 +313,8 @@ export function main() {
|
||||
const fixture = TestBed.createComponent(FormArrayComp);
|
||||
const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]);
|
||||
const form = new FormGroup({cities: cityArray});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.debugElement.componentInstance.cityArray = cityArray;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.componentInstance.cityArray = cityArray;
|
||||
fixture.detectChanges();
|
||||
|
||||
form.removeControl('cities');
|
||||
@ -349,8 +344,8 @@ export function main() {
|
||||
const fixture = TestBed.createComponent(FormArrayComp);
|
||||
const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]);
|
||||
const form = new FormGroup({cities: cityArray});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.debugElement.componentInstance.cityArray = cityArray;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.componentInstance.cityArray = cityArray;
|
||||
fixture.detectChanges();
|
||||
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
@ -372,8 +367,8 @@ export function main() {
|
||||
const fixture = TestBed.createComponent(FormArrayComp);
|
||||
const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]);
|
||||
const form = new FormGroup({cities: cityArray});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.debugElement.componentInstance.cityArray = cityArray;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.componentInstance.cityArray = cityArray;
|
||||
fixture.detectChanges();
|
||||
|
||||
cityArray.push(new FormControl('LA'));
|
||||
@ -391,8 +386,8 @@ export function main() {
|
||||
new FormGroup({town: new FormControl('NY'), state: new FormControl('NY')})
|
||||
]);
|
||||
const form = new FormGroup({cities: cityArray});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.debugElement.componentInstance.cityArray = cityArray;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.componentInstance.cityArray = cityArray;
|
||||
fixture.detectChanges();
|
||||
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
@ -420,7 +415,7 @@ export function main() {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
const login = new FormControl('oldValue');
|
||||
const form = new FormGroup({'login': login});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
login.setValue('newValue');
|
||||
@ -435,7 +430,7 @@ export function main() {
|
||||
() => {
|
||||
const fixture = TestBed.createComponent(FormControlComp);
|
||||
const control = new FormControl({value: 'some value', disabled: true});
|
||||
fixture.debugElement.componentInstance.control = control;
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
@ -449,8 +444,8 @@ export function main() {
|
||||
it('should add disabled attribute to formControlName when instantiated as disabled', () => {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
const control = new FormControl({value: 'some value', disabled: true});
|
||||
fixture.debugElement.componentInstance.form = new FormGroup({login: control});
|
||||
fixture.debugElement.componentInstance.control = control;
|
||||
fixture.componentInstance.form = new FormGroup({login: control});
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
@ -465,7 +460,7 @@ export function main() {
|
||||
() => {
|
||||
const fixture = TestBed.createComponent(FormControlComp);
|
||||
const control = new FormControl('some value');
|
||||
fixture.debugElement.componentInstance.control = control;
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
control.disable();
|
||||
@ -483,7 +478,7 @@ export function main() {
|
||||
() => {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
const form = new FormGroup({'login': new FormControl('login')});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
form.disable();
|
||||
@ -501,7 +496,7 @@ export function main() {
|
||||
it('should not add disabled attribute to custom controls when disable() is called', () => {
|
||||
const fixture = TestBed.createComponent(MyInputForm);
|
||||
const control = new FormControl('some value');
|
||||
fixture.debugElement.componentInstance.form = new FormGroup({login: control});
|
||||
fixture.componentInstance.form = new FormGroup({login: control});
|
||||
fixture.detectChanges();
|
||||
|
||||
control.disable();
|
||||
@ -521,7 +516,7 @@ export function main() {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
const login = new FormControl('oldValue');
|
||||
const form = new FormGroup({'login': login});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
const loginEl = fixture.debugElement.query(By.css('input'));
|
||||
@ -537,22 +532,20 @@ export function main() {
|
||||
describe('submit and reset events', () => {
|
||||
it('should emit ngSubmit event on submit', () => {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
fixture.debugElement.componentInstance.form =
|
||||
new FormGroup({'login': new FormControl('loginValue')});
|
||||
fixture.debugElement.componentInstance.data = 'should be changed';
|
||||
fixture.componentInstance.form = new FormGroup({'login': new FormControl('loginValue')});
|
||||
fixture.componentInstance.data = 'should be changed';
|
||||
fixture.detectChanges();
|
||||
|
||||
const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
|
||||
dispatchEvent(formEl, 'submit');
|
||||
|
||||
fixture.detectChanges();
|
||||
expect(fixture.debugElement.componentInstance.data).toEqual('submitted');
|
||||
expect(fixture.componentInstance.data).toEqual('submitted');
|
||||
});
|
||||
|
||||
it('should mark formGroup as submitted on submit event', () => {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
fixture.debugElement.componentInstance.form =
|
||||
new FormGroup({'login': new FormControl('loginValue')});
|
||||
fixture.componentInstance.form = new FormGroup({'login': new FormControl('loginValue')});
|
||||
fixture.detectChanges();
|
||||
|
||||
const formGroupDir = fixture.debugElement.children[0].injector.get(FormGroupDirective);
|
||||
@ -569,7 +562,7 @@ export function main() {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
const login = new FormControl('some value');
|
||||
const form = new FormGroup({'login': login});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
const loginEl = fixture.debugElement.query(By.css('input')).nativeElement;
|
||||
@ -583,7 +576,7 @@ export function main() {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
const login = new FormControl('some value');
|
||||
const form = new FormGroup({'login': login});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
const loginEl = fixture.debugElement.query(By.css('input')).nativeElement;
|
||||
@ -600,7 +593,7 @@ export function main() {
|
||||
it('should mark controls as dirty before emitting a value change event', () => {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
const login = new FormControl('oldValue');
|
||||
fixture.debugElement.componentInstance.form = new FormGroup({'login': login});
|
||||
fixture.componentInstance.form = new FormGroup({'login': login});
|
||||
fixture.detectChanges();
|
||||
|
||||
login.valueChanges.subscribe(() => { expect(login.dirty).toBe(true); });
|
||||
@ -616,7 +609,7 @@ export function main() {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
const login = new FormControl('oldValue');
|
||||
const form = new FormGroup({'login': login});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
const loginEl = fixture.debugElement.query(By.css('input')).nativeElement;
|
||||
@ -636,7 +629,7 @@ export function main() {
|
||||
it('should work with single fields', () => {
|
||||
const fixture = TestBed.createComponent(FormControlComp);
|
||||
const control = new FormControl('', Validators.required);
|
||||
fixture.debugElement.componentInstance.control = control;
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = fixture.debugElement.query(By.css('input')).nativeElement;
|
||||
@ -657,7 +650,7 @@ export function main() {
|
||||
it('should work with single fields in parent forms', () => {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
const form = new FormGroup({'login': new FormControl('', Validators.required)});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = fixture.debugElement.query(By.css('input')).nativeElement;
|
||||
@ -678,7 +671,7 @@ export function main() {
|
||||
it('should work with formGroup', () => {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
const form = new FormGroup({'login': new FormControl('', Validators.required)});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = fixture.debugElement.query(By.css('input')).nativeElement;
|
||||
@ -707,7 +700,7 @@ export function main() {
|
||||
FormControlComp, {set: {template: `<input [formControl]="control">`}});
|
||||
const fixture = TestBed.createComponent(FormControlComp);
|
||||
const control = new FormControl('old');
|
||||
fixture.debugElement.componentInstance.control = control;
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
@ -724,7 +717,7 @@ export function main() {
|
||||
it('should support <input type=text>', () => {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
const form = new FormGroup({'login': new FormControl('old')});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
@ -741,7 +734,7 @@ export function main() {
|
||||
it('should ignore the change event for <input type=text>', () => {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
const form = new FormGroup({'login': new FormControl('oldValue')});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
@ -756,7 +749,7 @@ export function main() {
|
||||
FormControlComp, {set: {template: `<textarea [formControl]="control"></textarea>`}});
|
||||
const fixture = TestBed.createComponent(FormControlComp);
|
||||
const control = new FormControl('old');
|
||||
fixture.debugElement.componentInstance.control = control;
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
@ -775,7 +768,7 @@ export function main() {
|
||||
FormControlComp, {set: {template: `<input type="checkbox" [formControl]="control">`}});
|
||||
const fixture = TestBed.createComponent(FormControlComp);
|
||||
const control = new FormControl(true);
|
||||
fixture.debugElement.componentInstance.control = control;
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
@ -805,14 +798,14 @@ export function main() {
|
||||
|
||||
// view -> model
|
||||
expect(sfOption.nativeElement.selected).toBe(false);
|
||||
expect(fixture.debugElement.componentInstance.form.value).toEqual({'city': 'NY'});
|
||||
expect(fixture.componentInstance.form.value).toEqual({'city': 'NY'});
|
||||
});
|
||||
|
||||
describe('should support <type=number>', () => {
|
||||
it('with basic use case', () => {
|
||||
const fixture = TestBed.createComponent(FormControlNumberInput);
|
||||
const control = new FormControl(10);
|
||||
fixture.debugElement.componentInstance.control = control;
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
@ -829,7 +822,7 @@ export function main() {
|
||||
it('when value is cleared in the UI', () => {
|
||||
const fixture = TestBed.createComponent(FormControlNumberInput);
|
||||
const control = new FormControl(10, Validators.required);
|
||||
fixture.debugElement.componentInstance.control = control;
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = fixture.debugElement.query(By.css('input'));
|
||||
@ -849,7 +842,7 @@ export function main() {
|
||||
it('when value is cleared programmatically', () => {
|
||||
const fixture = TestBed.createComponent(FormControlNumberInput);
|
||||
const control = new FormControl(10);
|
||||
fixture.debugElement.componentInstance.control = control;
|
||||
fixture.componentInstance.control = control;
|
||||
fixture.detectChanges();
|
||||
|
||||
control.setValue(null);
|
||||
@ -865,7 +858,7 @@ export function main() {
|
||||
const fixture = TestBed.createComponent(FormControlRadioButtons);
|
||||
const form =
|
||||
new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
@ -892,8 +885,7 @@ export function main() {
|
||||
const fixture = TestBed.createComponent(FormControlRadioButtons);
|
||||
const foodCtrl = new FormControl('fish');
|
||||
const drinkCtrl = new FormControl('sprite');
|
||||
fixture.debugElement.componentInstance.form =
|
||||
new FormGroup({'food': foodCtrl, 'drink': drinkCtrl});
|
||||
fixture.componentInstance.form = new FormGroup({'food': foodCtrl, 'drink': drinkCtrl});
|
||||
fixture.detectChanges();
|
||||
|
||||
const inputs = fixture.debugElement.queryAll(By.css('input'));
|
||||
@ -906,7 +898,7 @@ export function main() {
|
||||
inputs[0].nativeElement.checked = true;
|
||||
fixture.detectChanges();
|
||||
|
||||
const value = fixture.debugElement.componentInstance.form.value;
|
||||
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);
|
||||
@ -926,8 +918,8 @@ export function main() {
|
||||
const showRadio = new FormControl('yes');
|
||||
const form =
|
||||
new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.debugElement.componentInstance.showRadio = showRadio;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.componentInstance.showRadio = showRadio;
|
||||
showRadio.valueChanges.subscribe((change) => {
|
||||
(change === 'yes') ? form.addControl('food', new FormControl('fish')) :
|
||||
form.removeControl('food');
|
||||
@ -961,7 +953,7 @@ export function main() {
|
||||
food: new FormControl('fish'),
|
||||
nested: new FormGroup({food: new FormControl('fish')})
|
||||
});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
@ -989,8 +981,7 @@ export function main() {
|
||||
describe('custom value accessors', () => {
|
||||
it('should support custom value accessors', () => {
|
||||
const fixture = TestBed.createComponent(WrappedValueForm);
|
||||
fixture.debugElement.componentInstance.form =
|
||||
new FormGroup({'login': new FormControl('aa')});
|
||||
fixture.componentInstance.form = new FormGroup({'login': new FormControl('aa')});
|
||||
fixture.detectChanges();
|
||||
|
||||
// model -> view
|
||||
@ -1001,14 +992,13 @@ export function main() {
|
||||
dispatchEvent(input.nativeElement, 'input');
|
||||
|
||||
// view -> model
|
||||
expect(fixture.debugElement.componentInstance.form.value).toEqual({'login': 'bb'});
|
||||
expect(fixture.componentInstance.form.value).toEqual({'login': 'bb'});
|
||||
});
|
||||
|
||||
it('should support custom value accessors on non builtin input elements that fire a change event without a \'target\' property',
|
||||
() => {
|
||||
const fixture = TestBed.createComponent(MyInputForm);
|
||||
fixture.debugElement.componentInstance.form =
|
||||
new FormGroup({'login': new FormControl('aa')});
|
||||
fixture.componentInstance.form = new FormGroup({'login': new FormControl('aa')});
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = fixture.debugElement.query(By.css('my-input'));
|
||||
@ -1016,7 +1006,7 @@ export function main() {
|
||||
|
||||
input.componentInstance.value = '!bb!';
|
||||
input.componentInstance.onInput.subscribe((value: any) => {
|
||||
expect(fixture.debugElement.componentInstance.form.value).toEqual({'login': 'bb'});
|
||||
expect(fixture.componentInstance.form.value).toEqual({'login': 'bb'});
|
||||
});
|
||||
input.componentInstance.dispatchChangeEvent();
|
||||
});
|
||||
@ -1029,9 +1019,8 @@ export function main() {
|
||||
|
||||
it('should support ngModel for complex forms', fakeAsync(() => {
|
||||
const fixture = TestBed.createComponent(FormGroupNgModel);
|
||||
fixture.debugElement.componentInstance.form =
|
||||
new FormGroup({'login': new FormControl('')});
|
||||
fixture.debugElement.componentInstance.login = 'oldValue';
|
||||
fixture.componentInstance.form = new FormGroup({'login': new FormControl('')});
|
||||
fixture.componentInstance.login = 'oldValue';
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
@ -1042,13 +1031,13 @@ export function main() {
|
||||
dispatchEvent(input, 'input');
|
||||
|
||||
tick();
|
||||
expect(fixture.debugElement.componentInstance.login).toEqual('updatedValue');
|
||||
expect(fixture.componentInstance.login).toEqual('updatedValue');
|
||||
}));
|
||||
|
||||
it('should support ngModel for single fields', fakeAsync(() => {
|
||||
const fixture = TestBed.createComponent(FormControlNgModel);
|
||||
fixture.debugElement.componentInstance.control = new FormControl('');
|
||||
fixture.debugElement.componentInstance.login = 'oldValue';
|
||||
fixture.componentInstance.control = new FormControl('');
|
||||
fixture.componentInstance.login = 'oldValue';
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
@ -1059,12 +1048,12 @@ export function main() {
|
||||
dispatchEvent(input, 'input');
|
||||
tick();
|
||||
|
||||
expect(fixture.debugElement.componentInstance.login).toEqual('updatedValue');
|
||||
expect(fixture.componentInstance.login).toEqual('updatedValue');
|
||||
}));
|
||||
|
||||
it('should not update the view when the value initially came from the view', fakeAsync(() => {
|
||||
const fixture = TestBed.createComponent(FormControlNgModel);
|
||||
fixture.debugElement.componentInstance.control = new FormControl('');
|
||||
fixture.componentInstance.control = new FormControl('');
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
@ -1091,7 +1080,7 @@ export function main() {
|
||||
'max': new FormControl(''),
|
||||
'pattern': new FormControl('')
|
||||
});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
const required = fixture.debugElement.query(By.css('[required]'));
|
||||
@ -1136,11 +1125,11 @@ export function main() {
|
||||
'max': new FormControl(''),
|
||||
'pattern': new FormControl('')
|
||||
});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.debugElement.componentInstance.required = true;
|
||||
fixture.debugElement.componentInstance.minLen = 3;
|
||||
fixture.debugElement.componentInstance.maxLen = 3;
|
||||
fixture.debugElement.componentInstance.pattern = '.{3,}';
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.componentInstance.required = true;
|
||||
fixture.componentInstance.minLen = 3;
|
||||
fixture.componentInstance.maxLen = 3;
|
||||
fixture.componentInstance.pattern = '.{3,}';
|
||||
fixture.detectChanges();
|
||||
|
||||
const required = fixture.debugElement.query(By.css('[name=required]'));
|
||||
@ -1184,7 +1173,7 @@ export function main() {
|
||||
'max': new FormControl(''),
|
||||
'pattern': new FormControl('')
|
||||
});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
const required = fixture.debugElement.query(By.css('[name=required]'));
|
||||
@ -1208,10 +1197,10 @@ export function main() {
|
||||
expect(form.hasError('pattern', ['pattern'])).toEqual(false);
|
||||
expect(form.valid).toEqual(true);
|
||||
|
||||
fixture.debugElement.componentInstance.required = true;
|
||||
fixture.debugElement.componentInstance.minLen = 3;
|
||||
fixture.debugElement.componentInstance.maxLen = 3;
|
||||
fixture.debugElement.componentInstance.pattern = '.{3,}';
|
||||
fixture.componentInstance.required = true;
|
||||
fixture.componentInstance.minLen = 3;
|
||||
fixture.componentInstance.maxLen = 3;
|
||||
fixture.componentInstance.pattern = '.{3,}';
|
||||
fixture.detectChanges();
|
||||
|
||||
dispatchEvent(required.nativeElement, 'input');
|
||||
@ -1226,17 +1215,17 @@ export function main() {
|
||||
expect(form.valid).toEqual(false);
|
||||
|
||||
expect(required.nativeElement.getAttribute('required')).toEqual('');
|
||||
expect(fixture.debugElement.componentInstance.minLen.toString())
|
||||
expect(fixture.componentInstance.minLen.toString())
|
||||
.toEqual(minLength.nativeElement.getAttribute('minlength'));
|
||||
expect(fixture.debugElement.componentInstance.maxLen.toString())
|
||||
expect(fixture.componentInstance.maxLen.toString())
|
||||
.toEqual(maxLength.nativeElement.getAttribute('maxlength'));
|
||||
expect(fixture.debugElement.componentInstance.pattern.toString())
|
||||
expect(fixture.componentInstance.pattern.toString())
|
||||
.toEqual(pattern.nativeElement.getAttribute('pattern'));
|
||||
|
||||
fixture.debugElement.componentInstance.required = false;
|
||||
fixture.debugElement.componentInstance.minLen = null;
|
||||
fixture.debugElement.componentInstance.maxLen = null;
|
||||
fixture.debugElement.componentInstance.pattern = null;
|
||||
fixture.componentInstance.required = false;
|
||||
fixture.componentInstance.minLen = null;
|
||||
fixture.componentInstance.maxLen = null;
|
||||
fixture.componentInstance.pattern = null;
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(form.hasError('required', ['login'])).toEqual(false);
|
||||
@ -1259,11 +1248,11 @@ export function main() {
|
||||
'max': new FormControl(''),
|
||||
'pattern': new FormControl('')
|
||||
});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.debugElement.componentInstance.required = true;
|
||||
fixture.debugElement.componentInstance.minLen = 3;
|
||||
fixture.debugElement.componentInstance.maxLen = 3;
|
||||
fixture.debugElement.componentInstance.pattern = '.{3,}';
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.componentInstance.required = true;
|
||||
fixture.componentInstance.minLen = 3;
|
||||
fixture.componentInstance.maxLen = 3;
|
||||
fixture.componentInstance.pattern = '.{3,}';
|
||||
fixture.detectChanges();
|
||||
|
||||
const newForm = new FormGroup({
|
||||
@ -1272,13 +1261,13 @@ export function main() {
|
||||
'max': new FormControl(''),
|
||||
'pattern': new FormControl('')
|
||||
});
|
||||
fixture.debugElement.componentInstance.form = newForm;
|
||||
fixture.componentInstance.form = newForm;
|
||||
fixture.detectChanges();
|
||||
|
||||
fixture.debugElement.componentInstance.required = false;
|
||||
fixture.debugElement.componentInstance.minLen = null;
|
||||
fixture.debugElement.componentInstance.maxLen = null;
|
||||
fixture.debugElement.componentInstance.pattern = null;
|
||||
fixture.componentInstance.required = false;
|
||||
fixture.componentInstance.minLen = null;
|
||||
fixture.componentInstance.maxLen = null;
|
||||
fixture.componentInstance.pattern = null;
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(newForm.hasError('required', ['login'])).toEqual(false);
|
||||
@ -1292,7 +1281,7 @@ export function main() {
|
||||
const fixture = TestBed.createComponent(UniqLoginWrapper);
|
||||
const form = new FormGroup({'login': new FormControl('')});
|
||||
tick();
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(form.pending).toEqual(true);
|
||||
@ -1311,7 +1300,7 @@ export function main() {
|
||||
it('should use sync validators defined in the model', () => {
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
const form = new FormGroup({'login': new FormControl('aa', Validators.required)});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
expect(form.valid).toEqual(true);
|
||||
|
||||
@ -1327,7 +1316,7 @@ export function main() {
|
||||
const control =
|
||||
new FormControl('', Validators.required, uniqLoginAsyncValidator('expected'));
|
||||
const form = new FormGroup({'login': control});
|
||||
fixture.debugElement.componentInstance.form = form;
|
||||
fixture.componentInstance.form = form;
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
@ -1453,8 +1442,7 @@ export function main() {
|
||||
template: `
|
||||
<div formArrayName="cities">
|
||||
<input type="text" formControlName="login">
|
||||
</div>
|
||||
`
|
||||
</div>`
|
||||
}
|
||||
});
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
@ -1475,7 +1463,7 @@ export function main() {
|
||||
}
|
||||
});
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
fixture.debugElement.componentInstance.myGroup = new FormGroup({});
|
||||
fixture.componentInstance.myGroup = new FormGroup({});
|
||||
|
||||
expect(() => fixture.detectChanges())
|
||||
.toThrowError(new RegExp(
|
||||
@ -1493,7 +1481,7 @@ export function main() {
|
||||
}
|
||||
});
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
fixture.debugElement.componentInstance.myGroup = new FormGroup({});
|
||||
fixture.componentInstance.myGroup = new FormGroup({});
|
||||
|
||||
expect(() => fixture.detectChanges()).not.toThrowError();
|
||||
});
|
||||
@ -1512,7 +1500,7 @@ export function main() {
|
||||
});
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
const myGroup = new FormGroup({person: new FormGroup({})});
|
||||
fixture.debugElement.componentInstance.myGroup = new FormGroup({person: new FormGroup({})});
|
||||
fixture.componentInstance.myGroup = new FormGroup({person: new FormGroup({})});
|
||||
|
||||
expect(() => fixture.detectChanges())
|
||||
.toThrowError(new RegExp(
|
||||
@ -1532,7 +1520,7 @@ export function main() {
|
||||
}
|
||||
});
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
fixture.debugElement.componentInstance.myGroup = new FormGroup({});
|
||||
fixture.componentInstance.myGroup = new FormGroup({});
|
||||
|
||||
expect(() => fixture.detectChanges())
|
||||
.toThrowError(
|
||||
@ -1545,13 +1533,11 @@ export function main() {
|
||||
template: `
|
||||
<form [formGroup]="form">hav
|
||||
<input type="radio" formControlName="food" name="drink" value="chicken">
|
||||
</form>
|
||||
`
|
||||
</form>`
|
||||
}
|
||||
});
|
||||
const fixture = TestBed.createComponent(FormGroupComp);
|
||||
fixture.debugElement.componentInstance.form =
|
||||
new FormGroup({'food': new FormControl('fish')});
|
||||
fixture.componentInstance.form = new FormGroup({'food': new FormControl('fish')});
|
||||
|
||||
expect(() => fixture.detectChanges())
|
||||
.toThrowError(new RegExp('If you define both a name and a formControlName'));
|
||||
@ -1655,7 +1641,9 @@ class FormControlComp {
|
||||
`
|
||||
})
|
||||
class FormGroupComp {
|
||||
control: FormControl;
|
||||
form: FormGroup;
|
||||
myGroup: FormGroup;
|
||||
data: string;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user