Angular 5 mat-autocomplete组件单元测试编写求助

嘿，我之前在做Angular Material自动补全的单元测试时，也碰到过一模一样的问题——明明设置了输入值、触发了input事件，可mat-option就是不出来！后来摸索出几个关键步骤，亲测能解决这个问题，分享给你：

首先，确保测试环境配置正确 #

在你的TestBed配置里，必须导入这些必要的模块，缺一不可：

• ReactiveFormsModule/FormsModule（根据你用的表单类型选择）
• MatInputModule 和 MatAutocompleteModule
• NoopAnimationsModule（重点！禁用Material的动画，避免异步动画导致的渲染延迟）

比如测试模块的配置应该像这样：

await TestBed.configureTestingModule({
  declarations: [你的组件类],
  imports: [
    ReactiveFormsModule, // 若使用响应式表单
    MatInputModule,
    MatAutocompleteModule,
    NoopAnimationsModule
  ]
}).compileComponents();

正确更新输入值，触发控件的valueChanges #

别直接修改input的nativeElement.value！Angular的表单控件是响应式的，直接改DOM不会同步到表单控件的valueChanges流，而自动补全的过滤逻辑通常是绑定在这个流上的。

正确做法：
如果是响应式表单，直接调用表单控件的setValue()方法：

component.yourFormControl.setValue('要输入的内容');

如果是模板驱动表单，先获取NgModel实例再更新：

const ngModel = fixture.debugElement.query(By.css('input')).injector.get(NgModel);
ngModel.control.setValue('要输入的内容');

处理异步操作，等待视图更新 #

自动补全的选项过滤、面板渲染都是异步操作，测试时需要用fakeAsync和tick()来模拟时间流逝，等待所有异步任务完成：

it('应该显示过滤后的自动补全选项', fakeAsync(() => {
  // 设置控件值
  component.myControl.setValue('T');
  // 等待过滤逻辑完成
  tick();
  // 强制Angular更新视图
  fixture.detectChanges();
}));

手动打开自动补全面板 #

在测试环境中，没有真实用户的点击/聚焦交互，有时候光设置值不足以触发面板打开。这时候可以直接获取MatAutocomplete实例，调用它的open()方法：

const autocomplete = fixture.debugElement.query(By.css('mat-autocomplete')).componentInstance;
autocomplete.open();
tick();
fixture.detectChanges();

完整的测试示例 #

结合上面的步骤，完整的测试代码大概是这样的：

it('should display filtered mat-options when input has value', fakeAsync(() => {
  // 1. 设置表单控件值
  component.myControl.setValue('T');
  tick();
  fixture.detectChanges();

  // 2. 打开自动补全面板
  const autocomplete = fixture.debugElement.query(By.css('mat-autocomplete')).componentInstance;
  autocomplete.open();
  tick();
  fixture.detectChanges();

  // 3. 查询并验证mat-option
  const optionElements = fixture.debugElement.queryAll(By.css('mat-option'));
  expect(optionElements.length).toBe(2); // 假设你的选项里有两个匹配'T'的
  expect(optionElements[0].nativeElement.textContent.trim()).toBe('Two');
}));

几个额外的小 Tips #

• 每次修改数据或调用方法后，都要记得调用fixture.detectChanges()，确保Angular更新视图。
• 如果你的自动补全选项是从API异步获取的，还要在测试中mock这个API请求，确保返回预期的数据。
• 可以用fixture.whenStable()替代fakeAsync/tick，不过fakeAsync在这种场景下更直观。

内容的提问来源于stack exchange，提问作者Krishna Chaitanya P