如何使用業力在Angular中對異步ngIf進行單元測試

Question

我的HTML文件中包含以下代碼：

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

在我的業力測試中，我想檢查ngIf / ngFor有效，並檢查CSS類。 我該如何測試？

Answer 1

我在測試中嘗試

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();
}));