angular - 测试包含 setTimeout() 的函数

Question

我的组件中有一个关闭函数，它包含一个 setTimeout() 以便为动画完成提供时间。

public close() {
    this.animate = "inactive"
    setTimeout(() => {
       this.show = false
    }, 250)
}

this.show 绑定(bind)到 ngIf。

this.animate 绑定(bind)到动画。

我有个测试需要测试这个功能

it("tests the exit button click", () => {
  comp.close()
  fixture.detectChanges()
  //verifies the element is no longer in the DOM
  const popUpWindow = fixture.debugElement.query(By.css("#popup-window"))
  expect(popUpWindow).toEqual(null)
})

当有 setTimeout() 时，如何正确测试此函数？

我正在使用 jasmine.clock().tick(251) 但窗口永远不会消失。对此有什么想法吗？

Answer 1

你可以做以下两件事之一:

1:在 setTimeout() 中实际等待测试 250+1 毫秒，然后检查元素是否真的消失了。

2: 在测试中使用fakeAsync() 和tick() 来模拟时间——一个tick() 将解决setTimeout in原始的 close()，检查可能会在 fixture.whenStable().then(...) 之后立即发生。

例如:

it("tests the exit button click", fakeAsync(() => {
  comp.close()
  tick(500)
  fixture.detectChanges()

  fixture.whenStable().then(() => {
    const popUpWindow = fixture.debugElement.query(By.css("#popup-window"))
    expect(popUpWindow).toBe(null)
  })
}))

我建议使用第二种方法，因为它比实际等待原始方法快得多。如果您仍然使用第一个，请尝试降低测试前的超时时间以使其运行得更快。

服务

对于服务，您不需要在 tick 之后调用 detectChanges，也不需要将 expect 语句包装在 whenStable 中。您可以在勾选之后立即执行您的逻辑。

  it('should reresh token after interval', fakeAsync(() => {
    // given
    const service: any = TestBed.get(CognitoService);
    const spy = spyOn(service, 'refreshToken').and.callThrough();
    ....
    // when
    service.scheduleTokenRefresh();
    tick(TOKEN_REFRESH_INTERVAL);
    // then
    expect(spy).toHaveBeenCalled();
  }));