如何测试 Angular mat-nav-list 是否包含元素？答案

【问题标题】：How to test whether an Angular mat-nav-list contains an element?如何测试 Angular mat-nav-list 是否包含元素？
【发布时间】：2019-08-16 17:58:09
【问题描述】：

我想检查一个 Angular mat-nav-list 是否包含一个元素。

我可以使用fixture.debugElement.query(By.css('.items')) 选择它，但我不确定如何检查它是否包含任何内容。

我的模板：

<mat-nav-list class="items">
    <a class="list-item" mat-list-item *ngFor="let item of items">
        <app-item-display [item]="item"></app-item-display>
    </a>
</mat-nav-list>

在我的测试中，我注入了 1 个项目并期望它能够呈现。虽然组件确实包含一个项目，但我想检查它是否在列表中呈现。

【问题讨论】：

标签： javascript angular unit-testing karma-jasmine jasmine2.0

【解决方案1】：

尝试查询全部

const items= fixture.debugElement.queryAll(By.css('.list-item'));

然后你可以在伪造物品列表后检查长度是否正确

expect(items.length).toBe(2) // or your fake data length

【讨论】：