如何對 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 本身已經過充分測試。

有些人可能會爭辯說這種方法正在改變代碼以適應測試，但我相信這種方法正在鼓勵更清潔的代碼。