@@ -31,10 +31,10 @@ import {
31
31
ViewChild ,
32
32
ViewChildren ,
33
33
ViewEncapsulation ,
34
- provideZoneChangeDetection ,
34
+ inject ,
35
35
signal ,
36
36
} from '@angular/core' ;
37
- import { ComponentFixture , TestBed , fakeAsync , flush , inject } from '@angular/core/testing' ;
37
+ import { ComponentFixture , TestBed , fakeAsync , flush } from '@angular/core/testing' ;
38
38
import {
39
39
AbstractControl ,
40
40
AsyncValidatorFn ,
@@ -480,23 +480,20 @@ describe('MatStepper', () => {
480
480
i18nFixture . detectChanges ( ) ;
481
481
} ) ;
482
482
483
- it ( 'should re-render when the i18n labels change' , inject (
484
- [ MatStepperIntl ] ,
485
- ( intl : MatStepperIntl ) => {
486
- const header = i18nFixture . debugElement . queryAll ( By . css ( 'mat-step-header' ) ) [ 2 ]
487
- . nativeElement ;
488
- const optionalLabel = header . querySelector ( '.mat-step-optional' ) ;
483
+ it ( 'should re-render when the i18n labels change' , ( ) => {
484
+ const intl = TestBed . inject ( MatStepperIntl ) ;
485
+ const header = i18nFixture . debugElement . queryAll ( By . css ( 'mat-step-header' ) ) [ 2 ] . nativeElement ;
486
+ const optionalLabel = header . querySelector ( '.mat-step-optional' ) ;
489
487
490
- expect ( optionalLabel ) . toBeTruthy ( ) ;
491
- expect ( optionalLabel . textContent ) . toBe ( 'Optional' ) ;
488
+ expect ( optionalLabel ) . toBeTruthy ( ) ;
489
+ expect ( optionalLabel . textContent ) . toBe ( 'Optional' ) ;
492
490
493
- intl . optionalLabel = 'Valgfri' ;
494
- intl . changes . next ( ) ;
495
- i18nFixture . detectChanges ( ) ;
491
+ intl . optionalLabel = 'Valgfri' ;
492
+ intl . changes . next ( ) ;
493
+ i18nFixture . detectChanges ( ) ;
496
494
497
- expect ( optionalLabel . textContent ) . toBe ( 'Valgfri' ) ;
498
- } ,
499
- ) ) ;
495
+ expect ( optionalLabel . textContent ) . toBe ( 'Valgfri' ) ;
496
+ } ) ;
500
497
} ) ;
501
498
502
499
describe ( 'basic stepper with completed label change' , ( ) => {
@@ -507,29 +504,27 @@ describe('MatStepper', () => {
507
504
fixture . detectChanges ( ) ;
508
505
} ) ;
509
506
510
- it ( 'should re-render when the completed labels change' , inject (
511
- [ MatStepperIntl ] ,
512
- ( intl : MatStepperIntl ) => {
513
- const stepperDebugElement = fixture . debugElement . query ( By . directive ( MatStepper ) ) ! ;
514
- const stepperComponent : MatStepper = stepperDebugElement . componentInstance ;
507
+ it ( 'should re-render when the completed labels change' , ( ) => {
508
+ const intl = TestBed . inject ( MatStepperIntl ) ;
509
+ const stepperDebugElement = fixture . debugElement . query ( By . directive ( MatStepper ) ) ! ;
510
+ const stepperComponent : MatStepper = stepperDebugElement . componentInstance ;
515
511
516
- stepperComponent . steps . toArray ( ) [ 0 ] . editable = false ;
517
- stepperComponent . next ( ) ;
518
- fixture . detectChanges ( ) ;
512
+ stepperComponent . steps . toArray ( ) [ 0 ] . editable = false ;
513
+ stepperComponent . next ( ) ;
514
+ fixture . detectChanges ( ) ;
519
515
520
- const header = stepperDebugElement . nativeElement . querySelector ( 'mat-step-header' ) ;
521
- const completedLabel = header . querySelector ( '.cdk-visually-hidden' ) ;
516
+ const header = stepperDebugElement . nativeElement . querySelector ( 'mat-step-header' ) ;
517
+ const completedLabel = header . querySelector ( '.cdk-visually-hidden' ) ;
522
518
523
- expect ( completedLabel ) . toBeTruthy ( ) ;
524
- expect ( completedLabel . textContent ) . toBe ( 'Completed' ) ;
519
+ expect ( completedLabel ) . toBeTruthy ( ) ;
520
+ expect ( completedLabel . textContent ) . toBe ( 'Completed' ) ;
525
521
526
- intl . completedLabel = 'Completada' ;
527
- intl . changes . next ( ) ;
528
- fixture . detectChanges ( ) ;
522
+ intl . completedLabel = 'Completada' ;
523
+ intl . changes . next ( ) ;
524
+ fixture . detectChanges ( ) ;
529
525
530
- expect ( completedLabel . textContent ) . toBe ( 'Completada' ) ;
531
- } ,
532
- ) ) ;
526
+ expect ( completedLabel . textContent ) . toBe ( 'Completada' ) ;
527
+ } ) ;
533
528
} ) ;
534
529
535
530
describe ( 'basic stepper with editable label change' , ( ) => {
@@ -540,29 +535,27 @@ describe('MatStepper', () => {
540
535
fixture . detectChanges ( ) ;
541
536
} ) ;
542
537
543
- it ( 'should re-render when the editable label changes' , inject (
544
- [ MatStepperIntl ] ,
545
- ( intl : MatStepperIntl ) => {
546
- const stepperDebugElement = fixture . debugElement . query ( By . directive ( MatStepper ) ) ! ;
547
- const stepperComponent : MatStepper = stepperDebugElement . componentInstance ;
538
+ it ( 'should re-render when the editable label changes' , ( ) => {
539
+ const intl = TestBed . inject ( MatStepperIntl ) ;
540
+ const stepperDebugElement = fixture . debugElement . query ( By . directive ( MatStepper ) ) ! ;
541
+ const stepperComponent : MatStepper = stepperDebugElement . componentInstance ;
548
542
549
- stepperComponent . steps . toArray ( ) [ 0 ] . editable = true ;
550
- stepperComponent . next ( ) ;
551
- fixture . detectChanges ( ) ;
543
+ stepperComponent . steps . toArray ( ) [ 0 ] . editable = true ;
544
+ stepperComponent . next ( ) ;
545
+ fixture . detectChanges ( ) ;
552
546
553
- const header = stepperDebugElement . nativeElement . querySelector ( 'mat-step-header' ) ;
554
- const editableLabel = header . querySelector ( '.cdk-visually-hidden' ) ;
547
+ const header = stepperDebugElement . nativeElement . querySelector ( 'mat-step-header' ) ;
548
+ const editableLabel = header . querySelector ( '.cdk-visually-hidden' ) ;
555
549
556
- expect ( editableLabel ) . toBeTruthy ( ) ;
557
- expect ( editableLabel . textContent ) . toBe ( 'Editable' ) ;
550
+ expect ( editableLabel ) . toBeTruthy ( ) ;
551
+ expect ( editableLabel . textContent ) . toBe ( 'Editable' ) ;
558
552
559
- intl . editableLabel = 'Modificabile' ;
560
- intl . changes . next ( ) ;
561
- fixture . detectChanges ( ) ;
553
+ intl . editableLabel = 'Modificabile' ;
554
+ intl . changes . next ( ) ;
555
+ fixture . detectChanges ( ) ;
562
556
563
- expect ( editableLabel . textContent ) . toBe ( 'Modificabile' ) ;
564
- } ,
565
- ) ) ;
557
+ expect ( editableLabel . textContent ) . toBe ( 'Modificabile' ) ;
558
+ } ) ;
566
559
} ) ;
567
560
568
561
describe ( 'icon overrides' , ( ) => {
@@ -647,7 +640,7 @@ describe('MatStepper', () => {
647
640
let stepperComponent : MatStepper ;
648
641
649
642
beforeEach ( ( ) => {
650
- fixture = createComponent ( LinearMatVerticalStepperApp ) ;
643
+ fixture = createComponent ( LinearMatVerticalStepperApp , [ ] , [ ] , undefined , [ ] ) ;
651
644
fixture . detectChanges ( ) ;
652
645
653
646
testComponent = fixture . componentInstance ;
@@ -1792,15 +1785,12 @@ function createComponent<T>(
1792
1785
providers : Provider [ ] = [ ] ,
1793
1786
imports : any [ ] = [ ] ,
1794
1787
encapsulation ?: ViewEncapsulation ,
1788
+ declarations = [ component ] ,
1795
1789
) : ComponentFixture < T > {
1796
1790
TestBed . configureTestingModule ( {
1797
1791
imports : [ MatStepperModule , NoopAnimationsModule , ReactiveFormsModule , ...imports ] ,
1798
- providers : [
1799
- provideZoneChangeDetection ( ) ,
1800
- { provide : Directionality , useFactory : ( ) => dir } ,
1801
- ...providers ,
1802
- ] ,
1803
- declarations : [ component ] ,
1792
+ providers : [ { provide : Directionality , useFactory : ( ) => dir } , ...providers ] ,
1793
+ declarations,
1804
1794
} ) ;
1805
1795
1806
1796
if ( encapsulation != null ) {
@@ -1843,12 +1833,12 @@ function createComponent<T>(
1843
1833
` ,
1844
1834
} )
1845
1835
class MatHorizontalStepperWithErrorsApp {
1836
+ private readonly _formBuilder = inject ( FormBuilder ) ;
1837
+
1846
1838
formGroup = this . _formBuilder . group ( {
1847
1839
firstNameCtrl : [ '' , Validators . required ] ,
1848
1840
lastNameCtrl : [ '' , Validators . required ] ,
1849
1841
} ) ;
1850
-
1851
- constructor ( private _formBuilder : FormBuilder ) { }
1852
1842
}
1853
1843
1854
1844
@Component ( {
@@ -1931,15 +1921,16 @@ class SimpleMatVerticalStepperApp {
1931
1921
}
1932
1922
1933
1923
@Component ( {
1924
+ standalone : true ,
1934
1925
template : `
1935
1926
<mat-stepper orientation="vertical" linear>
1936
1927
<mat-step [stepControl]="oneGroup">
1937
1928
<form [formGroup]="oneGroup">
1938
1929
<ng-template matStepLabel>Step one</ng-template>
1939
1930
<input formControlName="oneCtrl" required>
1940
1931
<div>
1941
- <button mat-button matStepperPrevious>Back</button>
1942
- <button mat-button matStepperNext>Next</button>
1932
+ <button matStepperPrevious>Back</button>
1933
+ <button matStepperNext>Next</button>
1943
1934
</div>
1944
1935
</form>
1945
1936
</mat-step>
@@ -1948,8 +1939,8 @@ class SimpleMatVerticalStepperApp {
1948
1939
<ng-template matStepLabel>Step two</ng-template>
1949
1940
<input formControlName="twoCtrl" required>
1950
1941
<div>
1951
- <button mat-button matStepperPrevious>Back</button>
1952
- <button mat-button matStepperNext>Next</button>
1942
+ <button matStepperPrevious>Back</button>
1943
+ <button matStepperNext>Next</button>
1953
1944
</div>
1954
1945
</form>
1955
1946
</mat-step>
@@ -1958,8 +1949,8 @@ class SimpleMatVerticalStepperApp {
1958
1949
<ng-template matStepLabel>Step two</ng-template>
1959
1950
<input formControlName="threeCtrl">
1960
1951
<div>
1961
- <button mat-button matStepperPrevious>Back</button>
1962
- <button mat-button matStepperNext>Next</button>
1952
+ <button matStepperPrevious>Back</button>
1953
+ <button matStepperNext>Next</button>
1963
1954
</div>
1964
1955
</form>
1965
1956
</mat-step>
@@ -1968,6 +1959,7 @@ class SimpleMatVerticalStepperApp {
1968
1959
</mat-step>
1969
1960
</mat-stepper>
1970
1961
` ,
1962
+ imports : [ ReactiveFormsModule , MatStepperModule ] ,
1971
1963
} )
1972
1964
class LinearMatVerticalStepperApp {
1973
1965
validationTrigger = new Subject < void > ( ) ;
0 commit comments