在单元测试角度时测试scrollintoview答案

【问题标题】：Testing scrollintoview while unit testing angular在单元测试角度时测试scrollintoview
【发布时间】：2018-02-10 16:30:33
【问题描述】：

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

这是我的滚动查看代码：

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

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

【问题讨论】：

发生这种情况是因为在单元测试中 document 对象未创建，因此您在未定义元素上调用 scrollIntoView 方法。您可以对此进行测试并在此之前添加console.log( document.getElementsByClassName('class') ); 并开始单元测试。在控制台中查找结果，这就是您的解决方案。

标签： angular testing scroll scrollview karma-runner

【解决方案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] 没有未定义，请添加额外的期望：

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

【讨论】：

【解决方案2】：

你好我试过这个方法

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

   

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

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

@ViewChild('highlightsContainer') highlightsContainer;  


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

然后在我的测试中

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

【讨论】：