在使用业力的角度单元测试中，dispatchEvent() 和 triggerEventHandler() 有什么区别？答案

【问题标题】：What is the difference between dispatchEvent() and triggerEventHandler() in angular unit testing using karma?在使用业力的角度单元测试中，dispatchEvent() 和 triggerEventHandler() 有什么区别？
【发布时间】：2019-06-04 14:42:20
【问题描述】：

我正在为一个指令（在输入事件上调用）编写单元测试，该指令正在修改 formControl 上的输入值。我在我的规范文件中创建了一个测试组件。我注意到 triggerEventHandler() 和 dispatchEvent() 之间的区别，而 dispatchEvent() 正确触发了事件并触发了指令，但在 triggerEventHandler() 事件未触发的情况下。谁能告诉我，除了在 nativeElement 上调用 dispatchEvent() 之外，它们之间有什么区别。

// directive
export class AlphaNumericCheckDirective {

  constructor(private ctrl: NgControl) {
  }
  @HostListener('input')
  onInputChange() {
    const pattern = /[^0-9]/g;
    const elVal = (this.ctrl.control as AbstractControl).value;
    if (pattern.test(elVal)) {
      const newVal = elVal.replace(pattern, '');
      (this.ctrl.control as AbstractControl).setValue(newVal);
    }
  }
}

// relevant code of test
it('should allow only numerics', () => {
   const fixture = TestBed.createComponent(TestComponent);
   const inputEl = fixture.debugElement.query(By.css('input'));
   (fixture.componentInstance.testGroup.get('testControl') as 
   AbstractControl).patchValue('12a');
   inputEl.triggerEventHandler('input', null); // not triggering the directive
   inputEl.nativeElement.dispatchEvent(new Event('input')); // triggering the directive
});

【问题讨论】：

您能否提供一个最小的工作示例作为堆栈闪电战，例如，它更容易理解问题所在并为您提供帮助。我的第一个猜测是，在使用 triggerEventHandler 之后，您应该等待事件通过 fakeAsync 测试设置和 tick() 完成。但是没有看到整个例子，这只是一个初步的猜测。

标签： angular jasmine

【解决方案1】：

triggerEventHandler 属于 Angular。仅当使用 Angular event bindings、@HostListener() 或 @Output 装饰器在本机元素上声明事件处理程序时，triggerEventHandler 才会调用事件处理程序。

dispatchEvvent 在我们通过JS native APIs 定义事件时派上用场，例如。 RxJS fromEvent observable 等

我们甚至可以在测试时使用 dispatchEvent 来模拟 Angular Material 组件的事件，因为 triggerEventHandler 在那里不起作用，因为 Angular 不知道这些事件。

这是一篇非常有趣的文章，可以帮助你巧妙地理解其中的区别https://netbasal.com/simulating-events-in-angular-unit-tests-5482618cd6c6

【讨论】：

明白你的意思，但我在指令上使用了@HostListener()，那么为什么 triggerEventHandler 不起作用？
我已经阅读了这篇文章，我知道其中的区别，但我认为使用triggerEventHandler 没有任何优势，它更冗长，您需要自己调用更改检测。同时dispatchEvent 处理一切。

【解决方案2】：

我也注意到了同样的问题。我发现 triggerEventHandler() 在按钮测试场景中有效，但在输入场景中无效，而 dispatchevent 在输入场景中有效。

【讨论】：