Проверьте функцию, содержащую setTimeout()

У меня есть функция 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), но окно никогда не исчезнет. любые мысли по этому поводу?

Ответы

Ответ 1

Вы можете сделать одну из двух вещей:

1: На самом деле подождите в тесте 250 + 1 мс в setTimeout(), а затем проверьте, действительно ли элемент исчез.

2: используйте fakeAsync() и tick() для моделирования времени в тесте - a tick() разрешит setTimeout в исходном 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)
  })
}))

Я предлагаю использовать второй, так как он намного быстрее, чем на самом деле ждет оригинальный метод. Если вы все еще используете 1-й, попробуйте снизить время ожидания до теста, чтобы ускорить его выполнение.