Angular：我如何在 jasmine 中測試 @HostListener？

Question

我在 angular 的組件中有下一個代碼：

@HostListener('window:scroll', []) onWindowScroll() {
  this.showScrollToTop = false;
}

我如何在茉莉花中測試這個？ 如何啟動窗口滾動事件？

Answer 1

測試窗口：滾動：

it('should do something on window scroll', () => {
  window.dispatchEvent(new Event('scroll'));
  expect(...)....
});

Answer 2

您可以嘗試通過在窗口上調用scrollTo函數來使簡單的 JS 滾動。

如果你想滾動頂部，它將是：

window.scrollTo(0, 0);

更新

var scrollEvent = document.createEvent('CustomEvent');
scrollEvent.initCustomEvent( 'scroll', false, false, null );

window.dispatchEvent(scrollEvent)

Answer 3

 it('Focus over elements', () => {
    fixture.detectChanges();
    const event = new Event('click', { bubbles: true });
    const spyDocumentClick = spyOn(component, 'clickout').and.callThrough();
    component.clickout(event);
    expect(spyDocumentClick).toHaveBeenCalled();
 });