Skip to content

Commit

Permalink
test: Convert some material tests to zoneless (#29278)
Browse files Browse the repository at this point in the history
  • Loading branch information
mmalerba committed Jun 24, 2024
1 parent 5f7680f commit 8ab3642
Show file tree
Hide file tree
Showing 16 changed files with 501 additions and 173 deletions.
48 changes: 15 additions & 33 deletions src/material/dialog/dialog.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ import {
ViewEncapsulation,
createNgModuleRef,
forwardRef,
provideZoneChangeDetection,
signal,
} from '@angular/core';
import {
Expand Down Expand Up @@ -84,8 +83,6 @@ describe('MDC-based MatDialog', () => {
ComponentWithContentElementTemplateRef,
],
providers: [
provideZoneChangeDetection(),
provideZoneChangeDetection(),
{provide: Location, useClass: SpyLocation},
{
provide: ScrollDispatcher,
Expand Down Expand Up @@ -137,6 +134,7 @@ describe('MDC-based MatDialog', () => {
it('should open a dialog with a template', () => {
const templateRefFixture = TestBed.createComponent(ComponentWithTemplateRef);
templateRefFixture.componentInstance.localValue = 'Bees';
templateRefFixture.changeDetectorRef.markForCheck();
templateRefFixture.detectChanges();

const data = {value: 'Knees'};
Expand Down Expand Up @@ -233,24 +231,6 @@ describe('MDC-based MatDialog', () => {
expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull();
}));

it('should invoke the afterClosed callback inside the NgZone', fakeAsync(
inject([NgZone], (zone: NgZone) => {
const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
const afterCloseCallback = jasmine.createSpy('afterClose callback');

dialogRef.afterClosed().subscribe(() => {
afterCloseCallback(NgZone.isInAngularZone());
});
zone.run(() => {
dialogRef.close();
viewContainerFixture.detectChanges();
flush();
});

expect(afterCloseCallback).toHaveBeenCalledWith(true);
}),
));

it('should dispose of dialog if view container is destroyed while animating', fakeAsync(() => {
const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});

Expand Down Expand Up @@ -1077,8 +1057,8 @@ describe('MDC-based MatDialog', () => {
autoFocus: 'first-heading',
});

flush();
viewContainerFixture.detectChanges();
flushMicrotasks();

let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
let firstHeader = overlayContainerElement.querySelector(
Expand Down Expand Up @@ -1110,8 +1090,8 @@ describe('MDC-based MatDialog', () => {
autoFocus: 'button',
});

flush();
viewContainerFixture.detectChanges();
flushMicrotasks();

let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
let firstButton = overlayContainerElement.querySelector(
Expand Down Expand Up @@ -1228,8 +1208,8 @@ describe('MDC-based MatDialog', () => {
autoFocus: 'first-heading',
});

flush();
viewContainerFixture.detectChanges();
flushMicrotasks();

let firstHeader = overlayContainerElement.querySelector(
'h2[tabindex="-1"]',
Expand Down Expand Up @@ -1284,8 +1264,8 @@ describe('MDC-based MatDialog', () => {
dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef}),
);

viewContainerFixture.detectChanges();
flush();
viewContainerFixture.detectChanges();

expect(document.activeElement!.id).not.toBe(
'dialog-trigger',
Expand Down Expand Up @@ -1546,8 +1526,8 @@ describe('MDC-based MatDialog', () => {
}),
);

viewContainerFixture.detectChanges();
flush();
viewContainerFixture.detectChanges();

expect(document.activeElement!.id).not.toBe(
'dialog-trigger',
Expand Down Expand Up @@ -1581,8 +1561,8 @@ describe('MDC-based MatDialog', () => {
dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef}),
);

viewContainerFixture.detectChanges();
flush();
viewContainerFixture.detectChanges();

expect(document.activeElement!.id).not.toBe(
'dialog-trigger',
Expand Down Expand Up @@ -1681,8 +1661,9 @@ describe('MDC-based MatDialog', () => {

const hostFixture = TestBed.createComponent(OnPushHost);
hostFixture.componentInstance.child.open();
hostFixture.autoDetectChanges();
hostFixture.detectChanges();
flush();
hostFixture.detectChanges();

const overlayContainer = TestBed.inject(OverlayContainer);
const title = overlayContainer.getContainerElement().querySelector('[mat-dialog-title]')!;
Expand All @@ -1696,6 +1677,7 @@ describe('MDC-based MatDialog', () => {
hostFixture.componentInstance.child.dialogRef?.componentInstance.showTitle.set(false);
hostFixture.detectChanges();
flush();
hostFixture.detectChanges();
expect(container.getAttribute('aria-labelledby')).toBe(null);
}));

Expand Down Expand Up @@ -1779,6 +1761,7 @@ describe('MDC-based MatDialog', () => {
expect(container.getAttribute('aria-labelledby')).toBe(title.id);

hostInstance.shownTitle = 'second';
viewContainerFixture.changeDetectorRef.markForCheck();
viewContainerFixture.detectChanges();
flush();
viewContainerFixture.detectChanges();
Expand All @@ -1793,6 +1776,7 @@ describe('MDC-based MatDialog', () => {
const container = overlayContainerElement.querySelector('mat-dialog-container')!;

hostInstance.shownTitle = 'all';
viewContainerFixture.changeDetectorRef.markForCheck();
viewContainerFixture.detectChanges();
flush();
viewContainerFixture.detectChanges();
Expand All @@ -1803,6 +1787,7 @@ describe('MDC-based MatDialog', () => {
expect(container.getAttribute('aria-labelledby')).toBe(titles[0].id);

hostInstance.shownTitle = 'second';
viewContainerFixture.changeDetectorRef.markForCheck();
viewContainerFixture.detectChanges();
flush();
viewContainerFixture.detectChanges();
Expand Down Expand Up @@ -1906,6 +1891,7 @@ describe('MDC-based MatDialog', () => {

dialogRef.close();
viewContainerFixture.componentInstance.showChildView = false;
viewContainerFixture.changeDetectorRef.markForCheck();
viewContainerFixture.detectChanges();
flush();

Expand All @@ -1923,7 +1909,6 @@ describe('MDC-based MatDialog with a parent MatDialog', () => {
TestBed.configureTestingModule({
imports: [MatDialogModule, NoopAnimationsModule, ComponentThatProvidesMatDialog],
providers: [
provideZoneChangeDetection(),
{
provide: OverlayContainer,
useFactory: () => {
Expand Down Expand Up @@ -2041,10 +2026,7 @@ describe('MDC-based MatDialog with default options', () => {
ComponentWithChildViewContainer,
DirectiveWithViewContainer,
],
providers: [
{provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: defaultConfig},
provideZoneChangeDetection(),
],
providers: [{provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: defaultConfig}],
});

TestBed.compileComponents();
Expand Down
116 changes: 116 additions & 0 deletions src/material/dialog/dialog.zone.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import {Directionality} from '@angular/cdk/bidi';
import {ScrollDispatcher} from '@angular/cdk/scrolling';
import {SpyLocation} from '@angular/common/testing';
import {
Component,
Directive,
Injector,
NgZone,
ViewChild,
ViewContainerRef,
provideZoneChangeDetection,
} from '@angular/core';
import {ComponentFixture, TestBed, fakeAsync, flush, inject} from '@angular/core/testing';
import {MatDialog, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {Subject} from 'rxjs';

describe('MDC-based MatDialog', () => {
let dialog: MatDialog;
let scrolledSubject = new Subject();

let testViewContainerRef: ViewContainerRef;
let viewContainerFixture: ComponentFixture<ComponentWithChildViewContainer>;

beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
imports: [
MatDialogModule,
NoopAnimationsModule,
ComponentWithChildViewContainer,
PizzaMsg,
DirectiveWithViewContainer,
],
providers: [
provideZoneChangeDetection(),
{provide: Location, useClass: SpyLocation},
{
provide: ScrollDispatcher,
useFactory: () => ({
scrolled: () => scrolledSubject,
register: () => {},
deregister: () => {},
}),
},
],
});

TestBed.compileComponents();
}));

beforeEach(inject([MatDialog], (d: MatDialog) => {
dialog = d;
}));

beforeEach(() => {
viewContainerFixture = TestBed.createComponent(ComponentWithChildViewContainer);

viewContainerFixture.detectChanges();
testViewContainerRef = viewContainerFixture.componentInstance.childViewContainer;
});

it('should invoke the afterClosed callback inside the NgZone', fakeAsync(
inject([NgZone], (zone: NgZone) => {
const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
const afterCloseCallback = jasmine.createSpy('afterClose callback');

dialogRef.afterClosed().subscribe(() => {
afterCloseCallback(NgZone.isInAngularZone());
});
zone.run(() => {
dialogRef.close();
viewContainerFixture.detectChanges();
flush();
});

expect(afterCloseCallback).toHaveBeenCalledWith(true);
}),
));
});

@Directive({
selector: 'dir-with-view-container',
standalone: true,
})
class DirectiveWithViewContainer {
constructor(public viewContainerRef: ViewContainerRef) {}
}

@Component({
selector: 'arbitrary-component',
template: `@if (showChildView) {<dir-with-view-container></dir-with-view-container>}`,
standalone: true,
imports: [DirectiveWithViewContainer],
})
class ComponentWithChildViewContainer {
showChildView = true;

@ViewChild(DirectiveWithViewContainer) childWithViewContainer: DirectiveWithViewContainer;

get childViewContainer() {
return this.childWithViewContainer.viewContainerRef;
}
}

/** Simple component for testing ComponentPortal. */
@Component({
template: '<p>Pizza</p> <input> <button>Close</button>',
standalone: true,
})
class PizzaMsg {
constructor(
public dialogRef: MatDialogRef<PizzaMsg>,
public dialogInjector: Injector,
public directionality: Directionality,
) {}
}
31 changes: 15 additions & 16 deletions src/material/expansion/accordion.spec.ts
Original file line number Diff line number Diff line change
@@ -1,26 +1,20 @@
import {waitForAsync, TestBed, inject} from '@angular/core/testing';
import {FocusMonitor} from '@angular/cdk/a11y';
import {DOWN_ARROW, END, HOME, UP_ARROW} from '@angular/cdk/keycodes';
import {
Component,
ViewChild,
QueryList,
ViewChildren,
provideZoneChangeDetection,
} from '@angular/core';
createKeyboardEvent,
dispatchEvent,
dispatchKeyboardEvent,
} from '@angular/cdk/testing/private';
import {Component, QueryList, ViewChild, ViewChildren} from '@angular/core';
import {TestBed, inject, waitForAsync} from '@angular/core/testing';
import {By} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {
MatExpansionModule,
MatAccordion,
MatExpansionModule,
MatExpansionPanel,
MatExpansionPanelHeader,
} from './index';
import {
dispatchKeyboardEvent,
createKeyboardEvent,
dispatchEvent,
} from '@angular/cdk/testing/private';
import {DOWN_ARROW, UP_ARROW, HOME, END} from '@angular/cdk/keycodes';
import {FocusMonitor} from '@angular/cdk/a11y';

describe('MatAccordion', () => {
let focusMonitor: FocusMonitor;
Expand All @@ -36,7 +30,6 @@ describe('MatAccordion', () => {
SetOfItems,
NestedAccordions,
],
providers: [provideZoneChangeDetection()],
});
TestBed.compileComponents();

Expand Down Expand Up @@ -66,6 +59,7 @@ describe('MatAccordion', () => {
it('should allow multiple items to be expanded simultaneously', () => {
const fixture = TestBed.createComponent(SetOfItems);
fixture.componentInstance.multi = true;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

const panels = fixture.debugElement.queryAll(By.css('.mat-expansion-panel'));
Expand All @@ -86,6 +80,7 @@ describe('MatAccordion', () => {

fixture.componentInstance.multi = true;
fixture.componentInstance.panels.toArray()[1].expanded = true;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
expect(panels[0].classes['mat-expanded']).toBeFalsy();
expect(panels[1].classes['mat-expanded']).toBeTruthy();
Expand All @@ -109,6 +104,7 @@ describe('MatAccordion', () => {

fixture.componentInstance.multi = true;
fixture.componentInstance.panels.toArray()[1].disabled = true;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
fixture.componentInstance.accordion.openAll();
fixture.detectChanges();
Expand Down Expand Up @@ -142,6 +138,7 @@ describe('MatAccordion', () => {
.toBeTruthy();

fixture.componentInstance.hideToggle = true;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(panel.nativeElement.querySelector('.mat-expansion-indicator'))
Expand All @@ -160,6 +157,7 @@ describe('MatAccordion', () => {
.toBeTruthy();

fixture.componentInstance.togglePosition = 'before';
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(panel.nativeElement.querySelector('.mat-expansion-toggle-indicator-before'))
Expand Down Expand Up @@ -231,6 +229,7 @@ describe('MatAccordion', () => {
focusMonitor.focusVia(headerElements[0].nativeElement, 'keyboard');
headers.forEach(header => spyOn(header, 'focus'));
panels[1].disabled = true;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

dispatchKeyboardEvent(headerElements[0].nativeElement, 'keydown', DOWN_ARROW);
Expand Down
Loading

0 comments on commit 8ab3642

Please sign in to comment.