Angular 测试：模糊模拟

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

因此，底部的一个示例对测试几乎没有准备，在一个组件中，应该出现blur上的

test

函数，它显示日志，但我在控制台中没有日志。我尝试了两种情况：获取div native元素并单击它，然后对输入native元素使用

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

@组件({
模板：“”
})
类TestHostComponent{
it:string=''；
testFunc=（）=>{
log（'blur！！！'）；
}
}
描述（'模糊测试'，（）=>{
let组件：TestHostComponent；
let夹具：组件夹具；
设de:DebugElement；
let inputEl:DebugElement；
在每个（（）=>{/*组件配置之前，导入…*/}
在每个之前（（）=>{
fixture=TestBed.createComponent（TestHostComponent）；
组件=fixture.componentInstance；
de=fixture.debugElement；
inputEl=fixture.debugElement.query（By.css（'input'））；
fixture.detectChanges（）；
})
它（'test'，异步（（）=>{
常量inp=inputEl.nativeElement；
inp.value=123；
输入dispatchEvent（新事件（“输入”）；
fixture.detectChanges（）；
expect（component.it）.toEqual（'123'）；
inp.blur（）；
const divEl=fixture.debugElement.query（By.css（'div'））；
divEl.nativeElement.click（）；
}))
}

使用

这里是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));
}

---

您可以使用

dispatchEvent

模拟模糊：

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

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