Какие есть варианты для юнит-теста requestAnimationFrame в Angular?
Каковы способы юнит-теста requestAnimationFrame?
requestAnimationFrame имеет ту же природу, что и setTimeout/setInterval. Это также исправлено в zone.js, например, для fn, как setTimeout. Итак, варианты, которые пришли мне в голову:
- async + whenStable
- fakeAsync + tick (void)
- fakeAsync + flush
- fakeAsync + галочка (число)
- setTimeout (1000) + готово (жасмин)
Результаты, достижения:
- async + whenStable: просто не работает
- fakeAsync + tick(void): не работает
- fakeAsync + flush: не работает
- fakeAsync + галочка (число): работает (читайте ниже)
- 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 call просто поместите задачу в очередь зоны макрозадач. Как очистить эту очередь от теста?
Так чего мне не хватает? Как правильно выполнить юнит-тест с requestAnimationFrame
вызов?
1 ответ
tick(16)
правильно, потому что requestAnimationFrame
в fakeAsync
это просто 16ms delay macroTask
,
если вы хотите промыть fakeAsync
, просто позвони flush()
флеш также импортируется из @angular/core/testing
,