在非InputElement上触发Angular2的点击事件

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定义（相关StackOverflow）。在某些浏览器中，我会收到以下错误：'undefined' is not a function (evaluating elem.nativeElement.click()')。

如何最好地调用非HTMLInputElement上的单击事件？

- fwind

---

你在哪些浏览器中遇到了这个错误？请具体说明。 - yurzui

我在使用PhantomJS 1.9时遇到了这个问题（但在使用2.1时没有）。 - fwind

Answer 1

我认为最好的方法是在DebugElement上调用triggerEventHandler() triggerEventHandler

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

如果事件缺少侦听器或存在其他问题，请考虑调用nativeElement.dispatchEvent(eventObject)

来自测试文档

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

- yurzui

---

调用 elem.triggerEventHandler('click', null) 就解决了问题。 - fwind

Answer 2

通常，当您想使用纯JS触发HTML元素上的点击时，必须调用在该元素上定义的事件。

更新：如果您正在使用Jasmine，可以尝试在元素上调用“trigger”。

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

- Yaser

---

刚刚测试了一下，好像没有起作用，不过更新还是正常的。@yurzui - Yaser

这段代码在Phantomjs 1.9.1和TypeScript中无法正常工作：TypeError: 'undefined is not a function (evaluating elem.nativeElement.trigger('click')')'。 - fwind