角度端到端成分測試失敗

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.。當我調試到這塊時，12345的值沒有顯示爲component.form.controls.foo.value的值，但我事先做了fixture.detectChanges()。

我在做什麼錯？

Here's a plnkr

Answer 1

接縫像你還需要派遣 '輸入' 事件是這樣的：

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

以下是完整的測試固定forked Plunkr