(core/testing) flush() not working when requestAnimationFrame contexts

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

The requestAnimationFrame is one of the same macrotasks as setTimeout, but it is not drained by the flush() function.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/node-qvczbt?file=src/app/app.component.spec.ts

Please provide the exception or error you saw

Chrome 94.0.4606.81 (Linux x86_64) AppComponent should increased number after drawn FAILED

Please provide the environment you discovered this bug in

❯ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 12.2.10
Node: 14.16.0
Package Manager: npm 7.17.0
OS: linux x64

Angular: 12.2.10
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.10
@angular-devkit/build-angular   12.2.10
@angular-devkit/core            12.2.10
@angular-devkit/schematics      12.2.10
@schematics/angular             12.2.10
rxjs                            6.6.7
typescript                      4.3.5
    

~/projects/node-qvczbt

from stackblitz WebContainer.

Anything else?

Work tick(16), but flush() should also work.

related

• https://github.com/angular/angular/issues/12372
• javascript - What are options to unit test requestAnimationFrame in Angular? - Stack Overflow

[JiaLiPassion]

I think this is a bug, since the current logic is not consistent and not good for performance either. tick(16) will trigger both macroTask and requestAnimationFrame, but flush() is not, also flush() will not trigger period macroTask such as setInterval which is also not a correct behavior and inconsistent with tick(). I will create a PR to fix this one.

[petebacondarwin]

So it is the case that when you request an animation frame from within fakeAsync then a timer is scheduled to resolve in 16ms time.

https://github.com/angular/angular/blob/9f40d2a0ea229dcf091f5d68d9d114c60bd9bcbd/packages/zone.js/lib/zone-spec/fake-async-test.ts#L610-L617

Further since rAF are treated diifferently to setTimeout they cannot be triggered simply by a call to flush() as discussed above.