test: Convert some material tests to zoneless (#29319)

Author: mmalerba

src/google-maps/map-event-manager.spec.ts

@@ -1,4 +1,4 @@
-import {NgZone} from '@angular/core';
+import {type NgZone} from '@angular/core';
 import {MapEventManager} from './map-event-manager';
 
 describe('MapEventManager', () => {

src/material/autocomplete/autocomplete.spec.ts

@@ -160,21 +160,6 @@ describe('MDC-based MatAutocomplete', () => {
         .toContain('California');
     });
 
-    it('should show the panel when the first open is after the initial zone stabilization', waitForAsync(() => {
-      // Note that we're running outside the Angular zone, in order to be able
-      // to test properly without the subscription from `_subscribeToClosingActions`
-      // giving us a false positive.
-      fixture.ngZone!.runOutsideAngular(() => {
-        fixture.componentInstance.trigger.openPanel();
-
-        Promise.resolve().then(() => {
-          expect(fixture.componentInstance.panel.showPanel)
-            .withContext(`Expected panel to be visible.`)
-            .toBe(true);
-        });
-      });
-    }));
-
     it('should close the panel when the user clicks away', waitForAsync(async () => {
       dispatchFakeEvent(input, 'focusin');
       fixture.detectChanges();

src/material/autocomplete/autocomplete.zone.spec.ts

@@ -11,7 +11,7 @@ import {
   ViewChildren,
   provideZoneChangeDetection,
 } from '@angular/core';
-import {TestBed, waitForAsync} from '@angular/core/testing';
+import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Subscription} from 'rxjs';
@@ -43,6 +43,31 @@ describe('MDC-based MatAutocomplete Zone.js integration', () => {
 
     return TestBed.createComponent<T>(component);
   }
+
+  describe('panel toggling', () => {
+    let fixture: ComponentFixture<SimpleAutocomplete>;
+
+    beforeEach(() => {
+      fixture = createComponent(SimpleAutocomplete);
+      fixture.detectChanges();
+    });
+
+    it('should show the panel when the first open is after the initial zone stabilization', waitForAsync(() => {
+      // Note that we're running outside the Angular zone, in order to be able
+      // to test properly without the subscription from `_subscribeToClosingActions`
+      // giving us a false positive.
+      fixture.ngZone!.runOutsideAngular(() => {
+        fixture.componentInstance.trigger.openPanel();
+
+        Promise.resolve().then(() => {
+          expect(fixture.componentInstance.panel.showPanel)
+            .withContext(`Expected panel to be visible.`)
+            .toBe(true);
+        });
+      });
+    }));
+  });
+
   it('should emit from `autocomplete.closed` after click outside inside the NgZone', waitForAsync(async () => {
     const inZoneSpy = jasmine.createSpy('in zone spy');
 

src/material/dialog/dialog.spec.ts

@@ -23,7 +23,6 @@ import {
   Injectable,
   Injector,
   NgModule,
-  NgZone,
   TemplateRef,
   ViewChild,
   ViewContainerRef,
@@ -1260,9 +1259,7 @@ describe('MDC-based MatDialog', () => {
       document.body.appendChild(button);
       button.focus();
 
-      const dialogRef = TestBed.inject(NgZone).run(() =>
-        dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef}),
-      );
+      const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
 
       flush();
       viewContainerFixture.detectChanges();
@@ -1519,12 +1516,10 @@ describe('MDC-based MatDialog', () => {
       document.body.appendChild(button);
       button.focus();
 
-      const dialogRef = TestBed.inject(NgZone).run(() =>
-        dialog.open(PizzaMsg, {
-          viewContainerRef: testViewContainerRef,
-          restoreFocus: false,
-        }),
-      );
+      const dialogRef = dialog.open(PizzaMsg, {
+        viewContainerRef: testViewContainerRef,
+        restoreFocus: false,
+      });
 
       flush();
       viewContainerFixture.detectChanges();
@@ -1557,9 +1552,7 @@ describe('MDC-based MatDialog', () => {
       body.appendChild(otherButton);
       button.focus();
 
-      const dialogRef = TestBed.inject(NgZone).run(() =>
-        dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef}),
-      );
+      const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
 
       flush();
       viewContainerFixture.detectChanges();

src/material/form-field/form-field.ts

@@ -31,6 +31,8 @@ import {
   ViewChild,
   ViewEncapsulation,
   afterRender,
+  computed,
+  contentChild,
   inject,
 } from '@angular/core';
 import {AbstractControlDirective} from '@angular/forms';
@@ -194,14 +196,14 @@ export class MatFormField
   @ViewChild(MatFormFieldNotchedOutline) _notchedOutline: MatFormFieldNotchedOutline | undefined;
   @ViewChild(MatFormFieldLineRipple) _lineRipple: MatFormFieldLineRipple | undefined;
 
-  @ContentChild(MatLabel) _labelChildNonStatic: MatLabel | undefined;
-  @ContentChild(MatLabel, {static: true}) _labelChildStatic: MatLabel | undefined;
   @ContentChild(_MatFormFieldControl) _formFieldControl: MatFormFieldControl<any>;
   @ContentChildren(MAT_PREFIX, {descendants: true}) _prefixChildren: QueryList<MatPrefix>;
   @ContentChildren(MAT_SUFFIX, {descendants: true}) _suffixChildren: QueryList<MatSuffix>;
   @ContentChildren(MAT_ERROR, {descendants: true}) _errorChildren: QueryList<MatError>;
   @ContentChildren(MatHint, {descendants: true}) _hintChildren: QueryList<MatHint>;
 
+  private readonly _labelChild = contentChild(MatLabel);
+
   /** Whether the required marker should be hidden. */
   @Input()
   get hideRequiredMarker(): boolean {
@@ -379,9 +381,7 @@ export class MatFormField
   /**
    * Gets the id of the label element. If no label is present, returns `null`.
    */
-  getLabelId(): string | null {
-    return this._hasFloatingLabel() ? this._labelId : null;
-  }
+  getLabelId = computed(() => (this._hasFloatingLabel() ? this._labelId : null));
 
   /**
    * Gets an ElementRef for the element that a overlay attached to the form field
@@ -551,9 +551,7 @@ export class MatFormField
     return !this._platform.isBrowser && this._prefixChildren.length && !this._shouldLabelFloat();
   }
 
-  _hasFloatingLabel() {
-    return !!this._labelChildNonStatic || !!this._labelChildStatic;
-  }
+  _hasFloatingLabel = computed(() => !!this._labelChild());
 
   _shouldLabelFloat() {
     return this._control.shouldLabelFloat || this._shouldAlwaysFloat();