Как проверить событие scrollTop в Angular 8 с помощью Jest? - PullRequest
Новая
       29

Как проверить событие scrollTop в Angular 8 с помощью Jest?

0 голосов
/ 23 апреля 2020

Я искал решение для проверки события 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.spe c 

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

1 Ответ

0 голосов
/ 23 апреля 2020

Ок, друзья, я нашел решение! То, как я это делал, продолжать было невозможно ... Поэтому я решил изменить способ проверки свитка, и это сработало!

Я изменил 

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.spe c

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

Спасибо!

...