如何在角度测试中检索ngClass的值？

Question

这是我的component.html文件，在第二个span元素中包含ngClass属性：

<span class="container">
  <button mat-icon-button [disabled]="disabled" (click)="onButtonClicked()">
    <mat-icon>{{icon}}</mat-icon>
    <span class="badge" [ngClass]="((themes$ | async)[(activeTheme$ | async)].accent)" color="accent" *ngIf="badgeCount > 0">{{parseBadgeCount()}}</span>
  </button>
</span>

Answer 1

如果您使用Jasmine编写测试，则可以通过多种方式验证事物。这里有一些例子。后两个专门查看[ngClass]属性的值，而前两个仅检查是否已应用某个类。

it('should have the "correct-class" CSS class applied', () => {
    // Do whatever you need for your arrange/act portions of your test
    ...

    // Assert
    const badge = fixture.debugElement.query(By.css('.badge'));
    expect(badge.classes['correct-class']).toBeTruthy();
});

it('should have the "correct-class" CSS class applied', () => {
    // Do whatever you need for your arrange/act portions of your test
    ...

    // Assert
    const badge: HTMLElement = fixture.debugElement.query(By.css('.badge')).nativeElement;
    expect(badge.classList).toContain('correct-class');
});

it('should have [ngClass] resolve to "correct-class"', () => {
    // Do whatever you need for your arrange/act portions of your test
    ...

    // Assert
    const badge = fixture.debugElement.query(By.css('.badge'));
    expect(badge.attributes['ng-reflect-ng-class']).toBe('correct-class');
});

it('should have [ngClass] resolve to "correct-class"', () => {
    // Do whatever you need for your arrange/act portions of your test
    ...

    // Assert
    const badge: HTMLElement = fixture.debugElement.query(By.css('.badge')).nativeElement;
    expect(badge.attributes['ng-reflect-ng-class'].value).toBe('correct-class');
});