Skip to content

Commit 60e8044

Browse files
jwshinjwshinjwshinjwshin
committed
Changes made based on review
1 parent 059a010 commit 60e8044

File tree

1 file changed

+59
-44
lines changed

1 file changed

+59
-44
lines changed

‎src/lib/stepper/stepper.spec.ts‎

Lines changed: 59 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ import {By} from '@angular/platform-browser';
55
import {MdHorizontalStepper} from './stepper-horizontal';
66
import {MdVerticalStepper} from './stepper-vertical';
77
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
8-
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
8+
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
99
import {MdStepperNext, MdStepperPrevious} from './stepper-button';
1010
import {dispatchKeyboardEvent} from '@angular/cdk/testing';
1111
import {ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
1212

13-
fdescribe('MdHorizontalStepper', () => {
13+
describe('MdHorizontalStepper', () => {
1414
beforeEach(async(() => {
1515
TestBed.configureTestingModule({
16-
imports: [MdStepperModule, NoopAnimationsModule, FormsModule, ReactiveFormsModule],
16+
imports: [MdStepperModule, NoopAnimationsModule, ReactiveFormsModule],
1717
declarations: [
1818
SimpleMdHorizontalStepperApp,
1919
LinearMdHorizontalStepperApp
@@ -41,8 +41,8 @@ fdescribe('MdHorizontalStepper', () => {
4141
});
4242

4343
it('should change selected index on header click', () => {
44-
let stepHeader = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
45-
checkSelectionChangeOnHeaderClick(stepperComponent, fixture, stepHeader);
44+
let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
45+
checkSelectionChangeOnHeaderClick(stepperComponent, fixture, stepHeaders);
4646

4747
});
4848

@@ -51,9 +51,9 @@ fdescribe('MdHorizontalStepper', () => {
5151
expect(stepperEl.getAttribute('role')).toBe('tablist');
5252
});
5353

54-
it('should expand the right content', () => {
55-
let stepContent = fixture.debugElement.queryAll(By.css(`.mat-horizontal-stepper-content`));
56-
checkExpandedContent(stepperComponent, fixture, stepContent);
54+
it('should set aria-expanded of content correctly', () => {
55+
let stepContents = fixture.debugElement.queryAll(By.css(`.mat-horizontal-stepper-content`));
56+
checkExpandedContent(stepperComponent, fixture, stepContents);
5757
});
5858

5959
it('should display the correct label', () => {
@@ -73,8 +73,8 @@ fdescribe('MdHorizontalStepper', () => {
7373
});
7474

7575
it('should support keyboard events to move and select focus', () => {
76-
let stepHeader = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
77-
checkKeyboardEvent(stepperComponent, fixture, stepHeader);
76+
let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
77+
checkKeyboardEvent(stepperComponent, fixture, stepHeaders);
7878
});
7979
});
8080

@@ -98,6 +98,7 @@ fdescribe('MdHorizontalStepper', () => {
9898

9999
it('should not move to next step if current step is not valid', () => {
100100
expect(testComponent.oneGroup.get('oneCtrl')!.value).toBe('');
101+
expect(testComponent.oneGroup.get('oneCtrl')!.valid).toBe(false);
101102
expect(testComponent.oneGroup.valid).toBe(false);
102103
expect(stepperComponent.selectedIndex).toBe(0);
103104

@@ -108,10 +109,10 @@ fdescribe('MdHorizontalStepper', () => {
108109
});
109110
});
110111

111-
fdescribe('MdVerticalStepper', () => {
112+
describe('MdVerticalStepper', () => {
112113
beforeEach(async(() => {
113114
TestBed.configureTestingModule({
114-
imports: [MdStepperModule, NoopAnimationsModule, FormsModule, ReactiveFormsModule],
115+
imports: [MdStepperModule, NoopAnimationsModule, ReactiveFormsModule],
115116
declarations: [
116117
SimpleMdVerticalStepperApp,
117118
LinearMdVerticalStepperApp
@@ -139,8 +140,8 @@ fdescribe('MdVerticalStepper', () => {
139140
});
140141

141142
it('should change selected index on header click', () => {
142-
let stepHeader = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
143-
checkSelectionChangeOnHeaderClick(stepperComponent, fixture, stepHeader);
143+
let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
144+
checkSelectionChangeOnHeaderClick(stepperComponent, fixture, stepHeaders);
144145

145146
});
146147

@@ -149,9 +150,9 @@ fdescribe('MdVerticalStepper', () => {
149150
expect(stepperEl.getAttribute('role')).toBe('tablist');
150151
});
151152

152-
it('should expand the right content', () => {
153-
let stepContent = fixture.debugElement.queryAll(By.css(`.mat-vertical-stepper-content`));
154-
checkExpandedContent(stepperComponent, fixture, stepContent);
153+
it('should set aria-expanded of content correctly', () => {
154+
let stepContents = fixture.debugElement.queryAll(By.css(`.mat-vertical-stepper-content`));
155+
checkExpandedContent(stepperComponent, fixture, stepContents);
155156
});
156157

157158
it('should display the correct label', () => {
@@ -171,8 +172,8 @@ fdescribe('MdVerticalStepper', () => {
171172
});
172173

173174
it('should support keyboard events to move and select focus', () => {
174-
let stepHeader = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
175-
checkKeyboardEvent(stepperComponent, fixture, stepHeader);
175+
let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
176+
checkKeyboardEvent(stepperComponent, fixture, stepHeaders);
176177
});
177178
});
178179

@@ -196,6 +197,7 @@ fdescribe('MdVerticalStepper', () => {
196197

197198
it('should not move to next step if current step is not valid', () => {
198199
expect(testComponent.oneGroup.get('oneCtrl')!.value).toBe('');
200+
expect(testComponent.oneGroup.get('oneCtrl')!.valid).toBe(false);
199201
expect(testComponent.oneGroup.valid).toBe(false);
200202
expect(stepperComponent.selectedIndex).toBe(0);
201203

@@ -210,18 +212,18 @@ fdescribe('MdVerticalStepper', () => {
210212
function checkSelectionChangeOnHeaderClick(stepperComponent:
211213
MdHorizontalStepper | MdVerticalStepper,
212214
fixture: ComponentFixture<any>,
213-
stepHeader: DebugElement[]) {
215+
stepHeaders: DebugElement[]) {
214216
expect(stepperComponent.selectedIndex).toBe(0);
215217

216218
// select the second step
217-
let stepHeaderEl = stepHeader[1].nativeElement;
219+
let stepHeaderEl = stepHeaders[1].nativeElement;
218220
stepHeaderEl.click();
219221
fixture.detectChanges();
220222

221223
expect(stepperComponent.selectedIndex).toBe(1);
222224

223225
// select the third step
224-
stepHeaderEl = stepHeader[2].nativeElement;
226+
stepHeaderEl = stepHeaders[2].nativeElement;
225227
stepHeaderEl.click();
226228
fixture.detectChanges();
227229

@@ -230,16 +232,16 @@ function checkSelectionChangeOnHeaderClick(stepperComponent:
230232

231233
function checkExpandedContent(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
232234
fixture: ComponentFixture<any>,
233-
stepContent: DebugElement[]) {
234-
let stepContentEl = stepContent[0].nativeElement;
235-
expect(stepContentEl.getAttribute('aria-expanded')).toBe('true');
235+
stepContents: DebugElement[]) {
236+
let firstStepContentEl = stepContents[0].nativeElement;
237+
expect(firstStepContentEl.getAttribute('aria-expanded')).toBe('true');
236238

237239
stepperComponent.selectedIndex = 1;
238240
fixture.detectChanges();
239241

240-
expect(stepContentEl.getAttribute('aria-expanded')).toBe('false');
241-
stepContentEl = stepContent[1].nativeElement;
242-
expect(stepContentEl.getAttribute('aria-expanded')).toBe('true');
242+
expect(firstStepContentEl.getAttribute('aria-expanded')).toBe('false');
243+
let secondStepContentEl = stepContents[1].nativeElement;
244+
expect(secondStepContentEl.getAttribute('aria-expanded')).toBe('true');
243245
}
244246

245247
function checkCorrectLabel(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
@@ -336,47 +338,60 @@ function checkStepPosition(stepperComponent: MdHorizontalStepper | MdVerticalSte
336338

337339
function checkKeyboardEvent(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
338340
fixture: ComponentFixture<any>,
339-
stepHeader: DebugElement[]) {
341+
stepHeaders: DebugElement[]) {
340342
expect(stepperComponent._focusIndex).toBe(0);
341343
expect(stepperComponent.selectedIndex).toBe(0);
342344

343-
let stepHeaderEl = stepHeader[0].nativeElement;
345+
let stepHeaderEl = stepHeaders[0].nativeElement;
344346
dispatchKeyboardEvent(stepHeaderEl, 'keydown', RIGHT_ARROW);
345347
fixture.detectChanges();
346348

347-
expect(stepperComponent._focusIndex).toBe(1);
348-
expect(stepperComponent.selectedIndex).toBe(0);
349+
expect(stepperComponent._focusIndex)
350+
.toBe(1, 'Expected index of focused step to be increased by 1 after RIGHT_ARROW event.');
351+
expect(stepperComponent.selectedIndex)
352+
.toBe(0, 'Expected index of selected step to remain unchanged after RIGHT_ARROW event.');
349353

350-
stepHeaderEl = stepHeader[1].nativeElement;
354+
stepHeaderEl = stepHeaders[1].nativeElement;
351355
dispatchKeyboardEvent(stepHeaderEl, 'keydown', ENTER);
352356
fixture.detectChanges();
353357

354-
expect(stepperComponent._focusIndex).toBe(1);
355-
expect(stepperComponent.selectedIndex).toBe(1);
358+
expect(stepperComponent._focusIndex)
359+
.toBe(1, 'Expected index of focused step to remain unchanged after ENTER event.');
360+
expect(stepperComponent.selectedIndex)
361+
.toBe(1,
362+
'Expected index of selected step to change to index of focused step after EVENT event.');
356363

357-
stepHeaderEl = stepHeader[1].nativeElement;
364+
stepHeaderEl = stepHeaders[1].nativeElement;
358365
dispatchKeyboardEvent(stepHeaderEl, 'keydown', LEFT_ARROW);
359366
fixture.detectChanges();
360367

361-
expect(stepperComponent._focusIndex).toBe(0);
362-
expect(stepperComponent.selectedIndex).toBe(1);
368+
expect(stepperComponent._focusIndex)
369+
.toBe(0, 'Expected index of focused step to decrease by 1 after LEFT_ARROW event.');
370+
expect(stepperComponent.selectedIndex)
371+
.toBe(1, 'Expected index of selected step to remain unchanged after LEFT_ARROW event.');
363372

364373
// When the focus is on the last step and right arrow key is pressed, the focus should cycle
365374
// through to the first step.
366375
stepperComponent._focusIndex = 2;
367-
stepHeaderEl = stepHeader[2].nativeElement;
376+
stepHeaderEl = stepHeaders[2].nativeElement;
368377
dispatchKeyboardEvent(stepHeaderEl, 'keydown', RIGHT_ARROW);
369378
fixture.detectChanges();
370379

371-
expect(stepperComponent._focusIndex).toBe(0);
372-
expect(stepperComponent.selectedIndex).toBe(1);
380+
expect(stepperComponent._focusIndex)
381+
.toBe(0,
382+
'Expected index of focused step to cycle through to index 0 after RIGHT_ARROW event.');
383+
expect(stepperComponent.selectedIndex)
384+
.toBe(1, 'Expected index of selected step to remain unchanged after RIGHT_ARROW event.');
373385

374-
stepHeaderEl = stepHeader[0].nativeElement;
386+
stepHeaderEl = stepHeaders[0].nativeElement;
375387
dispatchKeyboardEvent(stepHeaderEl, 'keydown', SPACE);
376388
fixture.detectChanges();
377389

378-
expect(stepperComponent._focusIndex).toBe(0);
379-
expect(stepperComponent.selectedIndex).toBe(0);
390+
expect(stepperComponent._focusIndex)
391+
.toBe(0, 'Expected index of focused to remain unchanged after SPACE event.');
392+
expect(stepperComponent.selectedIndex)
393+
.toBe(0,
394+
'Expected index of selected step to change to index of focused step after SPACE event.');
380395
}
381396

382397
function checkLinearStepperValidity(stepHeaderEl: HTMLElement,

0 commit comments

Comments
 (0)