angular - 测试: blur emulate

Question

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

因此，底部的示例几乎没有为测试做准备，并且在组件中应该出现模糊的 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'));