Jasmine 中的测试吸气剂答案

【问题标题】：Test getter in JasmineJasmine 中的测试吸气剂
【发布时间】：2021-06-05 08:32:54
【问题描述】：

在我的项目中，我使用 mat-menu：

<div [matMenuTriggerFor]="menu"
     [matMenuTriggerData]="menuTriggerData"
     (menuOpened)="isMenuOpen()"
     (menuClosed)="isMenuClose()">
    <ng-content></ng-content>
</div>

<mat-menu #menu="matMenu">
    <ng-template matMenuContent let-menuListWidth='menuListWidth'>
        <div [style.width.px]="menuListWidth">
            <button *ngFor="let item of menuItems"
                (click)="onClick(item.value)">
                {{ item.name }}
            </button>
        </div>
    </ng-template>
</mat-menu>

为了计算叠加层的宽度，我使用了getter函数：

export class MenuComponent {
    @ViewChild(MatMenuTrigger, { static: true, read: ElementRef })
    menuElementRef: ElementRef<HTMLElement>;

    get menuTriggerData() {
        return {
            menuListWidth: this.menuElementRef.nativeElement.clientWidth
        };
    }
}

在.spec文件中，我在做测试：

it('getter should be defined', function () {
    spyOnProperty(component, 'menuTriggerData', 'get').and.returnValue({menuListWidth: 150});
    expect(component.menuTriggerData).toEqual({menuListWidth: 150});
}

测试成功，但没有 getter 覆盖。需要在测试中添加什么来覆盖组件中的 getter？

【问题讨论】：

标签： angular unit-testing testing angular-material jasmine

【解决方案1】：

没有测试覆盖，因为您用返回值的spyOnProperty 覆盖了getter。因此，不会调用实际的 getter。

但是，您可以使用 spyOnProperty 模拟由方法 menuTriggerData 返回的只读 Element.clientWidth 属性。这可能如下所示：

it('getter should be defined', function () { 
  spyOnProperty(component.menuElementRef.nativeElement, 'clientWidth', 'get').and.returnValue(150);
  expect(component.menuTriggerData).toEqual({ menuListWidth: 150});
}

【讨论】：

但是 webstorm 点亮错误：无法分配给 'clientWidth' 因为它是一个只读属性。
@Alex：我相应地更新了我的答案。我希望这个解决方案现在有效。
通过最新的更改，我收到错误消息：'无法读取未定义的属性'nativeElement'。但我是这样写的，而且封面有效：component.menuElementRef = {nativeElement: {clientWidth: 150}} as ElementRef 我不确定这是否正确。