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

Question

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

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 的 function，然后在单元测试中您可以监视该 function 并模拟结果

private getParentElement(): HTMLElement {
  return his.elementRef.nativeElement.parentElement;
}

componentHasScrollbar(): boolean {
  const parentElement = this.getParentElement();
  return parentElement.offsetHeight < parentElement.scrollHeight;
}

然后在测试中：

spyOn(component, 'getParentElement').and.returnValue({
   scrollHeight: 10,
   offsetHeight: 1000
})

您的测试应该相信 ElementRef 本身已经过充分测试。

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