How to retrieve the value of ngClass in angular test?

Question

This is my component.html file which contains the ngClass attribute in the second span element:

<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

If you are writing tests in Jasmine, you can verify things multiple ways. Here are a few examples. The last two are specifically looking at the value of the [ngClass] attribute, whereas the first two are just checking to see if a certain class was applied.

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