如何对 ElementRef 的父元素进行单元测试和模拟 - Angular 9

Question

我有一个滚动动画组件，我可以将它添加到其他一些组件中以显示滚动动画。父组件有滚动条时会显示滚动动画。

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？

Answer 1

我会创建一个返回 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 本身已经过充分测试。

有些人可能会争辩说，这种方法正在更改代码以适应测试，但我相信这种方法正在鼓励更简洁的代码。