Angular stability is not reflected correctly in test environment when a setInterval is running

🐞 bug report

Affected Package

The issue is caused by package @angular/core/testing

Is this a regression?

No, it seems that the issue can be reproduced on Angular versions before and after Ivy.

Description

The stability of Angular when setInterval function is running is not set correctly in testing environment or the available tools do not provide a way to verify this. If the application is running in the browser and a setInterval is called in a component, then executing window.getAllAngularTestabilities()[0].isStable() in the browser console returns false. However, in testing environment, the behaviour looks different - if I start the interval inside a component, fixture.isStable() returns true, when it should not be not stable.

🔬 Minimal Reproduction

1. Create a really simple component, which will call setInterval:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<button (click)="startInterval()">Start interval</button>`
})
export class AppComponent {

  startInterval() {
    setInterval(() => { }, 1000);
  }
}

1. Open the browser and check the stability before any interactions with the component: window.getAllAngularTestabilities()[0].isStable(). The result should be true.

2. Click the button to invoke the interval function. Run the same script again, the result should be false.

3. Try to test the stability with the fixture tools:

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should make Angular unstable when there are unfinished tasks', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;

    app.startInterval(); // The interval has started
    fixture.detectChanges();  

    // The fixture should already be unstable

    expect(fixture.isStable()).toEqual(false); // Fails, the fixture is still stable
  });
});

1. Running that test in async or fakeAsync zone still does not solve the problem.

🌍 Your Environment

Angular Version:

Angular CLI: 10.0.7
Node: 12.13.0
OS: darwin x64

Angular: 10.0.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.7
@angular-devkit/build-angular     0.1000.7
@angular-devkit/build-optimizer   0.1000.7
@angular-devkit/build-webpack     0.1000.7
@angular-devkit/core              10.0.7
@angular-devkit/schematics        10.0.7
@angular/cli                      10.0.7
@ngtools/webpack                  10.0.7
@schematics/angular               10.0.7
@schematics/update                0.1000.7
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

[JiaLiPassion]

@dimitarspassov, there is no such API built in, but it is good to have such kind of API, I will try to think about how to implement it.

[dimitarspassov]

@JiaLiPassion Does the existing testing API provide options for running tests inside ngZone?