feat(stepper): Add e2e test (#6776)

* add e2e test for stepper

* create material example to run e2e tests

* Modifiy example

Author: jwshinjwshin

e2e/components/stepper-e2e.spec.ts

@@ -0,0 +1,84 @@
+import {
+  browser, by, element, ElementFinder, ExpectedConditions
+} from 'protractor';
+import {expectFocusOn, expectToExist} from '../util/asserts';
+import {pressKeys} from '../util/actions';
+import {Key} from 'selenium-webdriver';
+import {screenshot} from '../screenshot';
+
+describe('stepper', () => {
+  beforeEach(() => browser.get('/stepper'));
+
+  it('should render a stepper', () => {
+    expectToExist('md-horizontal-stepper');
+    screenshot('md-horizontal-stepper');
+  });
+
+  describe('basic behavior', () => {
+    it('should change steps correctly when stepper button is clicked', async () => {
+      const previousButton = element.all(by.buttonText('Back'));
+      const nextButton = element.all(by.buttonText('Next'));
+
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('1\nFill out your name');
+
+      screenshot('start');
+      nextButton.get(0).click();
+
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('2\nFill out your address');
+
+      await browser.wait(ExpectedConditions.not(
+          ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
+      screenshot('click next');
+
+      previousButton.get(0).click();
+
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('1\nFill out your name');
+
+      await browser.wait(ExpectedConditions.not(
+          ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
+      screenshot('click back');
+    });
+
+    it('should change focus with keyboard interaction', () => {
+      let stepHeaders = element.all(by.css('md-step-header'));
+      stepHeaders.get(0).click();
+
+      expectFocusOn(stepHeaders.get(0));
+
+      pressKeys(Key.RIGHT);
+      expectFocusOn(stepHeaders.get(1));
+
+      pressKeys(Key.RIGHT);
+      expectFocusOn(stepHeaders.get(2));
+
+      pressKeys(Key.RIGHT);
+      expectFocusOn(stepHeaders.get(0));
+
+      pressKeys(Key.LEFT);
+      expectFocusOn(stepHeaders.get(2));
+
+      pressKeys(Key.SPACE, Key.ENTER);
+      expectFocusOn(stepHeaders.get(2));
+    });
+  });
+
+  describe('linear stepper', () => {
+    let linearButton: ElementFinder;
+
+    beforeEach(() => {
+      linearButton = element(by.id('toggle-linear'));
+      linearButton.click();
+    });
+
+    it('should not move to next step when stepper button is clicked', () => {
+      let nextButton = element.all(by.buttonText('Next'));
+      nextButton.get(0).click();
+
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('1\nFill out your name');
+    });
+  });
+});

src/e2e-app/e2e-app-module.ts

@@ -35,10 +35,12 @@ import {
   MdRadioModule,
   MdSidenavModule,
   MdSlideToggleModule,
+  MdStepperModule,
   MdTabsModule,
 } from '@angular/material';
 import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
 import {ExampleModule} from '@angular/material-examples';
+import {ReactiveFormsModule} from '@angular/forms';
 
 /**
  * NgModule that contains all Material modules that are required to serve the e2e-app.
@@ -59,6 +61,7 @@ import {ExampleModule} from '@angular/material-examples';
     MdRadioModule,
     MdSidenavModule,
     MdSlideToggleModule,
+    MdStepperModule,
     MdTabsModule,
     MdNativeDateModule,
   ]
@@ -72,6 +75,7 @@ export class E2eMaterialModule {}
     E2eMaterialModule,
     NoopAnimationsModule,
     ExampleModule,
+    ReactiveFormsModule
   ],
   declarations: [
     BasicTabs,

src/e2e-app/e2e-app/e2e-app.html

@@ -18,6 +18,7 @@
   <a md-list-item [routerLink]="['radio']">Radios</a>
   <a md-list-item [routerLink]="['sidenav']">Sidenav</a>
   <a md-list-item [routerLink]="['slide-toggle']">Slide Toggle</a>
+  <a md-list-item [routerLink]="['stepper']">Stepper</a>
   <a md-list-item [routerLink]="['tabs']">Tabs</a>
   <a md-list-item [routerLink]="['cards']">Cards</a>
   <a md-list-item [routerLink]="['toolbar']">Toolbar</a>

src/e2e-app/e2e-app/routes.ts

@@ -20,7 +20,8 @@ import {
   ListOverviewExample,
   ToolbarMultirowExample,
   ButtonToggleOverviewExample,
-  ExpansionOverviewExample
+  ExpansionOverviewExample,
+  StepperOverviewExample
 } from '@angular/material-examples';
 
 export const E2E_APP_ROUTES: Routes = [
@@ -42,6 +43,7 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'radio', component: SimpleRadioButtons},
   {path: 'sidenav', component: SidenavE2E},
   {path: 'slide-toggle', component: SlideToggleE2E},
+  {path: 'stepper', component: StepperOverviewExample},
   {path: 'tabs', component: BasicTabs},
   {path: 'cards', component: CardFancyExample},
   {path: 'toolbar', component: ToolbarMultirowExample},

src/lib/stepper/stepper.md

@@ -1,5 +1,7 @@
 Angular Material's stepper provides a wizard-like workflow by dividing content into logical steps.
 
+<!-- example(stepper-overview) -->
+
 Material stepper builds on the foundation of the CDK stepper that is responsible for the logic
 that drives a stepped workflow. Material stepper extends the CDK stepper and has Material Design
 styling.

src/material-examples/example-module.ts

@@ -74,6 +74,7 @@ import {SliderOverviewExample} from './slider-overview/slider-overview-example';
 import {PizzaPartyComponent,SnackBarComponentExample} from './snack-bar-component/snack-bar-component-example';
 import {SnackBarOverviewExample} from './snack-bar-overview/snack-bar-overview-example';
 import {SortOverviewExample} from './sort-overview/sort-overview-example';
+import {StepperOverviewExample} from './stepper-overview/stepper-overview-example';
 import {TableBasicExample} from './table-basic/table-basic-example';
 import {TableFilteringExample} from './table-filtering/table-filtering-example';
 import {TableHttpExample} from './table-http/table-http-example';
@@ -454,6 +455,12 @@ export const EXAMPLE_COMPONENTS = {
     additionalFiles: null,
     selectorName: null
   },
+  'stepper-overview': {
+    title: 'Stepper overview',
+    component: StepperOverviewExample,
+    additionalFiles: null,
+    selectorName: null
+  },
   'table-basic': {
     title: 'Basic table',
     component: TableBasicExample,
@@ -590,6 +597,7 @@ export const EXAMPLE_LIST = [
   PizzaPartyComponent,SnackBarComponentExample,
   SnackBarOverviewExample,
   SortOverviewExample,
+  StepperOverviewExample,
   TableBasicExample,
   TableFilteringExample,
   TableHttpExample,

src/material-examples/material-module.ts

@@ -8,7 +8,7 @@ import {
   MdListModule, MdMenuModule, MdProgressBarModule, MdProgressSpinnerModule,
   MdRadioModule, MdSelectModule, MdSidenavModule, MdSliderModule, MdSortModule,
   MdSlideToggleModule, MdSnackBarModule, MdTableModule, MdTabsModule, MdToolbarModule,
-  MdTooltipModule, MdFormFieldModule, MdExpansionModule
+  MdTooltipModule, MdFormFieldModule, MdExpansionModule, MdStepperModule
 } from '@angular/material';
 
 @NgModule({
@@ -37,6 +37,7 @@ import {
     MdSliderModule,
     MdSidenavModule,
     MdSnackBarModule,
+    MdStepperModule,
     MdTabsModule,
     MdToolbarModule,
     MdTooltipModule,

src/material-examples/public_api.ts

@@ -7,3 +7,4 @@ export * from './card-fancy/card-fancy-example';
 export * from './toolbar-multirow/toolbar-multirow-example';
 export * from './button-toggle-overview/button-toggle-overview-example';
 export * from './expansion-overview/expansion-overview-example';
+export * from './stepper-overview/stepper-overview-example';

src/material-examples/stepper-overview/stepper-overview-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/material-examples/stepper-overview/stepper-overview-example.html

@@ -0,0 +1,33 @@
+<button (click)="isLinear=!isLinear" id="toggle-linear">Enable linear</button>
+<md-horizontal-stepper [linear]="isLinear">
+  <md-step [stepControl]="firstFormGroup">
+    <form [formGroup]="firstFormGroup">
+      <ng-template mdStepLabel>Fill out your name</ng-template>
+      <md-form-field>
+        <input mdInput placeholder="Last name, First name" formControlName="firstCtrl" required>
+      </md-form-field>
+      <div>
+        <button md-button mdStepperNext>Next</button>
+      </div>
+    </form>
+  </md-step>
+  <md-step [stepControl]="secondFormGroup">
+    <form [formGroup]="secondFormGroup">
+      <ng-template mdStepLabel>Fill out your address</ng-template>
+      <md-form-field>
+        <input mdInput placeholder="Address" formControlName="secondCtrl" required>
+      </md-form-field>
+      <div>
+        <button md-button mdStepperPrevious>Back</button>
+        <button md-button mdStepperNext>Next</button>
+      </div>
+    </form>
+  </md-step>
+  <md-step>
+    <ng-template mdStepLabel>Done</ng-template>
+    You are now done.
+    <div>
+      <button md-button mdStepperPrevious>Back</button>
+    </div>
+  </md-step>
+</md-horizontal-stepper>