Angular 7 component testing - how to verify input element value

Question

I upgraded an existing working application from Angular 4 to Angular 7.

For an HTML Input such as follows:

<input id="encryptedValue" readonly class="form-control" [ngModel]="Response.encryptedText" size="50" />

Before the upgrade, I can verify an Input element contains desired value by doing:

  const de = fixture.debugElement.query(By.css('#encryptedValue'));
  const el = de.nativeElement;
  expect(el.value).toBe(dummyStr);

After the upgrade, el.value is '' instead of 'Test'

If I do a console.log(el), the following is string is displayed:

<input _ngcontent-c0="" class="form-control ng-untouched ng-pristine ng-valid" id="encryptedValue" readonly="" size="50" ng-reflect-model="Test">

It seems the value 'Test' is now from the attribute ng-reflect-model. I can do verify the attribute value by doing:

expect(el.getAttribute('ng-reflect-model')).toBe('Test');

But is this the correct way of verifying the value of an element in the component view?

Peanuts · Accepted Answer · 2019-03-06 00:18:25Z

2

el.value looks right. Try:

fixture.detectChanges();
fixture.whenStable().then(() => {
  expect(el.value).toBe(dummyVal)
})

answered Mar 6, 2019 at 0:18

Peanuts

3523 silver badges6 bronze badges

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

1 Answer 1