docs(material/progress-bar): add harness example for progress bar (#21417)

(cherry picked from commit 14a9fbe)

Author: annieyw

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

@@ -11,11 +11,17 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/progress-bar",
     deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/card",
         "//src/material/progress-bar",
+        "//src/material/progress-bar/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-bar/index.ts

@@ -16,11 +16,13 @@ import {
   ProgressBarIndeterminateExample
 } from './progress-bar-indeterminate/progress-bar-indeterminate-example';
 import {ProgressBarQueryExample} from './progress-bar-query/progress-bar-query-example';
+import {ProgressBarHarnessExample} from './progress-bar-harness/progress-bar-harness-example';
 
 export {
   ProgressBarBufferExample,
   ProgressBarConfigurableExample,
   ProgressBarDeterminateExample,
+  ProgressBarHarnessExample,
   ProgressBarIndeterminateExample,
   ProgressBarQueryExample,
 };
@@ -29,6 +31,7 @@ const EXAMPLES = [
   ProgressBarBufferExample,
   ProgressBarConfigurableExample,
   ProgressBarDeterminateExample,
+  ProgressBarHarnessExample,
   ProgressBarIndeterminateExample,
   ProgressBarQueryExample,
 ];

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

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

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

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

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

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