Search code examples
javascriptangularunit-testingkarma-jasminejasmine2.0

How to test whether an Angular mat-nav-list contains an element?

I'd like to check whether an Angular mat-nav-list contains an element.

I'm able to select it with fixture.debugElement.query(By.css('.items')), but I'm not sure how to check whether it contains anything.

My template:

<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>

In my test I inject 1 item and expect it to render. While component does contain an item, I'd like to check whether its rendered in the list.

Solution

  • try queryAll

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

    and then you can check if length is correct after faking items list

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