docs(material/toolbar): add harness example for toolbar (#21084)

Author: annieyw

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

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

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

@@ -5,15 +5,18 @@ import {MatToolbarModule} from '@angular/material/toolbar';
 import {ToolbarBasicExample} from './toolbar-basic/toolbar-basic-example';
 import {ToolbarMultirowExample} from './toolbar-multirow/toolbar-multirow-example';
 import {ToolbarOverviewExample} from './toolbar-overview/toolbar-overview-example';
+import {ToolbarHarnessExample} from './toolbar-harness/toolbar-harness-example';
 
 export {
   ToolbarBasicExample,
+  ToolbarHarnessExample,
   ToolbarMultirowExample,
   ToolbarOverviewExample,
 };
 
 const EXAMPLES = [
   ToolbarBasicExample,
+  ToolbarHarnessExample,
   ToolbarMultirowExample,
   ToolbarOverviewExample,
 ];

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

@@ -0,0 +1,12 @@
+<mat-toolbar><span>My App</span></mat-toolbar>
+<mat-toolbar>
+  <mat-toolbar-row><span>Row 1</span></mat-toolbar-row>
+  <mat-toolbar-row><span>Row 2</span>
+    <button mat-button>
+      Button 1
+    </button>
+    <button mat-button>
+      Button 2
+    </button>
+  </mat-toolbar-row>
+</mat-toolbar>

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

@@ -0,0 +1,60 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatToolbarHarness} from '@angular/material/toolbar/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {ToolbarHarnessExample} from './toolbar-harness-example';
+import {MatIconModule} from '@angular/material/icon';
+
+describe('ToolbarHarnessExample', () => {
+  let fixture: ComponentFixture<ToolbarHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatToolbarModule, MatIconModule],
+        declarations: [ToolbarHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(ToolbarHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should find all toolbars', async () => {
+    const toolbars = await loader.getAllHarnesses(MatToolbarHarness);
+
+    expect(toolbars.length).toBe(2);
+  });
+
+  it('should find toolbar with text', async () => {
+    const toolbars = await loader.getAllHarnesses(MatToolbarHarness.with({text: 'My App'}));
+
+    expect(toolbars.length).toBe(1);
+    expect(await toolbars[0].hasMultipleRows()).toBeFalse();
+  });
+
+  it('should find toolbar with regex', async () => {
+    const toolbars = await loader.getAllHarnesses(MatToolbarHarness.with({text: /Row/}));
+
+    expect(toolbars.length).toBe(1);
+    expect(await toolbars[0].hasMultipleRows()).toBeTrue();
+  });
+
+  it('should get toolbar text', async () => {
+    const toolbars = await loader.getAllHarnesses(MatToolbarHarness);
+
+    expect(await toolbars[0].getRowsAsText()).toEqual(['My App']);
+    expect(await toolbars[1].getRowsAsText()).toEqual([
+      'Row 1',
+      'Row 2 Button 1  Button 2'
+    ]);
+  });
+});

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

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatToolbarHarness
+ */
+@Component({
+  selector: 'toolbar-harness-example',
+  templateUrl: 'toolbar-harness-example.html',
+})
+export class ToolbarHarnessExample {}