Angular单元测试失败：绑定到服务属性的NgModel数据未更新

我有一个LoginPageComponent，其email和password字段通过NgModel绑定到LoginServices的loginInfo属性。Login按钮会在loginInfo.isReadyToSubmit()返回false（邮箱或密码为空）时禁用。

在LoginPageComponent的单元测试中，我需要验证当loginInfo.isReadyToSubmit()返回true时，Login按钮处于启用状态。

我尝试了dispatchEvent()、detectChanges()和fixture.whenStable().then()，但均未生效。请问该如何解决？也欢迎对我的代码其他方面提出修正建议。

相关代码 #

LoginPageComponent #

export class LoginPageComponent {
  constructor(
    protected loginServices: LoginServices,
    private router: Router,
    private toastServices: ToastServices
  ) {}
protected loginInfo: LoginInfo = this.loginServices.loginInfo;
}

LoginPageComponent HTML #

<div class="route-container">
  <spinner [isDisplayed]="loginServices.isLoggingIn()" />

  <form #loginForm="ngForm" (ngSubmit)="onSubmit()">
    <label>
      Email <br />
      <input type="email" [(ngModel)]="loginInfo.email" name="email" />
    </label>
    <br /><br />
    <label>
      Password <br />
      <input type="password" [(ngModel)]="loginInfo.password" name="password" />
    </label>
    <br /><br />
    <div class="center">
      <button
        type="submit"
        [disabled]="!loginInfo.isReadyToSubmit() || loginServices.isLoggingIn()"
      >
        Login
      </button>
    </div>
  </form>
</div>

LoginServices #

export class LoginServices {
  constructor(private http: HttpClient) {}
  public loginInfo: LoginInfo = new LoginInfo('', '');
}

LoginInfo #

export class LoginInfo {
  constructor(public email: string, public password: string) {}

  public isReadyToSubmit(): boolean {
    return this.email !== '' && this.password !== '';
  }
}

LoginPageComponent 测试代码 #

describe('LoginPageComponent', () => {
  let component: LoginPageComponent;
  let fixture: ComponentFixture<LoginPageComponent>;
  let emailInput: HTMLInputElement;
  let passwordInput: HTMLInputElement;
  let loginButton: HTMLButtonElement;
  let loginServices: LoginServices;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        HttpClientModule,
        ToastrModule.forRoot(),
        MatProgressSpinnerModule,
      ],
      declarations: [NgModel, NgForm, SpinnerComponent, LoginPageComponent],
      providers: [{ provide: LoginServices }],
    }).compileComponents();

    fixture = TestBed.createComponent(LoginPageComponent);
    component = fixture.componentInstance;
    loginServices = TestBed.inject(LoginServices);
    fixture.detectChanges();

    const nativeElement: HTMLElement = fixture.nativeElement;
    emailInput = nativeElement.querySelector('input[name="email"]')!;
    passwordInput = nativeElement.querySelector('input[name="password"]')!;
    loginButton = nativeElement.querySelector('button')!;
  });

it('should enable Login button when there are email and password inputs', async () => {
    const data = {
      email: 'abc@gmail.com',
      password: '123',
    };

    emailInput.value = data.email;
    emailInput.dispatchEvent(new Event('input'));
    fixture.detectChanges();

    passwordInput.value = data.password;
    passwordInput.dispatchEvent(new Event('input'));
    fixture.detectChanges();

    fixture.whenStable().then(() => {
      
      expect(loginButton.disabled).toBeFalse();
    });
  });
});

解决方案 #

测试不生效的核心原因有两个：

1. 使用fixture.whenStable().then()但未await，导致断言在异步操作完成前就执行了。
2. 按钮禁用条件包含loginServices.isLoggingIn()，但测试中未确保该方法返回false。

修正后的测试代码：

it('should enable Login button when there are email and password inputs', async () => {
  const data = {
    email: 'abc@gmail.com',
    password: '123',
  };

  // Mock isLoggingIn方法，确保返回false
  spyOn(loginServices, 'isLoggingIn').and.returnValue(false);

  // 给输入框赋值并触发input事件
  emailInput.value = data.email;
  emailInput.dispatchEvent(new Event('input'));
  passwordInput.value = data.password;
  passwordInput.dispatchEvent(new Event('input'));

  // 触发变更检测并等待异步操作完成
  fixture.detectChanges();
  await fixture.whenStable();

  // 执行断言
  expect(loginButton.disabled).toBeFalse();
});

注意：如果LoginServices中未实现isLoggingIn()方法，需要先补充该方法，否则模板会抛出错误导致按钮状态异常。

代码优化建议 #

• 属性封装优化：loginInfo设为protected无必要，可直接通过loginServices访问，避免冗余属性。
• 表单验证增强：仅判断字段非空不够完善，建议给输入框添加required、email等Angular内置验证器，提升前端校验能力。
• 测试健壮性提升：避免使用!强制断言DOM元素存在，可先判断元素非空：

  emailInput = nativeElement.querySelector('input[name="email"]');
  expect(emailInput).not.toBeNull();
  

• 服务职责优化：LoginServices中直接暴露loginInfo属性让外部修改不符合封装原则，建议添加setEmail()、setPassword()等方法来修改状态。
• 测试代码复用：可把输入框赋值、事件触发的逻辑抽成辅助函数，减少测试代码重复。

内容的提问来源于stack exchange，提问作者Dat Le