test: Convert material chips tests to zoneless (#29238)

Author: mmalerba

src/material/chips/chip-grid.spec.ts

@@ -20,15 +20,17 @@ import {
   typeInElement,
 } from '@angular/cdk/testing/private';
 import {
+  ChangeDetectorRef,
   Component,
   DebugElement,
   EventEmitter,
   QueryList,
   Type,
   ViewChild,
   ViewChildren,
-  provideZoneChangeDetection,
+  inject,
 } from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {ComponentFixture, TestBed, fakeAsync, flush, tick} from '@angular/core/testing';
 import {FormControl, FormsModule, NgForm, ReactiveFormsModule, Validators} from '@angular/forms';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -70,11 +72,13 @@ describe('MDC-based MatChipGrid', () => {
         expect(chips.toArray().every(chip => chip.disabled)).toBe(false);
 
         chipGridInstance.disabled = true;
+        fixture.changeDetectorRef.markForCheck();
         fixture.detectChanges();
 
         expect(chips.toArray().every(chip => chip.disabled)).toBe(true);
 
         chipGridInstance.disabled = false;
+        fixture.changeDetectorRef.markForCheck();
         fixture.detectChanges();
 
         expect(chips.toArray().every(chip => chip.disabled)).toBe(false);
@@ -84,11 +88,13 @@ describe('MDC-based MatChipGrid', () => {
         expect(chips.toArray().every(chip => chip.disabled)).toBe(false);
 
         chipGridInstance.disabled = true;
+        fixture.changeDetectorRef.markForCheck();
         fixture.detectChanges();
 
         expect(chips.toArray().every(chip => chip.disabled)).toBe(true);
 
         fixture.componentInstance.chips.push(5, 6);
+        fixture.changeDetectorRef.markForCheck();
         fixture.detectChanges();
         tick();
         fixture.detectChanges();
@@ -98,13 +104,15 @@ describe('MDC-based MatChipGrid', () => {
 
       it('should not set a role on the grid when the list is empty', () => {
         testComponent.chips = [];
+        fixture.changeDetectorRef.markForCheck();
         fixture.detectChanges();
 
         expect(chipGridNativeElement.hasAttribute('role')).toBe(false);
       });
 
       it('should be able to set a custom role', () => {
         testComponent.role = 'listbox';
+        fixture.changeDetectorRef.markForCheck();
         fixture.detectChanges();
 
         expect(chipGridNativeElement.getAttribute('role')).toBe('listbox');
@@ -140,6 +148,7 @@ describe('MDC-based MatChipGrid', () => {
           .toBe(false);
 
         chipGridInstance.disabled = true;
+        fixture.changeDetectorRef.markForCheck();
         fixture.detectChanges();
 
         chipGridInstance.focus();
@@ -154,6 +163,7 @@ describe('MDC-based MatChipGrid', () => {
         expect(chipGridNativeElement.getAttribute('tabindex')).toBe('0');
 
         chipGridInstance.disabled = true;
+        fixture.changeDetectorRef.markForCheck();
         fixture.detectChanges();
 
         expect(chipGridNativeElement.getAttribute('tabindex')).toBe('-1');
@@ -168,6 +178,7 @@ describe('MDC-based MatChipGrid', () => {
 
           // Destroy the middle item
           testComponent.chips.splice(2, 1);
+          fixture.changeDetectorRef.markForCheck();
           fixture.detectChanges();
 
           // It focuses the 4th item
@@ -180,6 +191,7 @@ describe('MDC-based MatChipGrid', () => {
 
           // Destroy the last item
           testComponent.chips.pop();
+          fixture.changeDetectorRef.markForCheck();
           fixture.detectChanges();
 
           // It focuses the next-to-last item
@@ -196,6 +208,7 @@ describe('MDC-based MatChipGrid', () => {
 
           // Destroy the middle item
           testComponent.chips.splice(2, 1);
+          fixture.changeDetectorRef.markForCheck();
           fixture.detectChanges();
           flush();
 
@@ -205,12 +218,14 @@ describe('MDC-based MatChipGrid', () => {
 
         it('should focus the grid if the last focused item is removed', () => {
           testComponent.chips = [0];
+          fixture.changeDetectorRef.markForCheck();
 
           spyOn(chipGridInstance, 'focus');
           patchElementFocus(chips.last.primaryAction!._elementRef.nativeElement);
           chips.last.focus();
 
           testComponent.chips.pop();
+          fixture.changeDetectorRef.markForCheck();
           fixture.detectChanges();
 
           expect(chipGridInstance.focus).toHaveBeenCalled();
@@ -350,6 +365,7 @@ describe('MDC-based MatChipGrid', () => {
 
         it(`should use user defined tabIndex`, fakeAsync(() => {
           chipGridInstance.tabIndex = 4;
+          fixture.changeDetectorRef.markForCheck();
           fixture.detectChanges();
 
           expect(chipGridInstance.tabIndex)
@@ -422,6 +438,7 @@ describe('MDC-based MatChipGrid', () => {
 
         it('should ignore all non-tab navigation keyboard events from an editing chip', fakeAsync(() => {
           testComponent.editable = true;
+          fixture.changeDetectorRef.markForCheck();
           fixture.detectChanges();
 
           chips.first.focus();
@@ -572,6 +589,7 @@ describe('MDC-based MatChipGrid', () => {
 
     it('should take an initial view value with reactive forms', () => {
       fixture.componentInstance.control = new FormControl('[pizza-1]');
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(fixture.componentInstance.chipGrid.value).toEqual('[pizza-1]');
@@ -756,6 +774,7 @@ describe('MDC-based MatChipGrid', () => {
 
     it('should set aria-invalid if the form field is invalid', fakeAsync(() => {
       fixture.componentInstance.control = new FormControl('', [Validators.required]);
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       const input: HTMLInputElement = fixture.nativeElement.querySelector('input');
@@ -991,10 +1010,7 @@ describe('MDC-based MatChipGrid', () => {
         MatInputModule,
         animationsModule,
       ],
-      providers: [
-        {provide: Directionality, useValue: directionality},
-        provideZoneChangeDetection(),
-      ],
+      providers: [{provide: Directionality, useValue: directionality}],
       declarations: [component],
     }).compileComponents();
 
@@ -1149,6 +1165,14 @@ class ChipGridWithFormErrorMessages {
 
   @ViewChild('form') form: NgForm;
   formControl = new FormControl('', Validators.required);
+
+  private readonly _changeDetectorRef = inject(ChangeDetectorRef);
+
+  constructor() {
+    this.formControl.events.pipe(takeUntilDestroyed()).subscribe(() => {
+      this._changeDetectorRef.markForCheck();
+    });
+  }
 }
 
 @Component({

src/material/chips/chip-grid.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {Directionality} from '@angular/cdk/bidi';
 import {hasModifierKey, TAB} from '@angular/cdk/keycodes';
 import {
   AfterContentInit,
@@ -20,6 +21,7 @@ import {
   EventEmitter,
   Input,
   OnDestroy,
+  OnInit,
   Optional,
   Output,
   QueryList,
@@ -33,15 +35,14 @@ import {
   NgForm,
   Validators,
 } from '@angular/forms';
-import {ErrorStateMatcher, _ErrorStateTracker} from '@angular/material/core';
+import {_ErrorStateTracker, ErrorStateMatcher} from '@angular/material/core';
 import {MatFormFieldControl} from '@angular/material/form-field';
-import {MatChipTextControl} from './chip-text-control';
-import {Observable, Subject, merge} from 'rxjs';
+import {merge, Observable, Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {MatChipEvent} from './chip';
 import {MatChipRow} from './chip-row';
 import {MatChipSet} from './chip-set';
-import {Directionality} from '@angular/cdk/bidi';
+import {MatChipTextControl} from './chip-text-control';
 
 /** Change event object that is emitted when the chip grid value has changed. */
 export class MatChipGridChange {
@@ -90,7 +91,8 @@ export class MatChipGrid
     ControlValueAccessor,
     DoCheck,
     MatFormFieldControl<any>,
-    OnDestroy
+    OnDestroy,
+    OnInit
 {
   /**
    * Implemented as part of MatFormFieldControl.
@@ -278,6 +280,14 @@ export class MatChipGrid
     );
   }
 
+  ngOnInit() {
+    if (this.ngControl) {
+      this.ngControl.control?.events.pipe(takeUntil(this._destroyed)).subscribe(() => {
+        this._changeDetectorRef.markForCheck();
+      });
+    }
+  }
+
   ngAfterContentInit() {
     this.chipBlurChanges.pipe(takeUntil(this._destroyed)).subscribe(() => {
       this._blur();

src/material/chips/chip-input.spec.ts

@@ -2,8 +2,8 @@ import {Directionality} from '@angular/cdk/bidi';
 import {COMMA, ENTER, TAB} from '@angular/cdk/keycodes';
 import {PlatformModule} from '@angular/cdk/platform';
 import {dispatchKeyboardEvent} from '@angular/cdk/testing/private';
-import {Component, DebugElement, ViewChild, provideZoneChangeDetection} from '@angular/core';
-import {waitForAsync, ComponentFixture, fakeAsync, TestBed, flush} from '@angular/core/testing';
+import {Component, DebugElement, ViewChild} from '@angular/core';
+import {ComponentFixture, TestBed, fakeAsync, flush, waitForAsync} from '@angular/core/testing';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@@ -25,12 +25,6 @@ describe('MDC-based MatChipInput', () => {
   let chipInputDirective: MatChipInput;
   let dir = 'ltr';
 
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [provideZoneChangeDetection()],
-    });
-  });
-
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [PlatformModule, MatChipsModule, MatFormFieldModule, NoopAnimationsModule],
@@ -77,6 +71,7 @@ describe('MDC-based MatChipInput', () => {
       expect(inputNativeElement.hasAttribute('placeholder')).toBe(false);
 
       testChipInput.placeholder = 'bound placeholder';
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(inputNativeElement.getAttribute('placeholder')).toBe('bound placeholder');
@@ -87,6 +82,7 @@ describe('MDC-based MatChipInput', () => {
       expect(chipInputDirective.disabled).toBe(false);
 
       fixture.componentInstance.chipGridInstance.disabled = true;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(inputNativeElement.getAttribute('disabled')).toBe('true');
@@ -97,6 +93,7 @@ describe('MDC-based MatChipInput', () => {
       expect(inputNativeElement.hasAttribute('aria-required')).toBe(false);
 
       fixture.componentInstance.required = true;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(inputNativeElement.getAttribute('aria-required')).toBe('true');
@@ -106,6 +103,7 @@ describe('MDC-based MatChipInput', () => {
       expect(inputNativeElement.hasAttribute('required')).toBe(false);
 
       fixture.componentInstance.required = true;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(inputNativeElement.getAttribute('required')).toBe('true');
@@ -144,6 +142,7 @@ describe('MDC-based MatChipInput', () => {
       spyOn(testChipInput, 'add');
 
       testChipInput.addOnBlur = true;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       chipInputDirective._blur();
@@ -154,6 +153,7 @@ describe('MDC-based MatChipInput', () => {
       spyOn(testChipInput, 'add');
 
       testChipInput.addOnBlur = false;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       chipInputDirective._blur();