Angular 2 Testing: Get Value from ngModel

Question

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'); 
});

What error are you getting?

Malwaregeek
– Malwaregeek

2017-03-23 18:24:28 +00:00
Commented Mar 23, 2017 at 18:24 — Malwaregeek
– Malwaregeek, Commented Mar 23, 2017 at 18:24

yurzui · Accepted Answer · 2017-03-24 05:25:05Z

8

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],
    ...

edited Mar 24, 2017 at 5:25

answered Mar 23, 2017 at 18:32

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ChaseHardin Over a year ago

Thanks for the reply. Unfortunately, this doesn't resolve my problem. The .value is returning an empty string. If I log it at the [name=customerName] div input level, I get <input asinline="" class="form-control" disabled="" type="text">. I've verified, and my component has the correct data. Any other thoughts?

ChaseHardin Over a year ago

I've got it working, needed to add the imports: [FormsModule] to my beforeEach Thank you!

Collectives™ on Stack Overflow

Angular 2 Testing: Get Value from ngModel

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related