test(multiple): Update test initializer to provide zoneless by default

This commit uses the zoneless provier for all tests by default. Tests which failed have either been updated to be compatible or have been opted out. Note that tests which were opted out does not mean the components are incompatible with zoneless, but likely that the tests rely on the zone provider in some way. Opt outs require the private `ZONELESS_ENABLED` token set to `false` in the providers manually because there is a check that will throw an error when both zoneless and zone providers are used. This should likely be fixed in the framework code to make it easier for test suites to do what we're doing here: use zoneless for all tests by default and temporarily use zones for tests that need it until there is time to migrate them.
angular · May 15, 2024 · c3722a8 · c3722a8
1 parent 37958ef
commit c3722a8
Show file tree

Hide file tree

Showing 149 changed files with 1,162 additions and 532 deletions.
diff --git a/package.json b/package.json
@@ -56,12 +56,12 @@
   },
   "version": "18.1.0-next.0",
   "dependencies": {
-    "@angular/animations": "^18.0.0-rc.0",
-    "@angular/common": "^18.0.0-rc.0",
-    "@angular/compiler": "^18.0.0-rc.0",
-    "@angular/core": "^18.0.0-rc.0",
-    "@angular/forms": "^18.0.0-rc.0",
-    "@angular/platform-browser": "^18.0.0-rc.0",
+    "@angular/animations": "^18.0.0-rc.1",
+    "@angular/common": "^18.0.0-rc.1",
+    "@angular/compiler": "^18.0.0-rc.1",
+    "@angular/core": "^18.0.0-rc.1",
+    "@angular/forms": "^18.0.0-rc.1",
+    "@angular/platform-browser": "^18.0.0-rc.1",
     "@types/google.maps": "^3.54.10",
     "@types/youtube": "^0.0.50",
     "rxjs": "^6.6.7",
@@ -76,12 +76,12 @@
     "@angular/bazel": "https://github.com/angular/bazel-builds.git#bac9c1abe1e6ac1801fbbccb53353a1ed7126469",
     "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#a11e93b01708684827af3873e9232b437c209237",
     "@angular/cli": "^18.0.0-rc.0",
-    "@angular/compiler-cli": "^18.0.0-rc.0",
-    "@angular/localize": "^18.0.0-rc.0",
+    "@angular/compiler-cli": "^18.0.0-rc.1",
+    "@angular/localize": "^18.0.0-rc.1",
     "@angular/ng-dev": "https://github.com/angular/dev-infra-private-ng-dev-builds.git#36946be4df61f6549ae3829c026022e47674eae2",
-    "@angular/platform-browser-dynamic": "^18.0.0-rc.0",
-    "@angular/platform-server": "^18.0.0-rc.0",
-    "@angular/router": "^18.0.0-rc.0",
+    "@angular/platform-browser-dynamic": "^18.0.0-rc.1",
+    "@angular/platform-server": "^18.0.0-rc.1",
+    "@angular/router": "^18.0.0-rc.1",
     "@babel/core": "^7.16.12",
     "@babel/helper-explode-assignable-expression": "^7.18.6",
     "@babel/helper-string-parser": "^7.22.5",

diff --git a/src/cdk-experimental/combobox/combobox.spec.ts b/src/cdk-experimental/combobox/combobox.spec.ts
@@ -1,4 +1,11 @@
-import {Component, DebugElement, ElementRef, ViewChild} from '@angular/core';
+import {
+  Component,
+  ɵZONELESS_ENABLED,
+  DebugElement,
+  ElementRef,
+  ViewChild,
+  signal,
+} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {CdkComboboxModule} from './combobox-module';
@@ -25,6 +32,7 @@ describe('Combobox', () => {
 
     beforeEach(waitForAsync(() => {
       TestBed.configureTestingModule({
+        providers: [{provide: ɵZONELESS_ENABLED, useValue: false}],
         imports: [CdkComboboxModule, ComboboxToggle],
       }).compileComponents();
     }));
@@ -83,7 +91,7 @@ describe('Combobox', () => {
 
     it('should toggle focus upon toggling the panel', () => {
       comboboxElement.focus();
-      testComponent.actions = 'toggle';
+      testComponent.actions.set('toggle');
       fixture.detectChanges();
 
       expect(document.activeElement).toEqual(comboboxElement);
@@ -209,7 +217,7 @@ describe('Combobox', () => {
     });
 
     it('should coerce actions separated by space', () => {
-      testComponent.actions = 'focus click';
+      testComponent.actions.set('focus click');
       fixture.detectChanges();
 
       const openActions = comboboxInstance.openActions;
@@ -219,7 +227,7 @@ describe('Combobox', () => {
     });
 
     it('should coerce actions separated by comma', () => {
-      testComponent.actions = 'focus,click,downKey';
+      testComponent.actions.set('focus,click,downKey');
       fixture.detectChanges();
 
       const openActions = comboboxInstance.openActions;
@@ -230,7 +238,7 @@ describe('Combobox', () => {
     });
 
     it('should coerce actions separated by commas and spaces', () => {
-      testComponent.actions = 'focus click,downKey';
+      testComponent.actions.set('focus click,downKey');
       fixture.detectChanges();
 
       const openActions = comboboxInstance.openActions;
@@ -241,10 +249,10 @@ describe('Combobox', () => {
     });
 
     it('should throw error when given invalid open action', () => {
-      expect(() => {
-        testComponent.actions = 'invalidAction';
-        fixture.detectChanges();
-      }).toThrow();
+      const errorSpy = spyOn(console, 'error');
+      testComponent.actions.set('invalidAction');
+      fixture.detectChanges();
+      expect(errorSpy).toHaveBeenCalled();
     });
   });
 
@@ -274,7 +282,7 @@ describe('Combobox', () => {
     });
 
     it('should open panel with focus open action', () => {
-      testComponent.actions = 'focus';
+      testComponent.actions.set('focus');
       fixture.detectChanges();
 
       expect(comboboxInstance.isOpen()).toBeFalse();
@@ -286,7 +294,7 @@ describe('Combobox', () => {
     });
 
     it('should open panel with click open action', () => {
-      testComponent.actions = 'click';
+      testComponent.actions.set('click');
       fixture.detectChanges();
 
       expect(comboboxInstance.isOpen()).toBeFalse();
@@ -298,7 +306,7 @@ describe('Combobox', () => {
     });
 
     it('should open panel with downKey open action', () => {
-      testComponent.actions = 'downKey';
+      testComponent.actions.set('downKey');
       fixture.detectChanges();
 
       expect(comboboxInstance.isOpen()).toBeFalse();
@@ -310,7 +318,7 @@ describe('Combobox', () => {
     });
 
     it('should toggle panel with toggle open action', () => {
-      testComponent.actions = 'toggle';
+      testComponent.actions.set('toggle');
       fixture.detectChanges();
 
       expect(comboboxInstance.isOpen()).toBeFalse();
@@ -327,7 +335,7 @@ describe('Combobox', () => {
     });
 
     it('should close panel on escape key', () => {
-      testComponent.actions = 'click';
+      testComponent.actions.set('click');
       fixture.detectChanges();
 
       expect(comboboxInstance.isOpen()).toBeFalse();
@@ -344,7 +352,7 @@ describe('Combobox', () => {
     });
 
     it('should handle multiple open actions', () => {
-      testComponent.actions = 'click downKey';
+      testComponent.actions.set('click downKey');
       fixture.detectChanges();
 
       expect(comboboxInstance.isOpen()).toBeFalse();
@@ -371,7 +379,7 @@ describe('Combobox', () => {
   template: `
   <button cdkCombobox #toggleCombobox="cdkCombobox" class="example-combobox"
           [cdkComboboxTriggerFor]="panel"
-          [openActions]="actions">
+          [openActions]="actions()">
     No Value
   </button>
   <div id="other-content"></div>
@@ -388,5 +396,5 @@ describe('Combobox', () => {
 class ComboboxToggle {
   @ViewChild('input') inputElement: ElementRef<HTMLInputElement>;
 
-  actions: string = 'click';
+  actions = signal('click');
 }
diff --git a/src/cdk-experimental/popover-edit/popover-edit.spec.ts b/src/cdk-experimental/popover-edit/popover-edit.spec.ts
@@ -3,7 +3,14 @@ import {LEFT_ARROW, UP_ARROW, RIGHT_ARROW, DOWN_ARROW, TAB} from '@angular/cdk/k
 import {CdkTableModule} from '@angular/cdk/table';
 import {dispatchKeyboardEvent} from '@angular/cdk/testing/private';
 import {CommonModule} from '@angular/common';
-import {Component, Directive, ElementRef, ViewChild} from '@angular/core';
+import {
+  Component,
+  Directive,
+  ElementRef,
+  ɵZONELESS_ENABLED,
+  ViewChild,
+  provideZoneChangeDetection,
+} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed, tick} from '@angular/core/testing';
 import {FormsModule, NgForm} from '@angular/forms';
 import {BidiModule, Direction} from '@angular/cdk/bidi';
@@ -382,6 +389,7 @@ describe('CDK Popover Edit', () => {
       beforeEach(fakeAsync(() => {
         TestBed.configureTestingModule({
           imports: [CdkTableModule, CdkPopoverEditModule, CommonModule, FormsModule, BidiModule],
+          providers: [{provide: ɵZONELESS_ENABLED, useValue: false}, provideZoneChangeDetection()],
           declarations: [componentClass],
         }).compileComponents();
         fixture = TestBed.createComponent<BaseTestComponent>(componentClass);

diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts
@@ -49,7 +49,9 @@ describe('CdkVirtualScrollViewport', () => {
     it('should throw if maxBufferPx is less than minBufferPx', fakeAsync(() => {
       testComponent.minBufferPx = 100;
       testComponent.maxBufferPx = 99;
-      expect(() => finishInit(fixture)).toThrow();
+      const errorSpy = spyOn(console, 'error');
+      finishInit(fixture);
+      expect(errorSpy).toHaveBeenCalled();
     }));
 
     // TODO(mmalerba): Add test that it corrects the initial render if it didn't render enough,

diff --git a/src/cdk-experimental/table-scroll-container/table-scroll-container.spec.ts b/src/cdk-experimental/table-scroll-container/table-scroll-container.spec.ts
@@ -1,5 +1,5 @@
 import {CollectionViewer, DataSource} from '@angular/cdk/collections';
-import {Component, Type, ViewChild} from '@angular/core';
+import {Component, Type, ViewChild, ɵZONELESS_ENABLED} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {BehaviorSubject, combineLatest} from 'rxjs';
 import {map} from 'rxjs/operators';
@@ -23,6 +23,7 @@ describe('CdkTableScrollContainer', () => {
     declarations: any[] = [],
   ): ComponentFixture<T> {
     TestBed.configureTestingModule({
+      providers: [{provide: ɵZONELESS_ENABLED, useValue: false}],
       imports: [CdkTableModule, CdkTableScrollContainerModule, componentType, ...declarations],
     }).compileComponents();
 

diff --git a/src/cdk/a11y/focus-monitor/focus-monitor.spec.ts b/src/cdk/a11y/focus-monitor/focus-monitor.spec.ts
@@ -8,7 +8,13 @@ import {
   dispatchEvent,
 } from '../../testing/private';
 import {DOCUMENT} from '@angular/common';
-import {Component, NgZone, ViewChild} from '@angular/core';
+import {
+  Component,
+  NgZone,
+  ViewChild,
+  provideZoneChangeDetection,
+  ɵZONELESS_ENABLED,
+} 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';
@@ -826,7 +832,11 @@ describe('FocusMonitor observable stream', () => {
     fakePlatform = {isBrowser: true} as Platform;
     TestBed.configureTestingModule({
       imports: [A11yModule, PlainButton],
-      providers: [{provide: Platform, useValue: fakePlatform}],
+      providers: [
+        {provide: Platform, useValue: fakePlatform},
+        {provide: ɵZONELESS_ENABLED, useValue: false},
+        provideZoneChangeDetection(),
+      ],
     }).compileComponents();
   });
 

diff --git a/src/cdk/a11y/focus-trap/focus-trap.spec.ts b/src/cdk/a11y/focus-trap/focus-trap.spec.ts
@@ -5,6 +5,7 @@ import {
   TemplateRef,
   ViewContainerRef,
   ViewEncapsulation,
+  ɵZONELESS_ENABLED,
 } from '@angular/core';
 import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
 import {PortalModule, CdkPortalOutlet, TemplatePortal} from '@angular/cdk/portal';
@@ -14,6 +15,7 @@ import {By} from '@angular/platform-browser';
 describe('FocusTrap', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
+      providers: [{provide: ɵZONELESS_ENABLED, useValue: false}],
       imports: [
         A11yModule,
         PortalModule,

diff --git a/src/cdk/a11y/live-announcer/live-announcer.spec.ts b/src/cdk/a11y/live-announcer/live-announcer.spec.ts
@@ -1,7 +1,7 @@
 import {MutationObserverFactory} from '@angular/cdk/observers';
 import {Overlay} from '@angular/cdk/overlay';
 import {ComponentPortal} from '@angular/cdk/portal';
-import {Component} from '@angular/core';
+import {Component, ɵZONELESS_ENABLED} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, inject, TestBed, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {A11yModule} from '../index';
@@ -21,6 +21,7 @@ describe('LiveAnnouncer', () => {
   describe('with default element', () => {
     beforeEach(() =>
       TestBed.configureTestingModule({
+        providers: [{provide: ɵZONELESS_ENABLED, useValue: false}],
         imports: [A11yModule, TestApp, TestModal],
       }),
     );
@@ -127,6 +128,7 @@ describe('LiveAnnouncer', () => {
       fixture.destroy();
 
       TestBed.resetTestingModule().configureTestingModule({
+        providers: [{provide: ɵZONELESS_ENABLED, useValue: false}],
         imports: [A11yModule],
       });
 
@@ -225,7 +227,10 @@ describe('LiveAnnouncer', () => {
 
       return TestBed.configureTestingModule({
         imports: [A11yModule, TestApp],
-        providers: [{provide: LIVE_ANNOUNCER_ELEMENT_TOKEN, useValue: customLiveElement}],
+        providers: [
+          {provide: ɵZONELESS_ENABLED, useValue: false},
+          {provide: LIVE_ANNOUNCER_ELEMENT_TOKEN, useValue: customLiveElement},
+        ],
       });
     });
 
@@ -249,6 +254,7 @@ describe('LiveAnnouncer', () => {
       return TestBed.configureTestingModule({
         imports: [A11yModule, TestApp],
         providers: [
+          {provide: ɵZONELESS_ENABLED, useValue: false},
           {
             provide: LIVE_ANNOUNCER_DEFAULT_OPTIONS,
             useValue: {
@@ -297,6 +303,7 @@ describe('CdkAriaLive', () => {
     TestBed.configureTestingModule({
       imports: [A11yModule, DivWithCdkAriaLive],
       providers: [
+        {provide: ɵZONELESS_ENABLED, useValue: false},
         {
           provide: MutationObserverFactory,
           useValue: {

diff --git a/src/cdk/bidi/directionality.spec.ts b/src/cdk/bidi/directionality.spec.ts
@@ -1,5 +1,5 @@
 import {waitForAsync, fakeAsync, TestBed} from '@angular/core/testing';
-import {Component, ViewChild} from '@angular/core';
+import {Component, ViewChild, signal} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {BidiModule, Directionality, Dir, Direction, DIR_DOCUMENT} from './index';
 
@@ -102,7 +102,7 @@ describe('Directionality', () => {
       expect(injectedDirectionality.value).toBe('rtl');
       expect(fixture.componentInstance.changeCount).toBe(0);
 
-      fixture.componentInstance.direction = 'ltr';
+      fixture.componentInstance.direction.set('ltr');
 
       fixture.detectChanges();
 
@@ -129,7 +129,7 @@ describe('Directionality', () => {
       fixture.detectChanges();
       expect(fixture.componentInstance.dir.value).toBe('rtl');
 
-      fixture.componentInstance.direction = 'not-valid';
+      fixture.componentInstance.direction.set('not-valid');
       fixture.detectChanges();
       expect(fixture.componentInstance.dir.value).toBe('ltr');
     });
@@ -170,7 +170,7 @@ class InjectsDirectionality {
 
 @Component({
   template: `
-    <div [dir]="direction" (dirChange)="changeCount = changeCount + 1">
+    <div [dir]="direction()" (dirChange)="changeCount = changeCount + 1">
       <injects-directionality></injects-directionality>
     </div>
   `,
@@ -179,7 +179,7 @@ class InjectsDirectionality {
 })
 class ElementWithDir {
   @ViewChild(Dir) dir: Dir;
-  direction = 'rtl';
+  direction = signal('rtl');
   changeCount = 0;
 }
 

diff --git a/src/cdk/clipboard/copy-to-clipboard.spec.ts b/src/cdk/clipboard/copy-to-clipboard.spec.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, ɵZONELESS_ENABLED} from '@angular/core';
 import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
 
 import {Clipboard} from './clipboard';
@@ -30,6 +30,7 @@ describe('CdkCopyToClipboard', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [ClipboardModule, CopyToClipboardHost],
+      providers: [{provide: ɵZONELESS_ENABLED, useValue: false}],
     });
 
     TestBed.compileComponents();