bug(TestbedHarnessEnvironment): Impossible to use if component under test uses intervals

[thw0rted]

Use StackBlitz to reproduce your issue: ADDED (thanks @annieyw!), example here

Steps to reproduce:

1. Follow the instructions for using Harnesses
2. In the component under test, use setInterval, or the rxjs interval(n) or timer(0, n) observables
3. Your test will stall indefinitely at e.g. await loader.getAllHarnesses(MatButtonHarness); (from the docs linked in step 1)

Expected Behavior

getAllHarnesses completes once the component has finished initializing and had a chance to create instances of child components.

Actual Behavior

The call to getAllHarnesses never resolves, and the test times out.

Environment

• Angular: 10.1.2
• CDK/Material: 10.2.1
• Browser(s): N/A
• Operating System (e.g. Windows, macOS, Ubuntu): N/A (Win10)

---

As I understand it, this is because under the hood, TestbedHarnessEnvironment is using ComponentFixture#whenStable. From what I can tell, the official stance from Angular / Zone is that you should use fakeAsync plus tick, and call discardPeriodicTasks to ignore the (expected) pending intervals, instead of using waitForAsync / whenStable.

This very old StackOverflow question suggests that one should never have setInterval in a component or service, instead using an injected service to provide periodic actions, so it can be mocked out during testing, but I've never seen anything "official" from Angular to say that intervals are unsupported.

If it's not permissible to use intervals in a component, this should be documented somewhere, with suggestions of alternative design patterns to use that are compatible with Material's test utilities. If it is permissible, TestbedHarnessEnvironment should be updated to include another way of determining when the owning ComponentFixture is "ready", or I guess kick this upstream to the Zone folks so they can make whenStable work with intervals.

[thw0rted]

Probably relevant: angular/angular#12721 , #20638.

[thw0rted]

I keep meaning to test if #20638 fixes this but haven't had the time. Is there an easy way to tell Stackblitz to update a bunch of package versions in parallel? On my machine, I'd use npm-check-updates (ncu) but I don't think I have an equivalent online.

[thw0rted]

I'd like to test and close this out. I was excited to see a stackblitz for tests linked from https://material.angular.io/components/button/examples , but it currently fails for me, with the error

I see that @types/jasmine is in devDependencies but that package doesn't seem to define a module for jasmine-core. I can't tell if this is a Jasmine issue, a StackBlitz issue, or something wrong with the project.

@annieyw do you have any insight? (If that particular StackBlitz isn't your responsibility, sorry, I just grabbed your name from the linked ticket above.)

[thw0rted]

Finally getting back to testing this, sadly it is not fixed. Updated example -- same problem as the one linked in the original post, the tests never complete and eventually time out waiting for loader.getAllHarnesses, which never resolves because the component uses interval. You can swap the commented-out lines in the component (2/3 and 16/17) and see that the tests all pass fine when interval is not used.

There are a lot of Rx primitives that build on top of interval so I still think this problem is likely to be relevant to a lot of users. I'm coming back to this issue now because Angular has closed angular/angular#25457 and angular/angular#34742, which means the underlying problem is likely to remain indefinitely.

[mmalerba]

Yeah the harnesses unfortunately don't really work for this type of situation today. It's something I'd like to try to design a solution for in the future, though I'm not sure exactly what that would look like. In the mean time you might be able to workaround it using the manualChangeDetection function: https://material.angular.io/cdk/test-harnesses/overview#change-detection