testing: Angular 7 component testing - how to verify input element value

dimanche 3 mars 2019

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:

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?

testing