我在测试此功能和这两个条件时遇到了困难，有人能帮忙吗？
@HostListener('window:scroll', ['$event']) onWindowScroll(event: Event) { const numb = window.scrollY; if (numb >= 50){ this.scrolled = true; } else { this.scrolled = false; } }
zujrkrfu1#
我建议您执行以下操作注入窗口：
constructor(@Inject(DOCUMENT) private readonly document: Document) { this.window = this.document.defaultView; } @HostListener('window:scroll', ['$event']) onWindowScroll(event: Event) { this.scrolled = this.window.scrollY >= 50; }
然后，假设您正在使用Jasmine/Karma之类的工具来编写测试，在您的规范中，您可以注入窗口并调度假滚动事件来测试响应。
let mockWindow: any; beforeEach(() => { mockWindow = document.createElement('div'); TestBed.configureTestingModule({ declarations: [TestComponent], providers: [{ provide: DOCUMENT, useValue: { defaultView: mockWindow } }] }); }); it('responds to scroll events' () => { Object.defineProperty(mockWindow, 'scrollY', { value: 100 }); mockWindow.dispatchEvent(new Event('scroll')); expect(fixture.componentInstance.scrolled).toBe(true); });
在这里，我还使用defineProperty伪造了scrollY，以便使测试正常。注意：我还没有在@HostListener('window:scroll')上这样做过，但是我在@HostListener('window:resize')上已经做过了，所以我想它也会像@HostListener('window:resize')一样工作。我是徒手写的，所以如果复制/粘贴的话，我不会期望它能完美地运行。
@HostListener('window:scroll')
@HostListener('window:resize')
1条答案
按热度按时间zujrkrfu1#
我建议您执行以下操作注入窗口：
然后，假设您正在使用Jasmine/Karma之类的工具来编写测试，在您的规范中，您可以注入窗口并调度假滚动事件来测试响应。
在这里，我还使用defineProperty伪造了scrollY，以便使测试正常。
注意：我还没有在
@HostListener('window:scroll')上这样做过，但是我在@HostListener('window:resize')上已经做过了，所以我想它也会像@HostListener('window:resize')一样工作。我是徒手写的，所以如果复制/粘贴的话，我不会期望它能完美地运行。