Wartość wejściowa testu jednostkowego Angular2

Question

Czytałem oficjalną dokumentację Angular2 do testowania jednostkowego (https://angular.io/docs/ts/latest/guide/testing.html), ale mam problem z ustawieniem wartości pola wejściowego komponentu, aby odzwierciedlić ją we właściwości komponentu (powiązanej przez ngModel). Ekran działa dobrze w przeglądarce, ale w teście jednostki nie mogę ustawić wartości pól.

Używam poniżej kodu. "urządzenie" zostało poprawnie zainicjowane, ponieważ inne testy działają poprawnie. "comp" jest instancją mojego komponentu, a pole wejściowe jest przypisane do "user.username" przez ngModel.

it('should update model...', async(() => { 
    let field: HTMLInputElement = fixture.debugElement.query(By.css('#user')).nativeElement; 
    field.value = 'someValue' 
    field.dispatchEvent(new Event('input')); 
    fixture.detectChanges(); 

    expect(field.textContent).toBe('someValue'); 
    expect(comp.user.username).toBe('someValue'); 
    })); 

Moja wersja Angular2: "@angular/core": "2.0.0"

Answer 1

Wejścia nie mają textContent, tylko wartość. Tak więc expect(field.textContent).toBe('someValue'); jest bezużyteczny. Prawdopodobnie to się nie udaje. Drugie oczekiwanie powinno jednak minąć. Oto pełny test.

@Component({ 
    template: `<input type="text" [(ngModel)]="user.username"/>` 
}) 
class TestComponent { 
    user = { username: 'peeskillet' }; 
} 

describe('component: TestComponent',() => { 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     imports: [FormsModule], 
     declarations: [ TestComponent ] 
    }); 
    }); 

    it('should be ok', async(() => { 
    let fixture = TestBed.createComponent(TestComponent); 
    fixture.detectChanges(); 
    fixture.whenStable().then(() => { 
     let input = fixture.debugElement.query(By.css('input')); 
     let el = input.nativeElement; 

     expect(el.value).toBe('peeskillet'); 

     el.value = 'someValue'; 
     el.dispatchEvent(new Event('input')); 

     expect(fixture.componentInstance.user.username).toBe('someValue'); 
    }); 
    })); 
}); 

Answer 2

Wystarczy dodać

fixture.detectChanges(); 

fixture.whenStable().then(() => { 
    // here your expectation 
}) 

Answer 3

Użyj swojej oczekiwać/dochodzić wewnątrz funkcji whenStable.then tak:

component.label = 'blah'; 
    fixture.detectChanges(); 

    fixture.whenStable().then(() => { 
      expect(component.label).toBe('blah'); 
     }