bug(Tabs): Timeout while running unit test with Tabs harness

[Plondrein]

Reproduction

As bug happens only with minimized browser, providing reproduction repo:
https://github.com/Plondrein/jubaj/tree/tabs-bug

Steps to reproduce:

1. Run tests for TabsComponent (or just run npm run test)
2. Minimize browser that was launched by karma

Expected Behavior

Test(s) should pass.

Actual Behavior

'TabsComponent should work' test reurns 'Error: Timeout - Async function did not complete within 5000ms'

With browser non-mimized, everything works well.

Environment

• Angular: 12.1.1
• CDK/Material: 12.1.2
• Browser(s): Chrome
• Operating System: Windows 10 (Had such errors on MacOS too)

[crisbeto]

What I suspect is happening is that the browser doesn't resolve requestAnimationFrame callbacks if it's in the background, causing the test to time out. Have you tried using the NoopAnimationsModule in the test? In general it's a good practice since your tests will run faster.

[Plondrein]

I just tried NoopAnimationsModule, error still happens :(

[crisbeto]

@mmalerba do you have any ideas for this?

[Plondrein]

If I could get any guidance, I'd be happy to help with this.

[seawave23]

In general, it would be great to have a better error handling or a more verbose output for the harness creation. It's extremely hard to debug where the problem is.

[crisbeto]

That would be difficult to implement, because we depend on zone.js to tell us when to run the harness code. Since zone.js waits for requestAnimationFrame which in turn is blocked by the browser, we can't really distinguish what is causing the timeout.

[seawave23]

That's definitely a valid point. But it's also a good hint on where to start/continue searching 😏👍

[crisbeto]

I submitted #24000 last week that should hopefully resolve this issue.