fix(multiple): enable easy extension of harnesses (#24878)

Add the capability to extend a harness without having to duplicate the `with` method
used to load it. This was necessary before because the returned predicate was of type
the parent harness which resultet in loading a harness instance of the parent type
instead of the derived class unless the method is overridden.

Author: dobrevad

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

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {HarnessPredicate} from '@angular/cdk/testing';
+import {ComponentHarnessConstructor, HarnessPredicate} from '@angular/cdk/testing';
 import {
   MatOptgroupHarness,
   MatOptionHarness,
@@ -33,16 +33,17 @@ export class MatAutocompleteHarness extends _MatAutocompleteHarnessBase<
   static hostSelector = '.mat-mdc-autocomplete-trigger';
 
   /**
-   * Gets a `HarnessPredicate` that can be used to search for a `MatAutocompleteHarness` that meets
-   * certain criteria.
+   * Gets a `HarnessPredicate` that can be used to search for an autocomplete with specific
+   * attributes.
    * @param options Options for filtering which autocomplete instances are considered a match.
    * @return a `HarnessPredicate` configured with the given options.
    */
-  static with(options: AutocompleteHarnessFilters = {}): HarnessPredicate<MatAutocompleteHarness> {
-    return new HarnessPredicate(MatAutocompleteHarness, options).addOption(
-      'value',
-      options.value,
-      (harness, value) => HarnessPredicate.stringMatches(harness.getValue(), value),
+  static with<T extends MatAutocompleteHarness>(
+    this: ComponentHarnessConstructor<T>,
+    options: AutocompleteHarnessFilters = {},
+  ): HarnessPredicate<T> {
+    return new HarnessPredicate(this, options).addOption('value', options.value, (harness, value) =>
+      HarnessPredicate.stringMatches(harness.getValue(), value),
     );
   }
 }

src/material-experimental/mdc-button/testing/button-harness.ts

@@ -6,7 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ContentContainerComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {
+  ComponentHarnessConstructor,
+  ContentContainerComponentHarness,
+  HarnessPredicate,
+} from '@angular/cdk/testing';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {ButtonHarnessFilters} from '@angular/material/button/testing';
 
@@ -23,11 +27,12 @@ export class MatButtonHarness extends ContentContainerComponentHarness {
    *   - `text` finds a button with specific text content.
    * @return a `HarnessPredicate` configured with the given options.
    */
-  static with(options: ButtonHarnessFilters = {}): HarnessPredicate<MatButtonHarness> {
-    return new HarnessPredicate(MatButtonHarness, options).addOption(
-      'text',
-      options.text,
-      (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text),
+  static with<T extends MatButtonHarness>(
+    this: ComponentHarnessConstructor<T>,
+    options: ButtonHarnessFilters = {},
+  ): HarnessPredicate<T> {
+    return new HarnessPredicate(this, options).addOption('text', options.text, (harness, text) =>
+      HarnessPredicate.stringMatches(harness.getText(), text),
     );
   }
 

src/material-experimental/mdc-card/testing/card-harness.ts

@@ -6,7 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {HarnessPredicate, ContentContainerComponentHarness} from '@angular/cdk/testing';
+import {
+  ComponentHarnessConstructor,
+  ContentContainerComponentHarness,
+  HarnessPredicate,
+} from '@angular/cdk/testing';
 import {CardHarnessFilters} from './card-harness-filters';
 
 /** Selectors for different sections of the mat-card that can container user content. */
@@ -23,13 +27,15 @@ export class MatCardHarness extends ContentContainerComponentHarness<MatCardSect
   static hostSelector = '.mat-mdc-card';
 
   /**
-   * Gets a `HarnessPredicate` that can be used to search for a `MatCardHarness` that meets
-   * certain criteria.
+   * Gets a `HarnessPredicate` that can be used to search for a card with specific attributes.
    * @param options Options for filtering which card instances are considered a match.
    * @return a `HarnessPredicate` configured with the given options.
    */
-  static with(options: CardHarnessFilters = {}): HarnessPredicate<MatCardHarness> {
-    return new HarnessPredicate(MatCardHarness, options)
+  static with<T extends MatCardHarness>(
+    this: ComponentHarnessConstructor<T>,
+    options: CardHarnessFilters = {},
+  ): HarnessPredicate<T> {
+    return new HarnessPredicate(this, options)
       .addOption('text', options.text, (harness, text) =>
         HarnessPredicate.stringMatches(harness.getText(), text),
       )

src/material-experimental/mdc-checkbox/testing/checkbox-harness.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {HarnessPredicate} from '@angular/cdk/testing';
+import {ComponentHarnessConstructor, HarnessPredicate} from '@angular/cdk/testing';
 import {CheckboxHarnessFilters, _MatCheckboxHarnessBase} from '@angular/material/checkbox/testing';
 
 /** Harness for interacting with a MDC-based mat-checkbox in tests. */
@@ -21,9 +21,12 @@ export class MatCheckboxHarness extends _MatCheckboxHarnessBase {
    *   - `name` finds a checkbox with specific name.
    * @return a `HarnessPredicate` configured with the given options.
    */
-  static with(options: CheckboxHarnessFilters = {}): HarnessPredicate<MatCheckboxHarness> {
+  static with<T extends MatCheckboxHarness>(
+    this: ComponentHarnessConstructor<T>,
+    options: CheckboxHarnessFilters = {},
+  ): HarnessPredicate<T> {
     return (
-      new HarnessPredicate(MatCheckboxHarness, options)
+      new HarnessPredicate(this, options)
         .addOption('label', options.label, (harness, label) =>
           HarnessPredicate.stringMatches(harness.getLabelText(), label),
         )

src/material-experimental/mdc-chips/testing/chip-avatar-harness.ts

@@ -6,20 +6,27 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {HarnessPredicate, ComponentHarness} from '@angular/cdk/testing';
+import {
+  ComponentHarness,
+  ComponentHarnessConstructor,
+  HarnessPredicate,
+} from '@angular/cdk/testing';
 import {ChipAvatarHarnessFilters} from './chip-harness-filters';
 
 /** Harness for interacting with a standard Material chip avatar in tests. */
 export class MatChipAvatarHarness extends ComponentHarness {
   static hostSelector = '.mat-mdc-chip-avatar';
 
   /**
-   * Gets a `HarnessPredicate` that can be used to search for a `MatChipAvatarHarness` that meets
-   * certain criteria.
+   * Gets a `HarnessPredicate` that can be used to search for a chip avatar with specific
+   * attributes.
    * @param options Options for filtering which input instances are considered a match.
    * @return a `HarnessPredicate` configured with the given options.
    */
-  static with(options: ChipAvatarHarnessFilters = {}): HarnessPredicate<MatChipAvatarHarness> {
-    return new HarnessPredicate(MatChipAvatarHarness, options);
+  static with<T extends MatChipAvatarHarness>(
+    this: ComponentHarnessConstructor<T>,
+    options: ChipAvatarHarnessFilters = {},
+  ): HarnessPredicate<T> {
+    return new HarnessPredicate(this, options);
   }
 }

src/material-experimental/mdc-chips/testing/chip-grid-harness.ts

@@ -6,7 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {
+  ComponentHarness,
+  ComponentHarnessConstructor,
+  HarnessPredicate,
+} from '@angular/cdk/testing';
 import {
   ChipGridHarnessFilters,
   ChipInputHarnessFilters,
@@ -21,9 +25,14 @@ export class MatChipGridHarness extends ComponentHarness {
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a chip grid with specific attributes.
+   * @param options Options for filtering which chip grid instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
    */
-  static with(options: ChipGridHarnessFilters = {}): HarnessPredicate<MatChipGridHarness> {
-    return new HarnessPredicate(MatChipGridHarness, options);
+  static with<T extends MatChipGridHarness>(
+    this: ComponentHarnessConstructor<T>,
+    options: ChipGridHarnessFilters = {},
+  ): HarnessPredicate<T> {
+    return new HarnessPredicate(this, options);
   }
 
   /** Gets whether the chip grid is disabled. */

src/material-experimental/mdc-chips/testing/chip-harness.ts

@@ -6,7 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ContentContainerComponentHarness, HarnessPredicate, TestKey} from '@angular/cdk/testing';
+import {
+  ComponentHarnessConstructor,
+  ContentContainerComponentHarness,
+  HarnessPredicate,
+  TestKey,
+} from '@angular/cdk/testing';
 import {MatChipAvatarHarness} from './chip-avatar-harness';
 import {
   ChipAvatarHarnessFilters,
@@ -23,20 +28,16 @@ export class MatChipHarness extends ContentContainerComponentHarness {
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a chip with specific attributes.
+   * @param options Options for narrowing the search.
+   * @return a `HarnessPredicate` configured with the given options.
    */
-  // Note(mmalerba): generics are used as a workaround for lack of polymorphic `this` in static
-  // methods. See https://github.com/microsoft/TypeScript/issues/5863
-  static with<T extends typeof MatChipHarness>(
-    this: T,
+  static with<T extends MatChipHarness>(
+    this: ComponentHarnessConstructor<T>,
     options: ChipHarnessFilters = {},
-  ): HarnessPredicate<InstanceType<T>> {
-    return new HarnessPredicate(MatChipHarness, options).addOption(
-      'text',
-      options.text,
-      (harness, label) => {
-        return HarnessPredicate.stringMatches(harness.getText(), label);
-      },
-    ) as unknown as HarnessPredicate<InstanceType<T>>;
+  ): HarnessPredicate<T> {
+    return new HarnessPredicate(this, options).addOption('text', options.text, (harness, label) => {
+      return HarnessPredicate.stringMatches(harness.getText(), label);
+    });
   }
 
   /** Gets a promise for the text content the option. */

src/material-experimental/mdc-chips/testing/chip-input-harness.ts

@@ -6,21 +6,29 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentHarness, HarnessPredicate, TestKey} from '@angular/cdk/testing';
+import {
+  ComponentHarness,
+  ComponentHarnessConstructor,
+  HarnessPredicate,
+  TestKey,
+} from '@angular/cdk/testing';
 import {ChipInputHarnessFilters} from './chip-harness-filters';
 
 /** Harness for interacting with a grid's chip input in tests. */
 export class MatChipInputHarness extends ComponentHarness {
   static hostSelector = '.mat-mdc-chip-input';
 
   /**
-   * Gets a `HarnessPredicate` that can be used to search for a `MatChipInputHarness` that meets
-   * certain criteria.
+   * Gets a `HarnessPredicate` that can be used to search for a chip input with specific
+   * attributes.
    * @param options Options for filtering which input instances are considered a match.
    * @return a `HarnessPredicate` configured with the given options.
    */
-  static with(options: ChipInputHarnessFilters = {}): HarnessPredicate<MatChipInputHarness> {
-    return new HarnessPredicate(MatChipInputHarness, options)
+  static with<T extends MatChipInputHarness>(
+    this: ComponentHarnessConstructor<T>,
+    options: ChipInputHarnessFilters = {},
+  ): HarnessPredicate<T> {
+    return new HarnessPredicate(this, options)
       .addOption('value', options.value, async (harness, value) => {
         return (await harness.getValue()) === value;
       })

src/material-experimental/mdc-chips/testing/chip-listbox-harness.ts

@@ -6,7 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentHarness, HarnessPredicate, parallel} from '@angular/cdk/testing';
+import {
+  ComponentHarness,
+  ComponentHarnessConstructor,
+  HarnessPredicate,
+  parallel,
+} from '@angular/cdk/testing';
 import {ChipListboxHarnessFilters, ChipOptionHarnessFilters} from './chip-harness-filters';
 import {MatChipOptionHarness} from './chip-option-harness';
 
@@ -17,9 +22,14 @@ export class MatChipListboxHarness extends ComponentHarness {
   /**
    * Gets a `HarnessPredicate` that can be used to search for a chip listbox with specific
    * attributes.
+   * @param options Options for narrowing the search.
+   * @return a `HarnessPredicate` configured with the given options.
    */
-  static with(options: ChipListboxHarnessFilters = {}): HarnessPredicate<MatChipListboxHarness> {
-    return new HarnessPredicate(MatChipListboxHarness, options);
+  static with<T extends MatChipListboxHarness>(
+    this: ComponentHarnessConstructor<T>,
+    options: ChipListboxHarnessFilters = {},
+  ): HarnessPredicate<T> {
+    return new HarnessPredicate(this, options);
   }
 
   /** Gets whether the chip listbox is disabled. */

src/material-experimental/mdc-chips/testing/chip-option-harness.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {HarnessPredicate} from '@angular/cdk/testing';
+import {ComponentHarnessConstructor, HarnessPredicate} from '@angular/cdk/testing';
 import {MatChipHarness} from './chip-harness';
 import {ChipOptionHarnessFilters} from './chip-harness-filters';
 
@@ -17,13 +17,13 @@ export class MatChipOptionHarness extends MatChipHarness {
   /**
    * Gets a `HarnessPredicate` that can be used to search for a chip option with specific
    * attributes.
+   * @param options Options for narrowing the search.
+   * @return a `HarnessPredicate` configured with the given options.
    */
-  // Note(mmalerba): generics are used as a workaround for lack of polymorphic `this` in static
-  // methods. See https://github.com/microsoft/TypeScript/issues/5863
-  static override with<T extends typeof MatChipHarness>(
-    this: T,
+  static override with<T extends MatChipHarness>(
+    this: ComponentHarnessConstructor<T>,
     options: ChipOptionHarnessFilters = {},
-  ): HarnessPredicate<InstanceType<T>> {
+  ): HarnessPredicate<T> {
     return new HarnessPredicate(MatChipOptionHarness, options)
       .addOption('text', options.text, (harness, label) =>
         HarnessPredicate.stringMatches(harness.getText(), label),
@@ -32,7 +32,7 @@ export class MatChipOptionHarness extends MatChipHarness {
         'selected',
         options.selected,
         async (harness, selected) => (await harness.isSelected()) === selected,
-      ) as unknown as HarnessPredicate<InstanceType<T>>;
+      ) as unknown as HarnessPredicate<T>;
   }
 
   /** Whether the chip is selected. */

src/material-experimental/mdc-chips/testing/chip-remove-harness.ts

@@ -6,21 +6,28 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {HarnessPredicate, ComponentHarness} from '@angular/cdk/testing';
+import {
+  ComponentHarness,
+  ComponentHarnessConstructor,
+  HarnessPredicate,
+} from '@angular/cdk/testing';
 import {ChipRemoveHarnessFilters} from './chip-harness-filters';
 
 /** Harness for interacting with a standard Material chip remove button in tests. */
 export class MatChipRemoveHarness extends ComponentHarness {
   static hostSelector = '.mat-mdc-chip-remove';
 
   /**
-   * Gets a `HarnessPredicate` that can be used to search for a `MatChipRemoveHarness` that meets
-   * certain criteria.
+   * Gets a `HarnessPredicate` that can be used to search for a chip remove with specific
+   * attributes.
    * @param options Options for filtering which input instances are considered a match.
    * @return a `HarnessPredicate` configured with the given options.
    */
-  static with(options: ChipRemoveHarnessFilters = {}): HarnessPredicate<MatChipRemoveHarness> {
-    return new HarnessPredicate(MatChipRemoveHarness, options);
+  static with<T extends MatChipRemoveHarness>(
+    this: ComponentHarnessConstructor<T>,
+    options: ChipRemoveHarnessFilters = {},
+  ): HarnessPredicate<T> {
+    return new HarnessPredicate(this, options);
   }
 
   /** Clicks the remove button. */

src/material-experimental/mdc-chips/testing/chip-row-harness.ts

@@ -6,8 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {HarnessPredicate} from '@angular/cdk/testing';
-import {ChipRowHarnessFilters} from './chip-harness-filters';
 import {MatChipHarness} from './chip-harness';
 
 // TODO(crisbeto): add harness for the chip edit input inside the row.
@@ -16,20 +14,6 @@ import {MatChipHarness} from './chip-harness';
 export class MatChipRowHarness extends MatChipHarness {
   static override hostSelector = '.mat-mdc-chip-row';
 
-  /**
-   * Gets a `HarnessPredicate` that can be used to search for a chip row with specific attributes.
-   */
-  // Note(mmalerba): generics are used as a workaround for lack of polymorphic `this` in static
-  // methods. See https://github.com/microsoft/TypeScript/issues/5863
-  static override with<T extends typeof MatChipHarness>(
-    this: T,
-    options: ChipRowHarnessFilters = {},
-  ): HarnessPredicate<InstanceType<T>> {
-    return new HarnessPredicate(MatChipRowHarness, options) as unknown as HarnessPredicate<
-      InstanceType<T>
-    >;
-  }
-
   /** Whether the chip is editable. */
   async isEditable(): Promise<boolean> {
     return (await this.host()).hasClass('mat-mdc-chip-editable');