Angular2 Tests mit Jasmin, MouseEnter-/mouseleave-Test

Question

Ich habe ein HighlightDirective bekam, die hervorheben wird, wenn die Maus über eine Fläche eintritt, wie:

@Directive({ 
    selector: '[myHighlight]', 
    host: { 
    '(mouseenter)': 'onMouseEnter()', 
    '(mouseleave)': 'onMouseLeave()' 
    } 
}) 
export class HighlightDirective { 
    private _defaultColor = 'Gainsboro'; 
    private el: HTMLElement; 

    constructor(el: ElementRef) { this.el = el.nativeElement; } 

    @Input('myHighlight') highlightColor: string; 

    onMouseEnter() { this.highlight(this.highlightColor || this._defaultColor); } 
    onMouseLeave() { this.highlight(null); } 

    private highlight(color:string) { 
    this.el.style.backgroundColor = color; 
    } 

} 

Jetzt will ich testen, ob die (rechts) Methoden sind auf Ereignis aufgerufen. So etwas wie folgt aus:

it('Check if item will be highlighted', inject([TestComponentBuilder], (_tcb: TestComponentBuilder) => { 
    return _tcb 
     .createAsync(TestHighlight) 
     .then((fixture) => { 
     fixture.detectChanges(); 
     let element = fixture.nativeElement; 
     let component = fixture.componentInstance; 
     spyOn(component, 'onMouseEnter'); 
     let div = element.querySelector('div'); 


     div.mouseenter(); 


     expect(component.onMouseEnter).toHaveBeenCalled(); 
     }); 
    })); 

Mit der Testklasse:

@Component({ 
    template: `<div myHighlight (mouseenter)='onMouseEnter()' (mouseleave)='onMouseLeave()'></div>`, 
    directives: [HighlightDirective] 
}) 
class TestHighlight { 
    onMouseEnter() { 
    } 
    onMouseLeave() { 
    } 
} 

Jetzt habe ich die Nachricht bekam:

fehlgeschlagen: div.mouseenter ist keine Funktion

Also, weiß jemand, welche ist die richtige Funktion (wenn es existiert)? Ich habe bereits versucht mit Klick() ..

Vielen Dank!

Answer 1

Statt

div.mouseenter(); 

dies sollte funktionieren:

let event = new Event('mouseenter'); 
div.dispatchEvent(event);