fix(material-experimental): use harnesses for mat-option (#17009)

Follow-up from #16620 and #16710. Adds a dedicated harness for `mat-option` and `mat-optgroup`.

Note that some of the code is duplicated. This is because we don't have a shared place where to put the harness so that `mat-autocomplete` and `mat-select` don't have to depend on each other. I've intentionally kept the harnesses to only the methods we need, but once we have `experimental/core`, I'll combine them and implement all of the states that are supported by `mat-option`.

Author: crisbeto

src/material-experimental/select/testing/option-harness.ts

@@ -0,0 +1,73 @@
+/**
+ * @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 {ComponentHarness, HarnessPredicate, BaseHarnessFilters} from '@angular/cdk/testing';
+
+// TODO(crisbeto): combine these with the ones in `mat-autocomplete`
+// and expand to cover all states once we have experimental/core.
+
+export interface OptionHarnessFilters extends BaseHarnessFilters {
+  text?: string;
+}
+
+export interface OptionGroupHarnessFilters extends BaseHarnessFilters {
+  labelText?: string;
+}
+
+/**
+ * Harness for interacting with a the `mat-option` for a `mat-select` in tests.
+ * @dynamic
+ */
+export class MatSelectOptionHarness extends ComponentHarness {
+  // TODO(crisbeto): things to add here when adding a common option harness:
+  // - isDisabled
+  // - isSelected
+  // - isActive
+  // - isMultiple
+
+  static with(options: OptionHarnessFilters = {}) {
+    return new HarnessPredicate(MatSelectOptionHarness, options)
+        .addOption('text', options.text,
+            async (harness, title) =>
+                HarnessPredicate.stringMatches(await harness.getText(), title));
+  }
+
+  static hostSelector = '.mat-select-panel .mat-option';
+
+  /** Clicks the option. */
+  async click(): Promise<void> {
+    return (await this.host()).click();
+  }
+
+  /** Gets a promise for the option's label text. */
+  async getText(): Promise<string> {
+    return (await this.host()).text();
+  }
+}
+
+/**
+ * Harness for interacting with a the `mat-optgroup` for a `mat-select` in tests.
+ * @dynamic
+ */
+export class MatSelectOptionGroupHarness extends ComponentHarness {
+  private _label = this.locatorFor('.mat-optgroup-label');
+  static hostSelector = '.mat-select-panel .mat-optgroup';
+
+  static with(options: OptionGroupHarnessFilters = {}) {
+    return new HarnessPredicate(MatSelectOptionGroupHarness, options)
+        .addOption('labelText', options.labelText,
+            async (harness, title) =>
+                HarnessPredicate.stringMatches(await harness.getLabelText(), title));
+  }
+
+  /** Gets a promise for the option group's label text. */
+  async getLabelText(): Promise<string> {
+    return (await this._label()).text();
+  }
+}
+

src/material-experimental/select/testing/select-harness.ts

@@ -11,6 +11,7 @@ import {
   MatFormFieldControlHarness
 } from '@angular/material-experimental/form-field/testing/control';
 import {SelectHarnessFilters} from './select-harness-filters';
+import {MatSelectOptionHarness, MatSelectOptionGroupHarness} from './option-harness';
 
 /** Selector for the select panel. */
 const PANEL_SELECTOR = '.mat-select-panel';
@@ -24,8 +25,8 @@ export class MatSelectHarness extends MatFormFieldControlHarness {
   private _panel = this._documentRootLocator.locatorFor(PANEL_SELECTOR);
   private _backdrop = this._documentRootLocator.locatorFor('.cdk-overlay-backdrop');
   private _optionalPanel = this._documentRootLocator.locatorForOptional(PANEL_SELECTOR);
-  private _options = this._documentRootLocator.locatorForAll(`${PANEL_SELECTOR} .mat-option`);
-  private _groups = this._documentRootLocator.locatorForAll(`${PANEL_SELECTOR} .mat-optgroup`);
+  private _options = this._documentRootLocator.locatorForAll(MatSelectOptionHarness);
+  private _groups = this._documentRootLocator.locatorForAll(MatSelectOptionGroupHarness);
   private _trigger = this.locatorFor('.mat-select-trigger');
   private _value = this.locatorFor('.mat-select-value');
 
@@ -88,12 +89,12 @@ export class MatSelectHarness extends MatFormFieldControlHarness {
   }
 
   /** Gets the options inside the select panel. */
-  async getOptions(): Promise<TestElement[]> {
+  async getOptions(): Promise<MatSelectOptionHarness[]> {
     return this._options();
   }
 
   /** Gets the groups of options inside the panel. */
-  async getOptionGroups(): Promise<TestElement[]> {
+  async getOptionGroups(): Promise<MatSelectOptionGroupHarness[]> {
     return this._groups();
   }
 

src/material-experimental/select/testing/shared.spec.ts

@@ -138,7 +138,7 @@ export function runHarnessTests(
     const options = await select.getOptions();
 
     expect(options.length).toBe(11);
-    expect(await options[5].text()).toBe('New York');
+    expect(await options[5].getText()).toBe('New York');
   });
 
   it('should be able to get the select panel groups', async () => {

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

@@ -9,6 +9,7 @@
 import {ComponentHarness, HarnessPredicate, TestElement} from '@angular/cdk/testing';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {AutocompleteHarnessFilters} from './autocomplete-harness-filters';
+import {MatAutocompleteOptionHarness, MatAutocompleteOptionGroupHarness} from './option-harness';
 
 /** Selector for the autocomplete panel. */
 const PANEL_SELECTOR = '.mat-autocomplete-panel';
@@ -21,8 +22,8 @@ export class MatAutocompleteHarness extends ComponentHarness {
   private _documentRootLocator = this.documentRootLocatorFactory();
   private _panel = this._documentRootLocator.locatorFor(PANEL_SELECTOR);
   private _optionalPanel = this._documentRootLocator.locatorForOptional(PANEL_SELECTOR);
-  private _options = this._documentRootLocator.locatorForAll(`${PANEL_SELECTOR} .mat-option`);
-  private _groups = this._documentRootLocator.locatorForAll(`${PANEL_SELECTOR} .mat-optgroup`);
+  private _options = this._documentRootLocator.locatorForAll(MatAutocompleteOptionHarness);
+  private _groups = this._documentRootLocator.locatorForAll(MatAutocompleteOptionGroupHarness);
 
   static hostSelector = '.mat-autocomplete-trigger';
 
@@ -73,12 +74,12 @@ export class MatAutocompleteHarness extends ComponentHarness {
   }
 
   /** Gets the options inside the autocomplete panel. */
-  async getOptions(): Promise<TestElement[]> {
+  async getOptions(): Promise<MatAutocompleteOptionHarness[]> {
     return this._options();
   }
 
   /** Gets the groups of options inside the panel. */
-  async getOptionGroups(): Promise<TestElement[]> {
+  async getOptionGroups(): Promise<MatAutocompleteOptionGroupHarness[]> {
     return this._groups();
   }
 

src/material/autocomplete/testing/option-harness.ts

@@ -0,0 +1,67 @@
+/**
+ * @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 {ComponentHarness, HarnessPredicate, BaseHarnessFilters} from '@angular/cdk/testing';
+
+// TODO(crisbeto): combine these with the ones in `mat-select`
+// and expand to cover all states once we have experimental/core.
+
+export interface OptionHarnessFilters extends BaseHarnessFilters {
+  text?: string;
+}
+
+export interface OptionGroupHarnessFilters extends BaseHarnessFilters {
+  labelText?: string;
+}
+
+/**
+ * Harness for interacting with a the `mat-option` for a `mat-autocomplete` in tests.
+ * @dynamic
+ */
+export class MatAutocompleteOptionHarness extends ComponentHarness {
+  static hostSelector = '.mat-autocomplete-panel .mat-option';
+
+  static with(options: OptionHarnessFilters = {}) {
+    return new HarnessPredicate(MatAutocompleteOptionHarness, options)
+        .addOption('text', options.text,
+            async (harness, title) =>
+                HarnessPredicate.stringMatches(await harness.getText(), title));
+  }
+
+  /** Clicks the option. */
+  async click(): Promise<void> {
+    return (await this.host()).click();
+  }
+
+  /** Gets a promise for the option's label text. */
+  async getText(): Promise<string> {
+    return (await this.host()).text();
+  }
+}
+
+/**
+ * Harness for interacting with a the `mat-optgroup` for a `mat-autocomplete` in tests.
+ * @dynamic
+ */
+export class MatAutocompleteOptionGroupHarness extends ComponentHarness {
+  private _label = this.locatorFor('.mat-optgroup-label');
+  static hostSelector = '.mat-autocomplete-panel .mat-optgroup';
+
+  static with(options: OptionGroupHarnessFilters = {}) {
+    return new HarnessPredicate(MatAutocompleteOptionGroupHarness, options)
+        .addOption('labelText', options.labelText,
+            async (harness, title) =>
+                HarnessPredicate.stringMatches(await harness.getLabelText(), title));
+  }
+
+  /** Gets a promise for the option group's label text. */
+  async getLabelText(): Promise<string> {
+    return (await this._label()).text();
+  }
+}
+

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

@@ -82,7 +82,7 @@ export function runHarnessTests(
     const options = await input.getOptions();
 
     expect(options.length).toBe(11);
-    expect(await options[5].text()).toBe('New York');
+    expect(await options[5].getText()).toBe('New York');
   });
 
   it('should be able to get the autocomplete panel groups', async () => {