web-dev-qa-db-ja.com

angularテストでのtick（）とflush（）の違いは何ですか？

angularのドキュメントでは、これら2つの関数 tick() および flush() を参照しています。 angularのドキュメンテーションから、これらはティックについて言う：

FakeAsyncゾーンのタイマーの非同期の時間経過をシミュレートします。

フラッシュの場合：

マクロタスクキューが空になるまでドレインすることにより、fakeAsyncゾーンのタイマーの非同期時間経過をシミュレートします。戻り値は、経過していた時間のミリ秒です。

誰かが私に違いを説明できますか？

編集（コメントで回答）：

さらに、 angular documentationtick()はパラメーターなしで使用されており、その行のコメントには「フラッシュ」というフレーズも使用されています

it('should display error when TwainService fails', fakeAsync(() => {
  // tell spy to return an error observable
  getQuoteSpy.and.returnValue(
    throwError('TwainService test failure'));

  fixture.detectChanges(); // onInit()
  // sync spy errors immediately after init

  tick(); // flush the component's setTimeout()

  fixture.detectChanges(); // update errorMessage within setTimeout()

  expect(errorMessage()).toMatch(/test failure/, 'should display error');
  expect(quoteEl.textContent).toBe('...', 'should show placeholder');
}));
angulartypescripttestingionic-frameworkjasmine
8
Justin Kavalan

それらは、以前に開始された非同期操作に関連してさまざまなことを行います。例えば; setTimeout(...)を呼び出すと、非同期操作が開始されます。

  • tick()はtime前方に移動します。
  • flush()はtimeを最後に移動します。

これは、これらの関数の単体テストでわかりやすく説明できます。

Tick

この単体テストでは、ティックがステップですべて10タイマーが終了しました。 Tickは複数回呼び出されます。

https://github.com/angular/angular/blob/master/packages/core/test/fake_async_spec.ts#L205


      it('should clear periodic timers', fakeAsync(() => {
           let cycles = 0;
           const id = setInterval(() => { cycles++; }, 10);

           tick(10);
           expect(cycles).toEqual(1);

           discardPeriodicTasks();

           // Tick once to clear out the timer which already started.
           tick(10);
           expect(cycles).toEqual(2);

           tick(10);
           // Nothing should change
           expect(cycles).toEqual(2);
         }));

流す

この単体テストは、すべての非同期タスクが戻ったときに完了する必要があることを示し、戻り値は、タスクが完了するまでにかかった時間を示します。

https://github.com/angular/angular/blob/master/packages/core/test/fake_async_spec.ts#L27

      it('should flush multiple tasks', fakeAsync(() => {
           let ran = false;
           let ran2 = false;
           setTimeout(() => { ran = true; }, 10);
           setTimeout(() => { ran2 = true; }, 30);

           let elapsed = flush();

           expect(ran).toEqual(true);
           expect(ran2).toEqual(true);
           expect(elapsed).toEqual(30);
         }));
10
Reactgular