时间戳

首页 > 解决方案 > 如何对 ngfor 中的按钮进行单元测试

angular - 如何对 ngfor 中的按钮进行单元测试

问题描述

我在导航标签中有一个按钮，它是通过循环列表呈现的

<nav *ngFor="let test of getTests(); let last = last">
    <button (click)="clickFunction() ></button>
</nav>

单元测试时如何获取按钮的点击事件？

这不起作用：

let button = fixture.debugElement.query(By.css('button'));
button.nativeElement.click();

这给了我一个错误，说它button是空的。

标签： angularunit-testing

解决方案

通过在此处放置一条语句，确保它getTests()正在返回数据并且 a<button>在您期望的位置在 DOM 中。如果某些条件更改导致返回数据并且要通过更改检测更新 DOM，debugger您可能需要调用。fixture.detectChanges();getTests()

我也会使用const buttons = fixture.debugElement.queryAll(By.css('button'));，然后根据需要进行索引buttons，以便您可以在多个按钮中区分特定按钮。在按钮上设置标识和动态生成的class或id也可用于区分*ngFor.

我还发现它通常更容易使用buttons[0].triggerEventHandler('click', null)而不是通过 .nativeElement我只nativeElement在debugElement. 但是，如果您愿意，您可以自由使用nativeElement。

推荐阅读