docs(material/badge): add badge harness example (#20832)

(cherry picked from commit 3d15ecb)

Author: annieyw

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

@@ -11,9 +11,15 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/badge",
     deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/badge",
+        "//src/material/badge/testing",
         "//src/material/button",
         "//src/material/icon",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

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

@@ -0,0 +1,10 @@
+<button mat-button id="simple" [matBadge]="simpleContent">Simple</button>
+<button mat-button
+    id="overlapping"
+    matBadge="O"
+    [matBadgeOverlap]="overlap">Overlapping</button>
+<button
+    mat-button
+    id="disabled"
+    matBadge="D"
+    [matBadgeDisabled]="disabled">Disabled</button>

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

@@ -0,0 +1,58 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatBadgeHarness} from '@angular/material/badge/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatBadgeModule} from '@angular/material/badge';
+import {BadgeHarnessExample} from './badge-harness-example';
+
+describe('BadgeHarnessExample', () => {
+  let fixture: ComponentFixture<BadgeHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatBadgeModule],
+        declarations: [BadgeHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(BadgeHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should load all badge harnesses', async () => {
+    const badges = await loader.getAllHarnesses(MatBadgeHarness);
+    expect(badges.length).toBe(3);
+  });
+
+  it('should be able to get the text of a badge', async () => {
+    const badge = await loader.getHarness(MatBadgeHarness.with({selector: '#simple'}));
+
+    expect(await badge.getText()).toBe('S');
+    fixture.componentInstance.simpleContent = 'Changed';
+    expect(await badge.getText()).toBe('Changed');
+  });
+
+  it('should get whether a badge is overlapping', async () => {
+    const badge = await loader.getHarness(MatBadgeHarness.with({selector: '#overlapping'}));
+
+    expect(await badge.isOverlapping()).toBe(true);
+    fixture.componentInstance.overlap = false;
+    expect(await badge.isOverlapping()).toBe(false);
+  });
+
+  it('should get whether a badge is disabled', async () => {
+    const badge = await loader.getHarness(MatBadgeHarness.with({selector: '#disabled'}));
+
+    expect(await badge.isDisabled()).toBe(true);
+    fixture.componentInstance.disabled = false;
+    expect(await badge.isDisabled()).toBe(false);
+  });
+});

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

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatBadgeHarness
+ */
+@Component({
+  selector: 'badge-harness-example',
+  templateUrl: 'badge-harness-example.html',
+})
+export class BadgeHarnessExample {
+  simpleContent = 'S';
+  overlap = true;
+  disabled = true;
+}

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

@@ -3,11 +3,13 @@ import {MatBadgeModule} from '@angular/material/badge';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {BadgeOverviewExample} from './badge-overview/badge-overview-example';
+import {BadgeHarnessExample} from './badge-harness/badge-harness-example';
 
-export {BadgeOverviewExample};
+export {BadgeOverviewExample, BadgeHarnessExample};
 
 const EXAMPLES = [
   BadgeOverviewExample,
+  BadgeHarnessExample
 ];
 
 @NgModule({