@@ -9,6 +9,7 @@ import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/
9
9
import { MdStepperNext , MdStepperPrevious } from './stepper-button' ;
10
10
import { dispatchKeyboardEvent } from '@angular/cdk/testing' ;
11
11
import { ENTER , LEFT_ARROW , RIGHT_ARROW , SPACE } from '@angular/cdk/keycodes' ;
12
+ import { MdStepper } from './stepper' ;
12
13
13
14
describe ( 'MdHorizontalStepper' , ( ) => {
14
15
beforeEach ( async ( ( ) => {
@@ -26,7 +27,6 @@ describe('MdHorizontalStepper', () => {
26
27
describe ( 'basic horizontal stepper' , ( ) => {
27
28
let fixture : ComponentFixture < SimpleMdHorizontalStepperApp > ;
28
29
let stepperComponent : MdHorizontalStepper ;
29
- let stepperEl : HTMLElement ;
30
30
31
31
beforeEach ( ( ) => {
32
32
fixture = TestBed . createComponent ( SimpleMdHorizontalStepperApp ) ;
@@ -43,11 +43,10 @@ describe('MdHorizontalStepper', () => {
43
43
it ( 'should change selected index on header click' , ( ) => {
44
44
let stepHeaders = fixture . debugElement . queryAll ( By . css ( '.mat-horizontal-stepper-header' ) ) ;
45
45
checkSelectionChangeOnHeaderClick ( stepperComponent , fixture , stepHeaders ) ;
46
-
47
46
} ) ;
48
47
49
48
it ( 'should set the "tablist" role on stepper' , ( ) => {
50
- stepperEl = fixture . debugElement . query ( By . css ( 'md-horizontal-stepper' ) ) . nativeElement ;
49
+ let stepperEl = fixture . debugElement . query ( By . css ( 'md-horizontal-stepper' ) ) . nativeElement ;
51
50
expect ( stepperEl . getAttribute ( 'role' ) ) . toBe ( 'tablist' ) ;
52
51
} ) ;
53
52
@@ -125,7 +124,6 @@ describe('MdVerticalStepper', () => {
125
124
describe ( 'basic vertical stepper' , ( ) => {
126
125
let fixture : ComponentFixture < SimpleMdVerticalStepperApp > ;
127
126
let stepperComponent : MdVerticalStepper ;
128
- let stepperEl : HTMLElement ;
129
127
130
128
beforeEach ( ( ) => {
131
129
fixture = TestBed . createComponent ( SimpleMdVerticalStepperApp ) ;
@@ -146,7 +144,7 @@ describe('MdVerticalStepper', () => {
146
144
} ) ;
147
145
148
146
it ( 'should set the "tablist" role on stepper' , ( ) => {
149
- stepperEl = fixture . debugElement . query ( By . css ( 'md-vertical-stepper' ) ) . nativeElement ;
147
+ let stepperEl = fixture . debugElement . query ( By . css ( 'md-vertical-stepper' ) ) . nativeElement ;
150
148
expect ( stepperEl . getAttribute ( 'role' ) ) . toBe ( 'tablist' ) ;
151
149
} ) ;
152
150
@@ -209,8 +207,7 @@ describe('MdVerticalStepper', () => {
209
207
} ) ;
210
208
} ) ;
211
209
212
- function checkSelectionChangeOnHeaderClick ( stepperComponent :
213
- MdHorizontalStepper | MdVerticalStepper ,
210
+ function checkSelectionChangeOnHeaderClick ( stepperComponent : MdStepper ,
214
211
fixture : ComponentFixture < any > ,
215
212
stepHeaders : DebugElement [ ] ) {
216
213
expect ( stepperComponent . selectedIndex ) . toBe ( 0 ) ;
@@ -230,7 +227,7 @@ function checkSelectionChangeOnHeaderClick(stepperComponent:
230
227
expect ( stepperComponent . selectedIndex ) . toBe ( 2 ) ;
231
228
}
232
229
233
- function checkExpandedContent ( stepperComponent : MdHorizontalStepper | MdVerticalStepper ,
230
+ function checkExpandedContent ( stepperComponent : MdStepper ,
234
231
fixture : ComponentFixture < any > ,
235
232
stepContents : DebugElement [ ] ) {
236
233
let firstStepContentEl = stepContents [ 0 ] . nativeElement ;
@@ -244,8 +241,7 @@ function checkExpandedContent(stepperComponent: MdHorizontalStepper | MdVertical
244
241
expect ( secondStepContentEl . getAttribute ( 'aria-expanded' ) ) . toBe ( 'true' ) ;
245
242
}
246
243
247
- function checkCorrectLabel ( stepperComponent : MdHorizontalStepper | MdVerticalStepper ,
248
- fixture : ComponentFixture < any > ) {
244
+ function checkCorrectLabel ( stepperComponent : MdStepper , fixture : ComponentFixture < any > ) {
249
245
let selectedLabel = fixture . nativeElement . querySelector ( '[aria-selected="true"]' ) ;
250
246
expect ( selectedLabel . textContent ) . toMatch ( 'Step 1' ) ;
251
247
@@ -262,8 +258,7 @@ function checkCorrectLabel(stepperComponent: MdHorizontalStepper | MdVerticalSte
262
258
expect ( selectedLabel . textContent ) . toMatch ( 'New Label' ) ;
263
259
}
264
260
265
- function checkNextStepperButton ( stepperComponent : MdHorizontalStepper | MdVerticalStepper ,
266
- fixture : ComponentFixture < any > ) {
261
+ function checkNextStepperButton ( stepperComponent : MdStepper , fixture : ComponentFixture < any > ) {
267
262
expect ( stepperComponent . selectedIndex ) . toBe ( 0 ) ;
268
263
269
264
let nextButtonNativeEl = fixture . debugElement
@@ -288,8 +283,7 @@ function checkNextStepperButton(stepperComponent: MdHorizontalStepper | MdVertic
288
283
expect ( stepperComponent . selectedIndex ) . toBe ( 2 ) ;
289
284
}
290
285
291
- function checkPreviousStepperButton ( stepperComponent : MdHorizontalStepper | MdVerticalStepper ,
292
- fixture : ComponentFixture < any > ) {
286
+ function checkPreviousStepperButton ( stepperComponent : MdStepper , fixture : ComponentFixture < any > ) {
293
287
expect ( stepperComponent . selectedIndex ) . toBe ( 0 ) ;
294
288
295
289
stepperComponent . selectedIndex = 2 ;
@@ -315,8 +309,7 @@ function checkPreviousStepperButton(stepperComponent: MdHorizontalStepper | MdVe
315
309
expect ( stepperComponent . selectedIndex ) . toBe ( 0 ) ;
316
310
}
317
311
318
- function checkStepPosition ( stepperComponent : MdHorizontalStepper | MdVerticalStepper ,
319
- fixture : ComponentFixture < any > ) {
312
+ function checkStepPosition ( stepperComponent : MdStepper , fixture : ComponentFixture < any > ) {
320
313
expect ( stepperComponent . _getAnimationDirection ( 0 ) ) . toBe ( 'current' ) ;
321
314
expect ( stepperComponent . _getAnimationDirection ( 1 ) ) . toBe ( 'next' ) ;
322
315
expect ( stepperComponent . _getAnimationDirection ( 2 ) ) . toBe ( 'next' ) ;
@@ -336,7 +329,7 @@ function checkStepPosition(stepperComponent: MdHorizontalStepper | MdVerticalSte
336
329
expect ( stepperComponent . _getAnimationDirection ( 2 ) ) . toBe ( 'current' ) ;
337
330
}
338
331
339
- function checkKeyboardEvent ( stepperComponent : MdHorizontalStepper | MdVerticalStepper ,
332
+ function checkKeyboardEvent ( stepperComponent : MdStepper ,
340
333
fixture : ComponentFixture < any > ,
341
334
stepHeaders : DebugElement [ ] ) {
342
335
expect ( stepperComponent . _focusIndex ) . toBe ( 0 ) ;
@@ -395,7 +388,7 @@ function checkKeyboardEvent(stepperComponent: MdHorizontalStepper | MdVerticalSt
395
388
}
396
389
397
390
function checkLinearStepperValidity ( stepHeaderEl : HTMLElement ,
398
- stepperComponent : MdHorizontalStepper | MdVerticalStepper ,
391
+ stepperComponent : MdStepper ,
399
392
testComponent :
400
393
LinearMdHorizontalStepperApp | LinearMdVerticalStepperApp ,
401
394
fixture : ComponentFixture < any > ) {
@@ -458,9 +451,9 @@ class SimpleMdHorizontalStepperApp {
458
451
<md-step [stepControl]="oneGroup">
459
452
<form [formGroup]="oneGroup">
460
453
<ng-template mdStepLabel>Step one</ng-template>
461
- <md-input-container >
454
+ <md-form-field >
462
455
<input mdInput formControlName="oneCtrl" required>
463
- </md-input-container >
456
+ </md-form-field >
464
457
<div>
465
458
<button md-button mdStepperPrevious>Back</button>
466
459
<button md-button mdStepperNext>Next</button>
@@ -470,9 +463,9 @@ class SimpleMdHorizontalStepperApp {
470
463
<md-step [stepControl]="twoGroup">
471
464
<form [formGroup]="twoGroup">
472
465
<ng-template mdStepLabel>Step two</ng-template>
473
- <md-input-container >
466
+ <md-form-field >
474
467
<input mdInput formControlName="twoCtrl" required>
475
- </md-input-container >
468
+ </md-form-field >
476
469
<div>
477
470
<button md-button mdStepperPrevious>Back</button>
478
471
<button md-button mdStepperNext>Next</button>
@@ -535,9 +528,9 @@ class SimpleMdVerticalStepperApp {
535
528
<md-step [stepControl]="oneGroup">
536
529
<form [formGroup]="oneGroup">
537
530
<ng-template mdStepLabel>Step one</ng-template>
538
- <md-input-container >
531
+ <md-form-field >
539
532
<input mdInput formControlName="oneCtrl" required>
540
- </md-input-container >
533
+ </md-form-field >
541
534
<div>
542
535
<button md-button mdStepperPrevious>Back</button>
543
536
<button md-button mdStepperNext>Next</button>
@@ -547,9 +540,9 @@ class SimpleMdVerticalStepperApp {
547
540
<md-step [stepControl]="twoGroup">
548
541
<form [formGroup]="twoGroup">
549
542
<ng-template mdStepLabel>Step two</ng-template>
550
- <md-input-container >
543
+ <md-form-field >
551
544
<input mdInput formControlName="twoCtrl" required>
552
- </md-input-container >
545
+ </md-form-field >
553
546
<div>
554
547
<button md-button mdStepperPrevious>Back</button>
555
548
<button md-button mdStepperNext>Next</button>
0 commit comments