Angular 2 Jasmine 无法测试表单提交答案

【问题标题】：Angular 2 Jasmine unable to test form submitAngular 2 Jasmine 无法测试表单提交
【发布时间】：2019-03-13 18:29:18
【问题描述】：

您好，我正在用 jasmine 编写单元测试用例。我是茉莉花的新手。我有一个 html 表单，我正在尝试为此编写单元测试用例。

下面是我的表单html代码。

<form *ngIf="formResetToggle" class="form-horizontal" name="tenantEditorForm" #f="ngForm" novalidate
      (ngSubmit)="f.form.valid ? saveTenant() :
      (!tenantname.valid && showErrorAlert('Tenant name is required', 'Please enter a name for the tenant'));">

</form>

以下是规格。

it('Save Tenant', fakeAsync(() => {
        fixture.detectChanges();
        spyOn(component, 'saveTenant');
        let submitButton = fixture.debugElement.query(By.css('#saveTenant'));
        submitButton.triggerEventHandler('click', null);
        tick();
        fixture.detectChanges();
        expect(component.saveTenant).toHaveBeenCalled();
    }));

这个规范给了我错误

预期的间谍 saveTenant 已被调用。

有人可以帮我解决这个问题吗？任何帮助，将不胜感激。谢谢

【问题讨论】：

标签： angular unit-testing karma-jasmine

【解决方案1】：

这里的主要问题是因为debugElement.triggerEventHandler 方法触发了在当前 debugElement 上注册的事件处理程序，而您要处理form 上的提交事件。

在这种情况下，我建议您改用原生点击事件。

submitButton.nativeElement.click();

另见：

What is the difference between nativeElement.click() and event handler's click?

Plunker Example

【讨论】：

查看我添加的示例