Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

test: Convert some material tests to zoneless #29253

Merged
merged 1 commit into from
Jun 14, 2024
Merged

test: Convert some material tests to zoneless #29253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 12 additions & 8 deletions src/material/core/ripple/ripple.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -35,12 +35,6 @@ describe('MatRipple', () => {
dispatchFakeEvent(rippleTarget.querySelector('.mat-ripple-element')!, 'transitionend');
}

beforeEach(() => {
TestBed.configureTestingModule({
providers: [provideZoneChangeDetection()],
});
});

beforeEach(() => {
TestBed.configureTestingModule({
imports: [
Expand Down Expand Up @@ -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;
Expand All @@ -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');
Expand Down Expand Up @@ -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');
Expand All @@ -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');
Expand All @@ -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');
Expand All @@ -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();
Expand All @@ -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');
Expand All @@ -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();
Expand Down Expand Up @@ -741,6 +743,7 @@ describe('MatRipple', () => {
let customRadius = 42;

controller.radius = customRadius;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

let elementRect = rippleTarget.getBoundingClientRect();
Expand All @@ -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');
Expand Down
13 changes: 3 additions & 10 deletions src/material/core/testing/option-harness.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -23,7 +17,6 @@ describe('MatOptionHarness', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [MatOptionModule, OptionHarnessTest],
providers: [provideZoneChangeDetection()],
}).compileComponents();

fixture = TestBed.createComponent(OptionHarnessTest);
Expand Down
46 changes: 36 additions & 10 deletions src/material/datepicker/calendar-body.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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],
Expand Down Expand Up @@ -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')!;
Expand All @@ -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(
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -529,6 +551,7 @@ describe('MatCalendarBody', () => {
'while hovering',
() => {
fixture.componentInstance.startValue = -1;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

dispatchMouseEvent(cells[2], 'mouseenter');
Expand All @@ -546,6 +569,7 @@ describe('MatCalendarBody', () => {
'while moving focus',
() => {
fixture.componentInstance.startValue = -1;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

dispatchMouseEvent(cells[2], 'focus');
Expand Down Expand Up @@ -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> =
Expand Down Expand Up @@ -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();
});

Expand Down
Loading
Loading