在 Angular 中对 requestAnimationFrame 进行单元测试的选项都有哪些？

Posted 2023-02-22

【中文标题】在 Angular 中对 requestAnimationFrame 进行单元测试的选项都有哪些？

【英文标题】：What are options to unit test requestAnimationFrame in Angular?在 Angular 中对 requestAnimationFrame 进行单元测试的选项有哪些？

【发布时间】：2018-10-21 01:38:51

【问题描述】：

对 requestAnimationFrame 进行单元测试的方法有哪些？

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

异步 + whenStable fakeAsync + tick(void) fakeAsync + 刷新 fakeAsync + tick(number) setTimeout(1000) + 完成（茉莉花）

结果：

async + whenStable : 只是不工作 fakeAsync + tick(void)：不起作用 fakeAsync + 刷新：不起作用 fakeAsync + tick(number) : 有效（阅读下文） 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。它是帧大小。我只是通过实验发现了这个神奇的数字。

另外，当我写这个问题时，我想到了一个想法：也许，我可以以某种方式模拟 ng zone，并且所有通过它的代码都将被同步调用（我需要那个）。我还没试过。

UPD：经过一些研究，RAF 调用只需将任务放入宏任务区域队列。如何从测试中清除此队列？

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

【问题讨论】：

这根本不是基于意见的。我正在询问测试特定内容的方法。

github.com/angular/angular/issues/12372。哒哒哒。

【参考方案1】：

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

如果你想在fakeAsync中flush，只需调用flush()，flush也是从@angular/core/testing导入的。

【讨论】：

我试过了，但没有用。我在我的问题中这么说。顺便说一句，我是来自 github 的那个人 sharikovvladislav :) 我们谈了一些问题。

好的，你能在github上提供一个repo repo吗，如果是bug我会修复它。