Can't test Query mutations using Angular's HttpTestingController

[Timebutt]

Describe the bug

I have implemented a few mutations in an Angular application I am working on, but noticed during testing that using Angular's own HttpTestingController does not allow me to properly test said mutations.

I have investigated extensively, but can not get my tests to run correctly because of what seems to be a bug in Query itself.

Your minimal, reproducible example

https://github.com/Timebutt/query-angular-mutation-testing

Steps to reproduce

Clone above repository, run npm install and then run npm run test to run the reproduction example. The test will fail, even though from the way I have set up the test I'm expecting it to pass.

Notice that I have patched @angular/common to clearly indicate the difference between the GET and POST request in the HttpTestingController internals.. In the case of the GET request, the request correctly gets added to the open array before the match takes place. In the POST case, the match happens first, only then does the request get added in the array. This is why the test clearly fails.

I'm not entirely sure what might be causing this yet in Query internally, but I think something similar to a TestBed.flushEffects() might be needed to make sure that everything runs correctly in unit tests. I'm not sure if the ProxySignal makes things complicated here, then again: I'm not really at home in your codebase yet.

Expected behavior

I expect this test to pass. I dove into Angular source code and discovered the XHR request correctly gets scheduled in the internals of HttpTestingController. The odd thing is that the check for the specific XHR request happens after (!) adding it into the open array (see source) that holds all currently incomplete XHR requests in HttpTestingController internally.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Unrelated, ran this on my Windows and Mac

Tanstack Query adapter

angular-query

TanStack Query version

5.26.3

TypeScript version

5.3.2

Additional context

No response

[cuddlecake]

Does it work with await fixture.whenStable()?

E.g.

mutation.mutateAsync()
await fixture.whenStable()
controller.expectOne(..)

[Timebutt]

Interesting, that does indeed fix it!

Great news, but it feels like updated code examples that show how to test mutations would be very beneficial: a few of my colleagues at work already ran into this exact same issue and just abandoned or worked around the issue. I had a quick look, but I didn't immediately find any guidelines on testing in the documentation, am I missing the docs or are there simply none yet? I could rewrite and upgrade my example to be the start of the documentation for instance.