import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatSelectModule } from '@angular/material/select';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@Component({
  template: `
    <mat-form-field>
      <mat-select [(ngModel)]="selectedOption">
        <mat-option *ngFor="let option of options" [value]="option">{{ option }}</mat-option>
      </mat-select>
    </mat-form-field>
  `
})
class TestComponent {
  selectedOption: string;
  options: string[] = ['Option 1', 'Option 2', 'Option 3'];
}

let component: TestComponent;
let fixture: ComponentFixture<TestComponent>;

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [MatSelectModule, FormsModule, BrowserAnimationsModule],
    declarations: [TestComponent]
  })
  .compileComponents();
}));

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

it('should select the correct option', () => {
  const selectElement = fixture.debugElement.query(By.css('mat-select')).nativeElement;
  const options = fixture.debugElement.queryAll(By.css('mat-option'));

  // 模拟用户选择选项
  selectElement.click();
  fixture.detectChanges();
  options[1].nativeElement.click();
  fixture.detectChanges();

  // 检查被选中的选项
  expect(component.selectedOption).toBe('Option 2');
});