如何用Jest测试Angular 8中的scrollTop事件?

我已经找了两天来测试scrollTop事件的解决方案,但我没有在任何地方找到解决方案。我所有的尝试都返回了相同的错误……

TypeError: Cannot read property 'scrollTop' of undefined

header.component.ts

@HostListener('window:scroll', ['$event'])
onWindowScroll(): void {       
  if(document.scrollingElement.scrollTop > 63){
    this.headerElement.classList.add('height-63');
  }else{
    this.headerElement.classList.remove('height-63');
  }
}

header.component.spec

it('should test scrollTop', () => {
  window.scrollTo(0, 500);
  //document.scrollingElement.scrollTop = 500 --> I already tried to set the scrollTop value
  fixture.detectChanges();
  component.onWindowScroll();    
  expect(fixture.debugElement.nativeElement.querySelector('.height-63')).toBeTruthy();    
});

解决方案:

好了,朋友们,我找到了一个解决方案!我的做法是不可能继续……。所以我决定改变我检查卷轴的方式,它的工作!我改变了我的方式。

我改变

if(document.scrollingElement.scrollTop > 63)

if(window.pageYOffset > 63)

结果是这样的。

header.component.ts

@HostListener('window:scroll', ['$event'])
onWindowScroll(): void {       
  if(window.pageYOffset > 63){
    this.headerElement.classList.add('height-63');
  }else{
    this.headerElement.classList.remove('height-63');
  }
}

header.component.spec

it('should test HostListener', () => {
  component.onWindowScroll();
  expect(fixture.debugElement.nativeElement.querySelector('.height-63')).not.toBeTruthy();
  window = Object.assign(window, { pageYOffset: 100 });
  component.onWindowScroll();
  expect(fixture.debugElement.nativeElement.querySelector('.height-63')).toBeTruthy();
});

谢谢!

给TA打赏
共{{data.count}}人
人已打赏
解决方案

通过quantmod将股票数据循环连接在一起。

2022-5-14 9:00:12

解决方案

如何在acumatica中使用put上传照片。

2022-5-14 9:00:14

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索