Angular 4/5 RestService密码验证函数异步执行导致测试失败问题

嘿，这个问题我太熟了——典型的异步操作未正确处理导致的同步返回陷阱！你的密码验证函数里发起的数据库请求是异步的，但函数本身没有等待异步结果就先返回了undefined，等请求完成时，测试的分支判断早就执行完了，自然会走到else分支。

问题根源 #

你原来的函数大概是这种错误写法（模拟示例）：

validatePassword(oldPassword: string): boolean {
  // HTTP请求是异步的，subscribe回调里的return不会影响函数返回值
  this.restService.post('/validate-password', { password: oldPassword }).subscribe(response => {
    return response.valid;
  });
  // 函数无同步返回值，默认返回undefined
}

异步请求的结果只会在subscribe回调里拿到，但函数本身已经先返回了undefined，测试代码调用时立刻拿到这个值，直接进入else分支，等后续异步结果回来时已经晚了。

解决方案：让函数返回异步类型（Observable/Promise） #

Angular的HTTP请求本身返回的是Observable，我们可以直接把这个Observable返回出去，让调用者（包括测试代码）等待异步结果：

1. 修改密码验证函数

import { map } from 'rxjs/operators';

validatePassword(oldPassword: string): Observable<boolean> {
  return this.restService.post('/validate-password', { password: oldPassword }).pipe(
    // 把响应数据映射成我们需要的布尔值
    map(response => response.valid)
  );
}

2. 在测试中正确等待异步结果

Angular测试提供了两种常用方式处理异步操作：

方式一：使用fakeAsync + tick

import { fakeAsync, tick } from '@angular/core/testing';

it('should return true when password is valid', fakeAsync(() => {
  let validationResult: boolean | undefined;

  // 订阅Observable，把结果存到变量里
  component.validatePassword('correct-old-password').subscribe(result => {
    validationResult = result;
  });

  // tick()模拟时间流逝，让异步请求完成
  tick();

  // 现在可以拿到正确结果做断言
  expect(validationResult).toBe(true);
}));

方式二：使用async + await（结合toPromise）

it('should return false when password is invalid', async () => {
  // 把Observable转成Promise，用await等待结果
  const validationResult = await component.validatePassword('wrong-old-password').toPromise();

  expect(validationResult).toBe(false);
});

3. 组件中调用时的正确姿势

如果在组件里调用这个函数，也不能同步获取返回值，要通过订阅处理结果：

onUpdatePassword() {
  this.validatePassword(this.form.value.oldPassword).subscribe(isValid => {
    if (isValid) {
      // 密码验证通过，执行更新操作
      this.restService.updatePassword(this.form.value.newPassword).subscribe(() => {
        // 更新成功逻辑
      });
    } else {
      // 密码验证失败，提示用户
      this.errorMessage = '旧密码不正确';
    }
  });
}

这样不管是测试还是业务代码，都能正确等待数据库请求完成后再处理结果，就不会出现先返回undefined的问题了。

内容的提问来源于stack exchange，提问作者Giovanni Dias