如何在Angular测试中获取ngClass属性的值？

我来帮你搞定这个问题！先假设你的组件模板大概是这样的（对应你说的第二个span带ngClass的场景）：

<!-- component.html -->
<span>第一个span</span>
<span [ngClass]="{ 'active': isActive, 'disabled': isDisabled }">第二个span</span>

下面是几种在测试中获取这个span的ngClass计算值的方法，按实用性排序：

方法1：通过DebugElement的classes属性（推荐，Angular测试原生支持） #

Angular的DebugElement会自动解析ngClass的绑定，把最终生效的类名存在classes对象里，用起来很方便：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your.component';
import { By } from '@angular/platform-browser';

describe('YourComponent', () => {
  let fixture: ComponentFixture<YourComponent>;
  let component: YourComponent;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
  });

  it('should get ngClass value from the second span', () => {
    // 先设置组件的绑定属性（如果ngClass是动态的）
    component.isActive = true;
    component.isDisabled = false;
    // 触发变更检测，让ngClass生效
    fixture.detectChanges();

    // 获取第二个span的DebugElement
    const spanElements = fixture.debugElement.queryAll(By.css('span'));
    const targetSpan = spanElements[1]; // 第二个span

    // 检查某个类是否存在
    expect(targetSpan.classes['active']).toBeTrue();
    expect(targetSpan.classes['disabled']).toBeFalse();

    // 如果要获取所有生效的类，可以过滤出值为true的键
    const activeClasses = Object.keys(targetSpan.classes).filter(key => targetSpan.classes[key]);
    expect(activeClasses).toEqual(['active']);
  });
});

方法2：通过原生DOM元素的classList #

如果你更习惯操作原生DOM，也可以拿到nativeElement后用classList：

it('should get ngClass via nativeElement classList', () => {
  component.isActive = true;
  fixture.detectChanges();

  const targetSpan = fixture.debugElement.queryAll(By.css('span'))[1].nativeElement;
  // 检查类是否存在
  expect(targetSpan.classList.contains('active')).toBeTrue();
  // 获取所有类的数组
  expect(Array.from(targetSpan.classList)).toEqual(['active']);
});

方法3：直接测试绑定逻辑（更高效的场景） #

如果你的ngClass是基于组件属性动态计算的，有时候直接测试组件的属性逻辑比查DOM更高效，比如：

it('should set correct ngClass based on component state', () => {
  // 测试激活状态
  component.isActive = true;
  fixture.detectChanges();
  expect(fixture.debugElement.queryAll(By.css('span'))[1].classes['active']).toBeTrue();

  // 测试禁用状态
  component.isActive = false;
  component.isDisabled = true;
  fixture.detectChanges();
  expect(fixture.debugElement.queryAll(By.css('span'))[1].classes['disabled']).toBeTrue();
});

小提示：给元素加测试标识更稳定 #

如果模板里的span位置可能变化，建议给目标span加个data-testid属性，这样获取元素更可靠：

<span data-testid="target-span" [ngClass]="{ 'active': isActive }">第二个span</span>

测试里这样获取：

const targetSpan = fixture.debugElement.query(By.css('[data-testid="target-span"]'));

内容的提问来源于stack exchange，提问作者D15