Angulaire Test de composant de bout en bout sur formulaire défaillant

Question

J'ai une forme angulaire simple et je veux la tester avec un test de bout en bout. C'est à dire. Je veux conduire le test de l'interface utilisateur. Le test que j'ai écrit ne fonctionne pas comme je m'y attendais.

Composant:

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

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

}); 

Le test échoue: Expected false to be truthy.. La valeur 12345 n'apparaît pas comme la valeur pour component.form.controls.foo.value lorsque je débogue dans cette pièce bien que je fasse le fixture.detectChanges() à l'avance.

Qu'est-ce que je fais mal?

Here's a plnkr

Answer 1

Seams comme vous devez également envoyer événement 'd'entrée' comme ceci:

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

Voici le test complet fixé dans forked Plunkr