Skip to content

Commit bef6271

Browse files
jwshinjwshintinayuangao
authored andcommitted
feat(stepper): Add e2e test (#6776)
* add e2e test for stepper * create material example to run e2e tests * Modifiy example
1 parent 5f4c44e commit bef6271

File tree

11 files changed

+166
-2
lines changed

11 files changed

+166
-2
lines changed

e2e/components/stepper-e2e.spec.ts

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import {
2+
browser, by, element, ElementFinder, ExpectedConditions
3+
} from 'protractor';
4+
import {expectFocusOn, expectToExist} from '../util/asserts';
5+
import {pressKeys} from '../util/actions';
6+
import {Key} from 'selenium-webdriver';
7+
import {screenshot} from '../screenshot';
8+
9+
describe('stepper', () => {
10+
beforeEach(() => browser.get('/stepper'));
11+
12+
it('should render a stepper', () => {
13+
expectToExist('md-horizontal-stepper');
14+
screenshot('md-horizontal-stepper');
15+
});
16+
17+
describe('basic behavior', () => {
18+
it('should change steps correctly when stepper button is clicked', async () => {
19+
const previousButton = element.all(by.buttonText('Back'));
20+
const nextButton = element.all(by.buttonText('Next'));
21+
22+
expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
23+
.toBe('1\nFill out your name');
24+
25+
screenshot('start');
26+
nextButton.get(0).click();
27+
28+
expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
29+
.toBe('2\nFill out your address');
30+
31+
await browser.wait(ExpectedConditions.not(
32+
ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
33+
screenshot('click next');
34+
35+
previousButton.get(0).click();
36+
37+
expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
38+
.toBe('1\nFill out your name');
39+
40+
await browser.wait(ExpectedConditions.not(
41+
ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
42+
screenshot('click back');
43+
});
44+
45+
it('should change focus with keyboard interaction', () => {
46+
let stepHeaders = element.all(by.css('md-step-header'));
47+
stepHeaders.get(0).click();
48+
49+
expectFocusOn(stepHeaders.get(0));
50+
51+
pressKeys(Key.RIGHT);
52+
expectFocusOn(stepHeaders.get(1));
53+
54+
pressKeys(Key.RIGHT);
55+
expectFocusOn(stepHeaders.get(2));
56+
57+
pressKeys(Key.RIGHT);
58+
expectFocusOn(stepHeaders.get(0));
59+
60+
pressKeys(Key.LEFT);
61+
expectFocusOn(stepHeaders.get(2));
62+
63+
pressKeys(Key.SPACE, Key.ENTER);
64+
expectFocusOn(stepHeaders.get(2));
65+
});
66+
});
67+
68+
describe('linear stepper', () => {
69+
let linearButton: ElementFinder;
70+
71+
beforeEach(() => {
72+
linearButton = element(by.id('toggle-linear'));
73+
linearButton.click();
74+
});
75+
76+
it('should not move to next step when stepper button is clicked', () => {
77+
let nextButton = element.all(by.buttonText('Next'));
78+
nextButton.get(0).click();
79+
80+
expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
81+
.toBe('1\nFill out your name');
82+
});
83+
});
84+
});

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,12 @@ import {
3535
MdRadioModule,
3636
MdSidenavModule,
3737
MdSlideToggleModule,
38+
MdStepperModule,
3839
MdTabsModule,
3940
} from '@angular/material';
4041
import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
4142
import {ExampleModule} from '@angular/material-examples';
43+
import {ReactiveFormsModule} from '@angular/forms';
4244

4345
/**
4446
* NgModule that contains all Material modules that are required to serve the e2e-app.
@@ -59,6 +61,7 @@ import {ExampleModule} from '@angular/material-examples';
5961
MdRadioModule,
6062
MdSidenavModule,
6163
MdSlideToggleModule,
64+
MdStepperModule,
6265
MdTabsModule,
6366
MdNativeDateModule,
6467
]
@@ -72,6 +75,7 @@ export class E2eMaterialModule {}
7275
E2eMaterialModule,
7376
NoopAnimationsModule,
7477
ExampleModule,
78+
ReactiveFormsModule
7579
],
7680
declarations: [
7781
BasicTabs,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<a md-list-item [routerLink]="['radio']">Radios</a>
1919
<a md-list-item [routerLink]="['sidenav']">Sidenav</a>
2020
<a md-list-item [routerLink]="['slide-toggle']">Slide Toggle</a>
21+
<a md-list-item [routerLink]="['stepper']">Stepper</a>
2122
<a md-list-item [routerLink]="['tabs']">Tabs</a>
2223
<a md-list-item [routerLink]="['cards']">Cards</a>
2324
<a md-list-item [routerLink]="['toolbar']">Toolbar</a>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ import {
2020
ListOverviewExample,
2121
ToolbarMultirowExample,
2222
ButtonToggleOverviewExample,
23-
ExpansionOverviewExample
23+
ExpansionOverviewExample,
24+
StepperOverviewExample
2425
} from '@angular/material-examples';
2526

2627
export const E2E_APP_ROUTES: Routes = [
@@ -42,6 +43,7 @@ export const E2E_APP_ROUTES: Routes = [
4243
{path: 'radio', component: SimpleRadioButtons},
4344
{path: 'sidenav', component: SidenavE2E},
4445
{path: 'slide-toggle', component: SlideToggleE2E},
46+
{path: 'stepper', component: StepperOverviewExample},
4547
{path: 'tabs', component: BasicTabs},
4648
{path: 'cards', component: CardFancyExample},
4749
{path: 'toolbar', component: ToolbarMultirowExample},

src/lib/stepper/stepper.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
Angular Material's stepper provides a wizard-like workflow by dividing content into logical steps.
22

3+
<!-- example(stepper-overview) -->
4+
35
Material stepper builds on the foundation of the CDK stepper that is responsible for the logic
46
that drives a stepped workflow. Material stepper extends the CDK stepper and has Material Design
57
styling.

src/material-examples/example-module.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ import {SliderOverviewExample} from './slider-overview/slider-overview-example';
7474
import {PizzaPartyComponent,SnackBarComponentExample} from './snack-bar-component/snack-bar-component-example';
7575
import {SnackBarOverviewExample} from './snack-bar-overview/snack-bar-overview-example';
7676
import {SortOverviewExample} from './sort-overview/sort-overview-example';
77+
import {StepperOverviewExample} from './stepper-overview/stepper-overview-example';
7778
import {TableBasicExample} from './table-basic/table-basic-example';
7879
import {TableFilteringExample} from './table-filtering/table-filtering-example';
7980
import {TableHttpExample} from './table-http/table-http-example';
@@ -454,6 +455,12 @@ export const EXAMPLE_COMPONENTS = {
454455
additionalFiles: null,
455456
selectorName: null
456457
},
458+
'stepper-overview': {
459+
title: 'Stepper overview',
460+
component: StepperOverviewExample,
461+
additionalFiles: null,
462+
selectorName: null
463+
},
457464
'table-basic': {
458465
title: 'Basic table',
459466
component: TableBasicExample,
@@ -590,6 +597,7 @@ export const EXAMPLE_LIST = [
590597
PizzaPartyComponent,SnackBarComponentExample,
591598
SnackBarOverviewExample,
592599
SortOverviewExample,
600+
StepperOverviewExample,
593601
TableBasicExample,
594602
TableFilteringExample,
595603
TableHttpExample,

src/material-examples/material-module.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
MdListModule, MdMenuModule, MdProgressBarModule, MdProgressSpinnerModule,
99
MdRadioModule, MdSelectModule, MdSidenavModule, MdSliderModule, MdSortModule,
1010
MdSlideToggleModule, MdSnackBarModule, MdTableModule, MdTabsModule, MdToolbarModule,
11-
MdTooltipModule, MdFormFieldModule, MdExpansionModule
11+
MdTooltipModule, MdFormFieldModule, MdExpansionModule, MdStepperModule
1212
} from '@angular/material';
1313

1414
@NgModule({
@@ -37,6 +37,7 @@ import {
3737
MdSliderModule,
3838
MdSidenavModule,
3939
MdSnackBarModule,
40+
MdStepperModule,
4041
MdTabsModule,
4142
MdToolbarModule,
4243
MdTooltipModule,

src/material-examples/public_api.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ export * from './card-fancy/card-fancy-example';
77
export * from './toolbar-multirow/toolbar-multirow-example';
88
export * from './button-toggle-overview/button-toggle-overview-example';
99
export * from './expansion-overview/expansion-overview-example';
10+
export * from './stepper-overview/stepper-overview-example';
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/** No CSS for this example */
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<button (click)="isLinear=!isLinear" id="toggle-linear">Enable linear</button>
2+
<md-horizontal-stepper [linear]="isLinear">
3+
<md-step [stepControl]="firstFormGroup">
4+
<form [formGroup]="firstFormGroup">
5+
<ng-template mdStepLabel>Fill out your name</ng-template>
6+
<md-form-field>
7+
<input mdInput placeholder="Last name, First name" formControlName="firstCtrl" required>
8+
</md-form-field>
9+
<div>
10+
<button md-button mdStepperNext>Next</button>
11+
</div>
12+
</form>
13+
</md-step>
14+
<md-step [stepControl]="secondFormGroup">
15+
<form [formGroup]="secondFormGroup">
16+
<ng-template mdStepLabel>Fill out your address</ng-template>
17+
<md-form-field>
18+
<input mdInput placeholder="Address" formControlName="secondCtrl" required>
19+
</md-form-field>
20+
<div>
21+
<button md-button mdStepperPrevious>Back</button>
22+
<button md-button mdStepperNext>Next</button>
23+
</div>
24+
</form>
25+
</md-step>
26+
<md-step>
27+
<ng-template mdStepLabel>Done</ng-template>
28+
You are now done.
29+
<div>
30+
<button md-button mdStepperPrevious>Back</button>
31+
</div>
32+
</md-step>
33+
</md-horizontal-stepper>

0 commit comments

Comments
 (0)