docs(material/stepper): add harness example for stepper (#21409)

(cherry picked from commit e93edbc)

Author: annieyw

src/components-examples/material/stepper/BUILD.bazel

@@ -12,11 +12,17 @@ ng_module(
     module_name = "@angular/components-examples/material/stepper",
     deps = [
         "//src/cdk/stepper",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/button",
         "//src/material/icon",
         "//src/material/input",
         "//src/material/stepper",
+        "//src/material/stepper/testing",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

src/components-examples/material/stepper/index.ts

@@ -13,10 +13,12 @@ import {StepperOptionalExample} from './stepper-optional/stepper-optional-exampl
 import {StepperOverviewExample} from './stepper-overview/stepper-overview-example';
 import {StepperStatesExample} from './stepper-states/stepper-states-example';
 import {StepperVerticalExample} from './stepper-vertical/stepper-vertical-example';
+import {StepperHarnessExample} from './stepper-harness/stepper-harness-example';
 
 export {
   StepperEditableExample,
   StepperErrorsExample,
+  StepperHarnessExample,
   StepperLabelPositionBottomExample,
   StepperOptionalExample,
   StepperOverviewExample,
@@ -27,6 +29,7 @@ export {
 const EXAMPLES = [
   StepperEditableExample,
   StepperErrorsExample,
+  StepperHarnessExample,
   StepperLabelPositionBottomExample,
   StepperOptionalExample,
   StepperOverviewExample,

src/components-examples/material/stepper/stepper-harness/stepper-harness-example.html

@@ -0,0 +1,15 @@
+<mat-horizontal-stepper>
+  <mat-step>
+    <ng-template matStepLabel>One</ng-template>
+    <button matStepperNext>Next</button>
+  </mat-step>
+  <mat-step optional>
+    <ng-template matStepLabel>Two</ng-template>
+    <button matStepperPrevious>Previous</button>
+    <button matStepperNext>Next</button>
+  </mat-step>
+  <mat-step optional>
+    <ng-template matStepLabel>Three</ng-template>
+    <button matStepperPrevious>Previous</button>
+  </mat-step>
+</mat-horizontal-stepper>

src/components-examples/material/stepper/stepper-harness/stepper-harness-example.spec.ts

@@ -0,0 +1,73 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatStepperHarness, MatStepperNextHarness} from '@angular/material/stepper/testing';
+import {HarnessLoader, parallel} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatStepperModule} from '@angular/material/stepper';
+import {StepperHarnessExample} from './stepper-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {ReactiveFormsModule} from '@angular/forms';
+
+describe('StepperHarnessExample', () => {
+  let fixture: ComponentFixture<StepperHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatStepperModule, NoopAnimationsModule, ReactiveFormsModule],
+        declarations: [StepperHarnessExample],
+      }).compileComponents();
+      fixture = TestBed.createComponent(StepperHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should load all stepper harnesses', async () => {
+    const steppers = await loader.getAllHarnesses(MatStepperHarness);
+    expect(steppers.length).toBe(1);
+  });
+
+  it('should get the steps of a stepper', async () => {
+    const stepper = await loader.getHarness(MatStepperHarness);
+    const steps = await stepper.getSteps();
+    expect(steps.length).toEqual(3);
+  });
+
+  it('should be able to get the template-based label of a step', async () => {
+    const stepper = await loader.getHarness(MatStepperHarness);
+    const steps = await stepper.getSteps();
+    expect(await parallel(() => {
+      return steps.map(step => step.getLabel());
+    })).toEqual(['One', 'Two', 'Three']);
+  });
+
+  it('should go forward when pressing the next button', async () => {
+    const stepper = await loader.getHarness(MatStepperHarness);
+    const steps = await stepper.getSteps();
+    const secondStep = steps[1];
+    const nextButton = await secondStep.getHarness(MatStepperNextHarness);
+
+    await secondStep.select();
+
+    expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
+      false,
+      true,
+      false
+    ]);
+
+    await nextButton.click();
+
+    expect(await parallel(() => steps.map(step => step.isSelected()))).toEqual([
+      false,
+      false,
+      true
+    ]);
+  });
+});

src/components-examples/material/stepper/stepper-harness/stepper-harness-example.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatStepperHarness
+ */
+@Component({
+  selector: 'stepper-harness-example',
+  templateUrl: 'stepper-harness-example.html',
+})
+export class StepperHarnessExample {}