角度 2 茉莉花无法测试表单提交

Question

嗨，我正在用茉莉花编写单元测试用例。我是茉莉花的新手。我在 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();
}));

这个规范给了我错误

预期的间谍保存租户已被调用。

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

Answer 1

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

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

submitButton.nativeElement.click();

另请参阅：

• nativeElement.click(( 和事件处理程序的点击有什么区别？

普伦克示例