在单元测试角度时测试滚动视图

Question

在 Angular 2+ 中对 scrollintoview() 方法进行单元测试时，我收到错误 -> “失败：无法读取未定义的属性‘scrollIntoView’”在 Angular 2+ 中

这是我的滚动视图代码：

 document.getElementsByClassName('class')[0].scrollIntoView();

关于如何通过执行脚本解决此问题的任何想法？

Answer 1

回答这个问题可能晚了一年。

这是测试document.getElementsByClassName('someDiv')[0].scrollIntoView({...})的解决方案之一

你可以创建一个spyOn

spyOn(document.getElementsByClassName('someDiv')[0], 'scrollIntoView').and.callThrough(); 

然后期望 scrollIntoView 已被调用

expect(document.getElementsByClassName('someDiv')[0].scrollIntoView).toHaveBeenCalled();

为了确保您的document.getElementsByClassName('someDiv')[0]不是 undefined 添加一个额外的期望：

expect(document.getElementsByClassName('someDiv')[0]).not.toBeDefined();

Answer 2

您好，我已经尝试过这种方法

1. 我已经定义了要滚动到的元素

 <div #highlightsContainer>... </div>

2. 我在我的组件中定义了一个 viewChild 以及我用来滚动的方法

 @ViewChild('highlightsContainer') highlightsContainer; scrollToHighlightsContainer() { setTimeout(() => { this.highlightsContainer.nativeElement.scrollIntoView(true)}); }

2. 然后在我的测试中

 it('should scroll', fakeAsync(() => { component.highlightsContainer.nativeElement.scrollIntoView = jest.fn(); component.scrollToHighlightsContainer(); tick(); expect(component.highlightsContainer.nativeElement.scrollIntoView) .toHaveBeenCalled(); }));