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來模擬現實世界的行為來改變它？！

---

也更新了這個答案，但我實際上不明白你的測試目的。 您只是在測試模擬方法是否返回指定的值？？