如何在ngfor中对按钮进行单元测试

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  template: `
    <div>
      <button *ngFor="let button of buttons" (click)="onClick(button)">{{ button }}</button>
    </div>
  `
})
class TestComponent {
  buttons = ['Button 1', 'Button 2', 'Button 3'];

  onClick(button: string) {
    console.log('Clicked:', button);
  }
}

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

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

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

  it('should render buttons correctly', () => {
    const buttons = fixture.debugElement.queryAll(By.css('button'));
    expect(buttons.length).toBe(component.buttons.length);
    expect(buttons[0].nativeElement.textContent).toBe(component.buttons[0]);
    expect(buttons[1].nativeElement.textContent).toBe(component.buttons[1]);
    expect(buttons[2].nativeElement.textContent).toBe(component.buttons[2]);
  });

  it('should call onClick method when a button is clicked', () => {
    spyOn(component, 'onClick');
    const buttons = fixture.debugElement.queryAll(By.css('button'));
    buttons[0].triggerEventHandler('click', null);
    expect(component.onClick).toHaveBeenCalledWith(component.buttons[0]);
  });
});

ng test