Skip to content

Commit

Permalink
test: Convert some material tests to zoneless (#29311)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mmalerba
mmalerba authored Jun 25, 2024
1 parent f67ffa5 commit dc56ba6
Show file tree
Hide file tree
Showing 7 changed files with 155 additions and 131 deletions.
126 changes: 59 additions & 67 deletions src/material/stepper/stepper.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,10 @@ import {
ViewChild,
ViewChildren,
ViewEncapsulation,
provideZoneChangeDetection,
inject,
signal,
} from '@angular/core';
import {ComponentFixture, TestBed, fakeAsync, flush, inject} from '@angular/core/testing';
import {ComponentFixture, TestBed, fakeAsync, flush} from '@angular/core/testing';
import {
AbstractControl,
AsyncValidatorFn,
Expand Down Expand Up @@ -480,23 +480,20 @@ describe('MatStepper', () => {
i18nFixture.detectChanges();
});

it('should re-render when the i18n labels change', inject(
[MatStepperIntl],
(intl: MatStepperIntl) => {
const header = i18nFixture.debugElement.queryAll(By.css('mat-step-header'))[2]
.nativeElement;
const optionalLabel = header.querySelector('.mat-step-optional');
it('should re-render when the i18n labels change', () => {
const intl = TestBed.inject(MatStepperIntl);
const header = i18nFixture.debugElement.queryAll(By.css('mat-step-header'))[2].nativeElement;
const optionalLabel = header.querySelector('.mat-step-optional');

expect(optionalLabel).toBeTruthy();
expect(optionalLabel.textContent).toBe('Optional');
expect(optionalLabel).toBeTruthy();
expect(optionalLabel.textContent).toBe('Optional');

intl.optionalLabel = 'Valgfri';
intl.changes.next();
i18nFixture.detectChanges();
intl.optionalLabel = 'Valgfri';
intl.changes.next();
i18nFixture.detectChanges();

expect(optionalLabel.textContent).toBe('Valgfri');
},
));
expect(optionalLabel.textContent).toBe('Valgfri');
});
});

describe('basic stepper with completed label change', () => {
Expand All @@ -507,29 +504,27 @@ describe('MatStepper', () => {
fixture.detectChanges();
});

it('should re-render when the completed labels change', inject(
[MatStepperIntl],
(intl: MatStepperIntl) => {
const stepperDebugElement = fixture.debugElement.query(By.directive(MatStepper))!;
const stepperComponent: MatStepper = stepperDebugElement.componentInstance;
it('should re-render when the completed labels change', () => {
const intl = TestBed.inject(MatStepperIntl);
const stepperDebugElement = fixture.debugElement.query(By.directive(MatStepper))!;
const stepperComponent: MatStepper = stepperDebugElement.componentInstance;

stepperComponent.steps.toArray()[0].editable = false;
stepperComponent.next();
fixture.detectChanges();
stepperComponent.steps.toArray()[0].editable = false;
stepperComponent.next();
fixture.detectChanges();

const header = stepperDebugElement.nativeElement.querySelector('mat-step-header');
const completedLabel = header.querySelector('.cdk-visually-hidden');
const header = stepperDebugElement.nativeElement.querySelector('mat-step-header');
const completedLabel = header.querySelector('.cdk-visually-hidden');

expect(completedLabel).toBeTruthy();
expect(completedLabel.textContent).toBe('Completed');
expect(completedLabel).toBeTruthy();
expect(completedLabel.textContent).toBe('Completed');

intl.completedLabel = 'Completada';
intl.changes.next();
fixture.detectChanges();
intl.completedLabel = 'Completada';
intl.changes.next();
fixture.detectChanges();

expect(completedLabel.textContent).toBe('Completada');
},
));
expect(completedLabel.textContent).toBe('Completada');
});
});

describe('basic stepper with editable label change', () => {
Expand All @@ -540,29 +535,27 @@ describe('MatStepper', () => {
fixture.detectChanges();
});

it('should re-render when the editable label changes', inject(
[MatStepperIntl],
(intl: MatStepperIntl) => {
const stepperDebugElement = fixture.debugElement.query(By.directive(MatStepper))!;
const stepperComponent: MatStepper = stepperDebugElement.componentInstance;
it('should re-render when the editable label changes', () => {
const intl = TestBed.inject(MatStepperIntl);
const stepperDebugElement = fixture.debugElement.query(By.directive(MatStepper))!;
const stepperComponent: MatStepper = stepperDebugElement.componentInstance;

stepperComponent.steps.toArray()[0].editable = true;
stepperComponent.next();
fixture.detectChanges();
stepperComponent.steps.toArray()[0].editable = true;
stepperComponent.next();
fixture.detectChanges();

const header = stepperDebugElement.nativeElement.querySelector('mat-step-header');
const editableLabel = header.querySelector('.cdk-visually-hidden');
const header = stepperDebugElement.nativeElement.querySelector('mat-step-header');
const editableLabel = header.querySelector('.cdk-visually-hidden');

expect(editableLabel).toBeTruthy();
expect(editableLabel.textContent).toBe('Editable');
expect(editableLabel).toBeTruthy();
expect(editableLabel.textContent).toBe('Editable');

intl.editableLabel = 'Modificabile';
intl.changes.next();
fixture.detectChanges();
intl.editableLabel = 'Modificabile';
intl.changes.next();
fixture.detectChanges();

expect(editableLabel.textContent).toBe('Modificabile');
},
));
expect(editableLabel.textContent).toBe('Modificabile');
});
});

describe('icon overrides', () => {
Expand Down Expand Up @@ -647,7 +640,7 @@ describe('MatStepper', () => {
let stepperComponent: MatStepper;

beforeEach(() => {
fixture = createComponent(LinearMatVerticalStepperApp);
fixture = createComponent(LinearMatVerticalStepperApp, [], [], undefined, []);
fixture.detectChanges();

testComponent = fixture.componentInstance;
Expand Down Expand Up @@ -1792,15 +1785,12 @@ function createComponent<T>(
providers: Provider[] = [],
imports: any[] = [],
encapsulation?: ViewEncapsulation,
declarations = [component],
): ComponentFixture<T> {
TestBed.configureTestingModule({
imports: [MatStepperModule, NoopAnimationsModule, ReactiveFormsModule, ...imports],
providers: [
provideZoneChangeDetection(),
{provide: Directionality, useFactory: () => dir},
...providers,
],
declarations: [component],
providers: [{provide: Directionality, useFactory: () => dir}, ...providers],
declarations,
});

if (encapsulation != null) {
Expand Down Expand Up @@ -1843,12 +1833,12 @@ function createComponent<T>(
`,
})
class MatHorizontalStepperWithErrorsApp {
private readonly _formBuilder = inject(FormBuilder);

formGroup = this._formBuilder.group({
firstNameCtrl: ['', Validators.required],
lastNameCtrl: ['', Validators.required],
});

constructor(private _formBuilder: FormBuilder) {}
}

@Component({
Expand Down Expand Up @@ -1931,15 +1921,16 @@ class SimpleMatVerticalStepperApp {
}

@Component({
standalone: true,
template: `
<mat-stepper orientation="vertical" linear>
<mat-step [stepControl]="oneGroup">
<form [formGroup]="oneGroup">
<ng-template matStepLabel>Step one</ng-template>
<input formControlName="oneCtrl" required>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
<button matStepperPrevious>Back</button>
<button matStepperNext>Next</button>
</div>
</form>
</mat-step>
Expand All @@ -1948,8 +1939,8 @@ class SimpleMatVerticalStepperApp {
<ng-template matStepLabel>Step two</ng-template>
<input formControlName="twoCtrl" required>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
<button matStepperPrevious>Back</button>
<button matStepperNext>Next</button>
</div>
</form>
</mat-step>
Expand All @@ -1958,8 +1949,8 @@ class SimpleMatVerticalStepperApp {
<ng-template matStepLabel>Step two</ng-template>
<input formControlName="threeCtrl">
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
<button matStepperPrevious>Back</button>
<button matStepperNext>Next</button>
</div>
</form>
</mat-step>
Expand All @@ -1968,6 +1959,7 @@ class SimpleMatVerticalStepperApp {
</mat-step>
</mat-stepper>
`,
imports: [ReactiveFormsModule, MatStepperModule],
})
class LinearMatVerticalStepperApp {
validationTrigger = new Subject<void>();
Expand Down
36 changes: 19 additions & 17 deletions src/material/tabs/tab-body.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,26 @@
import {Direction, Directionality} from '@angular/cdk/bidi';
import {PortalModule, TemplatePortal} from '@angular/cdk/portal';
import {CdkScrollable, ScrollingModule} from '@angular/cdk/scrolling';
import {CommonModule} from '@angular/common';
import {
AfterContentInit,
AfterViewInit,
Component,
TemplateRef,
ViewChild,
ViewContainerRef,
provideZoneChangeDetection,
inject,
signal,
} from '@angular/core';
import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
import {MatRippleModule} from '@angular/material/core';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {CdkScrollable, ScrollingModule} from '@angular/cdk/scrolling';
import {MatTabBody, MatTabBodyPortal} from './tab-body';
import {By} from '@angular/platform-browser';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {Subject} from 'rxjs';
import {MatTabBody, MatTabBodyPortal} from './tab-body';

describe('MDC-based MatTabBody', () => {
let dir: Direction = 'ltr';
let dirChange: Subject<Direction> = new Subject<Direction>();
beforeEach(() => {
TestBed.configureTestingModule({
providers: [provideZoneChangeDetection()],
});
});

beforeEach(waitForAsync(() => {
dir = 'ltr';
Expand Down Expand Up @@ -125,20 +121,23 @@ describe('MDC-based MatTabBody', () => {

it('to be left position with negative position', () => {
fixture.componentInstance.position = -1;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(fixture.componentInstance.tabBody._position).toBe('left');
});

it('to be center position with zero position', () => {
fixture.componentInstance.position = 0;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(fixture.componentInstance.tabBody._position).toBe('center');
});

it('to be left position with positive position', () => {
fixture.componentInstance.position = 1;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(fixture.componentInstance.tabBody._position).toBe('right');
Expand All @@ -156,20 +155,23 @@ describe('MDC-based MatTabBody', () => {

it('to be right position with negative position', () => {
fixture.componentInstance.position = -1;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(fixture.componentInstance.tabBody._position).toBe('right');
});

it('to be center position with zero position', () => {
fixture.componentInstance.position = 0;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(fixture.componentInstance.tabBody._position).toBe('center');
});

it('to be left position with positive position', () => {
fixture.componentInstance.position = 1;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(fixture.componentInstance.tabBody._position).toBe('left');
Expand Down Expand Up @@ -218,22 +220,22 @@ describe('MDC-based MatTabBody', () => {
@Component({
template: `
<ng-template>Tab Body Content</ng-template>
<mat-tab-body [content]="content" [position]="position" [origin]="origin"></mat-tab-body>
<mat-tab-body [content]="content()" [position]="position" [origin]="origin"></mat-tab-body>
`,
standalone: true,
imports: [CommonModule, PortalModule, MatRippleModule, MatTabBody],
})
class SimpleTabBodyApp implements AfterContentInit {
content: TemplatePortal;
class SimpleTabBodyApp implements AfterViewInit {
content = signal<TemplatePortal | undefined>(undefined);
position: number;
origin: number | null;

@ViewChild(MatTabBody) tabBody: MatTabBody;
@ViewChild(TemplateRef) template: TemplateRef<any>;

constructor(private _viewContainerRef: ViewContainerRef) {}
private readonly _viewContainerRef = inject(ViewContainerRef);

ngAfterContentInit() {
this.content = new TemplatePortal(this.template, this._viewContainerRef);
ngAfterViewInit() {
this.content.set(new TemplatePortal(this.template, this._viewContainerRef));
}
}
12 changes: 6 additions & 6 deletions src/material/tabs/tab-body.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@
* found in the LICENSE file at https://angular.io/license
*/

import {AnimationEvent} from '@angular/animations';
import {Direction, Directionality} from '@angular/cdk/bidi';
import {CdkPortalOutlet, TemplatePortal} from '@angular/cdk/portal';
import {CdkScrollable} from '@angular/cdk/scrolling';
import {DOCUMENT} from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Expand All @@ -25,14 +30,9 @@ import {
ViewContainerRef,
ViewEncapsulation,
} from '@angular/core';
import {CdkPortalOutlet, TemplatePortal} from '@angular/cdk/portal';
import {Direction, Directionality} from '@angular/cdk/bidi';
import {DOCUMENT} from '@angular/common';
import {Subject, Subscription} from 'rxjs';
import {distinctUntilChanged, startWith} from 'rxjs/operators';
import {AnimationEvent} from '@angular/animations';
import {matTabsAnimations} from './tabs-animations';
import {CdkScrollable} from '@angular/cdk/scrolling';

/**
* The portal host directive for the contents of the tab.
Expand Down Expand Up @@ -64,7 +64,7 @@ export class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestr
this._centeringSub = this._host._beforeCentering
.pipe(startWith(this._host._isCenterPosition(this._host._position)))
.subscribe((isCentering: boolean) => {
if (isCentering && !this.hasAttached()) {
if (this._host._content && isCentering && !this.hasAttached()) {
this.attach(this._host._content);
}
});
Expand Down
Loading

0 comments on commit dc56ba6

Please sign in to comment.