fix: remove element selectors from test harnesses (#20224)

We're using element selectors for some of the test harnesses which can conflict between the MDC and non-MDC components. These changes switch them to use class selectors, similarly to what we decided to do for the MDC component styles.

Author: crisbeto

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

@@ -12,7 +12,7 @@ import {CheckboxHarnessFilters} from '@angular/material/checkbox/testing';
 
 /** Harness for interacting with a MDC-based mat-checkbox in tests. */
 export class MatCheckboxHarness extends ComponentHarness {
-  static hostSelector = 'mat-checkbox';
+  static hostSelector = '.mat-mdc-checkbox';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a checkbox with specific attributes.

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

@@ -44,7 +44,7 @@ export class MatChipSelectionChange {
   inputs: ['color', 'disableRipple', 'tabIndex'],
   host: {
     'role': 'option',
-    'class': 'mat-mdc-focus-indicator',
+    'class': 'mat-mdc-focus-indicator mat-mdc-chip-option',
     '[class.mat-mdc-chip-disabled]': 'disabled',
     '[class.mat-mdc-chip-highlighted]': 'highlighted',
     '[class.mat-mdc-chip-with-avatar]': 'leadingIcon',

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

@@ -50,6 +50,7 @@ export interface MatChipEditedEvent extends MatChipEvent {
   inputs: ['color', 'disableRipple', 'tabIndex'],
   host: {
     'role': 'row',
+    'class': 'mat-mdc-chip-row',
     '[class.mat-mdc-chip-disabled]': 'disabled',
     '[class.mat-mdc-chip-highlighted]': 'highlighted',
     '[class.mat-mdc-chip-with-avatar]': 'leadingIcon',

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

@@ -13,7 +13,7 @@ import {MatChipRowHarness} from './chip-row-harness';
 
 /** Harness for interacting with a mat-chip-grid in tests. */
 export class MatChipGridHarness extends ComponentHarness {
-  static hostSelector = 'mat-chip-grid';
+  static hostSelector = '.mat-mdc-chip-grid';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a chip grid with specific attributes.

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

@@ -11,7 +11,7 @@ import {ChipHarnessFilters} from './chip-harness-filters';
 
 /** Harness for interacting with a mat-chip in tests. */
 export class MatChipHarness extends ComponentHarness {
-  static hostSelector = 'mat-basic-chip, mat-chip';
+  static hostSelector = '.mat-mdc-basic-chip, .mat-mdc-chip';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a chip with specific attributes.

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

@@ -12,7 +12,7 @@ import {MatChipOptionHarness} from './chip-option-harness';
 
 /** Harness for interacting with a mat-chip-listbox in tests. */
 export class MatChipListboxHarness extends ComponentHarness {
-  static hostSelector = 'mat-chip-listbox';
+  static hostSelector = '.mat-mdc-chip-listbox';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a chip listbox with specific

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

@@ -12,7 +12,7 @@ import {ChipOptionHarnessFilters} from './chip-harness-filters';
 
 /** Harness for interacting with a mat-chip-option in tests. */
 export class MatChipOptionHarness extends MatChipHarness {
-  static hostSelector = 'mat-basic-chip-option, mat-chip-option';
+  static hostSelector = '.mat-mdc-chip-option';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a chip option with specific

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

@@ -12,7 +12,7 @@ import {MatChipHarness} from './chip-harness';
 
 /** Harness for interacting with a mat-chip-row in tests. */
 export class MatChipRowHarness extends MatChipHarness {
-  static hostSelector = 'mat-chip-row, mat-basic-chip-row';
+  static hostSelector = '.mat-mdc-chip-row';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a chip row with specific attributes.

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

@@ -12,7 +12,7 @@ import {ChipSetHarnessFilters} from './chip-harness-filters';
 
 /** Harness for interacting with a mat-chip-set in tests. */
 export class MatChipSetHarness extends ComponentHarness {
-  static hostSelector = 'mat-chip-set';
+  static hostSelector = '.mat-mdc-chip-set';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a chip set with specific attributes.

src/material-experimental/mdc-progress-bar/testing/progress-bar-harness.ts

@@ -12,7 +12,7 @@ import {ProgressBarHarnessFilters} from '@angular/material/progress-bar/testing'
 
 /** Harness for interacting with an MDC-based `mat-progress-bar` in tests. */
 export class MatProgressBarHarness extends ComponentHarness {
-  static hostSelector = 'mat-progress-bar';
+  static hostSelector = '.mat-mdc-progress-bar';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a progress bar with specific

src/material-experimental/mdc-progress-spinner/testing/progress-spinner-harness.ts

@@ -14,7 +14,7 @@ import {ProgressSpinnerHarnessFilters} from '@angular/material/progress-spinner/
 /** Harness for interacting with a MDC based mat-progress-spinner in tests. */
 export class MatProgressSpinnerHarness extends ComponentHarness {
   /** The selector for the host element of a `MatProgressSpinner` instance. */
-  static hostSelector = 'mat-progress-spinner,mat-spinner';
+  static hostSelector = '.mat-mdc-progress-spinner';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatProgressSpinnerHarness` that

src/material-experimental/mdc-slide-toggle/testing/slide-toggle-harness.ts

@@ -13,7 +13,7 @@ import {SlideToggleHarnessFilters} from '@angular/material/slide-toggle/testing'
 
 /** Harness for interacting with a MDC-based mat-slide-toggle in tests. */
 export class MatSlideToggleHarness extends ComponentHarness {
-  static hostSelector = 'mat-slide-toggle';
+  static hostSelector = '.mat-mdc-slide-toggle';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a slide-toggle w/ specific attributes.

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

@@ -12,7 +12,7 @@ import {SliderHarnessFilters} from '@angular/material/slider/testing';
 
 /** Harness for interacting with a MDC mat-slider in tests. */
 export class MatSliderHarness extends ComponentHarness {
-  static hostSelector = 'mat-slider';
+  static hostSelector = '.mat-mdc-slider';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a mat-slider with

src/material/button-toggle/testing/button-toggle-group-harness.ts

@@ -16,7 +16,7 @@ import {MatButtonToggleHarness} from './button-toggle-harness';
 /** Harness for interacting with a standard mat-button-toggle in tests. */
 export class MatButtonToggleGroupHarness extends ComponentHarness {
   /** The selector for the host element of a `MatButton` instance. */
-  static hostSelector = 'mat-button-toggle-group';
+  static hostSelector = '.mat-button-toggle-group';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatButtonToggleGroupHarness`

src/material/button-toggle/testing/button-toggle-harness.ts

@@ -15,7 +15,7 @@ import {ButtonToggleHarnessFilters} from './button-toggle-harness-filters';
 /** Harness for interacting with a standard mat-button-toggle in tests. */
 export class MatButtonToggleHarness extends ComponentHarness {
   /** The selector for the host element of a `MatButton` instance. */
-  static hostSelector = 'mat-button-toggle';
+  static hostSelector = '.mat-button-toggle';
 
   private _label = this.locatorFor('.mat-button-toggle-label-content');
   private _button = this.locatorFor('.mat-button-toggle-button');

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

@@ -20,7 +20,7 @@ export const enum MatCardSection {
 /** Harness for interacting with a standard mat-card in tests. */
 export class MatCardHarness extends ContentContainerComponentHarness<MatCardSection> {
   /** The selector for the host element of a `MatCard` instance. */
-  static hostSelector = 'mat-card';
+  static hostSelector = '.mat-card';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatCardHarness` that meets

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

@@ -13,7 +13,7 @@ import {CheckboxHarnessFilters} from './checkbox-harness-filters';
 /** Harness for interacting with a standard mat-checkbox in tests. */
 export class MatCheckboxHarness extends ComponentHarness {
   /** The selector for the host element of a `MatCheckbox` instance. */
-  static hostSelector = 'mat-checkbox';
+  static hostSelector = '.mat-checkbox';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatCheckboxHarness` that meets

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

@@ -14,7 +14,7 @@ import {DividerHarnessFilters} from './divider-harness-filters';
  * @dynamic
  */
 export class MatDividerHarness extends ComponentHarness {
-  static hostSelector = 'mat-divider';
+  static hostSelector = '.mat-divider';
 
   static with(options: DividerHarnessFilters = {}) {
     return new HarnessPredicate(MatDividerHarness, options);

src/material/list/testing/action-list-harness.ts

@@ -15,7 +15,7 @@ import {getListItemPredicate, MatListItemHarnessBase} from './list-item-harness-
 export class MatActionListHarness extends MatListHarnessBase<
     typeof MatActionListItemHarness, MatActionListItemHarness, ActionListItemHarnessFilters> {
   /** The selector for the host element of a `MatActionList` instance. */
-  static hostSelector = 'mat-action-list';
+  static hostSelector = 'mat-action-list.mat-list';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatActionListHarness` that meets

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

@@ -15,7 +15,7 @@ import {getListItemPredicate, MatListItemHarnessBase} from './list-item-harness-
 export class MatListHarness extends
     MatListHarnessBase<typeof MatListItemHarness, MatListItemHarness, ListItemHarnessFilters> {
   /** The selector for the host element of a `MatList` instance. */
-  static hostSelector = 'mat-list';
+  static hostSelector = '.mat-list:not(mat-action-list):not(mat-nav-list):not(mat-selection-list)';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatListHarness` that meets certain

src/material/list/testing/list-item-harness-base.ts

@@ -32,7 +32,7 @@ export function getListItemPredicate<H extends MatListItemHarnessBase>(
 
 /** Harness for interacting with a list subheader. */
 export class MatSubheaderHarness extends ComponentHarness {
-  static hostSelector = '[mat-subheader], [matSubheader]';
+  static hostSelector = '.mat-subheader';
 
   static with(options: SubheaderHarnessFilters = {}): HarnessPredicate<MatSubheaderHarness> {
     return new HarnessPredicate(MatSubheaderHarness, options)

src/material/list/testing/nav-list-harness.ts

@@ -15,7 +15,7 @@ import {getListItemPredicate, MatListItemHarnessBase} from './list-item-harness-
 export class MatNavListHarness extends MatListHarnessBase<
     typeof MatNavListItemHarness, MatNavListItemHarness, NavListItemHarnessFilters> {
   /** The selector for the host element of a `MatNavList` instance. */
-  static hostSelector = 'mat-nav-list';
+  static hostSelector = '.mat-nav-list';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatNavListHarness` that meets

src/material/list/testing/selection-list-harness.ts

@@ -19,7 +19,7 @@ import {getListItemPredicate, MatListItemHarnessBase} from './list-item-harness-
 export class MatSelectionListHarness extends MatListHarnessBase<
     typeof MatListOptionHarness, MatListOptionHarness, ListOptionHarnessFilters> {
   /** The selector for the host element of a `MatSelectionList` instance. */
-  static hostSelector = 'mat-selection-list';
+  static hostSelector = '.mat-selection-list';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatSelectionListHarness` that meets
@@ -70,7 +70,7 @@ export class MatSelectionListHarness extends MatListHarnessBase<
 /** Harness for interacting with a list option. */
 export class MatListOptionHarness extends MatListItemHarnessBase {
   /** The selector for the host element of a `MatListOption` instance. */
-  static hostSelector = 'mat-list-option';
+  static hostSelector = '.mat-list-option';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatListOptionHarness` that

src/material/progress-bar/testing/progress-bar-harness.ts

@@ -13,7 +13,7 @@ import {ProgressBarHarnessFilters} from './progress-bar-harness-filters';
 /** Harness for interacting with a standard mat-progress-bar in tests. */
 export class MatProgressBarHarness extends ComponentHarness {
   /** The selector for the host element of a `MatProgressBar` instance. */
-  static hostSelector = 'mat-progress-bar';
+  static hostSelector = '.mat-progress-bar';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatProgressBarHarness` that meets

src/material/progress-spinner/testing/progress-spinner-harness.ts

@@ -14,7 +14,7 @@ import {ProgressSpinnerHarnessFilters} from './progress-spinner-harness-filters'
 /** Harness for interacting with a standard mat-progress-spinner in tests. */
 export class MatProgressSpinnerHarness extends ComponentHarness {
   /** The selector for the host element of a `MatProgressSpinner` instance. */
-  static hostSelector = 'mat-progress-spinner,mat-spinner';
+  static hostSelector = '.mat-progress-spinner';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatProgressSpinnerHarness` that

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

@@ -13,7 +13,7 @@ import {RadioButtonHarnessFilters, RadioGroupHarnessFilters} from './radio-harne
 /** Harness for interacting with a standard mat-radio-group in tests. */
 export class MatRadioGroupHarness extends ComponentHarness {
   /** The selector for the host element of a `MatRadioGroup` instance. */
-  static hostSelector = 'mat-radio-group';
+  static hostSelector = '.mat-radio-group';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatRadioGroupHarness` that meets
@@ -156,7 +156,7 @@ export class MatRadioGroupHarness extends ComponentHarness {
 /** Harness for interacting with a standard mat-radio-button in tests. */
 export class MatRadioButtonHarness extends ComponentHarness {
   /** The selector for the host element of a `MatRadioButton` instance. */
-  static hostSelector = 'mat-radio-button';
+  static hostSelector = '.mat-radio-button';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatRadioButtonHarness` that meets

src/material/slide-toggle/testing/slide-toggle-harness.ts

@@ -14,7 +14,7 @@ import {SlideToggleHarnessFilters} from './slide-toggle-harness-filters';
 /** Harness for interacting with a standard mat-slide-toggle in tests. */
 export class MatSlideToggleHarness extends ComponentHarness {
   /** The selector for the host element of a `MatSlideToggle` instance. */
-  static hostSelector = 'mat-slide-toggle';
+  static hostSelector = '.mat-slide-toggle';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatSlideToggleHarness` that meets

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

@@ -13,7 +13,7 @@ import {SliderHarnessFilters} from './slider-harness-filters';
 /** Harness for interacting with a standard mat-slider in tests. */
 export class MatSliderHarness extends ComponentHarness {
   /** The selector for the host element of a `MatSlider` instance. */
-  static hostSelector = 'mat-slider';
+  static hostSelector = '.mat-slider';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatSliderHarness` that meets

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

@@ -17,7 +17,7 @@ export const enum MatToolbarSection {
 
 /** Harness for interacting with a standard mat-toolbar in tests. */
 export class MatToolbarHarness extends ContentContainerComponentHarness<MatToolbarSection> {
-  static hostSelector = 'mat-toolbar';
+  static hostSelector = '.mat-toolbar';
 
   private _getRows = this.locatorForAll(MatToolbarSection.ROW);