unit-testing - Angular 2. 在单元测试中发出悬停事件

Question

我有一些(MyCmp)组件(<my-cmp></my-cmp>)的模板，像这样

<template ngFor let-r [ngForOf]="range" let-index="index">
  <span>{{ index < 5 ? 'Y' : 'N' }}, {{r.data}}</span>
  <i (mouseenter)="somefunc()" (click)="elefunc()"></i>
  ....
</template>

我通过特殊的 TestComponent 为 MyCmp 组件配置 TestBed

TestBed.configureTestingModule({declarations: [TestComponent], imports: [MyModule]}
TestBed.overrideComponent(TestComponent, {set: {template: '<my-cmp></my-cmp>'}});
fixture = TestBed.createComponent(TestComponent);
context = fixture.debugElement.componentInstance;
element = fixture.nativeElement;
fixture.detectChanges();

我认为这并不重要。测试有效。

element.querySelectorAll('i')[0].click(); //fine

但我不知道我应该如何发出 hover(mouseenter) 和 mouseleave 事件

element.querySelectorAll('i')[0].hover() // not a function
element.querySelectorAll('i')[0].mouseover() // not a function
element.querySelectorAll('i')[0].createMouseEvent('mouseover') // not a function

Answer 1

如果您对此没有答案，可以通过以下方式使用 nativeElement 的 dispatchEvent:

element.dispatchEvent(new MouseEvent('mouseover', {
    view: window,
    bubbles: true,
    cancelable: true
}));