如何使用 Jasmine /Karma 在 Angular 单元测试中测试 If Else 块

Question

我正在测试一个组件的 ngOnit()，它有 if 和 else 块。 .ts 文件中的代码如下所示

ngOnInit(): void {

this.profileSvc.loggedIn = true;

if (this.profileSvc.loggedIn) {
  this.setVars();
} else {
  this.stopSpinner();
  this.generalMessage = 'Please Log In!';
  this.displayGeneral = true;
}
this.appInsightsService.logPageView('CustomerProfile');

}

我在 .spec.ts 上的测试在这里。对于 if 块：

  it('test ngOnInit()', () =>{
      component.ngOnInit();
      expect(component.profileSvc.loggedIn).toBe(true);
  });
  it('test ngOnInit() when not loggedIn', () =>{
     //(mockprofileService as any).loggedIn = false;
     //spyOn<any>(mockprofileService, 'loggedIn').and.returnValue(false);
     component.profileSvc.loggedIn = false;
     component.ngOnInit();
     expect(component.displayGeneral).toBe(true);
 });

第一个针对 if 块的测试成功了，但是我的第二个针对 else 块的测试失败了。我收到此错误：

Expected false to be true.

我的问题是如何将.profileSvc.loggedIn的值设置为false来测试else块。请帮忙！我真的很感激。另外，如果您能指导我了解 Jamsin 的最佳位置，我将不胜感激。

编辑：profileSvc 是一项服务。我嘲笑它是 mockprofileService

Answer 1

您必须删除 ngOnInit 中将值设置为 true 的行，否则无法测试。

ngOnInit(): void {
   // remove this line !!
  //  this.profileSvc.loggedIn = true;

  if (this.profileSvc.loggedIn) {
    this.setVars();
  } else {
    this.stopSpinner();
    this.generalMessage = 'Please Log In!';
    this.displayGeneral = true;
  }
  this.appInsightsService.logPageView('CustomerProfile');
}

 it('should call setVars if user is logged in', () => {
      (mockprofileService as any).loggedIn = true;
      const setVarsSpy = spyOn(component, 'setVars');
      component.ngOnInit();
      expect(setVarsSpy).toHaveBeenCalled();
  });
  it('should stop the spinner and set the message if user is not logged in', () =>{
     (mockprofileService as any).loggedIn = false;
     const stopSpinnerSpy = spyOn(component, 'stopSpinner');
     component.ngOnInit();
     expect(stopSpinnerSpy).toHaveBeenCalled();
     expect(component.generalMessage).toBe('Please Log In!');
     expect(component.displayGeneral).toBe(true);  
 })

如何使用 Jasmine /Karma 在 Angular 单元测试中测试 If Else 块

How to test If Else block in Angular Unit Testing using Jasmine /Karma

angular

unit-testing

jasmine

karma-jasmine