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.

Author: atscott

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",

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');
 }

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);

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,

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();
 

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();
   });
 

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,

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: {

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;
 }
 

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();