测试：模糊模拟

Question

我想用输入测试简单的角度组件。

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

@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');

这是dispatchFakeEvent：

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));
}