From 059a010cde02c2b65b6d23119626697cf360cfb8 Mon Sep 17 00:00:00 2001
From: Ji Won Shin <jwshin@google.com>
Date: Fri, 11 Aug 2017 18:28:25 -0700
Subject: [PATCH 1/3] Add unit tests for stepper

---
 src/lib/stepper/stepper.spec.ts | 559 ++++++++++++++++++++++++++++++++
 test/karma-test-shim.js         |   1 +
 2 files changed, 560 insertions(+)
 create mode 100644 src/lib/stepper/stepper.spec.ts

diff --git a/src/lib/stepper/stepper.spec.ts b/src/lib/stepper/stepper.spec.ts
new file mode 100644
index 000000000000..571fa934d07f
--- /dev/null
+++ b/src/lib/stepper/stepper.spec.ts
@@ -0,0 +1,559 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {Component, DebugElement} from '@angular/core';
+import {MdStepperModule} from './index';
+import {By} from '@angular/platform-browser';
+import {MdHorizontalStepper} from './stepper-horizontal';
+import {MdVerticalStepper} from './stepper-vertical';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
+import {MdStepperNext, MdStepperPrevious} from './stepper-button';
+import {dispatchKeyboardEvent} from '@angular/cdk/testing';
+import {ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
+
+fdescribe('MdHorizontalStepper', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MdStepperModule, NoopAnimationsModule, FormsModule, ReactiveFormsModule],
+      declarations: [
+        SimpleMdHorizontalStepperApp,
+        LinearMdHorizontalStepperApp
+      ]
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  describe('basic horizontal stepper', () => {
+    let fixture: ComponentFixture<SimpleMdHorizontalStepperApp>;
+    let stepperComponent: MdHorizontalStepper;
+    let stepperEl: HTMLElement;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SimpleMdHorizontalStepperApp);
+      fixture.detectChanges();
+
+      stepperComponent = fixture.debugElement
+          .query(By.css('md-horizontal-stepper')).componentInstance;
+    });
+
+    it('should default to the first step', () => {
+      expect(stepperComponent.selectedIndex).toBe(0);
+    });
+
+    it('should change selected index on header click', () => {
+      let stepHeader = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
+      checkSelectionChangeOnHeaderClick(stepperComponent, fixture, stepHeader);
+
+    });
+
+    it('should set the "tablist" role on stepper', () => {
+      stepperEl = fixture.debugElement.query(By.css('md-horizontal-stepper')).nativeElement;
+      expect(stepperEl.getAttribute('role')).toBe('tablist');
+    });
+
+    it('should expand the right content', () => {
+      let stepContent = fixture.debugElement.queryAll(By.css(`.mat-horizontal-stepper-content`));
+      checkExpandedContent(stepperComponent, fixture, stepContent);
+    });
+
+    it('should display the correct label', () => {
+      checkCorrectLabel(stepperComponent, fixture);
+    });
+
+    it('should go to next available step when the next button is clicked', () => {
+      checkNextStepperButton(stepperComponent, fixture);
+    });
+
+    it('should go to previous available step when the previous button is clicked', () => {
+      checkPreviousStepperButton(stepperComponent, fixture);
+    });
+
+    it('should set the correct step position for animation', () => {
+      checkStepPosition(stepperComponent, fixture);
+    });
+
+    it('should support keyboard events to move and select focus', () => {
+      let stepHeader = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
+      checkKeyboardEvent(stepperComponent, fixture, stepHeader);
+    });
+  });
+
+  describe('linear horizontal stepper', () => {
+    let fixture: ComponentFixture<LinearMdHorizontalStepperApp>;
+    let testComponent: LinearMdHorizontalStepperApp;
+    let stepperComponent: MdHorizontalStepper;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(LinearMdHorizontalStepperApp);
+      fixture.detectChanges();
+
+      testComponent = fixture.componentInstance;
+      stepperComponent = fixture.debugElement
+          .query(By.css('md-horizontal-stepper')).componentInstance;
+    });
+
+    it('should have true linear attribute', () => {
+      expect(stepperComponent.linear).toBe(true);
+    });
+
+    it('should not move to next step if current step is not valid', () => {
+      expect(testComponent.oneGroup.get('oneCtrl')!.value).toBe('');
+      expect(testComponent.oneGroup.valid).toBe(false);
+      expect(stepperComponent.selectedIndex).toBe(0);
+
+      let stepHeaderEl = fixture.debugElement
+          .queryAll(By.css('.mat-horizontal-stepper-header'))[1].nativeElement;
+      checkLinearStepperValidity(stepHeaderEl, stepperComponent, testComponent, fixture);
+    });
+  });
+});
+
+fdescribe('MdVerticalStepper', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MdStepperModule, NoopAnimationsModule, FormsModule, ReactiveFormsModule],
+      declarations: [
+        SimpleMdVerticalStepperApp,
+        LinearMdVerticalStepperApp
+      ]
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  describe('basic vertical stepper', () => {
+    let fixture: ComponentFixture<SimpleMdVerticalStepperApp>;
+    let stepperComponent: MdVerticalStepper;
+    let stepperEl: HTMLElement;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SimpleMdVerticalStepperApp);
+      fixture.detectChanges();
+
+      stepperComponent = fixture.debugElement
+          .query(By.css('md-vertical-stepper')).componentInstance;
+    });
+
+    it('should default to the first step', () => {
+      expect(stepperComponent.selectedIndex).toBe(0);
+    });
+
+    it('should change selected index on header click', () => {
+      let stepHeader = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
+      checkSelectionChangeOnHeaderClick(stepperComponent, fixture, stepHeader);
+
+    });
+
+    it('should set the "tablist" role on stepper', () => {
+      stepperEl = fixture.debugElement.query(By.css('md-vertical-stepper')).nativeElement;
+      expect(stepperEl.getAttribute('role')).toBe('tablist');
+    });
+
+    it('should expand the right content', () => {
+      let stepContent = fixture.debugElement.queryAll(By.css(`.mat-vertical-stepper-content`));
+      checkExpandedContent(stepperComponent, fixture, stepContent);
+    });
+
+    it('should display the correct label', () => {
+      checkCorrectLabel(stepperComponent, fixture);
+    });
+
+    it('should go to next available step when the next button is clicked', () => {
+      checkNextStepperButton(stepperComponent, fixture);
+    });
+
+    it('should go to previous available step when the previous button is clicked', () => {
+      checkPreviousStepperButton(stepperComponent, fixture);
+    });
+
+    it('should set the correct step position for animation', () => {
+      checkStepPosition(stepperComponent, fixture);
+    });
+
+    it('should support keyboard events to move and select focus', () => {
+      let stepHeader = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
+      checkKeyboardEvent(stepperComponent, fixture, stepHeader);
+    });
+  });
+
+  describe('linear vertical stepper', () => {
+    let fixture: ComponentFixture<LinearMdVerticalStepperApp>;
+    let testComponent: LinearMdVerticalStepperApp;
+    let stepperComponent: MdVerticalStepper;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(LinearMdVerticalStepperApp);
+      fixture.detectChanges();
+
+      testComponent = fixture.componentInstance;
+      stepperComponent = fixture.debugElement
+          .query(By.css('md-vertical-stepper')).componentInstance;
+    });
+
+    it('should have true linear attribute', () => {
+      expect(stepperComponent.linear).toBe(true);
+    });
+
+    it('should not move to next step if current step is not valid', () => {
+      expect(testComponent.oneGroup.get('oneCtrl')!.value).toBe('');
+      expect(testComponent.oneGroup.valid).toBe(false);
+      expect(stepperComponent.selectedIndex).toBe(0);
+
+      let stepHeaderEl = fixture.debugElement
+          .queryAll(By.css('.mat-vertical-stepper-header'))[1].nativeElement;
+
+      checkLinearStepperValidity(stepHeaderEl, stepperComponent, testComponent, fixture);
+    });
+  });
+});
+
+function checkSelectionChangeOnHeaderClick(stepperComponent:
+                                               MdHorizontalStepper | MdVerticalStepper,
+                                           fixture: ComponentFixture<any>,
+                                           stepHeader: DebugElement[]) {
+  expect(stepperComponent.selectedIndex).toBe(0);
+
+  // select the second step
+  let stepHeaderEl = stepHeader[1].nativeElement;
+  stepHeaderEl.click();
+  fixture.detectChanges();
+
+  expect(stepperComponent.selectedIndex).toBe(1);
+
+  // select the third step
+  stepHeaderEl = stepHeader[2].nativeElement;
+  stepHeaderEl.click();
+  fixture.detectChanges();
+
+  expect(stepperComponent.selectedIndex).toBe(2);
+}
+
+function checkExpandedContent(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
+                              fixture: ComponentFixture<any>,
+                              stepContent: DebugElement[]) {
+  let stepContentEl = stepContent[0].nativeElement;
+  expect(stepContentEl.getAttribute('aria-expanded')).toBe('true');
+
+  stepperComponent.selectedIndex = 1;
+  fixture.detectChanges();
+
+  expect(stepContentEl.getAttribute('aria-expanded')).toBe('false');
+  stepContentEl = stepContent[1].nativeElement;
+  expect(stepContentEl.getAttribute('aria-expanded')).toBe('true');
+}
+
+function checkCorrectLabel(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
+                           fixture: ComponentFixture<any>) {
+  let selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]');
+  expect(selectedLabel.textContent).toMatch('Step 1');
+
+  stepperComponent.selectedIndex = 2;
+  fixture.detectChanges();
+
+  selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]');
+  expect(selectedLabel.textContent).toMatch('Step 3');
+
+  fixture.componentInstance.inputLabel = 'New Label';
+  fixture.detectChanges();
+
+  selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]');
+  expect(selectedLabel.textContent).toMatch('New Label');
+}
+
+function checkNextStepperButton(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
+                                fixture: ComponentFixture<any>) {
+  expect(stepperComponent.selectedIndex).toBe(0);
+
+  let nextButtonNativeEl = fixture.debugElement
+      .queryAll(By.directive(MdStepperNext))[0].nativeElement;
+  nextButtonNativeEl.click();
+  fixture.detectChanges();
+
+  expect(stepperComponent.selectedIndex).toBe(1);
+
+  nextButtonNativeEl = fixture.debugElement
+      .queryAll(By.directive(MdStepperNext))[1].nativeElement;
+  nextButtonNativeEl.click();
+  fixture.detectChanges();
+
+  expect(stepperComponent.selectedIndex).toBe(2);
+
+  nextButtonNativeEl = fixture.debugElement
+      .queryAll(By.directive(MdStepperNext))[2].nativeElement;
+  nextButtonNativeEl.click();
+  fixture.detectChanges();
+
+  expect(stepperComponent.selectedIndex).toBe(2);
+}
+
+function checkPreviousStepperButton(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
+                                    fixture: ComponentFixture<any>) {
+  expect(stepperComponent.selectedIndex).toBe(0);
+
+  stepperComponent.selectedIndex = 2;
+  let previousButtonNativeEl = fixture.debugElement
+      .queryAll(By.directive(MdStepperPrevious))[2].nativeElement;
+  previousButtonNativeEl.click();
+  fixture.detectChanges();
+
+  expect(stepperComponent.selectedIndex).toBe(1);
+
+  previousButtonNativeEl = fixture.debugElement
+      .queryAll(By.directive(MdStepperPrevious))[1].nativeElement;
+  previousButtonNativeEl.click();
+  fixture.detectChanges();
+
+  expect(stepperComponent.selectedIndex).toBe(0);
+
+  previousButtonNativeEl = fixture.debugElement
+      .queryAll(By.directive(MdStepperPrevious))[0].nativeElement;
+  previousButtonNativeEl.click();
+  fixture.detectChanges();
+
+  expect(stepperComponent.selectedIndex).toBe(0);
+}
+
+function checkStepPosition(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
+                           fixture: ComponentFixture<any>) {
+  expect(stepperComponent._getAnimationDirection(0)).toBe('current');
+  expect(stepperComponent._getAnimationDirection(1)).toBe('next');
+  expect(stepperComponent._getAnimationDirection(2)).toBe('next');
+
+  stepperComponent.selectedIndex = 1;
+  fixture.detectChanges();
+
+  expect(stepperComponent._getAnimationDirection(0)).toBe('previous');
+  expect(stepperComponent._getAnimationDirection(1)).toBe('current');
+  expect(stepperComponent._getAnimationDirection(2)).toBe('next');
+
+  stepperComponent.selectedIndex = 2;
+  fixture.detectChanges();
+
+  expect(stepperComponent._getAnimationDirection(0)).toBe('previous');
+  expect(stepperComponent._getAnimationDirection(1)).toBe('previous');
+  expect(stepperComponent._getAnimationDirection(2)).toBe('current');
+}
+
+function checkKeyboardEvent(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
+                            fixture: ComponentFixture<any>,
+                            stepHeader: DebugElement[]) {
+  expect(stepperComponent._focusIndex).toBe(0);
+  expect(stepperComponent.selectedIndex).toBe(0);
+
+  let stepHeaderEl = stepHeader[0].nativeElement;
+  dispatchKeyboardEvent(stepHeaderEl, 'keydown', RIGHT_ARROW);
+  fixture.detectChanges();
+
+  expect(stepperComponent._focusIndex).toBe(1);
+  expect(stepperComponent.selectedIndex).toBe(0);
+
+  stepHeaderEl = stepHeader[1].nativeElement;
+  dispatchKeyboardEvent(stepHeaderEl, 'keydown', ENTER);
+  fixture.detectChanges();
+
+  expect(stepperComponent._focusIndex).toBe(1);
+  expect(stepperComponent.selectedIndex).toBe(1);
+
+  stepHeaderEl = stepHeader[1].nativeElement;
+  dispatchKeyboardEvent(stepHeaderEl, 'keydown', LEFT_ARROW);
+  fixture.detectChanges();
+
+  expect(stepperComponent._focusIndex).toBe(0);
+  expect(stepperComponent.selectedIndex).toBe(1);
+
+  // When the focus is on the last step and right arrow key is pressed, the focus should cycle
+  // through to the first step.
+  stepperComponent._focusIndex = 2;
+  stepHeaderEl = stepHeader[2].nativeElement;
+  dispatchKeyboardEvent(stepHeaderEl, 'keydown', RIGHT_ARROW);
+  fixture.detectChanges();
+
+  expect(stepperComponent._focusIndex).toBe(0);
+  expect(stepperComponent.selectedIndex).toBe(1);
+
+  stepHeaderEl = stepHeader[0].nativeElement;
+  dispatchKeyboardEvent(stepHeaderEl, 'keydown', SPACE);
+  fixture.detectChanges();
+
+  expect(stepperComponent._focusIndex).toBe(0);
+  expect(stepperComponent.selectedIndex).toBe(0);
+}
+
+function checkLinearStepperValidity(stepHeaderEl: HTMLElement,
+                                    stepperComponent: MdHorizontalStepper | MdVerticalStepper,
+                                    testComponent:
+                                        LinearMdHorizontalStepperApp | LinearMdVerticalStepperApp,
+                                    fixture: ComponentFixture<any>) {
+  stepHeaderEl.click();
+  fixture.detectChanges();
+
+  expect(stepperComponent.selectedIndex).toBe(0);
+
+  let nextButtonNativeEl = fixture.debugElement
+      .queryAll(By.directive(MdStepperNext))[0].nativeElement;
+  nextButtonNativeEl.click();
+  fixture.detectChanges();
+
+  expect(stepperComponent.selectedIndex).toBe(0);
+
+  testComponent.oneGroup.get('oneCtrl')!.setValue('answer');
+  stepHeaderEl.click();
+  fixture.detectChanges();
+
+  expect(testComponent.oneGroup.valid).toBe(true);
+  expect(stepperComponent.selectedIndex).toBe(1);
+}
+
+@Component({
+  template: `
+    <md-horizontal-stepper>
+      <md-step>
+        <ng-template mdStepLabel>Step 1</ng-template>
+        Content 1
+        <div>
+          <button md-button mdStepperPrevious>Back</button>
+          <button md-button mdStepperNext>Next</button>
+        </div>
+      </md-step>
+      <md-step>
+        <ng-template mdStepLabel>Step 2</ng-template>
+        Content 2
+        <div>
+          <button md-button mdStepperPrevious>Back</button>
+          <button md-button mdStepperNext>Next</button>
+        </div>
+      </md-step>
+      <md-step [label]="inputLabel">
+        Content 3
+        <div>
+          <button md-button mdStepperPrevious>Back</button>
+          <button md-button mdStepperNext>Next</button>
+        </div>
+      </md-step>
+    </md-horizontal-stepper>
+  `
+})
+class SimpleMdHorizontalStepperApp {
+  inputLabel = 'Step 3';
+}
+
+@Component({
+  template: `
+    <md-horizontal-stepper linear>
+      <md-step [stepControl]="oneGroup">
+        <form [formGroup]="oneGroup">
+          <ng-template mdStepLabel>Step one</ng-template>
+          <md-input-container>
+            <input mdInput formControlName="oneCtrl" required>
+          </md-input-container>
+          <div>
+            <button md-button mdStepperPrevious>Back</button>
+            <button md-button mdStepperNext>Next</button>
+          </div>
+        </form>
+      </md-step>
+      <md-step [stepControl]="twoGroup">
+        <form [formGroup]="twoGroup">
+          <ng-template mdStepLabel>Step two</ng-template>
+          <md-input-container>
+            <input mdInput formControlName="twoCtrl" required>
+          </md-input-container>
+          <div>
+            <button md-button mdStepperPrevious>Back</button>
+            <button md-button mdStepperNext>Next</button>
+          </div>
+        </form>
+      </md-step>
+    </md-horizontal-stepper>
+  `
+})
+class LinearMdHorizontalStepperApp {
+  oneGroup: FormGroup;
+  twoGroup: FormGroup;
+
+  ngOnInit() {
+    this.oneGroup = new FormGroup({
+      oneCtrl: new FormControl('', Validators.required)
+    });
+    this.twoGroup = new FormGroup({
+      twoCtrl: new FormControl('', Validators.required)
+    });
+  }
+}
+
+@Component({
+  template: `
+    <md-vertical-stepper>
+      <md-step>
+        <ng-template mdStepLabel>Step 1</ng-template>
+        Content 1
+        <div>
+          <button md-button mdStepperPrevious>Back</button>
+          <button md-button mdStepperNext>Next</button>
+        </div>
+      </md-step>
+      <md-step>
+        <ng-template mdStepLabel>Step 2</ng-template>
+        Content 2
+        <div>
+          <button md-button mdStepperPrevious>Back</button>
+          <button md-button mdStepperNext>Next</button>
+        </div>
+      </md-step>
+      <md-step [label]="inputLabel">
+        Content 3
+        <div>
+          <button md-button mdStepperPrevious>Back</button>
+          <button md-button mdStepperNext>Next</button>
+        </div>
+      </md-step>
+    </md-vertical-stepper>
+  `
+})
+class SimpleMdVerticalStepperApp {
+  inputLabel = 'Step 3';
+}
+
+@Component({
+  template: `
+    <md-vertical-stepper linear>
+      <md-step [stepControl]="oneGroup">
+        <form [formGroup]="oneGroup">
+          <ng-template mdStepLabel>Step one</ng-template>
+          <md-input-container>
+            <input mdInput formControlName="oneCtrl" required>
+          </md-input-container>
+          <div>
+            <button md-button mdStepperPrevious>Back</button>
+            <button md-button mdStepperNext>Next</button>
+          </div>
+        </form>
+      </md-step>
+      <md-step [stepControl]="twoGroup">
+        <form [formGroup]="twoGroup">
+          <ng-template mdStepLabel>Step two</ng-template>
+          <md-input-container>
+            <input mdInput formControlName="twoCtrl" required>
+          </md-input-container>
+          <div>
+            <button md-button mdStepperPrevious>Back</button>
+            <button md-button mdStepperNext>Next</button>
+          </div>
+        </form>
+      </md-step>
+    </md-vertical-stepper>
+  `
+})
+class LinearMdVerticalStepperApp {
+  oneGroup: FormGroup;
+  twoGroup: FormGroup;
+
+  ngOnInit() {
+    this.oneGroup = new FormGroup({
+      oneCtrl: new FormControl('', Validators.required)
+    });
+    this.twoGroup = new FormGroup({
+      twoCtrl: new FormControl('', Validators.required)
+    });
+  }
+}
diff --git a/test/karma-test-shim.js b/test/karma-test-shim.js
index fadbd1397e7d..450ad1286576 100644
--- a/test/karma-test-shim.js
+++ b/test/karma-test-shim.js
@@ -58,6 +58,7 @@ System.config({
     '@angular/cdk/platform': 'dist/packages/cdk/platform/index.js',
     '@angular/cdk/portal': 'dist/packages/cdk/portal/index.js',
     '@angular/cdk/rxjs': 'dist/packages/cdk/rxjs/index.js',
+    '@angular/cdk/stepper': 'dist/packages/cdk/stepper/index.js',
     '@angular/cdk/table': 'dist/packages/cdk/table/index.js',
     '@angular/cdk/testing': 'dist/packages/cdk/testing/index.js',
   },

From 60e80444a4a128e28b3406810d2f87c006b9f1fa Mon Sep 17 00:00:00 2001
From: Ji Won Shin <jwshin@google.com>
Date: Tue, 15 Aug 2017 10:13:31 -0700
Subject: [PATCH 2/3] Changes made based on review

---
 src/lib/stepper/stepper.spec.ts | 103 ++++++++++++++++++--------------
 1 file changed, 59 insertions(+), 44 deletions(-)

diff --git a/src/lib/stepper/stepper.spec.ts b/src/lib/stepper/stepper.spec.ts
index 571fa934d07f..f38171943f82 100644
--- a/src/lib/stepper/stepper.spec.ts
+++ b/src/lib/stepper/stepper.spec.ts
@@ -5,15 +5,15 @@ import {By} from '@angular/platform-browser';
 import {MdHorizontalStepper} from './stepper-horizontal';
 import {MdVerticalStepper} from './stepper-vertical';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {MdStepperNext, MdStepperPrevious} from './stepper-button';
 import {dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
 
-fdescribe('MdHorizontalStepper', () => {
+describe('MdHorizontalStepper', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdStepperModule, NoopAnimationsModule, FormsModule, ReactiveFormsModule],
+      imports: [MdStepperModule, NoopAnimationsModule, ReactiveFormsModule],
       declarations: [
         SimpleMdHorizontalStepperApp,
         LinearMdHorizontalStepperApp
@@ -41,8 +41,8 @@ fdescribe('MdHorizontalStepper', () => {
     });
 
     it('should change selected index on header click', () => {
-      let stepHeader = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
-      checkSelectionChangeOnHeaderClick(stepperComponent, fixture, stepHeader);
+      let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
+      checkSelectionChangeOnHeaderClick(stepperComponent, fixture, stepHeaders);
 
     });
 
@@ -51,9 +51,9 @@ fdescribe('MdHorizontalStepper', () => {
       expect(stepperEl.getAttribute('role')).toBe('tablist');
     });
 
-    it('should expand the right content', () => {
-      let stepContent = fixture.debugElement.queryAll(By.css(`.mat-horizontal-stepper-content`));
-      checkExpandedContent(stepperComponent, fixture, stepContent);
+    it('should set aria-expanded of content correctly', () => {
+      let stepContents = fixture.debugElement.queryAll(By.css(`.mat-horizontal-stepper-content`));
+      checkExpandedContent(stepperComponent, fixture, stepContents);
     });
 
     it('should display the correct label', () => {
@@ -73,8 +73,8 @@ fdescribe('MdHorizontalStepper', () => {
     });
 
     it('should support keyboard events to move and select focus', () => {
-      let stepHeader = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
-      checkKeyboardEvent(stepperComponent, fixture, stepHeader);
+      let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
+      checkKeyboardEvent(stepperComponent, fixture, stepHeaders);
     });
   });
 
@@ -98,6 +98,7 @@ fdescribe('MdHorizontalStepper', () => {
 
     it('should not move to next step if current step is not valid', () => {
       expect(testComponent.oneGroup.get('oneCtrl')!.value).toBe('');
+      expect(testComponent.oneGroup.get('oneCtrl')!.valid).toBe(false);
       expect(testComponent.oneGroup.valid).toBe(false);
       expect(stepperComponent.selectedIndex).toBe(0);
 
@@ -108,10 +109,10 @@ fdescribe('MdHorizontalStepper', () => {
   });
 });
 
-fdescribe('MdVerticalStepper', () => {
+describe('MdVerticalStepper', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdStepperModule, NoopAnimationsModule, FormsModule, ReactiveFormsModule],
+      imports: [MdStepperModule, NoopAnimationsModule, ReactiveFormsModule],
       declarations: [
         SimpleMdVerticalStepperApp,
         LinearMdVerticalStepperApp
@@ -139,8 +140,8 @@ fdescribe('MdVerticalStepper', () => {
     });
 
     it('should change selected index on header click', () => {
-      let stepHeader = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
-      checkSelectionChangeOnHeaderClick(stepperComponent, fixture, stepHeader);
+      let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
+      checkSelectionChangeOnHeaderClick(stepperComponent, fixture, stepHeaders);
 
     });
 
@@ -149,9 +150,9 @@ fdescribe('MdVerticalStepper', () => {
       expect(stepperEl.getAttribute('role')).toBe('tablist');
     });
 
-    it('should expand the right content', () => {
-      let stepContent = fixture.debugElement.queryAll(By.css(`.mat-vertical-stepper-content`));
-      checkExpandedContent(stepperComponent, fixture, stepContent);
+    it('should set aria-expanded of content correctly', () => {
+      let stepContents = fixture.debugElement.queryAll(By.css(`.mat-vertical-stepper-content`));
+      checkExpandedContent(stepperComponent, fixture, stepContents);
     });
 
     it('should display the correct label', () => {
@@ -171,8 +172,8 @@ fdescribe('MdVerticalStepper', () => {
     });
 
     it('should support keyboard events to move and select focus', () => {
-      let stepHeader = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
-      checkKeyboardEvent(stepperComponent, fixture, stepHeader);
+      let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header'));
+      checkKeyboardEvent(stepperComponent, fixture, stepHeaders);
     });
   });
 
@@ -196,6 +197,7 @@ fdescribe('MdVerticalStepper', () => {
 
     it('should not move to next step if current step is not valid', () => {
       expect(testComponent.oneGroup.get('oneCtrl')!.value).toBe('');
+      expect(testComponent.oneGroup.get('oneCtrl')!.valid).toBe(false);
       expect(testComponent.oneGroup.valid).toBe(false);
       expect(stepperComponent.selectedIndex).toBe(0);
 
@@ -210,18 +212,18 @@ fdescribe('MdVerticalStepper', () => {
 function checkSelectionChangeOnHeaderClick(stepperComponent:
                                                MdHorizontalStepper | MdVerticalStepper,
                                            fixture: ComponentFixture<any>,
-                                           stepHeader: DebugElement[]) {
+                                           stepHeaders: DebugElement[]) {
   expect(stepperComponent.selectedIndex).toBe(0);
 
   // select the second step
-  let stepHeaderEl = stepHeader[1].nativeElement;
+  let stepHeaderEl = stepHeaders[1].nativeElement;
   stepHeaderEl.click();
   fixture.detectChanges();
 
   expect(stepperComponent.selectedIndex).toBe(1);
 
   // select the third step
-  stepHeaderEl = stepHeader[2].nativeElement;
+  stepHeaderEl = stepHeaders[2].nativeElement;
   stepHeaderEl.click();
   fixture.detectChanges();
 
@@ -230,16 +232,16 @@ function checkSelectionChangeOnHeaderClick(stepperComponent:
 
 function checkExpandedContent(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
                               fixture: ComponentFixture<any>,
-                              stepContent: DebugElement[]) {
-  let stepContentEl = stepContent[0].nativeElement;
-  expect(stepContentEl.getAttribute('aria-expanded')).toBe('true');
+                              stepContents: DebugElement[]) {
+  let firstStepContentEl = stepContents[0].nativeElement;
+  expect(firstStepContentEl.getAttribute('aria-expanded')).toBe('true');
 
   stepperComponent.selectedIndex = 1;
   fixture.detectChanges();
 
-  expect(stepContentEl.getAttribute('aria-expanded')).toBe('false');
-  stepContentEl = stepContent[1].nativeElement;
-  expect(stepContentEl.getAttribute('aria-expanded')).toBe('true');
+  expect(firstStepContentEl.getAttribute('aria-expanded')).toBe('false');
+  let secondStepContentEl = stepContents[1].nativeElement;
+  expect(secondStepContentEl.getAttribute('aria-expanded')).toBe('true');
 }
 
 function checkCorrectLabel(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
@@ -336,47 +338,60 @@ function checkStepPosition(stepperComponent: MdHorizontalStepper | MdVerticalSte
 
 function checkKeyboardEvent(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
                             fixture: ComponentFixture<any>,
-                            stepHeader: DebugElement[]) {
+                            stepHeaders: DebugElement[]) {
   expect(stepperComponent._focusIndex).toBe(0);
   expect(stepperComponent.selectedIndex).toBe(0);
 
-  let stepHeaderEl = stepHeader[0].nativeElement;
+  let stepHeaderEl = stepHeaders[0].nativeElement;
   dispatchKeyboardEvent(stepHeaderEl, 'keydown', RIGHT_ARROW);
   fixture.detectChanges();
 
-  expect(stepperComponent._focusIndex).toBe(1);
-  expect(stepperComponent.selectedIndex).toBe(0);
+  expect(stepperComponent._focusIndex)
+      .toBe(1, 'Expected index of focused step to be increased by 1 after RIGHT_ARROW event.');
+  expect(stepperComponent.selectedIndex)
+      .toBe(0, 'Expected index of selected step to remain unchanged after RIGHT_ARROW event.');
 
-  stepHeaderEl = stepHeader[1].nativeElement;
+  stepHeaderEl = stepHeaders[1].nativeElement;
   dispatchKeyboardEvent(stepHeaderEl, 'keydown', ENTER);
   fixture.detectChanges();
 
-  expect(stepperComponent._focusIndex).toBe(1);
-  expect(stepperComponent.selectedIndex).toBe(1);
+  expect(stepperComponent._focusIndex)
+      .toBe(1, 'Expected index of focused step to remain unchanged after ENTER event.');
+  expect(stepperComponent.selectedIndex)
+      .toBe(1,
+          'Expected index of selected step to change to index of focused step after EVENT event.');
 
-  stepHeaderEl = stepHeader[1].nativeElement;
+  stepHeaderEl = stepHeaders[1].nativeElement;
   dispatchKeyboardEvent(stepHeaderEl, 'keydown', LEFT_ARROW);
   fixture.detectChanges();
 
-  expect(stepperComponent._focusIndex).toBe(0);
-  expect(stepperComponent.selectedIndex).toBe(1);
+  expect(stepperComponent._focusIndex)
+      .toBe(0, 'Expected index of focused step to decrease by 1 after LEFT_ARROW event.');
+  expect(stepperComponent.selectedIndex)
+      .toBe(1, 'Expected index of selected step to remain unchanged after LEFT_ARROW event.');
 
   // When the focus is on the last step and right arrow key is pressed, the focus should cycle
   // through to the first step.
   stepperComponent._focusIndex = 2;
-  stepHeaderEl = stepHeader[2].nativeElement;
+  stepHeaderEl = stepHeaders[2].nativeElement;
   dispatchKeyboardEvent(stepHeaderEl, 'keydown', RIGHT_ARROW);
   fixture.detectChanges();
 
-  expect(stepperComponent._focusIndex).toBe(0);
-  expect(stepperComponent.selectedIndex).toBe(1);
+  expect(stepperComponent._focusIndex)
+      .toBe(0,
+          'Expected index of focused step to cycle through to index 0 after RIGHT_ARROW event.');
+  expect(stepperComponent.selectedIndex)
+      .toBe(1, 'Expected index of selected step to remain unchanged after RIGHT_ARROW event.');
 
-  stepHeaderEl = stepHeader[0].nativeElement;
+  stepHeaderEl = stepHeaders[0].nativeElement;
   dispatchKeyboardEvent(stepHeaderEl, 'keydown', SPACE);
   fixture.detectChanges();
 
-  expect(stepperComponent._focusIndex).toBe(0);
-  expect(stepperComponent.selectedIndex).toBe(0);
+  expect(stepperComponent._focusIndex)
+      .toBe(0, 'Expected index of focused to remain unchanged after SPACE event.');
+  expect(stepperComponent.selectedIndex)
+      .toBe(0,
+          'Expected index of selected step to change to index of focused step after SPACE event.');
 }
 
 function checkLinearStepperValidity(stepHeaderEl: HTMLElement,

From 9933bbc46bb29cc703aca5531ed72bb91e1d30a6 Mon Sep 17 00:00:00 2001
From: Ji Won Shin <jwshin@google.com>
Date: Tue, 15 Aug 2017 12:45:01 -0700
Subject: [PATCH 3/3] More changes based on review

---
 src/lib/stepper/stepper.spec.ts | 45 ++++++++++++++-------------------
 1 file changed, 19 insertions(+), 26 deletions(-)

diff --git a/src/lib/stepper/stepper.spec.ts b/src/lib/stepper/stepper.spec.ts
index f38171943f82..c7e478fa77bb 100644
--- a/src/lib/stepper/stepper.spec.ts
+++ b/src/lib/stepper/stepper.spec.ts
@@ -9,6 +9,7 @@ import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/
 import {MdStepperNext, MdStepperPrevious} from './stepper-button';
 import {dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
+import {MdStepper} from './stepper';
 
 describe('MdHorizontalStepper', () => {
   beforeEach(async(() => {
@@ -26,7 +27,6 @@ describe('MdHorizontalStepper', () => {
   describe('basic horizontal stepper', () => {
     let fixture: ComponentFixture<SimpleMdHorizontalStepperApp>;
     let stepperComponent: MdHorizontalStepper;
-    let stepperEl: HTMLElement;
 
     beforeEach(() => {
       fixture = TestBed.createComponent(SimpleMdHorizontalStepperApp);
@@ -43,11 +43,10 @@ describe('MdHorizontalStepper', () => {
     it('should change selected index on header click', () => {
       let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
       checkSelectionChangeOnHeaderClick(stepperComponent, fixture, stepHeaders);
-
     });
 
     it('should set the "tablist" role on stepper', () => {
-      stepperEl = fixture.debugElement.query(By.css('md-horizontal-stepper')).nativeElement;
+      let stepperEl = fixture.debugElement.query(By.css('md-horizontal-stepper')).nativeElement;
       expect(stepperEl.getAttribute('role')).toBe('tablist');
     });
 
@@ -125,7 +124,6 @@ describe('MdVerticalStepper', () => {
   describe('basic vertical stepper', () => {
     let fixture: ComponentFixture<SimpleMdVerticalStepperApp>;
     let stepperComponent: MdVerticalStepper;
-    let stepperEl: HTMLElement;
 
     beforeEach(() => {
       fixture = TestBed.createComponent(SimpleMdVerticalStepperApp);
@@ -146,7 +144,7 @@ describe('MdVerticalStepper', () => {
     });
 
     it('should set the "tablist" role on stepper', () => {
-      stepperEl = fixture.debugElement.query(By.css('md-vertical-stepper')).nativeElement;
+      let stepperEl = fixture.debugElement.query(By.css('md-vertical-stepper')).nativeElement;
       expect(stepperEl.getAttribute('role')).toBe('tablist');
     });
 
@@ -209,8 +207,7 @@ describe('MdVerticalStepper', () => {
   });
 });
 
-function checkSelectionChangeOnHeaderClick(stepperComponent:
-                                               MdHorizontalStepper | MdVerticalStepper,
+function checkSelectionChangeOnHeaderClick(stepperComponent: MdStepper,
                                            fixture: ComponentFixture<any>,
                                            stepHeaders: DebugElement[]) {
   expect(stepperComponent.selectedIndex).toBe(0);
@@ -230,7 +227,7 @@ function checkSelectionChangeOnHeaderClick(stepperComponent:
   expect(stepperComponent.selectedIndex).toBe(2);
 }
 
-function checkExpandedContent(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
+function checkExpandedContent(stepperComponent: MdStepper,
                               fixture: ComponentFixture<any>,
                               stepContents: DebugElement[]) {
   let firstStepContentEl = stepContents[0].nativeElement;
@@ -244,8 +241,7 @@ function checkExpandedContent(stepperComponent: MdHorizontalStepper | MdVertical
   expect(secondStepContentEl.getAttribute('aria-expanded')).toBe('true');
 }
 
-function checkCorrectLabel(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
-                           fixture: ComponentFixture<any>) {
+function checkCorrectLabel(stepperComponent: MdStepper, fixture: ComponentFixture<any>) {
   let selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]');
   expect(selectedLabel.textContent).toMatch('Step 1');
 
@@ -262,8 +258,7 @@ function checkCorrectLabel(stepperComponent: MdHorizontalStepper | MdVerticalSte
   expect(selectedLabel.textContent).toMatch('New Label');
 }
 
-function checkNextStepperButton(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
-                                fixture: ComponentFixture<any>) {
+function checkNextStepperButton(stepperComponent: MdStepper, fixture: ComponentFixture<any>) {
   expect(stepperComponent.selectedIndex).toBe(0);
 
   let nextButtonNativeEl = fixture.debugElement
@@ -288,8 +283,7 @@ function checkNextStepperButton(stepperComponent: MdHorizontalStepper | MdVertic
   expect(stepperComponent.selectedIndex).toBe(2);
 }
 
-function checkPreviousStepperButton(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
-                                    fixture: ComponentFixture<any>) {
+function checkPreviousStepperButton(stepperComponent: MdStepper, fixture: ComponentFixture<any>) {
   expect(stepperComponent.selectedIndex).toBe(0);
 
   stepperComponent.selectedIndex = 2;
@@ -315,8 +309,7 @@ function checkPreviousStepperButton(stepperComponent: MdHorizontalStepper | MdVe
   expect(stepperComponent.selectedIndex).toBe(0);
 }
 
-function checkStepPosition(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
-                           fixture: ComponentFixture<any>) {
+function checkStepPosition(stepperComponent: MdStepper, fixture: ComponentFixture<any>) {
   expect(stepperComponent._getAnimationDirection(0)).toBe('current');
   expect(stepperComponent._getAnimationDirection(1)).toBe('next');
   expect(stepperComponent._getAnimationDirection(2)).toBe('next');
@@ -336,7 +329,7 @@ function checkStepPosition(stepperComponent: MdHorizontalStepper | MdVerticalSte
   expect(stepperComponent._getAnimationDirection(2)).toBe('current');
 }
 
-function checkKeyboardEvent(stepperComponent: MdHorizontalStepper | MdVerticalStepper,
+function checkKeyboardEvent(stepperComponent: MdStepper,
                             fixture: ComponentFixture<any>,
                             stepHeaders: DebugElement[]) {
   expect(stepperComponent._focusIndex).toBe(0);
@@ -395,7 +388,7 @@ function checkKeyboardEvent(stepperComponent: MdHorizontalStepper | MdVerticalSt
 }
 
 function checkLinearStepperValidity(stepHeaderEl: HTMLElement,
-                                    stepperComponent: MdHorizontalStepper | MdVerticalStepper,
+                                    stepperComponent: MdStepper,
                                     testComponent:
                                         LinearMdHorizontalStepperApp | LinearMdVerticalStepperApp,
                                     fixture: ComponentFixture<any>) {
@@ -458,9 +451,9 @@ class SimpleMdHorizontalStepperApp {
       <md-step [stepControl]="oneGroup">
         <form [formGroup]="oneGroup">
           <ng-template mdStepLabel>Step one</ng-template>
-          <md-input-container>
+          <md-form-field>
             <input mdInput formControlName="oneCtrl" required>
-          </md-input-container>
+          </md-form-field>
           <div>
             <button md-button mdStepperPrevious>Back</button>
             <button md-button mdStepperNext>Next</button>
@@ -470,9 +463,9 @@ class SimpleMdHorizontalStepperApp {
       <md-step [stepControl]="twoGroup">
         <form [formGroup]="twoGroup">
           <ng-template mdStepLabel>Step two</ng-template>
-          <md-input-container>
+          <md-form-field>
             <input mdInput formControlName="twoCtrl" required>
-          </md-input-container>
+          </md-form-field>
           <div>
             <button md-button mdStepperPrevious>Back</button>
             <button md-button mdStepperNext>Next</button>
@@ -535,9 +528,9 @@ class SimpleMdVerticalStepperApp {
       <md-step [stepControl]="oneGroup">
         <form [formGroup]="oneGroup">
           <ng-template mdStepLabel>Step one</ng-template>
-          <md-input-container>
+          <md-form-field>
             <input mdInput formControlName="oneCtrl" required>
-          </md-input-container>
+          </md-form-field>
           <div>
             <button md-button mdStepperPrevious>Back</button>
             <button md-button mdStepperNext>Next</button>
@@ -547,9 +540,9 @@ class SimpleMdVerticalStepperApp {
       <md-step [stepControl]="twoGroup">
         <form [formGroup]="twoGroup">
           <ng-template mdStepLabel>Step two</ng-template>
-          <md-input-container>
+          <md-form-field>
             <input mdInput formControlName="twoCtrl" required>
-          </md-input-container>
+          </md-form-field>
           <div>
             <button md-button mdStepperPrevious>Back</button>
             <button md-button mdStepperNext>Next</button>