How to unittest async ngIf in Angular with karma

Question

I have this code in my HTML file:

    <ul *ngIf="results | async as dataResult">
        <ng-container *ngFor="let result of dataResult">
            <li class="global-search" *ngIf="result.results.length > 0">
                <div class="wrapper">{{result.title.toUpperCase() | translate}}</div>

                <ul *ngIf="result.results?.length > 0">
                    <li (click)="clickResult(row); isResultsOpen = false" class="list__item" *ngFor="let row of result.results">
                        {{row.location.name}}
                    </li>
                </ul>
            </li>
        </ng-container>
    </ul>
</div>

In my karma test, I want to check if the ngIf / ngFor works and check the CSS classes. How can I test this?

Answer 1

i try this in my test

const searchService = jasmine.createSpyObj('SearchService', ['getResults']);
const results = searchService.getResults.and.returnValue(of(resultData));

it('show search results',  fakeAsync(() => {
    results.and.returnValue(resultData);
    fixture.detectChanges();
    tick();
    fixture.detectChanges();

    expect(Boolean(fixture.debugElement.query(By.css('.global-search')))).toBeTruthy();
}));