test: move some CDK tests to zoneless (#29103)

* test: move some CDK tests to zoneless

* test: Fix flakiness in virtual scroll tests

* test: remove overzealous markForCheck calls

Author: mmalerba

src/cdk/overlay/overlay.spec.ts

@@ -1,37 +1,35 @@
-import {
-  waitForAsync,
-  fakeAsync,
-  tick,
-  ComponentFixture,
-  TestBed,
-  flush,
-} from '@angular/core/testing';
+import {Direction, Directionality} from '@angular/cdk/bidi';
+import {CdkPortal, ComponentPortal, TemplatePortal} from '@angular/cdk/portal';
+import {Location} from '@angular/common';
+import {SpyLocation} from '@angular/common/testing';
 import {
   Component,
-  ViewChild,
-  ViewContainerRef,
   ErrorHandler,
-  Injectable,
   EventEmitter,
-  NgZone,
+  Injectable,
   Type,
-  provideZoneChangeDetection,
+  ViewChild,
+  ViewContainerRef,
 } from '@angular/core';
-import {Direction, Directionality} from '@angular/cdk/bidi';
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  flush,
+  tick,
+  waitForAsync,
+} from '@angular/core/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {dispatchFakeEvent} from '../testing/private';
-import {ComponentPortal, TemplatePortal, CdkPortal} from '@angular/cdk/portal';
-import {Location} from '@angular/common';
-import {SpyLocation} from '@angular/common/testing';
 import {
   Overlay,
+  OverlayConfig,
   OverlayContainer,
   OverlayModule,
   OverlayRef,
-  OverlayConfig,
   PositionStrategy,
   ScrollStrategy,
 } from './index';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
 describe('Overlay', () => {
   let overlay: Overlay;
@@ -48,8 +46,6 @@ describe('Overlay', () => {
     TestBed.configureTestingModule({
       imports: [OverlayModule, ...imports],
       providers: [
-        provideZoneChangeDetection(),
-        provideZoneChangeDetection(),
         {
           provide: Directionality,
           useFactory: () => {
@@ -949,26 +945,23 @@ describe('Overlay', () => {
         .toContain('custom-panel-class');
     });
 
-    it('should wait for the overlay to be detached before removing the panelClass', () => {
+    it('should wait for the overlay to be detached before removing the panelClass', async () => {
       const config = new OverlayConfig({panelClass: 'custom-panel-class'});
       const overlayRef = overlay.create(config);
 
       overlayRef.attach(componentPortal);
-      viewContainerFixture.detectChanges();
+      await viewContainerFixture.whenStable();
 
       const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
       expect(pane.classList)
         .withContext('Expected class to be added')
         .toContain('custom-panel-class');
 
       overlayRef.detach();
-      // Stable emits after zone.run
-      TestBed.inject(NgZone).run(() => {
-        viewContainerFixture.detectChanges();
-        expect(pane.classList)
-          .withContext('Expected class not to be removed immediately')
-          .toContain('custom-panel-class');
-      });
+      expect(pane.classList)
+        .withContext('Expected class not to be removed immediately')
+        .toContain('custom-panel-class');
+      await viewContainerFixture.whenStable();
 
       expect(pane.classList)
         .not.withContext('Expected class to be removed on stable')

src/cdk/overlay/scroll/close-scroll-strategy.spec.ts

@@ -1,9 +1,9 @@
-import {inject, TestBed, fakeAsync} from '@angular/core/testing';
-import {Component, ElementRef, NgZone, provideZoneChangeDetection} from '@angular/core';
-import {Subject} from 'rxjs';
 import {ComponentPortal, PortalModule} from '@angular/cdk/portal';
 import {CdkScrollable, ScrollDispatcher, ViewportRuler} from '@angular/cdk/scrolling';
-import {Overlay, OverlayConfig, OverlayRef, OverlayModule, OverlayContainer} from '../index';
+import {Component, ElementRef} from '@angular/core';
+import {TestBed, fakeAsync, inject} from '@angular/core/testing';
+import {Subject} from 'rxjs';
+import {Overlay, OverlayConfig, OverlayContainer, OverlayModule, OverlayRef} from '../index';
 
 describe('CloseScrollStrategy', () => {
   let overlayRef: OverlayRef;
@@ -17,7 +17,6 @@ describe('CloseScrollStrategy', () => {
     TestBed.configureTestingModule({
       imports: [OverlayModule, PortalModule, MozarellaMsg],
       providers: [
-        provideZoneChangeDetection(),
         {
           provide: ScrollDispatcher,
           useFactory: () => ({
@@ -75,17 +74,6 @@ describe('CloseScrollStrategy', () => {
     expect(overlayRef.detach).not.toHaveBeenCalled();
   });
 
-  it('should detach inside the NgZone', () => {
-    const spy = jasmine.createSpy('detachment spy');
-    const subscription = overlayRef.detachments().subscribe(() => spy(NgZone.isInAngularZone()));
-
-    overlayRef.attach(componentPortal);
-    scrolledSubject.next();
-
-    expect(spy).toHaveBeenCalledWith(true);
-    subscription.unsubscribe();
-  });
-
   it('should be able to reposition the overlay up to a certain threshold before closing', inject(
     [Overlay],
     (overlay: Overlay) => {

src/cdk/overlay/scroll/close-scroll-strategy.zone.spec.ts

@@ -0,0 +1,72 @@
+import {ComponentPortal, PortalModule} from '@angular/cdk/portal';
+import {Component, NgZone, provideZoneChangeDetection} from '@angular/core';
+import {TestBed, fakeAsync, inject} from '@angular/core/testing';
+import {Subject} from 'rxjs';
+import {Overlay} from '../overlay';
+import {OverlayConfig} from '../overlay-config';
+import {OverlayContainer} from '../overlay-container';
+import {OverlayModule} from '../overlay-module';
+import {OverlayRef} from '../overlay-ref';
+import {CdkScrollable, ScrollDispatcher, ViewportRuler} from '../public-api';
+
+describe('CloseScrollStrategy Zone.js integration', () => {
+  let overlayRef: OverlayRef;
+  let componentPortal: ComponentPortal<MozarellaMsg>;
+  let scrolledSubject = new Subject<CdkScrollable | undefined>();
+  let scrollPosition: number;
+
+  beforeEach(fakeAsync(() => {
+    scrollPosition = 0;
+
+    TestBed.configureTestingModule({
+      imports: [OverlayModule, PortalModule, MozarellaMsg],
+      providers: [
+        provideZoneChangeDetection(),
+        {
+          provide: ScrollDispatcher,
+          useFactory: () => ({
+            scrolled: () => scrolledSubject,
+          }),
+        },
+        {
+          provide: ViewportRuler,
+          useFactory: () => ({
+            getViewportScrollPosition: () => ({top: scrollPosition}),
+          }),
+        },
+      ],
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  beforeEach(inject([Overlay], (overlay: Overlay) => {
+    let overlayConfig = new OverlayConfig({scrollStrategy: overlay.scrollStrategies.close()});
+    overlayRef = overlay.create(overlayConfig);
+    componentPortal = new ComponentPortal(MozarellaMsg);
+  }));
+
+  afterEach(inject([OverlayContainer], (container: OverlayContainer) => {
+    overlayRef.dispose();
+    container.getContainerElement().remove();
+  }));
+
+  it('should detach inside the NgZone', () => {
+    const spy = jasmine.createSpy('detachment spy');
+    const subscription = overlayRef.detachments().subscribe(() => spy(NgZone.isInAngularZone()));
+
+    overlayRef.attach(componentPortal);
+    scrolledSubject.next();
+
+    expect(spy).toHaveBeenCalledWith(true);
+    subscription.unsubscribe();
+  });
+});
+
+/** Simple component that we can attach to the overlay. */
+@Component({
+  template: '<p>Mozarella</p>',
+  standalone: true,
+  imports: [OverlayModule, PortalModule],
+})
+class MozarellaMsg {}