fix(material/testing): Fix implementation issue caused by the addition

of getFloatingLabelText functionality to MatFormFieldControlHarness.

Adding anything to MatFormFieldControlHarness causes problems with
MatFormFieldHarness.getControl(...) since the function expects a
MatFormFieldControlHarness, but doesn't always get a child of this type
in practice. For example, MatAutocomplete and MatChipGridHarness are
commonly fetched types, and even the directly supported MatDateRangeInputHarness does
not inherit from MatFormFieldControlHarness. Moving the functionality to
MatFormFieldControlHarnessBase fixes this problem.

Author: wildcardalice

src/material/datepicker/testing/date-range-input-harness.ts

@@ -64,7 +64,7 @@ export class MatDateRangeInputHarness extends DatepickerTriggerHarnessBase {
         HarnessPredicate.stringMatches(harness.getValue(), value),
       )
       .addOption('label', options.label, (harness, label) => {
-        return HarnessPredicate.stringMatches(harness.getLabel(), label);
+        return HarnessPredicate.stringMatches(harness.getFloatingLabelText(), label);
       });
   }
 
@@ -92,8 +92,8 @@ export class MatDateRangeInputHarness extends DatepickerTriggerHarnessBase {
   }
 
   /** Gets the floating label text for the range input, if it exists. */
-  async getLabel(): Promise<string | null> {
-    // Copied from MatFormFieldControlHarness since this class cannot extend two classes
+  async getFloatingLabelText(): Promise<string | null> {
+    // Copied from MatFormFieldControlHarnessBase since this class cannot extend two classes
     const documentRootLocator = await this.documentRootLocatorFactory();
     const labelId = await (await this.host()).getAttribute('aria-labelledby');
     const hostId = await (await this.host()).getAttribute('id');

src/material/datepicker/testing/datepicker-input-harness-base.ts

@@ -7,7 +7,7 @@
  */
 
 import {ComponentHarnessConstructor, HarnessPredicate} from '@angular/cdk/testing';
-import {MatFormFieldControlHarness} from '@angular/material/form-field/testing/control';
+import {MatFormFieldControlHarnessBase} from '@angular/material/form-field/testing/control';
 import {DatepickerInputHarnessFilters} from './datepicker-harness-filters';
 
 /** Sets up the filter predicates for a datepicker input harness. */
@@ -23,12 +23,12 @@ export function getInputPredicate<T extends MatDatepickerInputHarnessBase>(
       return HarnessPredicate.stringMatches(harness.getPlaceholder(), placeholder);
     })
     .addOption('label', options.label, (harness, label) => {
-      return HarnessPredicate.stringMatches(harness.getLabel(), label);
+      return HarnessPredicate.stringMatches(harness.getFloatingLabelText(), label);
     });
 }
 
 /** Base class for datepicker input harnesses. */
-export abstract class MatDatepickerInputHarnessBase extends MatFormFieldControlHarness {
+export abstract class MatDatepickerInputHarnessBase extends MatFormFieldControlHarnessBase {
   /** Whether the input is disabled. */
   async isDisabled(): Promise<boolean> {
     return (await this.host()).getProperty<boolean>('disabled');
@@ -39,11 +39,6 @@ export abstract class MatDatepickerInputHarnessBase extends MatFormFieldControlH
     return (await this.host()).getProperty<boolean>('required');
   }
 
-  /** Gets the floating label text for the input, if it exists. */
-  async getLabel(): Promise<string | null> {
-    return await this._getFloatingLabelText();
-  }
-
   /** Gets the value of the input. */
   async getValue(): Promise<string> {
     // The "value" property of the native input is always defined.

src/material/form-field/testing/control/form-field-control-harness.ts

@@ -9,14 +9,17 @@
 import {ComponentHarness} from '@angular/cdk/testing';
 
 /**
- * Base class for custom form-field control harnesses. Harnesses for
- * custom controls with form-fields need to implement this interface.
+ * Base class for custom form field control harnesses. Harnesses for
+ * custom controls with form fields need to implement this interface.
  */
-export abstract class MatFormFieldControlHarness extends ComponentHarness {
+export abstract class MatFormFieldControlHarness extends ComponentHarness {}
+
+/** Shared behavior among MatFormFieldControlHarnesses */
+export abstract class MatFormFieldControlHarnessBase extends MatFormFieldControlHarness {
   private readonly floatingLabelSelector = '.mdc-floating-label';
 
   /** Gets the text content of the floating label, if it exists. */
-  protected async _getFloatingLabelText(): Promise<string | null> {
+  public async getFloatingLabelText(): Promise<string | null> {
     const documentRootLocator = await this.documentRootLocatorFactory();
     const labelId = await (await this.host()).getAttribute('aria-labelledby');
     const hostId = await (await this.host()).getAttribute('id');

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

@@ -7,12 +7,12 @@
  */
 
 import {HarnessPredicate, parallel} from '@angular/cdk/testing';
-import {MatFormFieldControlHarness} from '@angular/material/form-field/testing/control';
+import {MatFormFieldControlHarnessBase} from '@angular/material/form-field/testing/control';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {InputHarnessFilters} from './input-harness-filters';
 
 /** Harness for interacting with a standard Material inputs in tests. */
-export class MatInputHarness extends MatFormFieldControlHarness {
+export class MatInputHarness extends MatFormFieldControlHarnessBase {
   private readonly _documentRootLocator = this.documentRootLocatorFactory();
 
   // TODO: We do not want to handle `select` elements with `matNativeControl` because
@@ -35,7 +35,7 @@ export class MatInputHarness extends MatFormFieldControlHarness {
         return HarnessPredicate.stringMatches(harness.getPlaceholder(), placeholder);
       })
       .addOption('label', options.label, (harness, label) => {
-        return HarnessPredicate.stringMatches(harness.getLabel(), label);
+        return HarnessPredicate.stringMatches(harness.getFloatingLabelText(), label);
       });
   }
 
@@ -99,11 +99,6 @@ export class MatInputHarness extends MatFormFieldControlHarness {
     return await (await this.host()).getProperty<string>('id');
   }
 
-  /** Gets the floating label text for the input, if it exists. */
-  async getLabel(): Promise<string | null> {
-    return await this._getFloatingLabelText();
-  }
-
   /**
    * Focuses the input and returns a promise that indicates when the
    * action is complete.

src/material/input/testing/native-select-harness.ts

@@ -7,15 +7,15 @@
  */
 
 import {HarnessPredicate, parallel} from '@angular/cdk/testing';
-import {MatFormFieldControlHarness} from '../../form-field/testing/control';
+import {MatFormFieldControlHarnessBase} from '../../form-field/testing/control';
 import {MatNativeOptionHarness} from './native-option-harness';
 import {
   NativeOptionHarnessFilters,
   NativeSelectHarnessFilters,
 } from './native-select-harness-filters';
 
 /** Harness for interacting with a native `select` in tests. */
-export class MatNativeSelectHarness extends MatFormFieldControlHarness {
+export class MatNativeSelectHarness extends MatFormFieldControlHarnessBase {
   static hostSelector = 'select[matNativeControl]';
 
   /**
@@ -29,7 +29,7 @@ export class MatNativeSelectHarness extends MatFormFieldControlHarness {
       'label',
       options.label,
       (harness, label) => {
-        return HarnessPredicate.stringMatches(harness.getLabel(), label);
+        return HarnessPredicate.stringMatches(harness.getFloatingLabelText(), label);
       },
     );
   }
@@ -61,11 +61,6 @@ export class MatNativeSelectHarness extends MatFormFieldControlHarness {
     return await (await this.host()).getProperty<string>('id');
   }
 
-  /** Gets the floating label text for the input, if it exists. */
-  async getLabel(): Promise<string | null> {
-    return await this._getFloatingLabelText();
-  }
-
   /** Focuses the select and returns a void promise that indicates when the action is complete. */
   async focus(): Promise<void> {
     return (await this.host()).focus();

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

@@ -13,11 +13,11 @@ import {
   OptionHarnessFilters,
   OptgroupHarnessFilters,
 } from '@angular/material/core/testing';
-import {MatFormFieldControlHarness} from '@angular/material/form-field/testing/control';
+import {MatFormFieldControlHarnessBase} from '@angular/material/form-field/testing/control';
 import {SelectHarnessFilters} from './select-harness-filters';
 
 /** Harness for interacting with a mat-select in tests. */
-export class MatSelectHarness extends MatFormFieldControlHarness {
+export class MatSelectHarness extends MatFormFieldControlHarnessBase {
   static hostSelector = '.mat-mdc-select';
   private _prefix = 'mat-mdc';
   private _optionClass = MatOptionHarness;
@@ -39,7 +39,7 @@ export class MatSelectHarness extends MatFormFieldControlHarness {
         return (await harness.isDisabled()) === disabled;
       })
       .addOption('label', options.label, (harness, label) => {
-        return HarnessPredicate.stringMatches(harness.getLabel(), label);
+        return HarnessPredicate.stringMatches(harness.getFloatingLabelText(), label);
       });
   }
 
@@ -74,11 +74,6 @@ export class MatSelectHarness extends MatFormFieldControlHarness {
     return value.text();
   }
 
-  /** Gets the floating label text for the select, if it exists. */
-  async getLabel(): Promise<string | null> {
-    return await this._getFloatingLabelText();
-  }
-
   /** Focuses the select and returns a void promise that indicates when the action is complete. */
   async focus(): Promise<void> {
     return (await this.host()).focus();