fix(core): ComponentFixture autodetect should detect changes within A…

…pplicationRef.tick (#54733)

The current behavior of `autoDetect` in `ComponentFixture` does not
match production very well. It has several flaws that make it an
insufficient change detection mechanism:

* It runs change detection for the component under test _after_ views
  attached to the `ApplicationRef`. This can cause real behavior
  differences that break in production, because tests can observe view
  refreshes in the incorrect order (for example, a dialog refreshing
  before the component which opened it).
* Because of the above ordering, render hooks registered during change
  detection of the fixture views _will not execute at all_ because
  `ApplicationRef.tick` already happen.
* It does not rerun change detection on the view tree if there are more
  dirty views to refresh after the render hooks complete.
* It effectively hides/swallows errors from change detection inside the
  `onMicrotaskEmpty` subscription by not reporting them to the error
  handler. Instead, this error ends up being unhandled in the
  subscription and rxjs throws these in a `setTimeout`.

All of the above are problematic but this commit _does not_ fix the
final point. Ideally, we can land this in a future change but this
requires additional internal fixes. In the meantime, we have to juggle
special-case handling of the component fixture views within
`ApplicationRef.tick` using some special events to retain current
behavior and avoid errors from the fixture propagating to the `ErrorHandler`.

BREAKING CHANGE: The `ComponentFixture.autoDetect` feature now executes
change detection for the fixture within `ApplicationRef.tick`. This more
closely matches the behavior of how a component would refresh in
production. The order of component refresh in tests may be slightly
affected as a result, especially when dealing with additional components
attached to the application, such as dialogs. Tests sensitive to this
type of change (such as screenshot tests) may need to be updated.
Concretely, this change means that the component will refresh _before_
additional views attached to `ApplicationRef` (i.e. dialog components).
Prior to this change, the fixture component would refresh _after_ other
views attached to the application.

PR Close #54733

packages/core/testing/src/component_fixture.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ApplicationRef, ChangeDetectorRef, ComponentRef, DebugElement, ElementRef, getDebugNode, inject, NgZone, RendererFactory2, ViewRef, ɵDeferBlockDetails as DeferBlockDetails, ɵdetectChangesInViewIfRequired, ɵEffectScheduler as EffectScheduler, ɵgetDeferBlocks as getDeferBlocks, ɵisG3 as isG3, ɵNoopNgZone as NoopNgZone, ɵPendingTasks as PendingTasks,} from '@angular/core';
+import {ApplicationRef, ChangeDetectorRef, ComponentRef, DebugElement, ElementRef, getDebugNode, inject, NgZone, RendererFactory2, ViewRef, ɵDeferBlockDetails as DeferBlockDetails, ɵdetectChangesInViewIfRequired, ɵEffectScheduler as EffectScheduler, ɵgetDeferBlocks as getDeferBlocks, ɵNoopNgZone as NoopNgZone, ɵPendingTasks as PendingTasks,} from '@angular/core';
 import {Subject, Subscription} from 'rxjs';
 import {first} from 'rxjs/operators';
 
@@ -239,20 +239,6 @@ export class PseudoApplicationComponentFixture<T> extends ComponentFixture<T> {
             },
           }),
       );
-      // TODO(atscott): Remove and make this a breaking change externally in v18
-      if (!isG3) {
-        this._subscriptions.add(
-            this._ngZone.onMicrotaskEmpty.subscribe({
-              next: () => {
-                if (this._autoDetect) {
-                  // Do a change detection run with checkNoChanges set to true to check
-                  // there are no changes on the second run.
-                  this.detectChanges(true);
-                }
-              },
-            }),
-        );
-      }
       this._subscriptions.add(
           this._ngZone.onStable.subscribe({
             next: () => {
@@ -336,11 +322,6 @@ export class PseudoApplicationComponentFixture<T> extends ComponentFixture<T> {
   }
 
   private subscribeToAppRefEvents() {
-    // TODO(atscott): Remove and make this a breaking change externally in v18
-    if (!isG3) {
-      return;
-    }
-
     this._ngZone.runOutsideAngular(() => {
       this.afterTickSubscription = this._testAppRef.afterTick.subscribe(() => {
         this.checkNoChanges();
@@ -368,11 +349,6 @@ export class PseudoApplicationComponentFixture<T> extends ComponentFixture<T> {
   }
 
   private unsubscribeFromAppRefEvents() {
-    // TODO(atscott): Remove and make this a breaking change externally in v18
-    if (!isG3) {
-      return;
-    }
-
     this.afterTickSubscription?.unsubscribe();
     this.beforeRenderSubscription?.unsubscribe();
     this.afterTickSubscription = undefined;