angular - 在使用业力的角度单元测试中,dispatchEvent() 和 triggerEventHandler() 有什么区别?
问题描述
我正在为一个指令(在输入事件上调用)编写单元测试,该指令正在修改 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
属于角。仅当使用、或装饰器在本机元素上声明事件处理程序时,triggerEventHandler
才会调用事件处理程序。Angular event bindings
@HostListener()
@Output
dispatchEvvent
例如,当我们通过 定义事件时会派上用场JS native APIs
。RxJSfromEvent
可观察等
我们甚至可以dispatchEvent
在测试时用来模拟 Angular Material 组件的事件,triggerEventHandler
因为 Angular 不知道这些事件,所以在那里无法工作。
这是一篇非常有趣的文章,可以帮助您巧妙地理解差异https://netbasal.com/simulating-events-in-angular-unit-tests-5482618cd6c6
推荐阅读
- php - 在 Woocommerce 上的产品中设置产品类别术语
- android - 如何单击片段中的按钮以切换到 Kotlin 中的其他选项卡?
- javascript - Why the switch statement automatically answers to "default"
- angular - Declare a global website variable in Angular 7
- windows - 如何在powershell中仅列打印列表的某些行部分?
- scala - 提交作业时,spark-submit 中使用的参数是否有特定顺序?
- java - 如何通过 JSON 在地图上添加这些位置?
- django-rest-framework - 权限类 IsAuthenticated 在 DRF 中不起作用
- php - 我应该使用 Put、Patch 和 Delete 吗?我正在阅读一些东西,这让我想知道使用它们是否是传统的
- angular - 匹配两个日期 - TypeScript