tick and fakeAsync doesn't work well in Angular 13 with rxjs 7 debounceTime

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

core

Is this a regression?

Yes

Description

I upgraded to angular 13 and then tried upgrading rxjs to 7. The problem is it seems rxjs has changed the way the debounceTime operator works: https://rxjs.dev/6-to-7-change-summary#debouncetime. Because of this a lot of my tests now fail because the fakeasync scope and debounceTime don’t work well when the debounceTime is set up outside of a fakeAsync scope. If you run the test in this file: https://github.com/bgerstle-quot/debounceTest/blob/master/src/app/app.component.spec.ts the first test passes and the second fails.

Please provide a link to a minimal reproduction of the bug

https://github.com/bgerstle-quot/debounceTest/blob/master/src/app/app.component.spec.ts

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 13.0.4
Node: 16.13.0
Package Manager: yarn 1.22.5
OS: linux x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.4
@angular-devkit/build-angular   13.0.4
@angular-devkit/core            13.0.4
@angular-devkit/schematics      13.0.4
@angular/cli                    13.0.4
@schematics/angular             13.0.4
rxjs                            7.4.0
typescript                      4.4.4

Anything else?

No response

[bgerstle-quot]

I moved the detectChanges into the tests and that wasn’t enough. What did do it was changing the beforeEach into a callable function and then just running it at the start of each test. You can see what I’m talking about on this branch. It’s definitely a usable workaround, but not ideal. I also tried moving the fakeAsync to the describe, but causes an exception, which probably makes sense, but still prevents me from using the beforeEach Angular consumes RxJS and fakeAsync is an angular function; therefore, I would argue that it is an Angular bug, without a fix, I can’t use the beforeEach the way Angular intends it to be used.

[ma7moudat]

Is there a plan to solve this or should we learn to live with it? Or should we consider it an issue with rxjs instead of Angular? 🤔

I agree with @ToelliJ; it doesn’t make sense to revise the component code to make the test pass 😐