Угловой тест HostListener

Question

В Angular я должен проверить следующий код:

@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void {
    const targetElement = event.target as HTMLElement;
    if (targetElement.classList.contains('mybtn')) {
     this.prop = 'ok';
    }
}

Следующий тест не пройден:

    it('Should succeed', () => {
        const spyDocumentClick = spyOn(component, 'onDocumentClick').and.callThrough();
        component.prop = '';

        fixture.detectChanges();

        const btn = debugElement.query(By.css('.mybtn'));
        expect(btn).not.toEqual(null); // ok

        btn.nativeElement.dispatchEvent(new MouseEvent('click'));

        fixture.detectChanges();
        expect(spyDocumentClick).toHaveBeenCalled(); // fail
        expect(component.prop).toBe('ok'); //fail
    });

Я также пытался создать фиктивный элемент HTML и изменить цель нового MouseEvent

Благодарю за помощь

Answer 1

Ну, это работает со следующим кодом:

    it('Should succeed', () => {
        const spyDocumentClick = spyOn(component, 'onDocumentClick').and.callThrough();
        component.prop = '';

        fixture.detectChanges();

        const btn = debugElement.query(By.css('.mybtn'));
        expect(btn).not.toEqual(null); // ok

        const event = new MouseEvent('click',
            {
                view: window,
                bubbles: true,
                cancelable: true,
                relatedTarget: document
            });

        btn.nativeElement.dispatchEvent(event);

        fixture.detectChanges();
        expect(spyDocumentClick).toHaveBeenCalled(); // ok
        expect(component.prop).toBe('ok'); //ok
    });