unit-testing - 测试按钮是否被禁用

Question

我有一个带有 2 个输入框和一个提交按钮的简单表单。

<div class="login jumbotron center-block">
  <h1>Login</h1>

  <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">

    <div class="form-group">
      <label for="username">Username</label>
      <input type="text" class="form-control" formControlName="username" name="username" placeholder="Username" required>
      <div *ngIf="formErrors.username" class="alert alert-danger"> {{ formErrors.username }}  </div>
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control" formControlName="password" name="password" placeholder="Password" required>
      <div *ngIf="formErrors.password" class="alert alert-danger"> {{ formErrors.password }}  </div>
    </div>

    <button type="submit" class="btn btn-default" [disabled]="!loginForm.valid" >Submit</button>
  </form>
</div>

现在当 2 个输入框为空时，提交按钮应该被禁用。
从视觉上看，这一切都按预期工作，但我也想在我的单元测试中介绍这一点。

下面是我如何尝试检查按钮元素是否被禁用的缩短示例。不过好像 page.submitBtnEl.disabled由于某种原因，属性始终为真。

let InvalidUser = new User({
  username: '',
  password: ''
});

it('form validity should be False when entering invalid credentials', 
fakeAsync(() => {
    updateForm( InvalidUser );
    expect( page.submitBtnEl.disabled ).toBeTruthy("submit button is disabled");
    expect(comp.loginForm.valid).toBeFalsy();
  })); 

Answer 1

添加 fixture.detectChanges()在查询元素并进行断言之前调用。

it('should  be disabled when comment is empty', () => {
  updateForm( InvalidUser );

  fixture.detectChanges() // <-- add this to update the view

  submitBtn = fixture.debugElement.query(By.css('button.btn-default'));

  // this asserts that button matches <button disabled>Hello</button>    
  expect(submitBtn.nativeElement.getAttribute('disabled')).toEqual('');

  // this asserts that button matches <button>Hello</button>          
  expect(submitBtn.nativeElement.getAttribute('disabled')).toEqual(null);
});

快乐编码!