9
9
SPACE ,
10
10
UP_ARROW ,
11
11
} from '@angular/cdk/keycodes' ;
12
- import { StepperOrientation , STEP_STATE } from '@angular/cdk/stepper' ;
12
+ import { StepperOrientation } from '@angular/cdk/stepper' ;
13
13
import { dispatchKeyboardEvent } from '@angular/cdk/testing' ;
14
14
import { Component , DebugElement , EventEmitter , OnInit } from '@angular/core' ;
15
15
import { async , ComponentFixture , fakeAsync , flush , inject , TestBed } from '@angular/core/testing' ;
@@ -292,62 +292,28 @@ describe('MatStepper', () => {
292
292
expect ( stepperComponent . selectedIndex ) . toBe ( 0 ) ;
293
293
} ) ;
294
294
295
- describe ( 'with custom state' , ( ) => {
296
- it ( 'should set the custom icon when the step is completed and on selected step' , ( ) => {
297
- let stepperComponent = fixture . debugElement
298
- . query ( By . directive ( MatStepper ) ) . componentInstance ;
299
- const firstStep = stepperComponent . _steps . toArray ( ) [ 0 ] ;
300
-
301
- expect ( stepperComponent . _getIndicatorType ( 0 , 'warning' ) ) . toBe ( STEP_STATE . EDIT ) ;
302
-
303
- stepperComponent . selectedIndex = 0 ;
304
- firstStep . completed = true ;
305
- fixture . detectChanges ( ) ;
306
-
307
- expect ( stepperComponent . _getIndicatorType ( 0 , 'warning' ) ) . toBe ( 'warning' ) ;
308
- } ) ;
309
- } ) ;
310
-
311
- it ( 'should set error icon if step has error' , ( ) => {
295
+ it ( 'should set create icon if step is editable and completed' , ( ) => {
312
296
let stepperComponent = fixture . debugElement . query ( By . directive ( MatStepper ) ) . componentInstance ;
313
297
let nextButtonNativeEl = fixture . debugElement
314
298
. queryAll ( By . directive ( MatStepperNext ) ) [ 0 ] . nativeElement ;
315
- const firstStep = stepperComponent . _steps . toArray ( ) [ 0 ] ;
316
-
317
- expect ( stepperComponent . _getIndicatorType ( 0 ) ) . toBe ( STEP_STATE . EDIT ) ;
318
-
319
- firstStep . hasError = true ;
299
+ expect ( stepperComponent . _getIndicatorType ( 0 ) ) . toBe ( 'number' ) ;
300
+ stepperComponent . _steps . toArray ( ) [ 0 ] . editable = true ;
320
301
nextButtonNativeEl . click ( ) ;
321
302
fixture . detectChanges ( ) ;
322
303
323
- expect ( stepperComponent . _getIndicatorType ( 0 ) ) . toBe ( STEP_STATE . ERROR ) ;
304
+ expect ( stepperComponent . _getIndicatorType ( 0 ) ) . toBe ( 'edit' ) ;
324
305
} ) ;
325
306
326
- it ( 'should set done icon if step is completed' , ( ) => {
307
+ it ( 'should set done icon if step is not editable and is completed' , ( ) => {
327
308
let stepperComponent = fixture . debugElement . query ( By . directive ( MatStepper ) ) . componentInstance ;
328
309
let nextButtonNativeEl = fixture . debugElement
329
310
. queryAll ( By . directive ( MatStepperNext ) ) [ 0 ] . nativeElement ;
330
- const firstStep = stepperComponent . _steps . toArray ( ) [ 0 ] ;
331
-
332
- expect ( stepperComponent . _getIndicatorType ( 0 ) ) . toBe ( STEP_STATE . EDIT ) ;
333
-
334
- firstStep . completed = true ;
311
+ expect ( stepperComponent . _getIndicatorType ( 0 ) ) . toBe ( 'number' ) ;
312
+ stepperComponent . _steps . toArray ( ) [ 0 ] . editable = false ;
335
313
nextButtonNativeEl . click ( ) ;
336
314
fixture . detectChanges ( ) ;
337
315
338
- expect ( stepperComponent . _getIndicatorType ( 0 ) ) . toBe ( STEP_STATE . DONE ) ;
339
- } ) ;
340
-
341
- it ( 'should set number icon if step is completed and on selected step' , ( ) => {
342
- let stepperComponent = fixture . debugElement . query ( By . directive ( MatStepper ) ) . componentInstance ;
343
- const firstStep = stepperComponent . _steps . toArray ( ) [ 0 ] ;
344
-
345
- expect ( stepperComponent . _getIndicatorType ( 0 ) ) . toBe ( STEP_STATE . EDIT ) ;
346
-
347
- firstStep . completed = true ;
348
- fixture . detectChanges ( ) ;
349
-
350
- expect ( stepperComponent . _getIndicatorType ( 0 ) ) . toBe ( STEP_STATE . NUMBER ) ;
316
+ expect ( stepperComponent . _getIndicatorType ( 0 ) ) . toBe ( 'done' ) ;
351
317
} ) ;
352
318
353
319
it ( 'should re-render when the i18n labels change' , inject ( [ MatStepperIntl ] ,
@@ -432,23 +398,12 @@ describe('MatStepper', () => {
432
398
fixture . detectChanges ( ) ;
433
399
} ) ;
434
400
435
- it ( 'should override any icon' , ( ) => {
436
- const stepperDebugElement = fixture . debugElement . query ( By . directive ( MatStepper ) ) ;
437
- const stepperComponent : MatStepper = stepperDebugElement . componentInstance ;
438
-
439
- stepperComponent . _steps . toArray ( ) [ 3 ] . completed = true ;
440
- fixture . detectChanges ( ) ;
441
-
442
- const headers = stepperDebugElement . nativeElement . querySelectorAll ( 'mat-step-header' ) ;
443
-
444
- expect ( headers [ 3 ] . textContent ) . toContain ( 'Custom warning' ) ;
445
- } ) ;
446
-
447
401
it ( 'should allow for the `edit` icon to be overridden' , ( ) => {
448
402
const stepperDebugElement = fixture . debugElement . query ( By . directive ( MatStepper ) ) ;
449
403
const stepperComponent : MatStepper = stepperDebugElement . componentInstance ;
450
404
451
405
stepperComponent . _steps . toArray ( ) [ 0 ] . editable = true ;
406
+ stepperComponent . next ( ) ;
452
407
fixture . detectChanges ( ) ;
453
408
454
409
const header = stepperDebugElement . nativeElement . querySelector ( 'mat-step-header' ) ;
@@ -745,13 +700,12 @@ describe('MatStepper', () => {
745
700
746
701
const stepper : MatHorizontalStepper = noStepControlFixture . debugElement
747
702
. query ( By . directive ( MatHorizontalStepper ) ) . componentInstance ;
748
- const firstStep = stepper . _steps . toArray ( ) [ 0 ] ;
703
+
749
704
const headers = noStepControlFixture . debugElement
750
705
. queryAll ( By . css ( '.mat-horizontal-stepper-header' ) ) ;
751
706
752
707
expect ( stepper . selectedIndex ) . toBe ( 0 ) ;
753
708
754
- firstStep . completed = false ;
755
709
headers [ 1 ] . nativeElement . click ( ) ;
756
710
noStepControlFixture . detectChanges ( ) ;
757
711
@@ -768,16 +722,16 @@ describe('MatStepper', () => {
768
722
controlAndBindingFixture . detectChanges ( ) ;
769
723
770
724
expect ( controlAndBindingFixture . componentInstance . steps [ 0 ] . control . valid ) . toBe ( true ) ;
725
+ expect ( controlAndBindingFixture . componentInstance . steps [ 0 ] . completed ) . toBe ( false ) ;
771
726
772
727
const stepper : MatHorizontalStepper = controlAndBindingFixture . debugElement
773
728
. query ( By . directive ( MatHorizontalStepper ) ) . componentInstance ;
774
- const firstStep = stepper . _steps . toArray ( ) [ 0 ] ;
729
+
775
730
const headers = controlAndBindingFixture . debugElement
776
731
. queryAll ( By . css ( '.mat-horizontal-stepper-header' ) ) ;
777
732
778
733
expect ( stepper . selectedIndex ) . toBe ( 0 ) ;
779
734
780
- firstStep . completed = false ;
781
735
headers [ 1 ] . nativeElement . click ( ) ;
782
736
controlAndBindingFixture . detectChanges ( ) ;
783
737
@@ -1183,16 +1137,16 @@ class SimplePreselectedMatHorizontalStepperApp {
1183
1137
<mat-horizontal-stepper linear>
1184
1138
<mat-step
1185
1139
*ngFor="let step of steps"
1186
- [label]="step.label">
1187
- </mat-step>
1140
+ [label]="step.label"
1141
+ [completed]="step.completed"> </mat-step>
1188
1142
</mat-horizontal-stepper>
1189
1143
`
1190
1144
} )
1191
1145
class SimpleStepperWithoutStepControl {
1192
1146
steps = [
1193
- { label : 'One' } ,
1194
- { label : 'Two' } ,
1195
- { label : 'Three' }
1147
+ { label : 'One' , completed : false } ,
1148
+ { label : 'Two' , completed : false } ,
1149
+ { label : 'Three' , completed : false }
1196
1150
] ;
1197
1151
}
1198
1152
@@ -1202,16 +1156,16 @@ class SimpleStepperWithoutStepControl {
1202
1156
<mat-step
1203
1157
*ngFor="let step of steps"
1204
1158
[label]="step.label"
1205
- [stepControl]="step.control">
1206
- </mat-step>
1159
+ [stepControl]="step.control"
1160
+ [completed]="step.completed"> </mat-step>
1207
1161
</mat-horizontal-stepper>
1208
1162
`
1209
1163
} )
1210
1164
class SimpleStepperWithStepControlAndCompletedBinding {
1211
1165
steps = [
1212
- { label : 'One' , control : new FormControl ( ) } ,
1213
- { label : 'Two' , control : new FormControl ( ) } ,
1214
- { label : 'Three' , control : new FormControl ( ) }
1166
+ { label : 'One' , completed : false , control : new FormControl ( ) } ,
1167
+ { label : 'Two' , completed : false , control : new FormControl ( ) } ,
1168
+ { label : 'Three' , completed : false , control : new FormControl ( ) }
1215
1169
] ;
1216
1170
}
1217
1171
@@ -1223,12 +1177,10 @@ class SimpleStepperWithStepControlAndCompletedBinding {
1223
1177
<ng-template matStepperIcon="number" let-index="index">
1224
1178
{{getRomanNumeral(index + 1)}}
1225
1179
</ng-template>
1226
- <ng-template matStepperIcon="warning">Custom warning</ng-template>
1227
1180
1228
1181
<mat-step>Content 1</mat-step>
1229
1182
<mat-step>Content 2</mat-step>
1230
1183
<mat-step>Content 3</mat-step>
1231
- <mat-step state="warning">Content 4</mat-step>
1232
1184
</mat-horizontal-stepper>
1233
1185
`
1234
1186
} )
0 commit comments