Angular 表单端到端组件测试失败

Question

我有一个简单的 Angular 表单，想通过端到端测试对其进行测试。 IE。我想从 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' 事件：

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

这是 forked Plunkr

中修复的完整测试

Angular 表单端到端组件测试失败

Angular End to end component test on form failing

angular

jasmine

angular-forms