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

(cherry picked from commit ba5a4f9)
angular · Jun 14, 2024 · af742ee · af742ee
1 parent 317e371
commit af742ee
Show file tree

Hide file tree

Showing 19 changed files with 368 additions and 204 deletions.
diff --git a/src/material/core/ripple/ripple.spec.ts b/src/material/core/ripple/ripple.spec.ts
@@ -7,8 +7,8 @@ import {
   dispatchMouseEvent,
   dispatchTouchEvent,
 } from '@angular/cdk/testing/private';
-import {Component, ViewChild, ViewEncapsulation, provideZoneChangeDetection} from '@angular/core';
-import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
+import {Component, ViewChild, ViewEncapsulation} from '@angular/core';
+import {ComponentFixture, TestBed, inject} from '@angular/core/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {
   MAT_RIPPLE_GLOBAL_OPTIONS,
@@ -35,12 +35,6 @@ describe('MatRipple', () => {
     dispatchFakeEvent(rippleTarget.querySelector('.mat-ripple-element')!, 'transitionend');
   }
 
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [provideZoneChangeDetection()],
-    });
-  });
-
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
@@ -260,6 +254,7 @@ describe('MatRipple', () => {
       let radius = Math.sqrt(TARGET_HEIGHT * TARGET_HEIGHT + TARGET_WIDTH * TARGET_WIDTH) / 2;
 
       rippleDirective.centered = true;
+      fixture.changeDetectorRef.markForCheck();
       rippleDirective.launch(0, 0);
 
       let rippleElement = rippleTarget.querySelector('.mat-ripple-element') as HTMLElement;
@@ -282,6 +277,7 @@ describe('MatRipple', () => {
       rippleTarget = fixture.debugElement.nativeElement.querySelector('.mat-ripple');
 
       fixture.componentInstance.isDestroyed = true;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       dispatchMouseEvent(rippleTarget, 'mousedown');
@@ -648,6 +644,7 @@ describe('MatRipple', () => {
       const backgroundColor = 'rgba(12, 34, 56, 0.8)';
 
       controller.color = backgroundColor;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       dispatchMouseEvent(rippleTarget, 'mousedown');
@@ -659,6 +656,7 @@ describe('MatRipple', () => {
 
     it('does not respond to events when disabled input is set', () => {
       controller.disabled = true;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       dispatchMouseEvent(rippleTarget, 'mousedown');
@@ -667,6 +665,7 @@ describe('MatRipple', () => {
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
 
       controller.disabled = false;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       dispatchMouseEvent(rippleTarget, 'mousedown');
@@ -684,6 +683,7 @@ describe('MatRipple', () => {
 
       spyOn(controller.ripple, 'fadeOutAllNonPersistent').and.callThrough();
       controller.disabled = true;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(controller.ripple.fadeOutAllNonPersistent).toHaveBeenCalled();
@@ -704,6 +704,7 @@ describe('MatRipple', () => {
 
       // Set the trigger element, and now events should create ripples.
       controller.trigger = alternateTrigger;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       dispatchMouseEvent(alternateTrigger, 'mousedown');
@@ -714,6 +715,7 @@ describe('MatRipple', () => {
 
     it('expands ripple from center if centered input is set', () => {
       controller.centered = true;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       let elementRect = rippleTarget.getBoundingClientRect();
@@ -741,6 +743,7 @@ describe('MatRipple', () => {
       let customRadius = 42;
 
       controller.radius = customRadius;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       let elementRect = rippleTarget.getBoundingClientRect();
@@ -762,6 +765,7 @@ describe('MatRipple', () => {
 
     it('should be able to specify animation config through binding', () => {
       controller.animationConfig = {enterDuration: 120, exitDuration: 150};
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       dispatchMouseEvent(rippleTarget, 'mousedown');

diff --git a/src/material/core/testing/option-harness.spec.ts b/src/material/core/testing/option-harness.spec.ts
@@ -1,17 +1,11 @@
-import {
-  Component,
-  ViewChildren,
-  QueryList,
-  signal,
-  provideZoneChangeDetection,
-} from '@angular/core';
-import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {HarnessLoader, parallel} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {Component, QueryList, ViewChildren, signal} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {
+  MAT_OPTION_PARENT_COMPONENT,
   MatOption,
   MatOptionModule,
-  MAT_OPTION_PARENT_COMPONENT,
   MatOptionParentComponent,
 } from '@angular/material/core';
 import {MatOptionHarness} from './option-harness';
@@ -23,7 +17,6 @@ describe('MatOptionHarness', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [MatOptionModule, OptionHarnessTest],
-      providers: [provideZoneChangeDetection()],
     }).compileComponents();
 
     fixture = TestBed.createComponent(OptionHarnessTest);

diff --git a/src/material/datepicker/calendar-body.spec.ts b/src/material/datepicker/calendar-body.spec.ts
@@ -1,19 +1,14 @@
-import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
-import {Component, provideZoneChangeDetection} from '@angular/core';
-import {MatCalendarBody, MatCalendarCell, MatCalendarUserEvent} from './calendar-body';
-import {By} from '@angular/platform-browser';
 import {
-  dispatchMouseEvent,
   dispatchFakeEvent,
+  dispatchMouseEvent,
   dispatchTouchEvent,
 } from '@angular/cdk/testing/private';
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
+import {MatCalendarBody, MatCalendarCell, MatCalendarUserEvent} from './calendar-body';
 
 describe('MatCalendarBody', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [provideZoneChangeDetection()],
-    });
-  });
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [MatCalendarBody, StandardCalendarBody, RangeCalendarBody],
@@ -77,6 +72,7 @@ describe('MatCalendarBody', () => {
 
     it('does not highlight today if today is not within the scope', () => {
       testComponent.todayValue = 100000;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       const todayCell = calendarBodyNativeElement.querySelector('.mat-calendar-body-today')!;
@@ -85,6 +81,7 @@ describe('MatCalendarBody', () => {
 
     it('does not set aria-current="date" on any cell if today is not ' + 'the scope', () => {
       testComponent.todayValue = 100000;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       const todayCell = calendarBodyNativeElement.querySelector(
@@ -112,6 +109,7 @@ describe('MatCalendarBody', () => {
     it('places label in first row if space is available', () => {
       testComponent.rows[0] = testComponent.rows[0].slice(3);
       testComponent.rows = testComponent.rows.slice();
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
       refreshElementLists();
 
@@ -179,6 +177,7 @@ describe('MatCalendarBody', () => {
     it('should render a range', () => {
       testComponent.startValue = 1;
       testComponent.endValue = 5;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells[0].classList).toContain(startClass);
@@ -191,6 +190,7 @@ describe('MatCalendarBody', () => {
     it('should render a comparison range', () => {
       testComponent.comparisonStart = 1;
       testComponent.comparisonEnd = 5;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells[0].classList).toContain(comparisonStartClass);
@@ -203,6 +203,7 @@ describe('MatCalendarBody', () => {
     it('should be able to render two completely overlapping ranges', () => {
       testComponent.startValue = testComponent.comparisonStart = 1;
       testComponent.endValue = testComponent.comparisonEnd = 5;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells[0].classList).toContain(startClass);
@@ -229,6 +230,7 @@ describe('MatCalendarBody', () => {
         testComponent.endValue = 5;
         testComponent.comparisonStart = 5;
         testComponent.comparisonEnd = 10;
+        fixture.changeDetectorRef.markForCheck();
         fixture.detectChanges();
 
         expect(cells[4].classList).toContain(bridgeStart);
@@ -240,6 +242,7 @@ describe('MatCalendarBody', () => {
       testComponent.endValue = null;
       testComponent.comparisonStart = 5;
       testComponent.comparisonEnd = 10;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells.some(cell => cell.classList.contains(bridgeStart))).toBe(false);
@@ -253,6 +256,7 @@ describe('MatCalendarBody', () => {
         testComponent.comparisonEnd = 5;
         testComponent.startValue = 5;
         testComponent.endValue = 10;
+        fixture.changeDetectorRef.markForCheck();
         fixture.detectChanges();
 
         expect(cells[4].classList).toContain(bridgeEnd);
@@ -264,6 +268,7 @@ describe('MatCalendarBody', () => {
       testComponent.comparisonEnd = 5;
       testComponent.startValue = 5;
       testComponent.endValue = null;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells.some(cell => cell.classList.contains(bridgeEnd))).toBe(false);
@@ -274,6 +279,7 @@ describe('MatCalendarBody', () => {
       testComponent.comparisonEnd = 5;
       testComponent.startValue = 2;
       testComponent.endValue = 4;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells[0].classList).toContain(comparisonStartClass);
@@ -295,6 +301,7 @@ describe('MatCalendarBody', () => {
       testComponent.endValue = 5;
       testComponent.comparisonStart = 2;
       testComponent.comparisonEnd = 4;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells[0].classList).toContain(startClass);
@@ -314,6 +321,7 @@ describe('MatCalendarBody', () => {
     it('should be able to show a range that is larger than the calendar', () => {
       testComponent.startValue = -10;
       testComponent.endValue = 100;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells.every(cell => cell.classList.contains(inRangeClass))).toBe(true);
@@ -324,6 +332,7 @@ describe('MatCalendarBody', () => {
     it('should be able to show a comparison range that is larger than the calendar', () => {
       testComponent.comparisonStart = -10;
       testComponent.comparisonEnd = 100;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells.every(cell => cell.classList.contains(inComparisonClass))).toBe(true);
@@ -334,6 +343,8 @@ describe('MatCalendarBody', () => {
     it('should be able to show a range that starts before the beginning of the calendar', () => {
       testComponent.startValue = -10;
       testComponent.endValue = 2;
+      fixture.changeDetectorRef.markForCheck();
+
       fixture.detectChanges();
 
       expect(cells.some(cell => cell.classList.contains(startClass))).toBe(false);
@@ -344,6 +355,7 @@ describe('MatCalendarBody', () => {
     it('should be able to show a comparison range that starts before the beginning of the calendar', () => {
       testComponent.comparisonStart = -10;
       testComponent.comparisonEnd = 2;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells.some(cell => cell.classList.contains(comparisonStartClass))).toBe(false);
@@ -354,6 +366,7 @@ describe('MatCalendarBody', () => {
     it('should be able to show a range that ends after the end of the calendar', () => {
       testComponent.startValue = 27;
       testComponent.endValue = 50;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells.some(cell => cell.classList.contains(endClass))).toBe(false);
@@ -364,6 +377,7 @@ describe('MatCalendarBody', () => {
     it('should be able to show a comparison range that ends after the end of the calendar', () => {
       testComponent.comparisonStart = 27;
       testComponent.comparisonEnd = 50;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells.some(cell => cell.classList.contains(comparisonEndClass))).toBe(false);
@@ -374,6 +388,7 @@ describe('MatCalendarBody', () => {
     it('should be able to show a range that ends after the end of the calendar', () => {
       testComponent.startValue = 27;
       testComponent.endValue = 50;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells.some(cell => cell.classList.contains(endClass))).toBe(false);
@@ -384,6 +399,7 @@ describe('MatCalendarBody', () => {
     it('should not to mark a date as both the start and end', () => {
       testComponent.startValue = 1;
       testComponent.endValue = 1;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells[0].classList).not.toContain(startClass);
@@ -394,6 +410,7 @@ describe('MatCalendarBody', () => {
     it('should not mark a date as both the comparison start and end', () => {
       testComponent.comparisonStart = 1;
       testComponent.comparisonEnd = 1;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells[0].classList).not.toContain(comparisonStartClass);
@@ -404,6 +421,7 @@ describe('MatCalendarBody', () => {
     it('should not mark a date as the range end if it comes before the start', () => {
       testComponent.startValue = 2;
       testComponent.endValue = 1;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells[0].classList).not.toContain(endClass);
@@ -414,6 +432,7 @@ describe('MatCalendarBody', () => {
     it('should not mark a date as the comparison range end if it comes before the start', () => {
       testComponent.comparisonStart = 2;
       testComponent.comparisonEnd = 1;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells[0].classList).not.toContain(comparisonEndClass);
@@ -424,6 +443,7 @@ describe('MatCalendarBody', () => {
     it('should not show a range if there is no start', () => {
       testComponent.startValue = null;
       testComponent.endValue = 10;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells.some(cell => cell.classList.contains(inRangeClass))).toBe(false);
@@ -433,6 +453,7 @@ describe('MatCalendarBody', () => {
     it('should not show a comparison range if there is no start', () => {
       testComponent.comparisonStart = null;
       testComponent.comparisonEnd = 10;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells.some(cell => cell.classList.contains(inComparisonClass))).toBe(false);
@@ -442,6 +463,7 @@ describe('MatCalendarBody', () => {
     it('should not show a comparison range if there is no end', () => {
       testComponent.comparisonStart = 10;
       testComponent.comparisonEnd = null;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       expect(cells.some(cell => cell.classList.contains(inComparisonClass))).toBe(false);
@@ -529,6 +551,7 @@ describe('MatCalendarBody', () => {
         'while hovering',
       () => {
         fixture.componentInstance.startValue = -1;
+        fixture.changeDetectorRef.markForCheck();
         fixture.detectChanges();
 
         dispatchMouseEvent(cells[2], 'mouseenter');
@@ -546,6 +569,7 @@ describe('MatCalendarBody', () => {
         'while moving focus',
       () => {
         fixture.componentInstance.startValue = -1;
+        fixture.changeDetectorRef.markForCheck();
         fixture.detectChanges();
 
         dispatchMouseEvent(cells[2], 'focus');
@@ -618,6 +642,7 @@ describe('MatCalendarBody', () => {
 
     it('should mark a cell as being identical to the comparison range', () => {
       testComponent.comparisonStart = testComponent.comparisonEnd = 3;
+      fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
       const comparisonIdenticalCells: NodeListOf<HTMLElement> =
@@ -645,6 +670,7 @@ describe('MatCalendarBody', () => {
         // Pre-select a range to drag.
         fixture.componentInstance.startValue = 4;
         fixture.componentInstance.endValue = 6;
+        fixture.changeDetectorRef.markForCheck();
         fixture.detectChanges();
       });