Question

我在nav标签中有一个按钮，该标签是通过遍历列表来呈现的

<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()语句，确保<button>返回数据并且debugger在DOM中位于您期望的位置。如果某些条件更改导致fixture.detectChanges();返回数据并且需要通过更改检测来更新DOM，则可能需要致电getTests()。

我也将使用const buttons = fixture.debugElement.queryAll(By.css('button'));，然后适当地索引到buttons，以便您可以在多个按钮之间区分一个特定的按钮。在按钮上设置标识并动态生成的class或id有助于区分*ngFor中的动态元素。

我还发现使用buttons[0].triggerEventHandler('click', null)而不是遍历nativeElement更容易，并且我只使用nativeElement，而{{1 }}。但是，如果您愿意的话，可以自由使用debugElement。

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

1 个答案: