title: Angular Unit Test - nested async pipes
body: <p>Consider the following code:</p>
  <pre><code>app.component.ts
  
  @Component({
    selector: 'app-component',
    templateUrl: './app-component.html',
    styleUrls: ['./app-component.scss']
  })
  export class AppComponent implements OnInit {
  
    constructor(
      private userService: UserService
    ) { }
  
    ngOnInit() {}
  }
  
  
  app.component.html
  
  &lt;div *ngIf=&quot;userService.isUserLoggedIn$ | async&quot;&gt;
   &lt;span class=&quot;username&quot;&gt;{{(userService.user$ | async)?.name}}&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This is a simplification for one of my components.
  I tried to write a basic unit test:</p>
  <pre><code>  it('should display the username', () =&gt; {
      userService.isUserLoggedIn$ = cold('-a|', {a: true});
      userService.user$ = cold('-a|', {a: {name: 'foo'});
  
      fixture.detectChanges();
      getTestScheduler().flush();
      fixture.detectChanges();
  
  
      const el = fixture.debugElement.query(By.css('.username')).nativeElement as HTMLSpanElement;
      expect(el.innerText.trim()).toBe('foo);
    });
  </code></pre>
  <p>I'm using the jasmine marbles library.</p>
  <p>The problem is that the span doesn't have the correct value, it's always empty.
  I guess is because of the 2 nested async pipes. After the observables are flushed, the ngIf condition becomes true, the span is created and a new subscription for the <strong>user$</strong> is created. But because the observable completed, the span will be empty.</p>
  <p>I'm not sure if this is the correct explanation...</p>
  <p>My question is how should I test this kind of scenario?</p>
  <p>Thanks!</p>