ionic-framework - 如何在测试中模拟ionBlur

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

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

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

运行fixture.debugElement.nativeElement.blur()不会触发ionBlur处理程序(与....dispatchEvent(new Event('blur'))相同)

普通角度(blur)不起作用(即，如果我将代码更改为(blur)="updateDisplayErrors()"，则它不起作用)

似乎可以在浏览器中创建的 native blur()元素上调用<input .../>方法可以工作，但是...问题是，当我运行测试时fixture.debugElement.nativeElement.childNodes为空...因此未创建 native <input .../>

如果您想查看完整的示例进行说明，请告诉我。

最佳答案

如果将选择器添加到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();
});

关于ionic-framework - 如何在测试中模拟ionBlur，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61998086/