フォームが失敗したときのエンドツーエンドのコンポーネントテスト

Question

私は単純なAngularフォームを持ち、エンドツーエンドのテストでテストしたい。私。 UIからテストを実行したい私が書いたテストは、私が期待するようには機能しません。

コンポーネント：

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; 

@Component({ 
    selector: 'app-foo', 
    template: ` 
    <form [formGroup]="form"> 
    <input id="foo" type="text" formControlName="foo"> 
    <button id="submit" type="submit">Submit</button> 
    </form>` 
}) 
export class FooComponent implements OnInit { 

    form: FormGroup; 

    constructor(private formBuilder: FormBuilder) { } 

    ngOnInit() { 
     this.form = this.formBuilder.group({ 
      foo: ['', [Validators.required, Validators.pattern('[0-9]+')]] 
     }); 
    } 
} 

テスト：

import { FooComponent } from './foo.component'; 
import { TestBed, ComponentFixture } from '@angular/core/testing'; 
import { ReactiveFormsModule, FormsModule } from "@angular/forms"; 
import { By } from '@angular/platform-browser'; 

fdescribe('Foo component',() => { 

    let component: FooComponent; 
    let fixture: ComponentFixture<FooComponent>; 

    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      imports: [ReactiveFormsModule, FormsModule], 
      declarations: [FooComponent] 
     }); 
     fixture = TestBed.createComponent(FooComponent); 
     component = fixture.componentInstance; 
     component.ngOnInit(); 
    }); 

    it('should have a valid foo when input is valid',() => { 
     let foo = fixture.debugElement.query(By.css("#foo")); 
     foo.nativeElement.value = "12345"; 
     fixture.detectChanges(); 
     expect(component.form.controls.foo.valid).toBeTruthy(); 
    }); 

}); 

テストが失敗した：Expected false to be truthy.。あらかじめfixture.detectChanges()を実行していますが、12345の値はcomponent.form.controls.foo.valueの値として表示されません。

私は間違っていますか？あなたのような

Here's a plnkr

Answer 1

シームは、このような「入力」イベント派遣することも必要があります。ここでは

input.dispatchEvent(new Event('input')); 

をforked Plunkr