Skip to content

Commit 21533e8

Browse files
essjay05essjay05
committed
test(material/stepper): update stepper-harness tests
Updates stepper-harness tests to make checks depending on whether the stepper is horizontal or vertical and checking the attributes accordingly.
1 parent acf3609 commit 21533e8

File tree

4 files changed

+128
-16
lines changed

4 files changed

+128
-16
lines changed

‎src/material/stepper/stepper.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
[attr.aria-controls]="_getStepContentId($index)"
7777
[attr.aria-current]="selectedIndex == $index"
7878
[attr.aria-label]="step.ariaLabel || null"
79-
[attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : _getStepLabelId($index)"
79+
[attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"
8080
[attr.aria-disabled]="_stepIsNavigable($index, step) ? null : true"
8181
[index]="$index"
8282
[state]="_getIndicatorType($index, step.state)"

‎src/material/stepper/testing/step-harness-filters.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,10 @@ export enum StepperOrientation {
1717
export interface StepHarnessFilters extends BaseHarnessFilters {
1818
/** Only find instances whose label matches the given value. */
1919
label?: string | RegExp;
20-
/** Only find steps with the given selected state. */
20+
/** Only find steps with the given selected (if Horizontal stepper) state. */
2121
selected?: boolean;
22+
/** Only find steps with the given expanded (if Vertical stepper) state. */
23+
expanded?: boolean;
2224
/** Only find completed steps. */
2325
completed?: boolean;
2426
/** Only find steps that have errors. */

‎src/material/stepper/testing/step-harness.ts

+12-1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@ export class MatStepHarness extends ContentContainerComponentHarness<string> {
3434
options.selected,
3535
async (harness, selected) => (await harness.isSelected()) === selected,
3636
)
37+
.addOption(
38+
'expanded',
39+
options.expanded,
40+
async (harness, expanded) => (await harness.isExpanded()) === expanded,
41+
)
3742
.addOption(
3843
'completed',
3944
options.completed,
@@ -61,12 +66,18 @@ export class MatStepHarness extends ContentContainerComponentHarness<string> {
6166
return (await this.host()).getAttribute('aria-labelledby');
6267
}
6368

64-
/** Whether the step is selected. */
69+
/** Whether the step is selected (Horizontal Stepper). */
6570
async isSelected(): Promise<boolean> {
6671
const host = await this.host();
6772
return (await host.getAttribute('aria-selected')) === 'true';
6873
}
6974

75+
/** Whether the step is expanded (Vertical Stepper). */
76+
async isExpanded(): Promise<boolean> {
77+
const host = await this.host();
78+
return (await host.getAttribute('aria-expanded')) === 'true';
79+
}
80+
7081
/** Whether the step has been filled out. */
7182
async isCompleted(): Promise<boolean> {
7283
const state = await this._getIconState();

‎src/material/stepper/testing/stepper-harness.spec.ts

+112-13
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,11 @@ describe('MatStepperHarness', () => {
6767
expect(await parallel(() => steps.map(step => step.getLabel()))).toEqual(['Two', 'Four']);
6868
});
6969

70-
it('should be able to select a particular step that matches a filter', async () => {
70+
it('should be able to select a particular step that matches a filter on a vertical stepper', async () => {
7171
const stepper = await loader.getHarness(MatStepperHarness.with({selector: '#one-stepper'}));
7272
const steps = await stepper.getSteps();
7373

74-
expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
74+
expect(await parallel(() => steps.map(step => step.isExpanded()))).toEqual([
7575
true,
7676
false,
7777
false,
@@ -80,14 +80,33 @@ describe('MatStepperHarness', () => {
8080

8181
await stepper.selectStep({label: 'Three'});
8282

83-
expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
83+
expect(await parallel(() => steps.map(step => step.isExpanded()))).toEqual([
8484
false,
8585
false,
8686
true,
8787
false,
8888
]);
8989
});
9090

91+
it('should be able to select a particular step that matches a filter on a horizontal stepper', async () => {
92+
const stepper = await loader.getHarness(MatStepperHarness.with({selector: '#two-stepper'}));
93+
const steps = await stepper.getSteps();
94+
95+
expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
96+
true,
97+
false,
98+
false,
99+
]);
100+
101+
await stepper.selectStep({label: 'Three'});
102+
103+
expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
104+
false,
105+
false,
106+
true,
107+
]);
108+
});
109+
91110
it('should be able to get the text-based label of a step', async () => {
92111
const stepper = await loader.getHarness(MatStepperHarness.with({selector: '#one-stepper'}));
93112
const steps = await stepper.getSteps();
@@ -132,39 +151,69 @@ describe('MatStepperHarness', () => {
132151
]);
133152
});
134153

135-
it('should get the selected state of a step', async () => {
154+
it('should get the expanded state of a step in a vertical stepper', async () => {
136155
const stepper = await loader.getHarness(MatStepperHarness.with({selector: '#one-stepper'}));
137156
const steps = await stepper.getSteps();
138157

139-
expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
158+
expect(await parallel(() => steps.map(step => step.isExpanded()))).toEqual([
140159
true,
141160
false,
142161
false,
143162
false,
144163
]);
145164
});
146165

147-
it('should be able to select a step', async () => {
148-
const stepper = await loader.getHarness(MatStepperHarness.with({selector: '#one-stepper'}));
166+
it('should get the selected state of a step in a horizontal stepper', async () => {
167+
const stepper = await loader.getHarness(MatStepperHarness.with({selector: '#two-stepper'}));
149168
const steps = await stepper.getSteps();
150169

151170
expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
152171
true,
153172
false,
154173
false,
174+
]);
175+
});
176+
177+
it('should be able to select a step in a vertical stepper', async () => {
178+
const stepper = await loader.getHarness(MatStepperHarness.with({selector: '#one-stepper'}));
179+
const steps = await stepper.getSteps();
180+
181+
expect(await parallel(() => steps.map(step => step.isExpanded()))).toEqual([
182+
true,
183+
false,
184+
false,
155185
false,
156186
]);
157187

158188
await steps[2].select();
159189

160-
expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
190+
expect(await parallel(() => steps.map(step => step.isExpanded()))).toEqual([
161191
false,
162192
false,
163193
true,
164194
false,
165195
]);
166196
});
167197

198+
it('should be able to select a step in a horizontal stepper', async () => {
199+
const stepper = await loader.getHarness(MatStepperHarness.with({selector: '#two-stepper'}));
200+
const steps = await stepper.getSteps();
201+
202+
expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
203+
true,
204+
false,
205+
false,
206+
]);
207+
208+
await steps[2].select();
209+
210+
expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
211+
false,
212+
false,
213+
true,
214+
]);
215+
});
216+
168217
it('should get whether a step is optional', async () => {
169218
const stepper = await loader.getHarness(MatStepperHarness.with({selector: '#two-stepper'}));
170219
const steps = await stepper.getSteps();
@@ -183,15 +232,15 @@ describe('MatStepperHarness', () => {
183232
expect(await previousButton.getText()).toBe('Previous');
184233
});
185234

186-
it('should go forward when pressing the next button', async () => {
235+
it('should go forward when pressing the next button in a vertical stepper', async () => {
187236
const stepper = await loader.getHarness(MatStepperHarness.with({selector: '#one-stepper'}));
188237
const steps = await stepper.getSteps();
189238
const secondStep = steps[1];
190239
const nextButton = await secondStep.getHarness(MatStepperNextHarness);
191240

192241
await secondStep.select();
193242

194-
expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
243+
expect(await parallel(() => steps.map(step => step.isExpanded()))).toEqual([
195244
false,
196245
true,
197246
false,
@@ -200,23 +249,46 @@ describe('MatStepperHarness', () => {
200249

201250
await nextButton.click();
202251

203-
expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
252+
expect(await parallel(() => steps.map(step => step.isExpanded()))).toEqual([
204253
false,
205254
false,
206255
true,
207256
false,
208257
]);
209258
});
210259

211-
it('should go backward when pressing the previous button', async () => {
260+
it('should go forward when pressing the next button in a horizontal stepper', async () => {
261+
const stepper = await loader.getHarness(MatStepperHarness.with({selector: '#two-stepper'}));
262+
const steps = await stepper.getSteps();
263+
const secondStep = steps[1];
264+
const nextButton = await secondStep.getHarness(MatStepperNextHarness);
265+
266+
await secondStep.select();
267+
268+
expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
269+
false,
270+
true,
271+
false,
272+
]);
273+
274+
await nextButton.click();
275+
276+
expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
277+
false,
278+
false,
279+
true,
280+
]);
281+
});
282+
283+
it('should go backward when pressing the previous button of a vertical stepper', async () => {
212284
const stepper = await loader.getHarness(MatStepperHarness.with({selector: '#one-stepper'}));
213285
const steps = await stepper.getSteps();
214286
const secondStep = steps[1];
215287
const previousButton = await secondStep.getHarness(MatStepperPreviousHarness);
216288

217289
await secondStep.select();
218290

219-
expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
291+
expect(await parallel(() => steps.map(step => step.isExpanded()))).toEqual([
220292
false,
221293
true,
222294
false,
@@ -225,9 +297,32 @@ describe('MatStepperHarness', () => {
225297

226298
await previousButton.click();
227299

300+
expect(await parallel(() => steps.map(step => step.isExpanded()))).toEqual([
301+
true,
302+
false,
303+
false,
304+
false,
305+
]);
306+
});
307+
308+
it('should go backward when pressing the previous button of a horizontal stepper', async () => {
309+
const stepper = await loader.getHarness(MatStepperHarness.with({selector: '#two-stepper'}));
310+
const steps = await stepper.getSteps();
311+
const secondStep = steps[1];
312+
const previousButton = await secondStep.getHarness(MatStepperPreviousHarness);
313+
314+
await secondStep.select();
315+
228316
expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
317+
false,
229318
true,
230319
false,
320+
]);
321+
322+
await previousButton.click();
323+
324+
expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
325+
true,
231326
false,
232327
false,
233328
]);
@@ -279,12 +374,16 @@ describe('MatStepperHarness', () => {
279374
<mat-stepper id="two-stepper">
280375
<mat-step>
281376
<ng-template matStepLabel>One</ng-template>
377+
<button matStepperNext>Next</button>
282378
</mat-step>
283379
<mat-step optional>
284380
<ng-template matStepLabel>Two</ng-template>
381+
<button matStepperPrevious>Previous</button>
382+
<button matStepperNext>Next</button>
285383
</mat-step>
286384
<mat-step optional>
287385
<ng-template matStepLabel>Three</ng-template>
386+
<button matStepperPrevious>Previous</button>
288387
</mat-step>
289388
</mat-stepper>
290389

0 commit comments

Comments
 (0)