如何在测试中模拟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();
});