test: Move more CDK tests to zoneless

angular · May 30, 2024 · 95f6f3b · 95f6f3b
1 parent 205c0a4
commit 95f6f3b
Show file tree

Hide file tree

Showing 11 changed files with 243 additions and 110 deletions.
diff --git a/src/cdk/a11y/focus-trap/focus-trap.spec.ts b/src/cdk/a11y/focus-trap/focus-trap.spec.ts
@@ -1,21 +1,19 @@
 import {Platform, _supportsShadowDom} from '@angular/cdk/platform';
+import {CdkPortalOutlet, PortalModule, TemplatePortal} from '@angular/cdk/portal';
 import {
   Component,
-  ViewChild,
   TemplateRef,
+  ViewChild,
   ViewContainerRef,
   ViewEncapsulation,
-  provideZoneChangeDetection,
 } from '@angular/core';
-import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
-import {PortalModule, CdkPortalOutlet, TemplatePortal} from '@angular/cdk/portal';
-import {A11yModule, FocusTrap, CdkTrapFocus} from '../index';
+import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
+import {A11yModule, CdkTrapFocus, FocusTrap} from '../index';
 
 describe('FocusTrap', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      providers: [provideZoneChangeDetection()],
       imports: [
         A11yModule,
         PortalModule,
@@ -106,6 +104,7 @@ describe('FocusTrap', () => {
       expect(rootElement.querySelectorAll('div.cdk-visually-hidden').length).toBe(2);
 
       fixture.componentInstance.renderFocusTrap = false;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(rootElement.querySelectorAll('div.cdk-visually-hidden').length).toBe(0);
@@ -120,6 +119,7 @@ describe('FocusTrap', () => {
       expect(anchors.every(current => current.getAttribute('aria-hidden') === 'true')).toBe(true);
 
       fixture.componentInstance._isFocusTrapEnabled = false;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(anchors.every(current => !current.hasAttribute('tabindex'))).toBe(true);
@@ -216,12 +216,16 @@ describe('FocusTrap', () => {
       expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
 
       fixture.componentInstance.showTrappedRegion = true;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
         expect(getActiveElement().id).toBe('auto-capture-target');
 
-        fixture.destroy();
+        fixture.componentInstance.showTrappedRegion = false;
+        fixture.changeDetectorRef.markForCheck();
+        fixture.detectChanges();
+
         expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
       });
     }));
@@ -230,19 +234,24 @@ describe('FocusTrap', () => {
       const fixture = TestBed.createComponent(FocusTrapWithAutoCapture);
       fixture.componentInstance.autoCaptureEnabled = false;
       fixture.componentInstance.showTrappedRegion = true;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       const buttonOutsideTrappedRegion = fixture.nativeElement.querySelector('button');
       buttonOutsideTrappedRegion.focus();
       expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
 
       fixture.componentInstance.autoCaptureEnabled = true;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
         expect(getActiveElement().id).toBe('auto-capture-target');
 
-        fixture.destroy();
+        fixture.componentInstance.showTrappedRegion = false;
+        fixture.changeDetectorRef.markForCheck();
+        fixture.detectChanges();
+
         expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
       });
     }));
@@ -260,12 +269,16 @@ describe('FocusTrap', () => {
       expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
 
       fixture.componentInstance.showTrappedRegion = true;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
         expect(getActiveElement().id).toBe('auto-capture-target');
 
-        fixture.destroy();
+        fixture.componentInstance.showTrappedRegion = false;
+        fixture.changeDetectorRef.markForCheck();
+        fixture.detectChanges();
+
         expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
       });
     }));
@@ -278,19 +291,24 @@ describe('FocusTrap', () => {
       const fixture = TestBed.createComponent(FocusTrapWithAutoCaptureInShadowDom);
       fixture.componentInstance.autoCaptureEnabled = false;
       fixture.componentInstance.showTrappedRegion = true;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       const buttonOutsideTrappedRegion = fixture.debugElement.query(By.css('button')).nativeElement;
       buttonOutsideTrappedRegion.focus();
       expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
 
       fixture.componentInstance.autoCaptureEnabled = true;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
         expect(getActiveElement().id).toBe('auto-capture-target');
 
-        fixture.destroy();
+        fixture.componentInstance.showTrappedRegion = false;
+        fixture.changeDetectorRef.markForCheck();
+        fixture.detectChanges();
+
         expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
       });
     }));

diff --git a/src/cdk/menu/menu-base.ts b/src/cdk/menu/menu-base.ts
@@ -6,27 +6,29 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CdkMenuGroup} from './menu-group';
+import {FocusKeyManager, FocusOrigin} from '@angular/cdk/a11y';
+import {Directionality} from '@angular/cdk/bidi';
 import {
   AfterContentInit,
   ContentChildren,
   Directive,
   ElementRef,
-  inject,
   Input,
   NgZone,
   OnDestroy,
   QueryList,
+  computed,
+  inject,
+  signal,
 } from '@angular/core';
-import {FocusKeyManager, FocusOrigin} from '@angular/cdk/a11y';
-import {CdkMenuItem} from './menu-item';
-import {merge, Subject} from 'rxjs';
-import {Directionality} from '@angular/cdk/bidi';
+import {Subject, merge} from 'rxjs';
 import {mapTo, mergeAll, mergeMap, startWith, switchMap, takeUntil} from 'rxjs/operators';
-import {MENU_STACK, MenuStack, MenuStackItem} from './menu-stack';
+import {MENU_AIM} from './menu-aim';
+import {CdkMenuGroup} from './menu-group';
 import {Menu} from './menu-interface';
+import {CdkMenuItem} from './menu-item';
+import {MENU_STACK, MenuStack, MenuStackItem} from './menu-stack';
 import {PointerFocusTracker} from './pointer-focus-tracker';
-import {MENU_AIM} from './menu-aim';
 
 /** Counter used to create unique IDs for menus. */
 let nextId = 0;
@@ -97,7 +99,12 @@ export abstract class CdkMenuBase
   protected pointerTracker?: PointerFocusTracker<CdkMenuItem>;
 
   /** Whether this menu's menu stack has focus. */
-  private _menuStackHasFocus = false;
+  private _menuStackHasFocus = signal(false);
+
+  private _tabIndexSignal = computed(() => {
+    const tabindexIfInline = this._menuStackHasFocus() ? -1 : 0;
+    return this.isInline ? tabindexIfInline : null;
+  });
 
   ngAfterContentInit() {
     if (!this.isInline) {
@@ -137,8 +144,7 @@ export abstract class CdkMenuBase
 
   /** Gets the tabindex for this menu. */
   _getTabIndex() {
-    const tabindexIfInline = this._menuStackHasFocus ? -1 : 0;
-    return this.isInline ? tabindexIfInline : null;
+    return this._tabIndexSignal();
   }
 
   /**
@@ -211,7 +217,7 @@ export abstract class CdkMenuBase
   private _subscribeToMenuStackHasFocus() {
     if (this.isInline) {
       this.menuStack.hasFocus.pipe(takeUntil(this.destroyed)).subscribe(hasFocus => {
-        this._menuStackHasFocus = hasFocus;
+        this._menuStackHasFocus.set(hasFocus);
       });
     }
   }

diff --git a/src/cdk/menu/menu-trigger.spec.ts b/src/cdk/menu/menu-trigger.spec.ts
@@ -1,13 +1,5 @@
 import {ENTER, SPACE, TAB} from '@angular/cdk/keycodes';
-import {
-  Component,
-  ElementRef,
-  QueryList,
-  Type,
-  ViewChild,
-  ViewChildren,
-  provideZoneChangeDetection,
-} from '@angular/core';
+import {Component, ElementRef, QueryList, Type, ViewChild, ViewChildren} from '@angular/core';
 import {ComponentFixture, TestBed, fakeAsync, tick, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {dispatchKeyboardEvent} from '../../cdk/testing/private';
@@ -122,7 +114,6 @@ describe('MenuTrigger', () => {
       TestBed.configureTestingModule({
         imports: [CdkMenuModule],
         declarations: [MenuBarWithNestedSubMenus],
-        providers: [provideZoneChangeDetection()],
       }).compileComponents();
     }));
 
@@ -161,6 +152,7 @@ describe('MenuTrigger', () => {
 
     it('should not open the menu when menu item disabled', () => {
       menuItems[0].disabled = true;
+      fixture.changeDetectorRef.markForCheck();
 
       menuItems[0].trigger();
       detectChanges();

diff --git a/src/cdk/menu/menu.spec.ts b/src/cdk/menu/menu.spec.ts
@@ -1,12 +1,5 @@
 import {TAB} from '@angular/cdk/keycodes';
-import {
-  Component,
-  ElementRef,
-  QueryList,
-  ViewChild,
-  ViewChildren,
-  provideZoneChangeDetection,
-} from '@angular/core';
+import {Component, ElementRef, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {
   ComponentFixture,
   TestBed,
@@ -145,7 +138,6 @@ describe('Menu', () => {
       beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
           imports: [CdkMenuModule, WithComplexNestedMenus],
-          providers: [provideZoneChangeDetection()],
         }).compileComponents();
       }));
 
@@ -337,7 +329,6 @@ describe('Menu', () => {
       beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
           imports: [CdkMenuModule, WithComplexNestedMenusOnBottom],
-          providers: [provideZoneChangeDetection()],
         }).compileComponents();
       }));