使用业力进行角单元测试时，dispatchEvent()和triggerEventHandler()有什么区别? [英] What is the difference between dispatchEvent() and triggerEventHandler() in angular unit testing using karma?

问题描述

我正在为指令(在输入事件上调用)编写单元测试，该指令正在修改formControl上的输入值.我已经在规范文件中为此创建了一个测试组件.我注意到triggerEventHandler()和dispatchEvent()之间的区别，而dispatchEvent()正确地触发了事件并且指令被触发，而未触发triggerEventHandler()的情况.谁能让我知道，除了在nativeElement上调用dispatchEvent()之外，它们之间有什么区别.

I am writing unit test for a directive(called on input event), which is modifying an input value on a formControl. I've created a test component in my spec file for the same. I noticed a difference between triggerEventHandler() and dispatchEvent(), while dispatchEvent() was triggering the event correctly and directive was triggered, in the case of triggerEventHandler() event wasn't triggered. Can anyone let me know, what's the difference between them, apart from that dispatchEvent() is called on nativeElement.

// 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属于Angular. triggerEventHandler仅当使用Angular event bindings，@HostListener()或@Output装饰器在本机元素上声明了事件处理程序时，才会调用该事件处理程序.

triggerEventHandler belongs to Angular. The triggerEventHandler will invoke the event handler only if it was declared on the native element by using Angular event bindings, the @HostListener() or @Output decorators.

dispatchEvvent会派上用场. RxJS fromEvent可见，等等.

dispatchEvvent comes in handy when we define events via JS native APIs, for eg. RxJS fromEvent observable, etc.

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

We can even use dispatchEvent to simulate Angular Material component's event while testing, as triggerEventHandler would not work there since Angular doesn’t know about those events.

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

Here's a very interesting article that will help you understand the difference neatly https://netbasal.com/simulating-events-in-angular-unit-tests-5482618cd6c6

这篇关于使用业力进行角单元测试时，dispatchEvent()和triggerEventHandler()有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！