Angular 7组件测试 - 如何验证输入元素值

Question

我将现有的工作应用程序从Angular 4升级到Angular 7。

对于HTML输入，如下所示：

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

在升级之前，我可以通过执行以下操作来验证Input元素是否包含所需的值：

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

升级后，el.value是''而不是'Test'

如果我执行console.log(el)，则显示以下字符串：

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

现在似乎价值'测试'来自属性ng-reflect-model。我可以通过执行以下操作来验证属性值：

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

但这是验证组件视图中元素值的正确方法吗？

Answer 1

el.value看起来正确。尝试：

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