如何使用 Jasmine 对 OidcSecurityService.checkAuth 函数进行单元测试？答案

【问题标题】：How to unit testing OidcSecurityService.checkAuth function with Jasmine?如何使用 Jasmine 对 OidcSecurityService.checkAuth 函数进行单元测试？
【发布时间】：2021-01-29 15:35:06
【问题描述】：

我在 Angular 中使用 Jasmine 进行单元测试。我正在使用 OidcSecurityService 服务来确保安全。现在我想对这部分进行单元测试以实现自动登录：

export class AppComponent implements OnInit {
  title = 'cityflows-client';
  constructor(public oidcSecurityService: OidcSecurityService, private router: Router, public platform: Platform) {}

  ngOnInit() {
    this.oidcSecurityService
      .checkAuth()

      .subscribe(isAuthenticated => {
        if (!isAuthenticated) {
          if ('/autologin' !== window.location.pathname) {
            this.write('redirect', window.location.pathname);
            this.router.navigate(['/autologin']);
          }
        }
        if (isAuthenticated) {
          this.navigateToStoredEndpoint();
        }
      });
  }

所以单元测试看起来像这样：

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      providers:    [ {provide: OidcSecurityService, useClass: OidcSecurityServiceStub} ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create the app', () => {
    expect(component).toBeTruthy();
  }); 
});

存根看起来像这样：

export class OidcSecurityServiceStub {
  getToken() {
    return 'some_token_eVbnasdQ324';
  }

  checkAuth(url: string) {
    return of(url);
  }

  authorize(authOptions?: AuthOptions) {
    if (authOptions) {
      return authOptions.urlHandler('http://localhost');
    } else {
      return null;
    }
  }
}

但我在报道中看到：

通过 if 表示 else 部分不被占用。

那么我必须改变什么？谢谢

  it('should redirect user to login page if user is not logged in', () => {
    
    expect(component).toBeTruthy();
  });

【问题讨论】：

有什么建议吗？
我没有看到您所说的覆盖率报告图片
你想覆盖哪一行？你能把它圈起来以便更好地理解吗
是的，两个 E 都站着

标签： angular typescript unit-testing karma-jasmine istanbul

【解决方案1】：

您需要更正模拟文件

export class OidcSecurityServiceStub {
  getToken() {
    return 'some_token_eVbnasdQ324';
  }

  checkAuth() {
    return of(true); // <-------- make it return true
  }

  authorize(authOptions?: AuthOptions) {
    if (authOptions) {
      return authOptions.urlHandler('http://localhost');
    } else {
      return null;
    }
  }
}

这将涵盖以下代码：

 if (isAuthenticated) {
          this.navigateToStoredEndpoint();
        }

现在false，使用茉莉花

  it('Navigate if not authenticated', () => {
    spyOn(component.oidcSecurityService,'checkAuth').and.returnValue(of(false));
    // also spy on write and router.navigate
    component.ngOnInit()
    expect(component.router.navigate).not.toHaveBeenCalledWith(['/autologin']); // because the url will not be /authLogin (I am assuming, please correct accordingly)
    // similarly check for component.write()
  });

要检查if ('/autologin' !== window.location.pathname)，您需要覆盖window 对象以在pathName 中相应地设置值

您可以参考this question ，我在其中嘲笑了window 方法之一。在您的情况下，您需要设置pathName 并对其进行测试

【讨论】：