web-dev-qa-db-ja.com

Angular-ユニットテストでリアクティブフォームを強制的に有効にする

Angular v4.4.4。コンポーネントで、テンプレートでボタンがクリックされた後、リアクティブフォームが有効であると想定してフォームが保存されます。（擬似コード）のようなもの：

public onSave(): void {
    if (this.myForm.valid) {
        this._createFoo();
    }
}

private _createFoo(): void {
    this._fooService.createItem(this.foo).subscribe(result => {
        // stuff happens...
    });
}

関連する単体テストでは、サービスが呼び出されていることを確認できるように、フォームを強制的に有効にする必要があります。このようなもの：

it('should create Foo', () => {
    const spy = spyOn(_fooService, 'createItem').and.callThrough();
    component.foo = new Foo();
    fixture.detectChanges();
    const bookButton = fixture.debugElement.query(By.css('#bookButton'));
    expect(bookButton !== null).toBeTruthy('missing Book button');
    bookButton.triggerEventHandler('click', null);
    expect(spy).toHaveBeenCalled();
});

MyFormが有効として設定されないため、これは失敗します。

この特定のケースでは、フォームのすべての入力に値を与えたくありません。サービスサブスクリプションが発生するかどうかを確認する必要があります。フォームを強制的に有効にするにはどうすればよいですか？

angularunit-testingangular-reactive-forms
17
ebakunin

バリデータリストをクリアしないのはなぜですか？

// If there are any async validators
//
this.myForm.clearAsyncValidators();
// If there are any normal validators
//
this.myForm.clearValidators();
// Doing the validation on all the controls to put them back to valid
//
this.formGroup.updateValueAndValidity();

これにより、フォームにバリデーターがないため、有効になります。

9
realappie