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

wildcardalice · wildcardalice · commit 377b93a8317b · 2025-05-12T18:11:51.000Z
of floating label functionality to MatFormFieldControlHarness class

Adding anything to this abstract class causes compilation issues when
using MatFormFieldHarness.getControl(...) to fetch a type other than the
directly supported types. The most common problems arise when fetching
MatAutocompleteHarness or MatChipGridHarness, but I have found instances
of other components such as MatCheckboxHarness. Moving the functionality
to a base class resolves this.
diff --git a/src/cdk/testing/component-harness.ts b/src/cdk/testing/component-harness.ts
@@ -542,7 +542,7 @@ export abstract class ContentContainerComponentHarness<S extends string = string
     return (await this.getRootHarnessLoader()).getAllHarnesses(query);
   }
 
- /**
+  /**
    * Returns the number of matching harnesses for the given query within the current harness's
    * content.
    *
diff --git a/src/material/datepicker/testing/date-range-input-harness.ts b/src/material/datepicker/testing/date-range-input-harness.ts
@@ -93,7 +93,7 @@ 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
+    // 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');
diff --git a/src/material/datepicker/testing/datepicker-input-harness-base.ts b/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. */
@@ -28,7 +28,7 @@ export function getInputPredicate<T extends MatDatepickerInputHarnessBase>(
 }
 
 /** 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.
diff --git a/src/material/form-field/testing/control/form-field-control-harness.ts b/src/material/form-field/testing/control/form-field-control-harness.ts
@@ -12,11 +12,16 @@ 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.
  */
-export abstract class MatFormFieldControlHarness extends ComponentHarness {
+export abstract class MatFormFieldControlHarness extends ComponentHarness {}
+
+/**
+ * Shared functionality for many 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 getLabel(): 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');
diff --git a/src/material/input/testing/input-harness.ts b/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
@@ -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.
diff --git a/src/material/input/testing/native-select-harness.ts b/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]';
 
   /**
@@ -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();
diff --git a/src/material/select/testing/select-harness.ts b/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;
@@ -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();

Original file line number	Diff line number	Diff line change
`@@ -542,7 +542,7 @@ export abstract class ContentContainerComponentHarness<S extends string = string`
`542`	`542`	`return (await this.getRootHarnessLoader()).getAllHarnesses(query);`
`543`	`543`	`}`
`544`	`544`
`545`		`- /**`
	`545`	`+ /**`
`546`	`546`	`* Returns the number of matching harnesses for the given query within the current harness's`
`547`	`547`	`* content.`
`548`	`548`	`*`