test: move some CDK tests to zoneless (#29083) (#29100)

* test: move some CDK tests to zoneless

* test: rewrite tests that test zone.js implementation details

* Revert "test: rewrite tests that test zone.js implementation details"

This reverts commit de01346.

* ci: fix lint

* test: share drag&drop test utils

src/cdk/a11y/focus-monitor/focus-monitor.spec.ts

@@ -1,24 +1,24 @@
 import {TAB} from '@angular/cdk/keycodes';
+import {Platform} from '@angular/cdk/platform';
+import {DOCUMENT} from '@angular/common';
+import {Component, ViewChild} from '@angular/core';
+import {ComponentFixture, TestBed, fakeAsync, flush, inject, tick} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
 import {
+  createMouseEvent,
+  dispatchEvent,
   dispatchFakeEvent,
   dispatchKeyboardEvent,
   dispatchMouseEvent,
   patchElementFocus,
-  createMouseEvent,
-  dispatchEvent,
 } from '../../testing/private';
-import {DOCUMENT} from '@angular/common';
-import {Component, NgZone, ViewChild, provideZoneChangeDetection} from '@angular/core';
-import {ComponentFixture, fakeAsync, flush, inject, TestBed, tick} from '@angular/core/testing';
-import {By} from '@angular/platform-browser';
-import {Platform} from '@angular/cdk/platform';
 import {A11yModule, CdkMonitorFocus} from '../index';
 import {TOUCH_BUFFER_MS} from '../input-modality/input-modality-detector';
 import {
+  FOCUS_MONITOR_DEFAULT_OPTIONS,
   FocusMonitor,
   FocusMonitorDetectionMode,
   FocusOrigin,
-  FOCUS_MONITOR_DEFAULT_OPTIONS,
 } from './focus-monitor';
 
 describe('FocusMonitor', () => {
@@ -826,7 +826,7 @@ describe('FocusMonitor observable stream', () => {
     fakePlatform = {isBrowser: true} as Platform;
     TestBed.configureTestingModule({
       imports: [A11yModule, PlainButton],
-      providers: [{provide: Platform, useValue: fakePlatform}, provideZoneChangeDetection()],
+      providers: [{provide: Platform, useValue: fakePlatform}],
     }).compileComponents();
   });
 
@@ -838,17 +838,6 @@ describe('FocusMonitor observable stream', () => {
     patchElementFocus(buttonElement);
   }));
 
-  it('should emit inside the NgZone', fakeAsync(() => {
-    const spy = jasmine.createSpy('zone spy');
-    focusMonitor.monitor(buttonElement).subscribe(() => spy(NgZone.isInAngularZone()));
-    expect(spy).not.toHaveBeenCalled();
-
-    buttonElement.focus();
-    fixture.detectChanges();
-    tick();
-    expect(spy).toHaveBeenCalledWith(true);
-  }));
-
   it('should not emit on the server', fakeAsync(() => {
     fakePlatform.isBrowser = false;
     const emitSpy = jasmine.createSpy('emit spy');

src/cdk/a11y/focus-monitor/focus-monitor.zone.spec.ts

@@ -0,0 +1,47 @@
+import {Platform} from '@angular/cdk/platform';
+import {patchElementFocus} from '@angular/cdk/testing/private';
+import {Component, NgZone, provideZoneChangeDetection} from '@angular/core';
+import {ComponentFixture, TestBed, fakeAsync, inject, tick} from '@angular/core/testing';
+import {A11yModule} from '../a11y-module';
+import {FocusMonitor} from './focus-monitor';
+
+describe('FocusMonitor observable stream Zone.js integration', () => {
+  let fixture: ComponentFixture<PlainButton>;
+  let buttonElement: HTMLElement;
+  let focusMonitor: FocusMonitor;
+  let fakePlatform: Platform;
+
+  beforeEach(() => {
+    fakePlatform = {isBrowser: true} as Platform;
+    TestBed.configureTestingModule({
+      imports: [A11yModule, PlainButton],
+      providers: [{provide: Platform, useValue: fakePlatform}, provideZoneChangeDetection()],
+    }).compileComponents();
+  });
+
+  beforeEach(inject([FocusMonitor], (fm: FocusMonitor) => {
+    fixture = TestBed.createComponent(PlainButton);
+    focusMonitor = fm;
+    fixture.detectChanges();
+    buttonElement = fixture.debugElement.nativeElement.querySelector('button');
+    patchElementFocus(buttonElement);
+  }));
+
+  it('should emit inside the NgZone', fakeAsync(() => {
+    const spy = jasmine.createSpy('zone spy');
+    focusMonitor.monitor(buttonElement).subscribe(() => spy(NgZone.isInAngularZone()));
+    expect(spy).not.toHaveBeenCalled();
+
+    buttonElement.focus();
+    fixture.detectChanges();
+    tick();
+    expect(spy).toHaveBeenCalledWith(true);
+  }));
+});
+
+@Component({
+  template: `<div class="parent"><button>focus me!</button></div>`,
+  standalone: true,
+  imports: [A11yModule],
+})
+class PlainButton {}

src/cdk/a11y/live-announcer/live-announcer.spec.ts

@@ -1,8 +1,8 @@
 import {MutationObserverFactory} from '@angular/cdk/observers';
 import {Overlay} from '@angular/cdk/overlay';
 import {ComponentPortal} from '@angular/cdk/portal';
-import {Component, provideZoneChangeDetection} from '@angular/core';
-import {ComponentFixture, fakeAsync, flush, inject, TestBed, tick} from '@angular/core/testing';
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed, fakeAsync, flush, inject, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {A11yModule} from '../index';
 import {LiveAnnouncer} from './live-announcer';
@@ -21,7 +21,6 @@ describe('LiveAnnouncer', () => {
   describe('with default element', () => {
     beforeEach(() =>
       TestBed.configureTestingModule({
-        providers: [provideZoneChangeDetection()],
         imports: [A11yModule, TestApp, TestModal],
       }),
     );
@@ -128,7 +127,6 @@ describe('LiveAnnouncer', () => {
       fixture.destroy();
 
       TestBed.resetTestingModule().configureTestingModule({
-        providers: [provideZoneChangeDetection()],
         imports: [A11yModule],
       });
 
@@ -180,6 +178,7 @@ describe('LiveAnnouncer', () => {
       const overlayRef = overlay.create();
       const componentRef = overlayRef.attach(portal);
       const modal = componentRef.location.nativeElement;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(ariaLiveElement.id).toBeTruthy();
@@ -200,6 +199,7 @@ describe('LiveAnnouncer', () => {
       const overlayRef = overlay.create();
       const componentRef = overlayRef.attach(portal);
       const modal = componentRef.location.nativeElement;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       componentRef.instance.ariaOwns = 'foo bar';
@@ -227,10 +227,7 @@ describe('LiveAnnouncer', () => {
 
       return TestBed.configureTestingModule({
         imports: [A11yModule, TestApp],
-        providers: [
-          provideZoneChangeDetection(),
-          {provide: LIVE_ANNOUNCER_ELEMENT_TOKEN, useValue: customLiveElement},
-        ],
+        providers: [{provide: LIVE_ANNOUNCER_ELEMENT_TOKEN, useValue: customLiveElement}],
       });
     });
 
@@ -254,7 +251,6 @@ describe('LiveAnnouncer', () => {
       return TestBed.configureTestingModule({
         imports: [A11yModule, TestApp],
         providers: [
-          provideZoneChangeDetection(),
           {
             provide: LIVE_ANNOUNCER_DEFAULT_OPTIONS,
             useValue: {
@@ -303,7 +299,6 @@ describe('CdkAriaLive', () => {
     TestBed.configureTestingModule({
       imports: [A11yModule, DivWithCdkAriaLive],
       providers: [
-        provideZoneChangeDetection(),
         {
           provide: MutationObserverFactory,
           useValue: {
@@ -325,13 +320,15 @@ describe('CdkAriaLive', () => {
       announcer = la;
       announcerSpy = spyOn(la, 'announce').and.callThrough();
       fixture = TestBed.createComponent(DivWithCdkAriaLive);
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
       flush();
     }),
   ));
 
   it('should default politeness to polite', fakeAsync(() => {
     fixture.componentInstance.content = 'New content';
+    fixture.changeDetectorRef.markForCheck();
     fixture.detectChanges();
     invokeMutationCallbacks();
     flush();
@@ -341,6 +338,7 @@ describe('CdkAriaLive', () => {
 
   it('should dynamically update the politeness', fakeAsync(() => {
     fixture.componentInstance.content = 'New content';
+    fixture.changeDetectorRef.markForCheck();
     fixture.detectChanges();
     invokeMutationCallbacks();
     flush();
@@ -350,6 +348,7 @@ describe('CdkAriaLive', () => {
     announcerSpy.calls.reset();
     fixture.componentInstance.politeness = 'off';
     fixture.componentInstance.content = 'Newer content';
+    fixture.changeDetectorRef.markForCheck();
     fixture.detectChanges();
     invokeMutationCallbacks();
     flush();
@@ -359,6 +358,7 @@ describe('CdkAriaLive', () => {
     announcerSpy.calls.reset();
     fixture.componentInstance.politeness = 'assertive';
     fixture.componentInstance.content = 'Newest content';
+    fixture.changeDetectorRef.markForCheck();
     fixture.detectChanges();
     invokeMutationCallbacks();
     flush();
@@ -368,12 +368,14 @@ describe('CdkAriaLive', () => {
 
   it('should not announce the same text multiple times', fakeAsync(() => {
     fixture.componentInstance.content = 'Content';
+    fixture.changeDetectorRef.markForCheck();
     fixture.detectChanges();
     invokeMutationCallbacks();
     flush();
 
     expect(announcer.announce).toHaveBeenCalledTimes(1);
 
+    fixture.changeDetectorRef.markForCheck();
     fixture.detectChanges();
     invokeMutationCallbacks();
     flush();
@@ -384,6 +386,7 @@ describe('CdkAriaLive', () => {
   it('should be able to pass in a duration', fakeAsync(() => {
     fixture.componentInstance.content = 'New content';
     fixture.componentInstance.duration = 1337;
+    fixture.changeDetectorRef.markForCheck();
     fixture.detectChanges();
     invokeMutationCallbacks();
     flush();

src/cdk/clipboard/copy-to-clipboard.spec.ts

@@ -1,5 +1,5 @@
-import {Component, provideZoneChangeDetection} from '@angular/core';
-import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
 
 import {Clipboard} from './clipboard';
 import {ClipboardModule} from './clipboard-module';
@@ -30,7 +30,6 @@ describe('CdkCopyToClipboard', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [ClipboardModule, CopyToClipboardHost],
-      providers: [provideZoneChangeDetection()],
     });
 
     TestBed.compileComponents();
@@ -42,6 +41,7 @@ describe('CdkCopyToClipboard', () => {
     const host = fixture.componentInstance;
     host.content = COPY_CONTENT;
     clipboard = TestBed.inject(Clipboard);
+    fixture.changeDetectorRef.markForCheck();
     fixture.detectChanges();
   });
 
@@ -74,9 +74,11 @@ describe('CdkCopyToClipboard', () => {
       destroy: () => {},
     } as PendingCopy);
     fixture.componentInstance.attempts = maxAttempts;
+    fixture.changeDetectorRef.markForCheck();
     fixture.detectChanges();
 
     fixture.nativeElement.querySelector('button')!.click();
+    fixture.changeDetectorRef.markForCheck();
     fixture.detectChanges();
     tick(3);
 
@@ -96,9 +98,11 @@ describe('CdkCopyToClipboard', () => {
       destroy: () => {},
     } as PendingCopy);
     fixture.componentInstance.attempts = maxAttempts;
+    fixture.changeDetectorRef.markForCheck();
     fixture.detectChanges();
 
     fixture.nativeElement.querySelector('button')!.click();
+    fixture.changeDetectorRef.markForCheck();
     fixture.detectChanges();
     tick(3);
 
@@ -114,12 +118,15 @@ describe('CdkCopyToClipboard', () => {
     } as PendingCopy;
 
     fixture.componentInstance.attempts = 10;
+    fixture.changeDetectorRef.markForCheck();
     fixture.detectChanges();
 
     spyOn(clipboard, 'beginCopy').and.returnValue(fakeCopy);
+    fixture.changeDetectorRef.markForCheck();
     fixture.detectChanges();
 
     fixture.nativeElement.querySelector('button')!.click();
+    fixture.changeDetectorRef.markForCheck();
     fixture.detectChanges();
     tick(1);