如何在使用jasmine的angular组件中单击时触发ngClass更改

// my-component.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<button (click)="toggleClass()">Toggle Class</button>
             <div [ngClass]="{'active': isActive}">Content</div>`
})
export class MyComponent {
  isActive = false;

  toggleClass() {
    this.isActive = !this.isActive;
  }
}

// my-component.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my-component.component';
import { By } from '@angular/platform-browser';

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

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

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should toggle class on button click', () => {
    const button = fixture.debugElement.query(By.css('button'));
    const div = fixture.debugElement.query(By.css('div'));

    expect(div.classes['active']).toBeFalse();

    button.triggerEventHandler('click', null);
    fixture.detectChanges();

    expect(div.classes['active']).toBeTrue();

    button.triggerEventHandler('click', null);
    fixture.detectChanges();

    expect(div.classes['active']).toBeFalse();
  });
});