admin管理员组文章数量:1323318
What are ways to unit test requestAnimationFrame?
requestAnimationFrame has same nature as setTimeout/setInterval have. It is also patched by zone.js like fn's like setTimeout are patched. So options which first came to my mind are
- async + whenStable
- fakeAsync + tick(void)
- fakeAsync + flush
- fakeAsync + tick(number)
- setTimeout(1000) + done (jasmine)
The results:
- async + whenStable : just don't work
- fakeAsync + tick(void) : don't work
- fakeAsync + flush : don't work
- fakeAsync + tick(number) : works (read below)
- setTimeout(1000) + done (jasmine) : don't work
Here is the method:
reqAnimFrame() {
requestAnimationFrame(() => {
console.log('log stuff');
this.title = 'req frame title';
});
}
Here is the unit test (working unit test):
it('fakeAsync', fakeAsync(function () {
const fixture = TestBed.createComponent(AppComponent);
const app: AppComponent = fixture.debugElementponentInstance;
fixture.detectChanges();
app.reqAnimFrame();
tick(16);
expect(app.title).toBe('req frame title');
}));
Magic number. 16 is some magic number like 1000/60. It is the frame size. I just found this magic number by experiments.
Also, idea which came to my mind when I was writing this question: probably, I can somehow mock ng zone and all code which passes through it will be called synchronously (I need that). I haven't tried this yet.
UPD: After some research RAF call just put a task into macrotask zone queue. How to flush this queue from the test?
So what I am missing? How to correctly unit test method with requestAnimationFrame
call?
What are ways to unit test requestAnimationFrame?
requestAnimationFrame has same nature as setTimeout/setInterval have. It is also patched by zone.js like fn's like setTimeout are patched. So options which first came to my mind are
- async + whenStable
- fakeAsync + tick(void)
- fakeAsync + flush
- fakeAsync + tick(number)
- setTimeout(1000) + done (jasmine)
The results:
- async + whenStable : just don't work
- fakeAsync + tick(void) : don't work
- fakeAsync + flush : don't work
- fakeAsync + tick(number) : works (read below)
- setTimeout(1000) + done (jasmine) : don't work
Here is the method:
reqAnimFrame() {
requestAnimationFrame(() => {
console.log('log stuff');
this.title = 'req frame title';
});
}
Here is the unit test (working unit test):
it('fakeAsync', fakeAsync(function () {
const fixture = TestBed.createComponent(AppComponent);
const app: AppComponent = fixture.debugElement.ponentInstance;
fixture.detectChanges();
app.reqAnimFrame();
tick(16);
expect(app.title).toBe('req frame title');
}));
Magic number. 16 is some magic number like 1000/60. It is the frame size. I just found this magic number by experiments.
Also, idea which came to my mind when I was writing this question: probably, I can somehow mock ng zone and all code which passes through it will be called synchronously (I need that). I haven't tried this yet.
UPD: After some research RAF call just put a task into macrotask zone queue. How to flush this queue from the test?
So what I am missing? How to correctly unit test method with requestAnimationFrame
call?
- 1 It is not opinion based at all. I am asking for the ways of testing specific stuff. – Sharikov Vladislav Commented May 10, 2018 at 18:04
- github./angular/angular/issues/12372. Ta-daaa. – Sharikov Vladislav Commented May 11, 2018 at 10:26
1 Answer
Reset to default 8tick(16)
is correct, because requestAnimationFrame
in fakeAsync
is just a 16ms delay macroTask
.
if you want to flush in fakeAsync
, just call flush()
, flush is also imported from @angular/core/testing
.
本文标签: javascriptWhat are options to unit test requestAnimationFrame in AngularStack Overflow
版权声明:本文标题:javascript - What are options to unit test requestAnimationFrame in Angular? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742144796a2422742.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论