如何在mat-select angular 8单元测试中检查被选中的选项

在mat-select Angular 8单元测试中检查被选中的选项，可以通过以下步骤进行：

首先，确保你已经安装了Angular的测试工具包（@angular-devkit/build-angular）和Jasmine测试框架。
在你的测试文件中，导入所需的依赖项：

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

创建一个测试组件，并在其中声明mat-select组件和相关的选项：

@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'];
}

在测试之前，使用TestBed配置测试模块，并编译组件：

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

编写测试用例来检查被选中的选项。你可以使用fixture.debugElement.query(By.css())方法来获取mat-select元素，并使用component.selectedOption属性来获取当前选中的选项：

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

在这个例子中，我们模拟用户选择了第二个选项，并通过断言来验证被选中的选项是否正确。

这是一个基本的示例，你可以根据你的具体需求进行扩展和定制。对于更复杂的测试场景，你可能需要使用更多的测试工具和技术，如SpyOn来模拟异步操作或订阅事件。

腾讯云相关产品和产品介绍链接地址：