Testen: Unschärfe emulieren

Question

Ich möchte einfache Winkelkomponente mit Eingabe testen.

Also ein Beispiel in der Unterseite hat wenig Vorbereitung für den Test, und in einer Komponente sollte test Funktion auf Unschärfe auftreten, die log zeigt, aber ich habe keine Protokolle in der Konsole. Ich habe 2 Fälle ausprobiert: div natives Element erhalten und darauf klicken und blur() Funktion für Eingabe natives Element verwenden. In eckigen App Blur erfolgreich auftreten, aber es funktioniert nicht im Test. Wie kann ich es reparieren?

@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

Verwenden

dispatchFakeEvent(inp, 'blur'); 

und hier ist 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)); 
}