Skip to content

Commit 04d3b63

Browse files
mmalerbammalerba
authored
test: Move more CDK tests to zoneless (angular#29144)
1 parent dbcf35d commit 04d3b63

File tree

11 files changed

+241
-104
lines changed

11 files changed

+241
-104
lines changed

‎src/cdk/a11y/focus-trap/focus-trap.spec.ts

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
import {Platform, _supportsShadowDom} from '@angular/cdk/platform';
2+
import {CdkPortalOutlet, PortalModule, TemplatePortal} from '@angular/cdk/portal';
23
import {
34
Component,
4-
ViewChild,
55
TemplateRef,
6+
ViewChild,
67
ViewContainerRef,
78
ViewEncapsulation,
8-
provideZoneChangeDetection,
99
} from '@angular/core';
10-
import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
11-
import {PortalModule, CdkPortalOutlet, TemplatePortal} from '@angular/cdk/portal';
12-
import {A11yModule, FocusTrap, CdkTrapFocus} from '../index';
10+
import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
1311
import {By} from '@angular/platform-browser';
12+
import {A11yModule, CdkTrapFocus, FocusTrap} from '../index';
1413

1514
describe('FocusTrap', () => {
1615
beforeEach(waitForAsync(() => {
1716
TestBed.configureTestingModule({
18-
providers: [provideZoneChangeDetection()],
1917
imports: [
2018
A11yModule,
2119
PortalModule,
@@ -106,6 +104,7 @@ describe('FocusTrap', () => {
106104
expect(rootElement.querySelectorAll('div.cdk-visually-hidden').length).toBe(2);
107105

108106
fixture.componentInstance.renderFocusTrap = false;
107+
fixture.changeDetectorRef.markForCheck();
109108
fixture.detectChanges();
110109

111110
expect(rootElement.querySelectorAll('div.cdk-visually-hidden').length).toBe(0);
@@ -120,6 +119,7 @@ describe('FocusTrap', () => {
120119
expect(anchors.every(current => current.getAttribute('aria-hidden') === 'true')).toBe(true);
121120

122121
fixture.componentInstance._isFocusTrapEnabled = false;
122+
fixture.changeDetectorRef.markForCheck();
123123
fixture.detectChanges();
124124

125125
expect(anchors.every(current => !current.hasAttribute('tabindex'))).toBe(true);
@@ -216,12 +216,16 @@ describe('FocusTrap', () => {
216216
expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
217217

218218
fixture.componentInstance.showTrappedRegion = true;
219+
fixture.changeDetectorRef.markForCheck();
219220
fixture.detectChanges();
220221

221222
fixture.whenStable().then(() => {
222223
expect(getActiveElement().id).toBe('auto-capture-target');
223224

224-
fixture.destroy();
225+
fixture.componentInstance.showTrappedRegion = false;
226+
fixture.changeDetectorRef.markForCheck();
227+
fixture.detectChanges();
228+
225229
expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
226230
});
227231
}));
@@ -230,19 +234,24 @@ describe('FocusTrap', () => {
230234
const fixture = TestBed.createComponent(FocusTrapWithAutoCapture);
231235
fixture.componentInstance.autoCaptureEnabled = false;
232236
fixture.componentInstance.showTrappedRegion = true;
237+
fixture.changeDetectorRef.markForCheck();
233238
fixture.detectChanges();
234239

235240
const buttonOutsideTrappedRegion = fixture.nativeElement.querySelector('button');
236241
buttonOutsideTrappedRegion.focus();
237242
expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
238243

239244
fixture.componentInstance.autoCaptureEnabled = true;
245+
fixture.changeDetectorRef.markForCheck();
240246
fixture.detectChanges();
241247

242248
fixture.whenStable().then(() => {
243249
expect(getActiveElement().id).toBe('auto-capture-target');
244250

245-
fixture.destroy();
251+
fixture.componentInstance.showTrappedRegion = false;
252+
fixture.changeDetectorRef.markForCheck();
253+
fixture.detectChanges();
254+
246255
expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
247256
});
248257
}));
@@ -260,12 +269,16 @@ describe('FocusTrap', () => {
260269
expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
261270

262271
fixture.componentInstance.showTrappedRegion = true;
272+
fixture.changeDetectorRef.markForCheck();
263273
fixture.detectChanges();
264274

265275
fixture.whenStable().then(() => {
266276
expect(getActiveElement().id).toBe('auto-capture-target');
267277

268-
fixture.destroy();
278+
fixture.componentInstance.showTrappedRegion = false;
279+
fixture.changeDetectorRef.markForCheck();
280+
fixture.detectChanges();
281+
269282
expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
270283
});
271284
}));
@@ -278,19 +291,24 @@ describe('FocusTrap', () => {
278291
const fixture = TestBed.createComponent(FocusTrapWithAutoCaptureInShadowDom);
279292
fixture.componentInstance.autoCaptureEnabled = false;
280293
fixture.componentInstance.showTrappedRegion = true;
294+
fixture.changeDetectorRef.markForCheck();
281295
fixture.detectChanges();
282296

283297
const buttonOutsideTrappedRegion = fixture.debugElement.query(By.css('button')).nativeElement;
284298
buttonOutsideTrappedRegion.focus();
285299
expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
286300

287301
fixture.componentInstance.autoCaptureEnabled = true;
302+
fixture.changeDetectorRef.markForCheck();
288303
fixture.detectChanges();
289304

290305
fixture.whenStable().then(() => {
291306
expect(getActiveElement().id).toBe('auto-capture-target');
292307

293-
fixture.destroy();
308+
fixture.componentInstance.showTrappedRegion = false;
309+
fixture.changeDetectorRef.markForCheck();
310+
fixture.detectChanges();
311+
294312
expect(getActiveElement()).toBe(buttonOutsideTrappedRegion);
295313
});
296314
}));

‎src/cdk/menu/menu-base.ts

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,29 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {CdkMenuGroup} from './menu-group';
9+
import {FocusKeyManager, FocusOrigin} from '@angular/cdk/a11y';
10+
import {Directionality} from '@angular/cdk/bidi';
1011
import {
1112
AfterContentInit,
1213
ContentChildren,
1314
Directive,
1415
ElementRef,
15-
inject,
1616
Input,
1717
NgZone,
1818
OnDestroy,
1919
QueryList,
20+
computed,
21+
inject,
22+
signal,
2023
} from '@angular/core';
21-
import {FocusKeyManager, FocusOrigin} from '@angular/cdk/a11y';
22-
import {CdkMenuItem} from './menu-item';
23-
import {merge, Subject} from 'rxjs';
24-
import {Directionality} from '@angular/cdk/bidi';
24+
import {Subject, merge} from 'rxjs';
2525
import {mapTo, mergeAll, mergeMap, startWith, switchMap, takeUntil} from 'rxjs/operators';
26-
import {MENU_STACK, MenuStack, MenuStackItem} from './menu-stack';
26+
import {MENU_AIM} from './menu-aim';
27+
import {CdkMenuGroup} from './menu-group';
2728
import {Menu} from './menu-interface';
29+
import {CdkMenuItem} from './menu-item';
30+
import {MENU_STACK, MenuStack, MenuStackItem} from './menu-stack';
2831
import {PointerFocusTracker} from './pointer-focus-tracker';
29-
import {MENU_AIM} from './menu-aim';
3032

3133
/** Counter used to create unique IDs for menus. */
3234
let nextId = 0;
@@ -97,7 +99,12 @@ export abstract class CdkMenuBase
9799
protected pointerTracker?: PointerFocusTracker<CdkMenuItem>;
98100

99101
/** Whether this menu's menu stack has focus. */
100-
private _menuStackHasFocus = false;
102+
private _menuStackHasFocus = signal(false);
103+
104+
private _tabIndexSignal = computed(() => {
105+
const tabindexIfInline = this._menuStackHasFocus() ? -1 : 0;
106+
return this.isInline ? tabindexIfInline : null;
107+
});
101108

102109
ngAfterContentInit() {
103110
if (!this.isInline) {
@@ -137,8 +144,7 @@ export abstract class CdkMenuBase
137144

138145
/** Gets the tabindex for this menu. */
139146
_getTabIndex() {
140-
const tabindexIfInline = this._menuStackHasFocus ? -1 : 0;
141-
return this.isInline ? tabindexIfInline : null;
147+
return this._tabIndexSignal();
142148
}
143149

144150
/**
@@ -211,7 +217,7 @@ export abstract class CdkMenuBase
211217
private _subscribeToMenuStackHasFocus() {
212218
if (this.isInline) {
213219
this.menuStack.hasFocus.pipe(takeUntil(this.destroyed)).subscribe(hasFocus => {
214-
this._menuStackHasFocus = hasFocus;
220+
this._menuStackHasFocus.set(hasFocus);
215221
});
216222
}
217223
}

‎src/cdk/menu/menu-trigger.spec.ts

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
import {ENTER, SPACE, TAB} from '@angular/cdk/keycodes';
2-
import {
3-
Component,
4-
ElementRef,
5-
QueryList,
6-
Type,
7-
ViewChild,
8-
ViewChildren,
9-
provideZoneChangeDetection,
10-
} from '@angular/core';
2+
import {Component, ElementRef, QueryList, Type, ViewChild, ViewChildren} from '@angular/core';
113
import {ComponentFixture, TestBed, fakeAsync, tick, waitForAsync} from '@angular/core/testing';
124
import {By} from '@angular/platform-browser';
135
import {dispatchKeyboardEvent} from '../../cdk/testing/private';
@@ -122,7 +114,6 @@ describe('MenuTrigger', () => {
122114
TestBed.configureTestingModule({
123115
imports: [CdkMenuModule],
124116
declarations: [MenuBarWithNestedSubMenus],
125-
providers: [provideZoneChangeDetection()],
126117
}).compileComponents();
127118
}));
128119

@@ -161,6 +152,7 @@ describe('MenuTrigger', () => {
161152

162153
it('should not open the menu when menu item disabled', () => {
163154
menuItems[0].disabled = true;
155+
fixture.changeDetectorRef.markForCheck();
164156

165157
menuItems[0].trigger();
166158
detectChanges();

‎src/cdk/menu/menu.spec.ts

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
import {TAB} from '@angular/cdk/keycodes';
2-
import {
3-
Component,
4-
ElementRef,
5-
QueryList,
6-
ViewChild,
7-
ViewChildren,
8-
provideZoneChangeDetection,
9-
} from '@angular/core';
2+
import {Component, ElementRef, QueryList, ViewChild, ViewChildren} from '@angular/core';
103
import {
114
ComponentFixture,
125
TestBed,
@@ -145,7 +138,6 @@ describe('Menu', () => {
145138
beforeEach(waitForAsync(() => {
146139
TestBed.configureTestingModule({
147140
imports: [CdkMenuModule, WithComplexNestedMenus],
148-
providers: [provideZoneChangeDetection()],
149141
}).compileComponents();
150142
}));
151143

@@ -337,7 +329,6 @@ describe('Menu', () => {
337329
beforeEach(waitForAsync(() => {
338330
TestBed.configureTestingModule({
339331
imports: [CdkMenuModule, WithComplexNestedMenusOnBottom],
340-
providers: [provideZoneChangeDetection()],
341332
}).compileComponents();
342333
}));
343334

0 commit comments

Comments
 (0)