Angular5中如何测试Material Autocomplete的optionSelected事件是否调用正确函数

架构老林

2026-5-28

如何测试Angular Material Autocomplete的optionSelected事件是否调用正确函数

要验证<mat-autocomplete>的optionSelected事件是否正确触发了onNewsRoomSelect函数，你可以按照以下步骤编写单元测试，核心思路是创建方法间谍、手动触发事件、验证间谍调用情况：

完整测试用例示例

it('should call onNewsRoomSelect when autocomplete option is selected', () => {
  // 1. 准备模拟的NewsRoomSource数据，和你实际项目中的数据结构保持一致
  const mockNewsRoom: NewsRoomSource = {
    sourceName: 'Sample News Room',
    sourceType: 'Internal'
  };

  // 2. 在组件的onNewsRoomSelect方法上创建Jasmine间谍，用来监听调用情况
  spyOn(component, 'onNewsRoomSelect');

  // 3. 获取MatAutocomplete的组件实例
  const autocompleteEl = fixture.debugElement.query(By.directive(MatAutocomplete));
  const autocomplete = autocompleteEl.componentInstance;

  // 4. 手动触发optionSelected事件，传递模拟的选项对象
  autocomplete.optionSelected.emit({
    option: {
      value: mockNewsRoom
    }
  });

  // 5. 触发变更检测，确保组件响应事件
  fixture.detectChanges();

  // 6. 断言：验证onNewsRoomSelect被调用，且传递了正确的参数
  expect(component.onNewsRoomSelect).toHaveBeenCalledWith(mockNewsRoom);
});

关键步骤解释

创建间谍：用spyOn(component, 'onNewsRoomSelect')可以监听这个方法的调用次数、传入参数等，这是单元测试中验证方法调用的常用手段。
触发事件：直接通过autocomplete.optionSelected.emit(...)触发事件，比模拟用户点击<mat-option>更直接高效，还能精准控制传递的参数内容。
参数验证：确保模拟的mockNewsRoom和实际业务中option.value的结构完全匹配，这样断言结果才会准确可靠。