Angular：如何在jasmine中测试@HostListener？

Question

我在 Angular 组件中有以下代码:

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

我该如何在Jasmine中进行测试？如何触发窗口滚动事件？

- Maxim

Answer 1

测试window:scroll事件：

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

- Steve Brush

---

但是我如何指定滚动量？ - Red2678

Answer 2

您可以通过在窗口上调用scrollTo函数来尝试制作简单的JS滚动。

如果您想要滚动到顶部，可以使用以下代码：

window.scrollTo(0, 0);

更新

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

window.dispatchEvent(scrollEvent)

- Mikki Kobvel

---

谢谢您的回复。但不幸的是，这并没有触发'onWindowScroll'。 - Maxim

你能否尝试创建一个名为scroll的自定义事件？我会更新我的答案。 - Mikki Kobvel

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

- Priti jha