docs(material/progress-spinner): add harness example for progress spinner (#21449)

(cherry picked from commit b5a47d7)

Author: annieyw

src/components-examples/material/progress-spinner/BUILD.bazel

@@ -11,11 +11,17 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/progress-spinner",
     deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/card",
         "//src/material/progress-spinner",
+        "//src/material/progress-spinner/testing",
         "//src/material/radio",
         "//src/material/slider",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

src/components-examples/material/progress-spinner/index.ts

@@ -11,14 +11,19 @@ import {
 import {
   ProgressSpinnerOverviewExample
 } from './progress-spinner-overview/progress-spinner-overview-example';
+import {
+  ProgressSpinnerHarnessExample
+} from './progress-spinner-harness/progress-spinner-harness-example';
 
 export {
   ProgressSpinnerConfigurableExample,
+  ProgressSpinnerHarnessExample,
   ProgressSpinnerOverviewExample,
 };
 
 const EXAMPLES = [
   ProgressSpinnerConfigurableExample,
+  ProgressSpinnerHarnessExample,
   ProgressSpinnerOverviewExample,
 ];
 

src/components-examples/material/progress-spinner/progress-spinner-harness/progress-spinner-harness-example.html

@@ -0,0 +1,2 @@
+<mat-progress-spinner mode="determinate" [value]="value"></mat-progress-spinner>
+<mat-spinner></mat-spinner>

src/components-examples/material/progress-spinner/progress-spinner-harness/progress-spinner-harness-example.spec.ts

@@ -0,0 +1,53 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatProgressSpinnerHarness} from '@angular/material/progress-spinner/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {ProgressSpinnerHarnessExample} from './progress-spinner-harness-example';
+
+describe('ProgressSpinnerHarnessExample', () => {
+  let fixture: ComponentFixture<ProgressSpinnerHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatProgressSpinnerModule],
+        declarations: [ProgressSpinnerHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(ProgressSpinnerHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should load all progress spinner harnesses', async () => {
+    const progressSpinners = await loader.getAllHarnesses(MatProgressSpinnerHarness);
+    expect(progressSpinners.length).toBe(2);
+  });
+
+  it('should get the value', async () => {
+    fixture.componentInstance.value = 50;
+    const [
+      determinate,
+      impliedIndeterminate
+    ] = await loader.getAllHarnesses(MatProgressSpinnerHarness);
+    expect(await determinate.getValue()).toBe(50);
+    expect(await impliedIndeterminate.getValue()).toBe(null);
+  });
+
+  it('should get the mode', async () => {
+    const [
+      determinate,
+      impliedIndeterminate
+    ] = await loader.getAllHarnesses(MatProgressSpinnerHarness);
+    expect(await determinate.getMode()).toBe('determinate');
+    expect(await impliedIndeterminate.getMode()).toBe('indeterminate');
+  });
+});

src/components-examples/material/progress-spinner/progress-spinner-harness/progress-spinner-harness-example.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatProgressSpinnerHarness
+ */
+@Component({
+  selector: 'progress-spinner-harness-example',
+  templateUrl: 'progress-spinner-harness-example.html',
+})
+export class ProgressSpinnerHarnessExample {
+  value: number;
+}