使用Jasmine单击“提交”按钮时，ngSubmit将不会触发

Question

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

当我这样做时，无论是在手动测试还是在茉莉花测试中都可以正常工作...

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

但是当我改用ngSubmit时，手动测试工作正常，但是Jasmine单元测试失败（它说从来没有调用Submit函数）...

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

（顺便说一句，我尝试使此ngSubmit方法起作用的原因是，它在验证和支持Enter键方面要表现得更好。）

这是我在进行茉莉花测试的过程...

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，但它做得很好，所以可能是早期版本中的一个错误。