如何在测试中模拟 ionBlur

Question

也许我会从我想要实现的目标开始：我有一个带有必填字段的表单。默认情况下，它不应显示任何错误。如果用户触摸该字段，则应显示错误。所以我的领域或多或少是这样的：

<ion-input .... (ionBlur)="updateDispayedErrors()"></ion-input>

但我不知道如何测试它，因为：

1. 运行fixture.debugElement.nativeElement.blur()不会触发ionBlur处理程序（与 相同....dispatchEvent(new Event('blur'))）
2. 普通角度(blur)不起作用（即，如果我将代码更改为(blur)="updateDisplayErrors()"那么它不起作用）
3. 似乎在浏览器中创建的blur()本机<input .../>元素上的调用方法会起作用，但是......问题是当我运行测试时fixture.debugElement.nativeElement.childNodes是空的......所以本机<input .../>没有被创建

如果你想看一个完整的例子来说明它，请告诉我。

Answer 1

如果您添加一个选择器来ion-input喜欢：

<ion-input .... (ionBlur)="updateDisplayedErrors()" id="specialInput"></ion-input>

然后你可以使用fixture.debugElement.triggerEventHandler：

import { By } from '@angular/platform-browser';

...

it('should emit ionBlur', () => {
    const ionDe = fixture.debugElement.query(By.css('#specialInput'));
    const ionBlurResult = spyOn(component, 'updateDisplayedErrors');
    ionDe.triggerEventHandler('ionBlur', {});
    expect(ionBlurResult).toHaveBeenCalled();
});