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

Posted 2023-03-05

【中文标题】Angular 7 组件测试 - 如何验证输入元素值

【英文标题】：Angular 7 component testing - how to verify input element value

【发布时间】：2019-07-24 22:46:24

【问题描述】：

我将现有的工作应用程序从 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">

现在“Test”的值似乎来自属性 ng-reflect-model。我可以通过执行以下操作来验证属性值：

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

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

【参考方案1】：

el.value 看起来不错。试试：

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