angular - 如何对 ElementRef 的父元素进行单元测试和模拟 - Angular 9
问题描述
我有一个滚动动画组件,我可以将其添加到其他一些组件中以显示滚动动画。当父组件有滚动条时会显示滚动动画。
export class ScrollIndicatorComponent implements OnInit, OnDestroy, AfterViewInit {
constructor(private elementRef: ElementRef) {
}
...
componentHasScrollbar(): boolean {
const parentElement = this.elementRef.nativeElement.parentElement;
return parentElement.offsetHeight < parentElement.scrollHeight;
}
我如何模拟 this.elementRef.nativeElement.parentElement 及其 offsetHeight 和 scrollHeight 值,所以方法 componentHasScrollbar() 将在我的单元测试中返回 true?
解决方案
我将创建一个返回 this.elementRef.nativeElement.parentElement 的函数,然后在单元测试中您可以监视该函数并模拟结果
private getParentElement(): HTMLElement {
return this.elementRef.nativeElement.parentElement;
}
componentHasScrollbar(): boolean {
const parentElement = this.getParentElement();
return parentElement.offsetHeight < parentElement.scrollHeight;
}
然后在测试中:
spyOn(component, 'getParentElement').and.returnValue({
scrollHeight: 10,
offsetHeight: 1000
})
您的测试应该相信 ElementRef 本身已经过充分测试。
有些人可能会争辩说这种方法正在改变代码以适应测试,但我相信这种方法正在鼓励更清洁的代码。
推荐阅读
- python - 如何同时使用 schedule py 和 Discord py?
- r - R 中的 PGLS 使用 caper/nlme - 非超测量树
- javascript - html5 音频播放器缓冲时卡住新请求
- html - 将美元运算符用于属性选择器时,出现“无效的属性值”错误
- r - 使用非标准评估取消嵌套许多列
- python - 使用 Django 中的按钮增加整数(模型变量或 view.py 字典值)
- docker - Docker compose 什么都不做
- android - Android - 两个带有填充颜色、描边和图标的圆形 ImageButton
- javascript - 在 iOS 版 Safari 中禁用 Scroll-Rails
- node.js - 如何在没有对象'_text'道具的情况下使用xml-js