Skip to content

Commit ba5a4f9

Browse files
mmalerbammalerba
authored
test: Convert some material tests to zoneless (#29253)
1 parent cee9b04 commit ba5a4f9

19 files changed

+368
-204
lines changed

‎src/material/core/ripple/ripple.spec.ts

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import {
77
dispatchMouseEvent,
88
dispatchTouchEvent,
99
} from '@angular/cdk/testing/private';
10-
import {Component, ViewChild, ViewEncapsulation, provideZoneChangeDetection} from '@angular/core';
11-
import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
10+
import {Component, ViewChild, ViewEncapsulation} from '@angular/core';
11+
import {ComponentFixture, TestBed, inject} from '@angular/core/testing';
1212
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
1313
import {
1414
MAT_RIPPLE_GLOBAL_OPTIONS,
@@ -35,12 +35,6 @@ describe('MatRipple', () => {
3535
dispatchFakeEvent(rippleTarget.querySelector('.mat-ripple-element')!, 'transitionend');
3636
}
3737

38-
beforeEach(() => {
39-
TestBed.configureTestingModule({
40-
providers: [provideZoneChangeDetection()],
41-
});
42-
});
43-
4438
beforeEach(() => {
4539
TestBed.configureTestingModule({
4640
imports: [
@@ -260,6 +254,7 @@ describe('MatRipple', () => {
260254
let radius = Math.sqrt(TARGET_HEIGHT * TARGET_HEIGHT + TARGET_WIDTH * TARGET_WIDTH) / 2;
261255

262256
rippleDirective.centered = true;
257+
fixture.changeDetectorRef.markForCheck();
263258
rippleDirective.launch(0, 0);
264259

265260
let rippleElement = rippleTarget.querySelector('.mat-ripple-element') as HTMLElement;
@@ -282,6 +277,7 @@ describe('MatRipple', () => {
282277
rippleTarget = fixture.debugElement.nativeElement.querySelector('.mat-ripple');
283278

284279
fixture.componentInstance.isDestroyed = true;
280+
fixture.changeDetectorRef.markForCheck();
285281
fixture.detectChanges();
286282

287283
dispatchMouseEvent(rippleTarget, 'mousedown');
@@ -648,6 +644,7 @@ describe('MatRipple', () => {
648644
const backgroundColor = 'rgba(12, 34, 56, 0.8)';
649645

650646
controller.color = backgroundColor;
647+
fixture.changeDetectorRef.markForCheck();
651648
fixture.detectChanges();
652649

653650
dispatchMouseEvent(rippleTarget, 'mousedown');
@@ -659,6 +656,7 @@ describe('MatRipple', () => {
659656

660657
it('does not respond to events when disabled input is set', () => {
661658
controller.disabled = true;
659+
fixture.changeDetectorRef.markForCheck();
662660
fixture.detectChanges();
663661

664662
dispatchMouseEvent(rippleTarget, 'mousedown');
@@ -667,6 +665,7 @@ describe('MatRipple', () => {
667665
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
668666

669667
controller.disabled = false;
668+
fixture.changeDetectorRef.markForCheck();
670669
fixture.detectChanges();
671670

672671
dispatchMouseEvent(rippleTarget, 'mousedown');
@@ -684,6 +683,7 @@ describe('MatRipple', () => {
684683

685684
spyOn(controller.ripple, 'fadeOutAllNonPersistent').and.callThrough();
686685
controller.disabled = true;
686+
fixture.changeDetectorRef.markForCheck();
687687
fixture.detectChanges();
688688

689689
expect(controller.ripple.fadeOutAllNonPersistent).toHaveBeenCalled();
@@ -704,6 +704,7 @@ describe('MatRipple', () => {
704704

705705
// Set the trigger element, and now events should create ripples.
706706
controller.trigger = alternateTrigger;
707+
fixture.changeDetectorRef.markForCheck();
707708
fixture.detectChanges();
708709

709710
dispatchMouseEvent(alternateTrigger, 'mousedown');
@@ -714,6 +715,7 @@ describe('MatRipple', () => {
714715

715716
it('expands ripple from center if centered input is set', () => {
716717
controller.centered = true;
718+
fixture.changeDetectorRef.markForCheck();
717719
fixture.detectChanges();
718720

719721
let elementRect = rippleTarget.getBoundingClientRect();
@@ -741,6 +743,7 @@ describe('MatRipple', () => {
741743
let customRadius = 42;
742744

743745
controller.radius = customRadius;
746+
fixture.changeDetectorRef.markForCheck();
744747
fixture.detectChanges();
745748

746749
let elementRect = rippleTarget.getBoundingClientRect();
@@ -762,6 +765,7 @@ describe('MatRipple', () => {
762765

763766
it('should be able to specify animation config through binding', () => {
764767
controller.animationConfig = {enterDuration: 120, exitDuration: 150};
768+
fixture.changeDetectorRef.markForCheck();
765769
fixture.detectChanges();
766770

767771
dispatchMouseEvent(rippleTarget, 'mousedown');

‎src/material/core/testing/option-harness.spec.ts

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
import {
2-
Component,
3-
ViewChildren,
4-
QueryList,
5-
signal,
6-
provideZoneChangeDetection,
7-
} from '@angular/core';
8-
import {ComponentFixture, TestBed} from '@angular/core/testing';
91
import {HarnessLoader, parallel} from '@angular/cdk/testing';
102
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
3+
import {Component, QueryList, ViewChildren, signal} from '@angular/core';
4+
import {ComponentFixture, TestBed} from '@angular/core/testing';
115
import {
6+
MAT_OPTION_PARENT_COMPONENT,
127
MatOption,
138
MatOptionModule,
14-
MAT_OPTION_PARENT_COMPONENT,
159
MatOptionParentComponent,
1610
} from '@angular/material/core';
1711
import {MatOptionHarness} from './option-harness';
@@ -23,7 +17,6 @@ describe('MatOptionHarness', () => {
2317
beforeEach(async () => {
2418
await TestBed.configureTestingModule({
2519
imports: [MatOptionModule, OptionHarnessTest],
26-
providers: [provideZoneChangeDetection()],
2720
}).compileComponents();
2821

2922
fixture = TestBed.createComponent(OptionHarnessTest);

‎src/material/datepicker/calendar-body.spec.ts

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
1-
import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
2-
import {Component, provideZoneChangeDetection} from '@angular/core';
3-
import {MatCalendarBody, MatCalendarCell, MatCalendarUserEvent} from './calendar-body';
4-
import {By} from '@angular/platform-browser';
51
import {
6-
dispatchMouseEvent,
72
dispatchFakeEvent,
3+
dispatchMouseEvent,
84
dispatchTouchEvent,
95
} from '@angular/cdk/testing/private';
6+
import {Component} from '@angular/core';
7+
import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
8+
import {By} from '@angular/platform-browser';
9+
import {MatCalendarBody, MatCalendarCell, MatCalendarUserEvent} from './calendar-body';
1010

1111
describe('MatCalendarBody', () => {
12-
beforeEach(() => {
13-
TestBed.configureTestingModule({
14-
providers: [provideZoneChangeDetection()],
15-
});
16-
});
1712
beforeEach(waitForAsync(() => {
1813
TestBed.configureTestingModule({
1914
imports: [MatCalendarBody, StandardCalendarBody, RangeCalendarBody],
@@ -77,6 +72,7 @@ describe('MatCalendarBody', () => {
7772

7873
it('does not highlight today if today is not within the scope', () => {
7974
testComponent.todayValue = 100000;
75+
fixture.changeDetectorRef.markForCheck();
8076
fixture.detectChanges();
8177

8278
const todayCell = calendarBodyNativeElement.querySelector('.mat-calendar-body-today')!;
@@ -85,6 +81,7 @@ describe('MatCalendarBody', () => {
8581

8682
it('does not set aria-current="date" on any cell if today is not ' + 'the scope', () => {
8783
testComponent.todayValue = 100000;
84+
fixture.changeDetectorRef.markForCheck();
8885
fixture.detectChanges();
8986

9087
const todayCell = calendarBodyNativeElement.querySelector(
@@ -112,6 +109,7 @@ describe('MatCalendarBody', () => {
112109
it('places label in first row if space is available', () => {
113110
testComponent.rows[0] = testComponent.rows[0].slice(3);
114111
testComponent.rows = testComponent.rows.slice();
112+
fixture.changeDetectorRef.markForCheck();
115113
fixture.detectChanges();
116114
refreshElementLists();
117115

@@ -179,6 +177,7 @@ describe('MatCalendarBody', () => {
179177
it('should render a range', () => {
180178
testComponent.startValue = 1;
181179
testComponent.endValue = 5;
180+
fixture.changeDetectorRef.markForCheck();
182181
fixture.detectChanges();
183182

184183
expect(cells[0].classList).toContain(startClass);
@@ -191,6 +190,7 @@ describe('MatCalendarBody', () => {
191190
it('should render a comparison range', () => {
192191
testComponent.comparisonStart = 1;
193192
testComponent.comparisonEnd = 5;
193+
fixture.changeDetectorRef.markForCheck();
194194
fixture.detectChanges();
195195

196196
expect(cells[0].classList).toContain(comparisonStartClass);
@@ -203,6 +203,7 @@ describe('MatCalendarBody', () => {
203203
it('should be able to render two completely overlapping ranges', () => {
204204
testComponent.startValue = testComponent.comparisonStart = 1;
205205
testComponent.endValue = testComponent.comparisonEnd = 5;
206+
fixture.changeDetectorRef.markForCheck();
206207
fixture.detectChanges();
207208

208209
expect(cells[0].classList).toContain(startClass);
@@ -229,6 +230,7 @@ describe('MatCalendarBody', () => {
229230
testComponent.endValue = 5;
230231
testComponent.comparisonStart = 5;
231232
testComponent.comparisonEnd = 10;
233+
fixture.changeDetectorRef.markForCheck();
232234
fixture.detectChanges();
233235

234236
expect(cells[4].classList).toContain(bridgeStart);
@@ -240,6 +242,7 @@ describe('MatCalendarBody', () => {
240242
testComponent.endValue = null;
241243
testComponent.comparisonStart = 5;
242244
testComponent.comparisonEnd = 10;
245+
fixture.changeDetectorRef.markForCheck();
243246
fixture.detectChanges();
244247

245248
expect(cells.some(cell => cell.classList.contains(bridgeStart))).toBe(false);
@@ -253,6 +256,7 @@ describe('MatCalendarBody', () => {
253256
testComponent.comparisonEnd = 5;
254257
testComponent.startValue = 5;
255258
testComponent.endValue = 10;
259+
fixture.changeDetectorRef.markForCheck();
256260
fixture.detectChanges();
257261

258262
expect(cells[4].classList).toContain(bridgeEnd);
@@ -264,6 +268,7 @@ describe('MatCalendarBody', () => {
264268
testComponent.comparisonEnd = 5;
265269
testComponent.startValue = 5;
266270
testComponent.endValue = null;
271+
fixture.changeDetectorRef.markForCheck();
267272
fixture.detectChanges();
268273

269274
expect(cells.some(cell => cell.classList.contains(bridgeEnd))).toBe(false);
@@ -274,6 +279,7 @@ describe('MatCalendarBody', () => {
274279
testComponent.comparisonEnd = 5;
275280
testComponent.startValue = 2;
276281
testComponent.endValue = 4;
282+
fixture.changeDetectorRef.markForCheck();
277283
fixture.detectChanges();
278284

279285
expect(cells[0].classList).toContain(comparisonStartClass);
@@ -295,6 +301,7 @@ describe('MatCalendarBody', () => {
295301
testComponent.endValue = 5;
296302
testComponent.comparisonStart = 2;
297303
testComponent.comparisonEnd = 4;
304+
fixture.changeDetectorRef.markForCheck();
298305
fixture.detectChanges();
299306

300307
expect(cells[0].classList).toContain(startClass);
@@ -314,6 +321,7 @@ describe('MatCalendarBody', () => {
314321
it('should be able to show a range that is larger than the calendar', () => {
315322
testComponent.startValue = -10;
316323
testComponent.endValue = 100;
324+
fixture.changeDetectorRef.markForCheck();
317325
fixture.detectChanges();
318326

319327
expect(cells.every(cell => cell.classList.contains(inRangeClass))).toBe(true);
@@ -324,6 +332,7 @@ describe('MatCalendarBody', () => {
324332
it('should be able to show a comparison range that is larger than the calendar', () => {
325333
testComponent.comparisonStart = -10;
326334
testComponent.comparisonEnd = 100;
335+
fixture.changeDetectorRef.markForCheck();
327336
fixture.detectChanges();
328337

329338
expect(cells.every(cell => cell.classList.contains(inComparisonClass))).toBe(true);
@@ -334,6 +343,8 @@ describe('MatCalendarBody', () => {
334343
it('should be able to show a range that starts before the beginning of the calendar', () => {
335344
testComponent.startValue = -10;
336345
testComponent.endValue = 2;
346+
fixture.changeDetectorRef.markForCheck();
347+
337348
fixture.detectChanges();
338349

339350
expect(cells.some(cell => cell.classList.contains(startClass))).toBe(false);
@@ -344,6 +355,7 @@ describe('MatCalendarBody', () => {
344355
it('should be able to show a comparison range that starts before the beginning of the calendar', () => {
345356
testComponent.comparisonStart = -10;
346357
testComponent.comparisonEnd = 2;
358+
fixture.changeDetectorRef.markForCheck();
347359
fixture.detectChanges();
348360

349361
expect(cells.some(cell => cell.classList.contains(comparisonStartClass))).toBe(false);
@@ -354,6 +366,7 @@ describe('MatCalendarBody', () => {
354366
it('should be able to show a range that ends after the end of the calendar', () => {
355367
testComponent.startValue = 27;
356368
testComponent.endValue = 50;
369+
fixture.changeDetectorRef.markForCheck();
357370
fixture.detectChanges();
358371

359372
expect(cells.some(cell => cell.classList.contains(endClass))).toBe(false);
@@ -364,6 +377,7 @@ describe('MatCalendarBody', () => {
364377
it('should be able to show a comparison range that ends after the end of the calendar', () => {
365378
testComponent.comparisonStart = 27;
366379
testComponent.comparisonEnd = 50;
380+
fixture.changeDetectorRef.markForCheck();
367381
fixture.detectChanges();
368382

369383
expect(cells.some(cell => cell.classList.contains(comparisonEndClass))).toBe(false);
@@ -374,6 +388,7 @@ describe('MatCalendarBody', () => {
374388
it('should be able to show a range that ends after the end of the calendar', () => {
375389
testComponent.startValue = 27;
376390
testComponent.endValue = 50;
391+
fixture.changeDetectorRef.markForCheck();
377392
fixture.detectChanges();
378393

379394
expect(cells.some(cell => cell.classList.contains(endClass))).toBe(false);
@@ -384,6 +399,7 @@ describe('MatCalendarBody', () => {
384399
it('should not to mark a date as both the start and end', () => {
385400
testComponent.startValue = 1;
386401
testComponent.endValue = 1;
402+
fixture.changeDetectorRef.markForCheck();
387403
fixture.detectChanges();
388404

389405
expect(cells[0].classList).not.toContain(startClass);
@@ -394,6 +410,7 @@ describe('MatCalendarBody', () => {
394410
it('should not mark a date as both the comparison start and end', () => {
395411
testComponent.comparisonStart = 1;
396412
testComponent.comparisonEnd = 1;
413+
fixture.changeDetectorRef.markForCheck();
397414
fixture.detectChanges();
398415

399416
expect(cells[0].classList).not.toContain(comparisonStartClass);
@@ -404,6 +421,7 @@ describe('MatCalendarBody', () => {
404421
it('should not mark a date as the range end if it comes before the start', () => {
405422
testComponent.startValue = 2;
406423
testComponent.endValue = 1;
424+
fixture.changeDetectorRef.markForCheck();
407425
fixture.detectChanges();
408426

409427
expect(cells[0].classList).not.toContain(endClass);
@@ -414,6 +432,7 @@ describe('MatCalendarBody', () => {
414432
it('should not mark a date as the comparison range end if it comes before the start', () => {
415433
testComponent.comparisonStart = 2;
416434
testComponent.comparisonEnd = 1;
435+
fixture.changeDetectorRef.markForCheck();
417436
fixture.detectChanges();
418437

419438
expect(cells[0].classList).not.toContain(comparisonEndClass);
@@ -424,6 +443,7 @@ describe('MatCalendarBody', () => {
424443
it('should not show a range if there is no start', () => {
425444
testComponent.startValue = null;
426445
testComponent.endValue = 10;
446+
fixture.changeDetectorRef.markForCheck();
427447
fixture.detectChanges();
428448

429449
expect(cells.some(cell => cell.classList.contains(inRangeClass))).toBe(false);
@@ -433,6 +453,7 @@ describe('MatCalendarBody', () => {
433453
it('should not show a comparison range if there is no start', () => {
434454
testComponent.comparisonStart = null;
435455
testComponent.comparisonEnd = 10;
456+
fixture.changeDetectorRef.markForCheck();
436457
fixture.detectChanges();
437458

438459
expect(cells.some(cell => cell.classList.contains(inComparisonClass))).toBe(false);
@@ -442,6 +463,7 @@ describe('MatCalendarBody', () => {
442463
it('should not show a comparison range if there is no end', () => {
443464
testComponent.comparisonStart = 10;
444465
testComponent.comparisonEnd = null;
466+
fixture.changeDetectorRef.markForCheck();
445467
fixture.detectChanges();
446468

447469
expect(cells.some(cell => cell.classList.contains(inComparisonClass))).toBe(false);
@@ -529,6 +551,7 @@ describe('MatCalendarBody', () => {
529551
'while hovering',
530552
() => {
531553
fixture.componentInstance.startValue = -1;
554+
fixture.changeDetectorRef.markForCheck();
532555
fixture.detectChanges();
533556

534557
dispatchMouseEvent(cells[2], 'mouseenter');
@@ -546,6 +569,7 @@ describe('MatCalendarBody', () => {
546569
'while moving focus',
547570
() => {
548571
fixture.componentInstance.startValue = -1;
572+
fixture.changeDetectorRef.markForCheck();
549573
fixture.detectChanges();
550574

551575
dispatchMouseEvent(cells[2], 'focus');
@@ -618,6 +642,7 @@ describe('MatCalendarBody', () => {
618642

619643
it('should mark a cell as being identical to the comparison range', () => {
620644
testComponent.comparisonStart = testComponent.comparisonEnd = 3;
645+
fixture.changeDetectorRef.markForCheck();
621646
fixture.detectChanges();
622647

623648
const comparisonIdenticalCells: NodeListOf<HTMLElement> =
@@ -645,6 +670,7 @@ describe('MatCalendarBody', () => {
645670
// Pre-select a range to drag.
646671
fixture.componentInstance.startValue = 4;
647672
fixture.componentInstance.endValue = 6;
673+
fixture.changeDetectorRef.markForCheck();
648674
fixture.detectChanges();
649675
});
650676

0 commit comments

Comments
 (0)