测试期间nativeElement上的ng-reflect与“真实”属性值答案

【问题标题】：ng-reflect vs. 'real' attribute value on nativeElement during testing测试期间nativeElement上的ng-reflect与“真实”属性值
【发布时间】：2018-01-15 08:25:30
【问题描述】：

我尝试使用 karma/jasmine nut 测试 angular4/5 中的自定义输入元素，但我不知道我是否错过了任何东西。

谁能指点我正确的方向？

所以我有一个自定义输入组件，例如：

<div>
  <input class="input-class" [type]="inputType" [required]="required" [disabled]="disabled"          [(ngModel)]="value" (input)="handleChange()" />
  <label>...</label>
</div>

现在我想测试 nativeElement 上的 disabled 属性，例如：

it('can be disabled', () => {
formControl.disable();
    let inputElement = fixture.debugElement.query(By.css('input-element'))
    fixture.detectChanges();
    // works:
    expect(inputElement.attributes.getNamedItem('ng-reflect-is-disabled')).toBeTruthy();
    // works not:
    expect(inputElement.disabled).toBeTruthy();   
    // also doesn't work:
    expect(inputElement.attributes.getNamedItem('disabled')).toBeTruthy();
  });

为什么我可以看到 ng-reflect 属性的变化，但看不到原始属性？我错过了触发生命周期事件的电话吗？我必须使用量角器测试吗？

【问题讨论】：

标签： angular testing karma-jasmine

【解决方案1】：

所以我想通了。

fixture.whenStable().then(() => {
  expect(inputElement().attributes.getNamedItem('disabled')).toBeTruthy();
  expect(inputElement().disabled).toBeTruthy();
});

耍花招。

【讨论】：

如果可以的话，我会给一百个赞。这解决了我被困几个小时的问题。