Question

我正在为指令（在输入事件上调用）编写单元测试，该指令正在修改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
});

Answer 1

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

当我们通过dispatchEvvent定义事件时，例如

JS native APIs就派上用场了。 RxJS fromEvent可见，等等。

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

这是一篇非常有趣的文章，可以帮助您整洁地了解差异https://netbasal.com/simulating-events-in-angular-unit-tests-5482618cd6c6

Answer 2

我也注意到了同样的问题。我发现的是triggerEventHandler（）在按钮测试方案中有效，而在输入方案中无效，而dispatchevent在输入方案中有效，这就是您的情况。

使用业力进行角度单位测试时，dispatchEvent（）和triggerEventHandler（）有什么区别？

2 个答案: