时间戳

首页 > 解决方案 > 如何在测试中模拟 ionBlur

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

问题描述

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

<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 .../>没有创建本机

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

标签： ionic-frameworkionic4

解决方案

如果您添加一个选择器来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();
});

推荐阅读