Question

我正在测试一个在div上有点击输入的组件。

<div (click)="handleClick(someArgs)"></div>

现在我想验证测试中的行为。我尝试在原生元素上使用.click()：

const elem = fixture.debugElement.query(By.css('my-selector'));
elem.nativeElement.click();
// Check for desired changes

但是这仅适用于特定浏览器，因为.click()似乎只为HTMLInputElements（Relevant StackOverflow）定义。对于几个浏览器，我收到以下错误'undefined' is not a function (evaluating elem.nativeElement.click()')。

在非HTMLInputElement上调用click事件的最佳方法是什么？

Answer 1

我认为最好的方法是在triggerEventHandler()

上调用DebugElement

<强> triggerEventHandler

如果有相应的侦听器，则按名称触发事件   元素的侦听器集合。第二个参数是事件   处理程序所期望的对象。

如果事件缺乏听众或存在其他问题，请考虑   调用nativeElement.dispatchEvent（eventObject）

来自测试文档

https://angular.io/docs/ts/latest/guide/testing.html#!#trigger-event-handler

Answer 2

通常，当您想要使用普通js触发单击html元素时，您必须调用元素上定义的事件。

更新：如果您使用的是Jasmine，可以尝试在元素上调用trigger：

const elem = fixture.debugElement.query(By.css('my-selector'));
elem.nativeElement.trigger('click');

在非InputElement上调用Angular2单击事件

2 个答案: