I'm trying to write a test that asserts on Angular's ngModel
attribute. At this point, I can easily test the label. However, I am not able to select the value from ngModel
Question What is the best way to get the value from ngModel
?
HTML:
<div name="customerName">
<label>Customer Name: </label>
<div>
<input type="text" class="form-control" [ngModel]="customer.name" asInline disabled />
</div>
</div>
Test
it('bindings', () => {
fixture = TestBed.createComponent(CustomerComponent);
fixture.detectChanges();
// this works
expect(fixture.debugElement.nativeElement.querySelector('[name=customerName] label').textContent).toEqual('Customer Name: ');
// this assert fails
expect(fixture.debugElement.nativeElement.querySelector('[name=customerName] div input').value).toEqual('Bobby Tables');
});
Use async
together with whenStable
it('should recognize a timepicker', async(() => {
fixture = TestBed.createComponent(ExampleComponent);
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(fixture.debugElement.nativeElement.querySelector('[name=customerName] label').textContent).toEqual('Customer Name: ');
expect(fixture.debugElement.nativeElement.querySelector('[name=customerName] div input').value).toEqual('Bobby Tables');
});
}));
Plunker Example
or fakeAsync
with tick
:
it('should recognize a timepicker', fakeAsync(() => {
fixture = TestBed.createComponent(ExampleComponent);
fixture.detectChanges();
tick();
expect(fixture.debugElement.nativeElement.querySelector('[name=customerName] label').textContent).toEqual('Customer Name: ');
expect(fixture.debugElement.nativeElement.querySelector('[name=customerName] div input').value).toEqual('Bobby Tables');
}));
Plunker Example
And don't forget to import FormsModule
:
TestBed.configureTestingModule({
imports: [FormsModule],
...