Angular - 强制反应形式在单元测试中有效

Question

我正在使用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永远不会设置为有效.

在这种特殊情况下,我不想给表单中的每个输入赋值.我只需要观察并查看服务订阅是否发生.如何强制表格有效？

Answer 1

为什么不清除验证器列表？

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

这将确保您的表单没有验证器,因此有效.

Answer 2

如果有人仍在为此苦苦挣扎：

正如 @ realappie答案所建议的，我们应该清除所有同步/异步验证器。但在大多数情况下，验证器位于控件上，而不是表单本身。因此，只需循环所有控件对每个控件执行此操作即可。

从测试文件来看，它应该如下所示：

const controls = component.myForm.controls;

for (const control in controls) {
    // Clear sync validators - use clearAsyncValidators() for async
    // validators
    controls[control].clearValidators();
    // should update just the control and not everything
    controls[control].updateValueAndValidity({ onlySelf: true });
}
component.myForm.updateValueAndValidity();

Answer 3

仅使用 javascript，您可以执行以下操作：

      Object.defineProperty(comp.editForm, 'valid', {
        get: () => true
      });

覆盖 getter，始终返回 true。