Karma Jasmine 具有可观察性，代码覆盖率未完全覆盖

Question

我尝试为 ngOnInit 做一些单元测试，我使用 jasmine/karma 作为单元测试套件。 我有一个看起来像这个组件的：

  hasQuestionTree: boolean;

constructor(
    private breakpointObserver: BreakpointObserver,
    private authService: AuthService,
    private sidebarService: SidebarService
  ) {}

  ngOnInit() {
    this.loginStatusSubscription = this.authService
      .loginStatus()
      .subscribe(user => {
        this.isLoggedIn = this.authService.isLoggedIn(user);
      });
    this.hasQuestionTree = this.sidebarService.sidebar;
    this.sidebarService
      .hasSidebar()
      .subscribe(hasSidebar => (this.hasQuestionTree = hasSidebar));
  }

侧边栏服务如下所示：

xport class SidebarService {
  private _sidebar = false;

  public sidebarObservable: Observable<boolean>;
  public sidebarSubject = new ReplaySubject<boolean>(1);

  constructor() {
    this.sidebarObservable = this.sidebarSubject.asObservable();
  }

  public get sidebar(): boolean {
    return this._sidebar;
  }

  public hasSidebar(): Observable<boolean> {
    // this.sidebarSubject.next(this.sidebar);
    return this.sidebarObservable;
  }

  public setSidebar(has: boolean) {
    this._sidebar = has;
    this.sidebarSubject.next(has);
  }

我有这样的单元测试：

describe('MainNavComponent', () => {
  let component: MainNavComponent;
  let fixture: ComponentFixture<MainNavComponent>;
  const fakeSidebar = {
    sidebarState: of({ sidebar: false }),
  };

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [NoopAnimationsModule, AppModule],
      providers: [{ provide: AuthService, useClass: AuthMockService },
         { provide: SidebarService, useValue: fakeSidebar }]
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(MainNavComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });
  }));

  it('should compile', () => {
    expect(component).toBeTruthy();
  });

  it('should isLoggedIn to true', () => {

    //Act
    component.login();
    // Assert
     expect(component.isLoggedIn).toBeTruthy();
  });

  it('should isLoggedOut to true', () => {
    //Act
    component.logout();

    //Assert
    expect(component.isLoggedIn).toBeFalsy();
    expect(component.logout).toBeTruthy();
  });

  it('Should show the sidebar when hasQuestionTree is true', () => {
    expect(component.hasQuestionTree).toEqual(false);
  });


});

但这部分：

hasSidebar => (this.hasQuestionTree = hasSidebar));

在代码覆盖率中仍然是红色的。

所以我的问题是，如何以正确的方式测试该部分？

谢谢你。

好吧，我现在是这样的：

 const fakeSidebar = {
    hasSidebar: () => of({ sidebar: false }),
  };

和这个：

  it('Should show the sidebar when hasQuestionTree is true', () => {
    expect(component.hasQuestionTree).toEqual(true);
  });

但我收到此错误：

MainNavComponent Should show the sidebar when hasQuestionTree is true
Expected Object({ sidebar: false }) to equal true.

Answer 1

可能是我想的东西，但你在呼唤hasSidebar()上this.sidebarService设置有fakeSidebar ，但这个对象实际上没有定义hasSidebar方法？ 对我来说，你的模拟对象看起来应该是这样的：

const fakeSidebar = {
    hasSidebar: () => of(true),
  };

使用of运算符也会导致同步 observable，因此应该不需要任何async助手，但您可能希望通过使用observeOn运算符并传递asyncScheduler来模拟现实世界的行为来改变它？！

---

也更新了这个答案，但我实际上不明白你的测试目的。 您只是在测试模拟方法是否返回指定的值？？