Angular2 Component: Testowanie zmiany wartości wejściowej formularza

Question

Mam wpis tekstowy i słucham zmian.

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> 

Uruchamianie aplikacji wszystko działa poprawnie, ale chcę jednostkowej przetestować.

Więc oto co próbowałem

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 nie powiedzie się jako metoda .search() nie nazywa.

Chyba muszę ustawić value w inny sposób, aby test zdał sobie sprawę z tej zmiany, ale ja naprawdę nie wiem jak.

Ktoś ma pomysły?

Answer 1

To może być trochę późno, ale wydaje się, że kod nie jest dysponowanie input zdarzenie po ustawieniu wartości elementu wejściowego:

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

Updating input html field from within an Angular 2 test

Answer 2

Wyzwalanie Zmiana wartości FormControl jest tak proste, jako:

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