Question

我有一个如下所示的登录页面表单-

<form class="login-form" #loginForm="ngForm">  
  <input [(ngModel)]="login.username" required="true" type="text" id="username" name="username"/>
  <button [disabled]="!loginForm.form.valid" label="Login" class="btn-login" type="submit">Login</button>
</form>

现在是用于检查“登录”按钮的禁用/启用状态的测试用例-

describe('Login button status', () => {
  let loginBtn, userInputElm;
  beforeEach(() => {
    loginBtn = fixture.nativeElement.querySelector('.btn-login');
    userInputElm = fixture.nativeElement.querySelector('input#username');
    fixture.detectChanges();
  });

  it('should be enabled if "username" is provided', () => {
    userInputElm.value = 'validusername';
    // component.login.username = 'validuser'; <-- also tried this
    fixture.detectChanges();
    // loginBtn = fixture.nativeElement.querySelector('.btn-login'); <-- tried this (same result)
    // button should be enabled
    expect(loginBtn.disabled).toBe(false); <-- Button still remains disabled
  });
});

因为，#username字段的更改未通知角度，它也不更改登录按钮的状态。我该怎么做才能成功测试呢？需要将更改通知Angular。

我已经将FormsModule导入了TestBed配置模块中。

我知道我可以使用Angular FormGroup以Angular的方式进行操作，但是我想尽可能保持表格的格式。

Answer 1

尝试一下。您应该在输入字段上触发change event programmatically。

it('should be enabled if "username" is provided', () => {
    userInputElm.value = 'validusername';
    userInputElm.dispatchEvent(new Event('input'));
    fixture.detectChanges();

    // button should be enabled
    expect(loginBtn.disabled).toBe(false);
});

测试AngForm的ngForm形式

1 个答案: