如何以角度对 BehaviorSubject 订阅进行单元测试答案

【问题标题】：how to unit test subscription to a BehaviourSubject in angular如何以角度对 BehaviorSubject 订阅进行单元测试
【发布时间】：2018-12-21 03:06:22
【问题描述】：

我有一个UserManagementService，它暴露了Observable 的BehaviourSubject。

this.userSignInState$ = this.signInStateSubject.asObservable();

我在nav 组件中订阅了userSignInState。

constructor(public userManagementService: UserManagementService, private fb:FormBuilder, private helper:HelperService) {
    this.userSignInStateSubscription = this.userManagementService.userSignInState$.subscribe(
          (result:Result)=> {
            console.log("In nav - result from user signin state ",result);
            let subscribed:UserSigninState = result.additionalInfo;
            console.log("new user signin state received:", subscribed);
            this.userLoggedIn = subscribed.isSignedIn;
            if(subscribed.isSignedIn && subscribed['additional-info'] !== ''){
              this.profile = JSON.parse(subscribed['additional-info']) as UserProfileAPI
            }
            if(!subscribed.isSignedIn && subscribed['additional-info'] !== ''){
            //  let error:ServerResponseAPI = JSON.parse(subscribed['additional-info']) as ServerResponseAPI
              //let errorMessage:string = this.helper.userFriendlyErrorMessage(error);
              this.navEvent.emit(new NavContext(subscribed['additional-info']));
            }
          },
        (error:ServerResponseAPI)=>{
            console.log("got error from the Observable: ",error);

           let errorMessage:string = this.helper.userFriendlyErrorMessage(error);
           this.navEvent.emit(new NavContext(errorMessage));
    //       this.userloggedIn =false;
      },
      ()=>{ //observable complete
        console.log("observable completed")
        //this.userloggedIn =false;
      });
  }

我想对nav 进行单元测试。 spec 应该测试component 订阅userSignInState$ 并正确处理Result。我该怎么做呢？由于这是一个单元测试，我不想使用真正的UserManagementService

我写了以下规范

fit('should subscribe to user sign in state observable',()=>{
    let userManagementService = TestBed.get(UserManagementService);
    let navComponent:NavComponentComponent = component;
    console.log('component is ',navComponent);
    navComponent.userLoggedIn = false;
    let dummyUserProfile = new UserProfileAPI(new User('fn','ln','test@test.com'));
    userManagementService.signInStateSubject.next(new Result('success',(new UserSigninState(true,JSON.stringify(dummyUserProfile ))).toString));
    expect(navComponent.userLoggedIn).toBe(true)
  });

但我收到错误Expected undefined to be true.

我不明白为什么 userLoggedIn 未定义。我已经在nav 类中声明了它

export class NavComponentComponent implements OnInit  {

  userLoggedIn:boolean;
...
}

我把它设置在ngOnInit。

ngOnInit(){

    this.userLoggedIn = false;
  ...
}

我还将订阅逻辑移到了ngOnInit，但这也不起作用并且给出了相同的结果。

【问题讨论】：

标签： angular6 angular-test

【解决方案1】：

问题在于我创建 Result 的方式。我不应该将.toString 与userSignInState 一起使用。从我在SO 中发布的另一个问题来看，“对不带 () 的 .toString 的引用只是对该函数的引用，因此，如果您记录下来，您将获得该函数的代码。”此外，“toString() 将不起作用，因为 userSignInState 没有有意义的字符串表示，并且默认为 [object Object]”。我删除了toString，代码作为additional-info 的类型是any

【讨论】：