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

但我不知道我应该如何发出悬停（ 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
}));

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

1 个答案: