Angular 测试一个包含 setTimeout() 的函数

发布于01月21日

我的组件中有一个close函数，其中包含一个setTimeout()，以便为动画的完成留出时间.

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

this.show和ngIf是必然的.

this.animate绑定到动画.

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

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)，但windows 永远不会消失.你对此也有什么 idea 吗？

推荐答案

你可以做两件事中的一件:

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

2:使用fakeAsync()和tick()来模拟测试中的时间-a tick()将解析原始close()中的setTimeout，并且判断可能在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)
  })
}))

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

服务

对于服务，您不需要在tick之后调用detectChanges，也不需要将expect语句包装在whenStable中.你可以在tick年后马上做逻辑题.

  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();
  }));