Какие есть варианты для юнит-теста requestAnimationFrame в Angular?

Question

Каковы способы юнит-теста requestAnimationFrame?

requestAnimationFrame имеет ту же природу, что и setTimeout / setInterval. Это также исправлено в zone.js, как, например, fn, как setTimeout. Итак, варианты, которые впервые пришли мне в голову:

1. async + whenStable
2. fakeAsync + tick (void)
3. fakeAsync + flush
4. fakeAsync + галочка (число)
5. setTimeout (1000) + готово (жасмин)

Результаты:

1. async + whenStable: просто не работает
2. fakeAsync + tick (void): не работает
3. fakeAsync + flush: не работает
4. fakeAsync + галочка (число): работает (читайте ниже)
5. setTimeout (1000) + готово (жасмин): не работает

Вот метод:

 reqAnimFrame() {
   requestAnimationFrame(() => {
     console.log('log stuff');
     this.title = 'req frame title';
   });
 }

Вот модульное тестирование (проверка рабочего блока):

it('fakeAsync', fakeAsync(function () {
  const fixture = TestBed.createComponent(AppComponent);
  const app: AppComponent = fixture.debugElement.componentInstance;

  fixture.detectChanges();

  app.reqAnimFrame();

  tick(16);

  expect(app.title).toBe('req frame title');
}));

Магическое число. 16 - это магическое число, например 1000/60. Это размер кадра. Я только что нашел это магическое число экспериментально.

Кроме того, идея, которая пришла мне в голову, когда я писал этот вопрос: возможно, я могу каким-то образом смоделировать зону, и весь код, который проходит через нее, будет вызываться синхронно (мне это нужно). Я еще не пробовал это.

UPD: после некоторых исследований вызов RAF просто помещает задачу в очередь зоны макрозадач. Как очистить эту очередь от теста?

Так чего мне не хватает? Как правильно выполнить юнит-тест с помощью requestAnimationFrame вызова?

Answer 1

tick(16) правильно, потому что requestAnimationFrame в fakeAsync это просто 16ms delay macroTask.

если вы хотите сбросить в fakeAsync, просто позвоните flush(), сброс также импортируется из @angular/core/testing.