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