angular - 测试期间 ng-reflect 与 nativeElement 上的 'real' 属性值

Question

我尝试使用 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 属性上看到更改，但在原始属性上看不到？我会错过触发生命周期事件的电话吗？我必须使用 Protractor 测试吗？

Answer 1

所以我想通了。

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

变戏法。