docs(material/icon): add harness example for icon (#21406)

Author: annieyw

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

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

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

@@ -0,0 +1,3 @@
+<mat-icon fontSet="fontIcons" fontIcon="fontIcon"></mat-icon>
+<mat-icon svgIcon="svgIcons:svgIcon"></mat-icon>
+<mat-icon inline>ligature_icon</mat-icon>

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

@@ -0,0 +1,64 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {HarnessLoader, parallel} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {IconHarnessExample} from './icon-harness-example';
+import {MatIconModule, MatIconRegistry} from '@angular/material/icon';
+import {MatIconHarness} from '@angular/material/icon/testing';
+import {DomSanitizer} from '@angular/platform-browser';
+
+
+describe('IconHarnessExample', () => {
+  let fixture: ComponentFixture<IconHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatIconModule],
+        declarations: [IconHarnessExample]
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    const registry = TestBed.inject(MatIconRegistry);
+    const sanitizer = TestBed.inject(DomSanitizer);
+
+    // We use `bypassSecurityTrustHtml` exclusively for testing here.
+    registry.addSvgIconLiteralInNamespace('svgIcons', 'svgIcon',
+      sanitizer.bypassSecurityTrustHtml('<svg></svg>'));
+
+    fixture = TestBed.createComponent(IconHarnessExample);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should load all icon harnesses', async () => {
+    const icons = await loader.getAllHarnesses(MatIconHarness);
+    expect(icons.length).toBe(3);
+  });
+
+  it('should get the name of an icon', async () => {
+    const icons = await loader.getAllHarnesses(MatIconHarness);
+    const names = await parallel(() => icons.map(icon => icon.getName()));
+    expect(names).toEqual(['fontIcon', 'svgIcon', 'ligature_icon']);
+  });
+
+  it('should get the namespace of an icon', async () => {
+    const icons = await loader.getAllHarnesses(MatIconHarness);
+    const namespaces = await parallel(() => icons.map(icon => icon.getNamespace()));
+    expect(namespaces).toEqual(['fontIcons', 'svgIcons', null]);
+  });
+
+  it('should get whether an icon is inline', async () => {
+    const icons = await loader.getAllHarnesses(MatIconHarness);
+    const inlineStates = await parallel(() => icons.map(icon => icon.isInline()));
+    expect(inlineStates).toEqual([false, false, true]);
+  });
+});

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

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatIconHarness
+ */
+@Component({
+  selector: 'icon-harness-example',
+  templateUrl: 'icon-harness-example.html',
+})
+export class IconHarnessExample {
+}

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

@@ -2,13 +2,16 @@ import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 import {IconOverviewExample} from './icon-overview/icon-overview-example';
 import {IconSvgExample} from './icon-svg/icon-svg-example';
+import {IconHarnessExample} from './icon-harness/icon-harness-example';
 
 export {
+  IconHarnessExample,
   IconOverviewExample,
   IconSvgExample,
 };
 
 const EXAMPLES = [
+  IconHarnessExample,
   IconOverviewExample,
   IconSvgExample,
 ];