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

Question

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

对于如下所示的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">

似乎“ 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)
})