Blog

Blog

PHODAL

Angular 修改测试注入问题:Async callback was not invoked within timeout

项目中采用了 Angular 作为前端框架,并采用的其自带的 Jasmine 作为测试框架。而在过去的一段时间里,一直在遭遇下面的问题:

Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL

由于,我们有差不多 600 个测试案例,而测试一直会因为这个原因挂掉。因此,我们不得不尝试去解决这个问题。

不可能的超时

既然超时,那就延长时间。

但是,我们并没有找到正确的方式。

直到有一天,我意味着可能是注入的问题——因为我们使用了 usecase 代替了 service,而 service 在 Angular 中很脆弱。

Angular 测试注入

1. 传统的 Angular 测试的注入方式

如下所示:

let service: AuthService;

beforeEach(() => {
  service = new AuthService();
});

it('should return true from isAuthenticated when there is a token', () => {
  localStorage.setItem('token', '1234');
  expect(service.isAuthenticated()).toBeTruthy();
});

而这样的测试适合于,没有网络请求的测试,并且需要自己实例化 service,操作起来比较麻烦。

2. 采用 TestBed 的注入方式

正常情况下,我们采用的是如下的方式来测试的:

let authService: AuthService;

beforeEach(() => {
  ...
  TestBed.configureTestingModule({
    declarations: [LoginComponent],
    providers: [AuthService]
  });

  ...
  authService = TestBed.get(AuthService);
});

而这种方式也是不行的,于是又找到了新的方法。

3. 采用 Mock Service 的方式

为此,我们采用了更简单的方式,即去 Mock 对应的 Service

TestBed.configureTestingModule({
  providers: [{ provide: SomeService, useValue: myMock }]
});

但是,这样也会出现随机挂掉的问题:

4. OverrideComponent

于是乎,我们又转向了新的方法:

TestBed.overrideComponent(
  MyComponentUnderTest,
  {set: {providers: [
    {provide: MyRealService, useClass: MyMockService}
  ]}}
);

但是仍然不行。

5. 在单个 test case 中 inject

最后,我们似乎采用了以下的方式解决问题:

it('should pass context to withModule helper - advanced',
  withModule(moduleConfig).inject([FancyService], function(service: FancyService) {
    expect(service.value).toBe('real value');
    this.contextModified = true;
}));

结论

坑仍然很多。


或许您还需要下面的文章:

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签