Skip to content

Commit 5ee38db

Browse files
committed
docs(material/icon): add harness example for icon
1 parent 71b7b15 commit 5ee38db

File tree

5 files changed

+83
-0
lines changed

5 files changed

+83
-0
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,13 @@ ng_module(
1111
]),
1212
module_name = "@angular/components-examples/material/icon",
1313
deps = [
14+
"//src/cdk/testing",
15+
"//src/cdk/testing/testbed",
1416
"//src/material/icon",
17+
"//src/material/icon/testing",
18+
"@npm//@angular/platform-browser",
19+
"@npm//@angular/platform-browser-dynamic",
20+
"@npm//@types/jasmine",
1521
],
1622
)
1723

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<mat-icon fontSet="fontIcons" fontIcon="fontIcon"></mat-icon>
2+
<mat-icon svgIcon="svgIcons:svgIcon"></mat-icon>
3+
<mat-icon inline>ligature_icon</mat-icon>
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
2+
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
3+
import {HarnessLoader, parallel} from '@angular/cdk/testing';
4+
import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
5+
from '@angular/platform-browser-dynamic/testing';
6+
import {IconHarnessExample} from './icon-harness-example';
7+
import {MatIconModule, MatIconRegistry} from '@angular/material/icon';
8+
import {MatIconHarness} from '@angular/material/icon/testing';
9+
import {DomSanitizer} from '@angular/platform-browser';
10+
11+
12+
describe('TableHarnessExample', () => {
13+
let fixture: ComponentFixture<IconHarnessExample>;
14+
let loader: HarnessLoader;
15+
16+
beforeAll(() => {
17+
TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
18+
});
19+
20+
beforeEach(
21+
waitForAsync(() => {
22+
TestBed.configureTestingModule({
23+
imports: [MatIconModule],
24+
declarations: [IconHarnessExample]
25+
}).compileComponents();
26+
})
27+
);
28+
29+
beforeEach(() => {
30+
const registry = TestBed.inject(MatIconRegistry);
31+
const sanitizer = TestBed.inject(DomSanitizer);
32+
33+
registry.addSvgIconLiteralInNamespace('svgIcons', 'svgIcon',
34+
sanitizer.bypassSecurityTrustHtml('<svg></svg>'));
35+
36+
fixture = TestBed.createComponent(IconHarnessExample);
37+
fixture.detectChanges();
38+
loader = TestbedHarnessEnvironment.loader(fixture);
39+
});
40+
41+
it('should load all icon harnesses', async () => {
42+
const icons = await loader.getAllHarnesses(MatIconHarness);
43+
expect(icons.length).toBe(3);
44+
});
45+
46+
it('should get the name of an icon', async () => {
47+
const icons = await loader.getAllHarnesses(MatIconHarness);
48+
const names = await parallel(() => icons.map(icon => icon.getName()));
49+
expect(names).toEqual(['fontIcon', 'svgIcon', 'ligature_icon']);
50+
});
51+
52+
it('should get the namespace of an icon', async () => {
53+
const icons = await loader.getAllHarnesses(MatIconHarness);
54+
const namespaces = await parallel(() => icons.map(icon => icon.getNamespace()));
55+
expect(namespaces).toEqual(['fontIcons', 'svgIcons', null]);
56+
});
57+
58+
it('should get whether an icon is inline', async () => {
59+
const icons = await loader.getAllHarnesses(MatIconHarness);
60+
const inlineStates = await parallel(() => icons.map(icon => icon.isInline()));
61+
expect(inlineStates).toEqual([false, false, true]);
62+
});
63+
});
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {Component} from '@angular/core';
2+
3+
@Component({
4+
selector: 'icon-harness-example',
5+
templateUrl: 'icon-harness-example.html',
6+
})
7+
export class IconHarnessExample {
8+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@ import {NgModule} from '@angular/core';
22
import {MatIconModule} from '@angular/material/icon';
33
import {IconOverviewExample} from './icon-overview/icon-overview-example';
44
import {IconSvgExample} from './icon-svg/icon-svg-example';
5+
import {IconHarnessExample} from './icon-harness/icon-harness-example';
56

67
export {
8+
IconHarnessExample,
79
IconOverviewExample,
810
IconSvgExample,
911
};
1012

1113
const EXAMPLES = [
14+
IconHarnessExample,
1215
IconOverviewExample,
1316
IconSvgExample,
1417
];

0 commit comments

Comments
 (0)