Angular End zu Ende Komponententest auf Formularfehler

Question

Ich habe eine einfache Winkelform und möchte es mit einem Ende-zu-Ende-Test testen. I.e. Ich möchte den Test von der Benutzeroberfläche aus durchführen. Der Test, den ich geschrieben habe, funktioniert nicht so, wie ich es erwarten würde.

Komponente:

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]+')]] 
     }); 
    } 
} 

Der Test:

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(); 
    }); 

}); 

Der Test schlägt fehl: Expected false to be truthy.. Der 12345 Wert wird nicht als der Wert für component.form.controls.foo.value angezeigt, wenn ich in dieses Stück debugge, obwohl ich das fixture.detectChanges() vorher mache.

Was mache ich falsch?

Here's a plnkr

Answer 1

Nähte wie Sie brauchen auch 'Input' Veranstaltung wie diese zu versenden:

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

Hier wird der vollständige Test Danke in forked Plunkr