web-dev-qa-db-ja.com

setTimeout（）を含む関数をテストします

アニメーションが完了するまでの時間を与えるために、setTimeout()を含むコンポーネントにclose関数があります。

_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)を使用していましたが、ウィンドウが消えることはありませんでした。これについて何か考えはありますか？

angulartestingjasminesettimeoutkarma-jasmine
26
ed-tester

次の2つのいずれかを実行できます。

1：setTimeout()で250 + 1 msのテストで実際に待機し、要素が実際に消えたかどうかを確認します。

2：fakeAsync()とtick()を使用してテストの時間をシミュレートします-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)
  })
}))

2番目のメソッドを使用することをお勧めします。これは、元のメソッドを実際に待つよりもはるかに高速だからです。まだ1番目を使用する場合は、テストの前にタイムアウト時間を短くして、実行速度を上げてください。

54
Mezo Istvan

私のプロジェクトでこれを試しただけで動作します：

jasmine.clock（）。tick（10）;

2
Jack Luo