Question

我试图为Angular 2网络应用程序编写一个基本测试，该应用程序试图在单击提交按钮时检查我的submit()函数是否被调用。

当我这样做时，它在手动测试和我的Jasmine测试中都能正常工作......

<form #addPersonForm="ngForm">
    ...
    <button class="add-button" type="submit" (click)="submit()" tabindex="5">Add Person</button>
</form>

但是当我使用ngSubmit时，手动测试工作正常，但Jasmine单元测试失败（它表示从不调用提交函数）......

<form (ngSubmit)="submit()" #addPersonForm="ngForm">
    ...
    <button class="add-button" type="submit" tabindex="5">Add Person</button>
</form>

（顺便说一下，我试图让这个ngSubmit方法起作用的原因是它在验证和支持输入键方面更好用。）

这是我在Jasmine测试中所做的事情......

it('should call the submit method', () => {
    let debugElement = _fixture.debugElement;
    let button = debugElement.query(By.css('.add-button'));

    _fixture.detectChanges();

    TestHelper.click(button);
    expect(submitSpy).toHaveBeenCalled();
});

我是否需要监视一些具体的东西，我错过了什么？我在文档中找不到与此问题相关的任何内容。

更新

这是我的点击方法......

/** Simulate element click. Defaults to mouse left-button click event. */
export function click(el: DebugElement | HTMLElement, eventObj: any = ButtonClickEvents.left): void {
  if (el instanceof HTMLElement) {
    el.click();
  } else {
    (<DebugElement> el).triggerEventHandler('click', eventObj);
  }
}

Answer 1

也许你可以检查一下这样的东西：

将[formGroup]="form"添加到<form>。
首先检查表单是否有效。
检查提交按钮是否已启用，即它没有错误的[disabled]="form.valid"（应该是!form.valid）。
根据您的测试方式，您应该在点击功能调用后调用fixture.detectChanges();。
此外，您可以尝试仅使用此组件在新的清洁项目中进行检查。

单击按钮时应提交表单。顺便说一句，对于我的测试，上面的许多问题都在解决之后，虽然我使用的是Angular 6，但它可以正常运行，所以可能是早期版本中的一个错误。

使用Jasmine单击提交按钮时，ngSubmit不会被激活

1 个答案: