在 Angular 中对 requestAnimationFrame 进行单元测试的选项都有哪些?
Posted
技术标签:
【中文标题】在 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我会修复它。以上是关于在 Angular 中对 requestAnimationFrame 进行单元测试的选项都有哪些?的主要内容,如果未能解决你的问题,请参考以下文章
在 Angular 中对 requestAnimationFrame 进行单元测试的选项都有哪些?
在 Angular 2+ 中对 FormArray 对象进行排序的理想方法是啥?
如何在 Angular 7 中对包含特殊字符的查询参数进行编码?