如何在 ngfor 中对按钮进行单元测试

Question

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

<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是空的。

Answer 1

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

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

我还发现它通常更容易使用，buttons[0].triggerEventHandler('click', null)而不是通过 ，并且我仅在 . 中没有更方便的方法时才nativeElement使用。但如果您愿意，您可以自由使用。nativeElementdebugElementnativeElement