Angular中如何测试input事件触发时search方法是否被调用？测试报错排查

问题根源 #

测试代码里触发了错误的事件类型：模板绑定的是(input)事件，但你调用dispatchEvent时传入的是#search-text这个不存在的事件名，Angular无法识别该事件，因此不会执行绑定的search()函数。

修复后的完整测试代码 #

it('search ', fakeAsync(() => {
  spyOn(component, "search").and.callThrough();
  let input = fixture.debugElement.query(By.css('#search-text'));
  let el = input.nativeElement;
  
  el.value = 'Fake One';
  // 触发正确的input事件
  el.dispatchEvent(new Event('input'));
  // 触发变更检测，确保Angular捕获事件并执行绑定逻辑
  fixture.detectChanges();
  // 刷新异步任务队列，处理可能的异步操作
  flush();
  
  expect(component.search).toHaveBeenCalled();
}));

额外注意事项 #

• 如果测试开始时组件未完成初始化，需在获取输入元素前先调用fixture.detectChanges()，确保DOM渲染完成
• 确认#search-text选择器拼写正确，能准确找到目标输入元素

内容的提问来源于stack exchange，提问作者athi