test: rewrite tests that test zone.js implementation details

Author: mmalerba

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

@@ -1,7 +1,7 @@
 import {TAB} from '@angular/cdk/keycodes';
 import {Platform} from '@angular/cdk/platform';
 import {DOCUMENT} from '@angular/common';
-import {Component, ViewChild} from '@angular/core';
+import {Component, ViewChild, provideZoneChangeDetection} from '@angular/core';
 import {ComponentFixture, TestBed, fakeAsync, flush, inject, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {
@@ -34,6 +34,7 @@ describe('FocusMonitor', () => {
     TestBed.configureTestingModule({
       imports: [A11yModule, PlainButton],
       providers: [
+        provideZoneChangeDetection(),
         {
           provide: DOCUMENT,
           useFactory: () => {
@@ -899,6 +900,28 @@ describe('FocusMonitor input label detection', () => {
   }));
 });
 
+describe('cdkMonitorFocus with change detection counter', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [A11yModule, ButtonWithCDCounter],
+
+      providers: [
+        provideZoneChangeDetection(), // TODO: Make this work with zoneless.
+        {provide: Platform, useValue: {isBrowser: true}},
+      ],
+    }).compileComponents();
+  });
+
+  it('should detect changes caused by focus change', () => {
+    const fixture = TestBed.createComponent(ButtonWithCDCounter);
+    fixture.autoDetectChanges();
+    const buttonElement = fixture.nativeElement.querySelector('button');
+    buttonElement.focus();
+    const focusChangeCounter = fixture.nativeElement.querySelector('.focus-change-counter');
+    expect(focusChangeCounter.innerText).toBe('1');
+  });
+});
+
 @Component({
   template: `<div class="parent"><button>focus me!</button></div>`,
   standalone: true,
@@ -961,3 +984,15 @@ class CheckboxWithLabel {}
 class ExportedFocusMonitor {
   @ViewChild('exportedDir') exportedDirRef: CdkMonitorFocus;
 }
+
+@Component({
+  template: `
+    <button cdkMonitorElementFocus (cdkFocusChange)="focusChangeCount = focusChangeCount + 1"></button>
+    <div class="focus-change-counter">{{focusChangeCount}}</div>
+  `,
+  standalone: true,
+  imports: [A11yModule],
+})
+class ButtonWithCDCounter {
+  focusChangeCount = 0;
+}

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

@@ -566,6 +566,16 @@ describe('CdkDrag', () => {
       subscription.unsubscribe();
     });
 
+    it('should detect changes cased by `cdkDragMoved`', () => {
+      const fixture = createComponent(StandaloneDraggable);
+      fixture.autoDetectChanges();
+
+      dragElementViaMouse(fixture, fixture.componentInstance.dragElement.nativeElement, 10, 20);
+
+      const movedCounter = fixture.nativeElement.querySelector('.moved-counter');
+      expect(movedCounter.innerText).toBe('1');
+    });
+
     it('should complete the `moved` stream on destroy', () => {
       const fixture = createComponent(StandaloneDraggable);
       fixture.changeDetectorRef.markForCheck();
@@ -7268,9 +7278,11 @@ describe('CdkDrag', () => {
         (cdkDragStarted)="startedSpy($event)"
         (cdkDragReleased)="releasedSpy($event)"
         (cdkDragEnded)="endedSpy($event)"
+        (cdkDragMoved)="movedCount = movedCount + 1"
         #dragElement
         style="width: 100px; height: 100px; background: red;"></div>
     </div>
+    <div class="moved-counter">{{movedCount}}</div>
   `,
 })
 class StandaloneDraggable {
@@ -7283,6 +7295,7 @@ class StandaloneDraggable {
   dragStartDelay: number | string | {touch: number; mouse: number};
   constrainPosition: (point: Point) => Point;
   freeDragPosition?: {x: number; y: number};
+  movedCount = 0;
 }
 
 @Component({

src/cdk/drag-drop/directives/drag.spec.ts

@@ -680,6 +680,15 @@ describe('Overlay directives', () => {
         .toBe(true);
     });
 
+    it('should detect changes caused by position change', () => {
+      fixture.destroy();
+      fixture = TestBed.createComponent(ConnectedOverlayDirectiveTest);
+      fixture.componentInstance.isOpen = true;
+      fixture.autoDetectChanges();
+      const positionChangeCounter = fixture.nativeElement.querySelector('.position-change-counter');
+      expect(positionChangeCounter.innerText).toBe('1');
+    });
+
     it('should emit when attached', () => {
       expect(fixture.componentInstance.attachHandler).not.toHaveBeenCalled();
       fixture.componentInstance.isOpen = true;
@@ -764,6 +773,7 @@ describe('Overlay directives', () => {
   <button cdk-overlay-origin id="trigger" #trigger="cdkOverlayOrigin">Toggle menu</button>
   <button cdk-overlay-origin id="otherTrigger" #otherTrigger="cdkOverlayOrigin">Toggle menu</button>
   <button id="nonDirectiveTrigger" #nonDirectiveTrigger>Toggle menu</button>
+  <div class="position-change-counter">{{positionChangeCount}}</div>
 
   <ng-template cdk-connected-overlay
             [cdkConnectedOverlayOpen]="isOpen"
@@ -783,7 +793,7 @@ describe('Overlay directives', () => {
             (backdropClick)="backdropClickHandler($event)"
             [cdkConnectedOverlayOffsetX]="offsetX"
             [cdkConnectedOverlayOffsetY]="offsetY"
-            (positionChange)="positionChangeHandler($event)"
+            (positionChange)="positionChangeCount = positionChangeCount + 1; positionChangeHandler($event)"
             (attach)="attachHandler()"
             (detach)="detachHandler()"
             (overlayKeydown)="keydownHandler($event)"
@@ -829,6 +839,7 @@ class ConnectedOverlayDirectiveTest {
   detachHandler = jasmine.createSpy('detachHandler');
   attachResult: HTMLElement;
   transformOriginSelector: string;
+  positionChangeCount = 0;
 }
 
 @Component({