Componente Angular2: modifica del valore di input del modulo di test

Question

Ho un input di testo e sto ascoltando le modifiche.

mycomponent.ts

ngOnInit() { 
    this.searchInput = new Control(); 
    this.searchInput.valueChanges 
     .distinctUntilChanged() 
     .subscribe(newValue => this.search(newValue)) 
} 
search(query) { 
    // do something to search 
} 

mycomponent.html

<search-box> 
    <input type="text" [ngFormControl]="searchInput" > 
</search-box> 

Esecuzione dell'applicazione tutto funziona bene, ma voglio unità di testarlo.

Così qui è quello che ho provato

mycomponent.spec.ts

beforeEach(done => { 
    createComponent().then(fix => { 
     cmpFixture = fix 
     mockResponse() 
     instance = cmpFixture.componentInstance 
     cmpFixture.detectChanges(); 
     done(); 
    }) 
}) 
describe('on searching on the list',() => { 
     let compiled, input 
     beforeEach(() => { 
      cmpFixture.detectChanges(); 
      compiled = cmpFixture.debugElement.nativeElement; 
      spyOn(instance, 'search').and.callThrough() 
      input = compiled.querySelector('search-box > input') 
      input.value = 'fake-search-query' 
      cmpFixture.detectChanges(); 
     }) 
     it('should call the .search() method',() => { 
      expect(instance.search).toHaveBeenCalled() 
     }) 
    }) 

test fallisce come il metodo .search() non viene chiamato.

Suppongo di dover impostare lo value in un altro modo per fare in modo che il test si accorga del cambiamento, ma in realtà non so come.

Qualcuno ha idee?

Answer 1

Potrebbe essere un po 'in ritardo, ma sembra che il codice non sta inviando input evento dopo aver impostato il valore elemento di input:

// ...  
input.value = 'fake-search-query'; 
input.dispatchEvent(new Event('input')); 
cmpFixture.detectChanges(); 
// ... 

Updating input html field from within an Angular 2 test

Answer 2

Attivazione della modifica del valore di FormControl è così semplice come:

cmpFixture.debugElement.componentInstance.searchInput.setValue(newValue);