Angular中单元测试requestAnimationFrame有哪些选项？

Question

单元测试requestAnimationFrame有哪些方法？

requestAnimationFrame与setTimeout / setInterval具有相同的性质。它也可以像zone.js一样修补，就像修补了setTimeout一样。所以我首先想到的选择是

1. async + whenStable
2. fakeAsync + tick（void）
3. fakeAsync + flush
4. fakeAsync + tick（number）
5. setTimeout（1000）+ done（jasmine）

结果：

1. async + whenStable：只是不工作
2. fakeAsync + tick（void）：不工作
3. fakeAsync + flush：不工作
4. fakeAsync + tick（number）：有效（见下文）
5. setTimeout（1000）+ done（jasmine）：不工作

以下是方法：

 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调用只是将一个任务放入macrotask区域队列。如何从测试中清除此队列？

那么我错过了什么？如何使用requestAnimationFrame调用正确单元测试方法？

Answer 1

tick(16)是正确的，因为requestAnimationFrame中的fakeAsync只是16ms delay macroTask。

如果您要在fakeAsync中进行刷新，只需拨打flush()，也可以从@angular/core/testing导入刷新。