角度单元测试-嵌套异步管道

问题描述

考虑以下代码：

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

<div *ngIf="userService.isUserLoggedIn$ | async">
 <span class="username">{{(userService.user$ | async)?.name}}</span>
</div>

这是我的组件之一的简化​​。 我试图编写一个基本的单元测试：

  it('should display the username',() => {
    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);
  });

我正在使用茉莉大理石弹库。

问题是范围没有正确的值，它始终为空。 我猜是因为有2个嵌套的异步管道。刷新可观察对象之后，ngIf条件变为true，将创建跨度并为 user $ 创建新的订阅。但是，由于可观察值已完成，因此跨度将为空。

我不确定这是否是正确的解释...

我的问题是我应该如何测试这种情况？

谢谢！

解决方法

在userService.isUserLoggedIn$ = cold('-a|',{a: true});之后定义userService.user$ = cold('-a|',{a: {name: 'foo'});和TestBed.configureTestingModule为时已晚。这些值已经被注入，并且isUserLoggedIn$和user$是“静态”值。将它们设置在较晚的时间点并不能告诉观察到的序列进行更新（没有排放发生）。

模拟userService时，请将isUserLoggedIn$和user$附加在TestBed.configureTestingModule之前。