Angular 2 testing mit ngModel und ngModelChange

Question

Ich versuche, eine Wrapper-Komponente um eine Texteingabe zu testen.

Meine Komponente sieht wie folgt aus:

@Component({ 
selector: 'my-textbox', 
inputs: ['inputModel', 'label'], 
outputs: ['inputModelChange'],  
template: ` 

    <div ngForm class="field"> 
     <label>{{ label }}</label>    
     <input type="text" ngControl="{{ control }}" #item="ngForm" [ngModel]="inputModel" (ngModelChange)="setTextValue($event)"> 
    </div> 
    ` 
}) 

export class IslTextboxComponent { 

control; 
inputModel: Object; 
inputModelChange: EventEmitter<any> = new EventEmitter(); 
label: string; 

constructor() { 
    this.control = 'text'+ Math.floor(Math.random()*11); 
} 

setTextValue(newValue): void { 
    this.inputModel = newValue; 
    this.inputModelChange.emit(newValue); 
} 
} 

Und hier ist mein Test:

describe('My Textbox Component',() => { 

it('should show modify input model', 
    injectAsync([TestComponentBuilder], (tcb) => { 
     return tcb 
      .createAsync(MyTextboxComponent) 
      .then((fixture) => { 

       let nativeElement = fixture.nativeElement; 

       fixture.detectChanges();     

       let input = nativeElement.querySelector('input'); 

       input.value = 'VALUE_TO_TEST'; 

       //??? 
       input.dispatchEvent(new Event('input'));      

       fixture.detectChanges();         

       expect(nativeElement.inputModel).toBe('VALUE_TO_TEST'); 

      }); 
    })); 

}); 

Ich möchte die Eingabe von Text in das Textfeld und haben die inputModel selbst aktualisieren, aber das Ereignis nicht zu sein gefeuert. Wie kann ich das ngModelChange-Ereignis auslösen? Das InputModel wird nie aktualisiert ...

Answer 1

let input = nativeElement.querySelector('input'); 
input.value = 'VALUE_TO_TEST'; 
let evt = document.createEvent('Event'); 
evt.initEvent('input', true, false); 
setTimeout(expect(x).ToBe(z),1000); 

Sie waren fast da.

• Die setTimeout ist über die Change-Detection eine Sekunde zu bekommen. (Kann später reduziert werden).
• createEvent übernimmt den EventInterface-Name als Parameter und initEvent definiert ihn. "Event" ist das einfachste ohne Payload.
• changeDetection muss nicht manuell nach der Eingabe ausgelöst werden, da Sie ein Ereignis in der Ansicht auslösen.