测试:模糊模拟

Question

我想用输入测试简单的角度分量。

因此，底部的示例几乎没有为测试做准备，并且在组件中应该test模糊功能发生，该功能显示日志，但我在控制台中没有日志。我尝试了 2 种情况：获取div 本机元素并单击它并使用blur()函数输入本机元素。在角度应用程序中，模糊成功发生，但在测试中不起作用。我该如何解决它？

@Component({
  template: '<div><input [(ngModel)]="str" (blur)="testFunc($event)" /></div>'
})
class TestHostComponent {
  it: string = '';
  testFunc = () => {
    console.log('blur!!!');
  }
}
describe('blur test', () => {
  let component: TestHostComponent;
  let fixture: ComponentFixture<TestHostComponent>;
  let de: DebugElement;
  let inputEl: DebugElement;
  beforeEach(() => { /* component configuration, imports... */ }
  beforeEach(() => {
    fixture = TestBed.createComponent(TestHostComponent);
    component = fixture.componentInstance;
    de = fixture.debugElement;
    inputEl = fixture.debugElement.query(By.css('input'));
    fixture.detectChanges();
  })
  it('test', async(() => {
    const inp = inputEl.nativeElement;
    inp.value = 123;
    inp.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    expect(component.it).toEqual('123');
    inp.blur();
    const divEl = fixture.debugElement.query(By.css('div'));
    divEl.nativeElement.click();
  }))
}

Answer 1

您可以使用

dispatchEvent来模拟模糊：

inp.dispatchEvent(new Event('blur'));

Answer 2

使用

dispatchFakeEvent(inp, 'blur');

这是调度假事件：

export function createFakeEvent(type: string) {
 const event = document.createEvent('Event');
 event.initEvent(type, true, true);
 return event;
}
export function dispatchFakeEvent(node: Node | Window, type: string) 
{
  node.dispatchEvent(createFakeEvent(type));
}