Angular 2. Emitting hover event in unit tests

Question

I have template for some (MyCmp) component(<my-cmp></my-cmp>) like this

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

I configure TestBed for MyCmp component via special TestComponent

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

I think it's not important. Tests worked.

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

But i don't know how i should emit hover(mouseenter) and mouseleave event

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

In case you haven't had an answer for this, you can use the dispatchEvent of the nativeElement in the following way:

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