feat(toolbar/testing): Add a test harness for MatToolbar (#19976)

* toolbar harness base

* add get rows as text

* make getRows and getText private

* add public api guard

* refactor getRowsAsText

* use MatToolbarSection instead of literal

Author: annieyw

src/material/config.bzl

@@ -58,6 +58,7 @@ entryPoints = [
     "tabs",
     "tabs/testing",
     "toolbar",
+    "toolbar/testing",
     "tooltip",
     "tooltip/testing",
     "tree",

src/material/toolbar/testing/BUILD.bazel

@@ -0,0 +1,73 @@
+load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
+load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_test_library", "ng_web_test_suite", "ts_library")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_library(
+    name = "testing",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    module_name = "@angular/material/toolbar/testing",
+    deps = [
+        "//src/cdk/testing",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)
+
+ng_test_library(
+    name = "harness_tests_lib",
+    srcs = ["shared.spec.ts"],
+    deps = [
+        ":testing",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/toolbar",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = [
+            "**/*.e2e.spec.ts",
+            "shared.spec.ts",
+        ],
+    ),
+    deps = [
+        ":harness_tests_lib",
+        ":testing",
+        "//src/material/toolbar",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_tests_lib"],
+)
+
+ng_e2e_test_library(
+    name = "e2e_test_sources",
+    srcs = glob(["**/*.e2e.spec.ts"]),
+    deps = [
+        ":testing",
+        "//src/cdk/testing",
+        "//src/cdk/testing/private/e2e",
+        "//src/cdk/testing/protractor",
+    ],
+)
+
+e2e_test_suite(
+    name = "e2e_tests",
+    deps = [
+        ":e2e_test_sources",
+        "//src/cdk/testing/private/e2e",
+    ],
+)

src/material/toolbar/testing/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './public-api';

src/material/toolbar/testing/public-api.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './toolbar-harness';
+export * from './toolbar-harness-filters';

src/material/toolbar/testing/shared.spec.ts

@@ -0,0 +1,92 @@
+import {Component} from '@angular/core';
+import {ComponentHarness, HarnessLoader} from '@angular/cdk/testing';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {
+  MatToolbarHarness,
+  MatToolbarSection
+} from '@angular/material/toolbar/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+
+/** Shared tests to run on both the original and MDC-based toolbars. */
+export function runHarnessTests(
+  toolbarModule: typeof MatToolbarModule, toolbarHarness: typeof MatToolbarHarness) {
+  let fixture: ComponentFixture<ToolbarHarnessTest>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [toolbarModule],
+      declarations: [ToolbarHarnessTest],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ToolbarHarnessTest);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should find all toolbars', async () => {
+    const toolbars = await loader.getAllHarnesses(toolbarHarness);
+
+    expect(toolbars.length).toBe(2);
+  });
+
+  it('should find toolbar with text', async () => {
+    const toolbars = await loader.getAllHarnesses(toolbarHarness.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(toolbarHarness.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(toolbarHarness);
+
+    expect(await toolbars[0].getRowsAsText()).toEqual(['My App']);
+    expect(await toolbars[1].getRowsAsText()).toEqual([
+      'Row 1',
+      'Row 2 Button 1  Button 2'
+    ]);
+  });
+
+  it('should get harness loaders for toolbar row', async () => {
+    const toolbar = await loader.getHarness(toolbarHarness.with({text: /Button/}));
+    const rowLoaders = await toolbar.getAllChildLoaders(MatToolbarSection.ROW);
+    const row1 = rowLoaders[0] as HarnessLoader;
+    const row1Subcomponents = await row1.getAllHarnesses(DummyHarness);
+    const row2 = rowLoaders[1] as HarnessLoader;
+    const row2Subcomponents = await row2.getAllHarnesses(DummyHarness);
+
+    expect(row1Subcomponents.length).toBe(1);
+    expect(row2Subcomponents.length).toBe(3);
+  });
+}
+
+@Component({
+  template: `
+    <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>
+  `
+})
+class ToolbarHarnessTest {
+}
+
+export class DummyHarness extends ComponentHarness {
+  static hostSelector = 'span, button';
+}

src/material/toolbar/testing/toolbar-harness-filters.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {BaseHarnessFilters} from '@angular/cdk/testing';
+
+/** A set of criteria that can be used to filter a list of `MatToolbarHarness` instances. */
+export interface ToolbarHarnessFilters extends BaseHarnessFilters {
+  /** Only find instances whose text matches the given value. */
+  text?: string | RegExp;
+}

src/material/toolbar/testing/toolbar-harness.e2e.spec.ts

@@ -0,0 +1,27 @@
+import {HarnessLoader} from '@angular/cdk/testing';
+import {browser} from 'protractor';
+import {ProtractorHarnessEnvironment} from '@angular/cdk/testing/protractor';
+import {MatToolbarHarness} from '@angular/material/toolbar/testing';
+
+describe('toolbar harness', () => {
+  let loader: HarnessLoader;
+
+  beforeEach(async () => await browser.get('/toolbar'));
+
+  beforeEach(() => {
+    loader = ProtractorHarnessEnvironment.loader();
+  });
+
+  it('should get toolbar text', async () => {
+    const toolbar = await loader.getHarness(MatToolbarHarness);
+
+    expect(await toolbar.getRowsAsText())
+      .toEqual(['Custom Toolbar', 'Second Line\nverified_user', 'Third Line\nfavorite\ndelete']);
+  });
+
+  it('should have multiple rows', async () => {
+    const toolbar = await loader.getHarness(MatToolbarHarness);
+
+    expect(await toolbar.hasMultipleRows()).toBe(true);
+  });
+});

src/material/toolbar/testing/toolbar-harness.spec.ts

@@ -0,0 +1,7 @@
+import {runHarnessTests} from '@angular/material/toolbar/testing/shared.spec';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatToolbarHarness} from '@angular/material/toolbar/testing';
+
+describe('Non-MDC-based MatToolbarHarness', () => {
+  runHarnessTests(MatToolbarModule, MatToolbarHarness);
+});

src/material/toolbar/testing/toolbar-harness.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+
+import {ContentContainerComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {ToolbarHarnessFilters} from './toolbar-harness-filters';
+
+/** Selectors for different sections of the mat-toolbar that contain user content. */
+export const enum MatToolbarSection {
+  ROW = '.mat-toolbar-row'
+}
+
+/** Harness for interacting with a standard mat-toolbar in tests. */
+export class MatToolbarHarness extends ContentContainerComponentHarness<MatToolbarSection> {
+  static hostSelector = 'mat-toolbar';
+
+  private _getRows = this.locatorForAll(MatToolbarSection.ROW);
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatToolbarHarness` that meets
+   * certain criteria.
+   * @param options Options for filtering which card instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: ToolbarHarnessFilters = {}): HarnessPredicate<MatToolbarHarness> {
+    return new HarnessPredicate(MatToolbarHarness, options)
+      .addOption('text', options.text,
+        (harness, text) => HarnessPredicate.stringMatches(harness._getText(), text));
+  }
+
+  /** Whether the toolbar has multiple rows. */
+  async hasMultipleRows(): Promise<boolean> {
+    return (await this.host()).hasClass('mat-toolbar-multiple-rows');
+  }
+
+  /** Gets all of the toolbar's content as text. */
+  private async _getText(): Promise<string> {
+    return (await this.host()).text();
+  }
+
+  /** Gets the text of each row in the toolbar. */
+  async getRowsAsText(): Promise<string[]> {
+    const rows = await this._getRows();
+    return Promise.all(rows.length ? rows.map(r => r.text()) : [this._getText()]);
+  }
+}

tools/public_api_guard/material/toolbar/testing.d.ts

@@ -0,0 +1,14 @@
+export declare class MatToolbarHarness extends ContentContainerComponentHarness<MatToolbarSection> {
+    getRowsAsText(): Promise<string[]>;
+    hasMultipleRows(): Promise<boolean>;
+    static hostSelector: string;
+    static with(options?: ToolbarHarnessFilters): HarnessPredicate<MatToolbarHarness>;
+}
+
+export declare const enum MatToolbarSection {
+    ROW = ".mat-toolbar-row"
+}
+
+export interface ToolbarHarnessFilters extends BaseHarnessFilters {
+    text?: string | RegExp;
+}