使用 Jasmine 单击提交按钮时，ngSubmit 不会触发答案

【问题标题】：ngSubmit won't fire when clicking the submit button with Jasmine使用 Jasmine 单击提交按钮时，ngSubmit 不会触发
【发布时间】：2017-02-11 18:39:26
【问题描述】：

我正在尝试为 Angular 2 Web 应用程序编写一个基本测试，该应用程序试图检查单击提交按钮时是否调用了我的 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 方法工作的原因是它在验证和支持回车键方面表现得更好。）

这就是我正在做的茉莉花测试...

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);
  }
}

【问题讨论】：

试试button.nativeElement.click()。这就是我使用的，并且有效
@peeskillet 这对我不起作用。有人找到解决方案了吗？
@AmitChigadani 我不这么认为。有点奇怪。从我最后一次尝试这个它没有工作。我去查看source code tests 的表格，他们甚至没有针对这个用例进行测试。他们测试的是获取表单并触发submit 事件。所以我就顺其自然了。它没有测试按钮点击的功能，但我只是解决了
我注意到它适用于 Chrome 59。但不适用于 Chrome 60。
@sasha_trn 我在 Chrome 60 中遇到了同样的问题。通过将我编译的组件附加到文档正文中，我能够让一切正常工作：$(document.body).append(element)，其中element 是使用 @ 的形式987654331@。似乎 jQuery 不喜欢在较新版本的 Chrome 中提交分离的表单。

标签： unit-testing angular jasmine

【解决方案1】：

也许您可以检查以下内容：

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

单击按钮时应提交表单。顺便说一句，对于我的测试，上面有很多问题，在修复它们之后，虽然我使用的是 Angular 6，但它做得很好，所以可能是早期版本中的一个错误。

【讨论】：