title: how to unit test subscription to a BehaviourSubject in angular
body: <p>I have a <code>UserManagementService</code> which exposes an <code>Observable</code> of a <code>BehaviourSubject</code>. </p>
  
  <pre><code>this.userSignInState$ = this.signInStateSubject.asObservable();
  </code></pre>
  
  <p>I subscribe to <code>userSignInState</code> in a <code>nav</code> component. </p>
  
  <pre><code>constructor(public userManagementService: UserManagementService, private fb:FormBuilder, private helper:HelperService) {
      this.userSignInStateSubscription = this.userManagementService.userSignInState$.subscribe(
            (result:Result)=&gt; {
              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 &amp;&amp; subscribed['additional-info'] !== ''){
                this.profile = JSON.parse(subscribed['additional-info']) as UserProfileAPI
              }
              if(!subscribed.isSignedIn &amp;&amp; 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)=&gt;{
              console.log("got error from the Observable: ",error);
  
             let errorMessage:string = this.helper.userFriendlyErrorMessage(error);
             this.navEvent.emit(new NavContext(errorMessage));
      //       this.userloggedIn =false;
        },
        ()=&gt;{ //observable complete
          console.log("observable completed")
          //this.userloggedIn =false;
        });
    }
  </code></pre>
  
  <p>I want to unit test <code>nav</code>. The <code>spec</code> should test that the <code>component</code> subscribes to <code>userSignInState$</code> and handles <code>Result</code> correctly. How do I do this? As this is a unit test, I don't want to use the real <code>UserManagementService</code> </p>
  
  <p>I wrote the following spec </p>
  
  <pre><code>fit('should subscribe to user sign in state observable',()=&gt;{
      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)
    });
  </code></pre>
  
  <p>but I got error <code>Expected undefined to be true.</code></p>
  
  <p>I don't understand why <code>userLoggedIn</code> is undefined. I have declared it in the <code>nav</code> class</p>
  
  <pre><code>export class NavComponentComponent implements OnInit  {
  
    userLoggedIn:boolean;
  ...
  }
  </code></pre>
  
  <p>I set it in <code>ngOnInit</code>.</p>
  
  <pre><code>ngOnInit(){
  
      this.userLoggedIn = false;
    ...
  }
  </code></pre>
  
  <p>I also moved the subscription logic to <code>ngOnInit</code> but that doesn't work either and gives the same result.</p>