fix(material/input): input harness not matching matNativeControl (#18221)

* fix(material/input): input harness selector not matching `matNativeControl`

The input harness currently only matches `[matInput]`, but does
not match `[matNativeControl]` usages. Since both names, resolve
to the same directive, we should ensure that the harness works for both
possible usages.

* fixup! fix(material/input): input harness selector not matching `matNativeControl`

Address feedback

* fixup! fixup! fix(material/input): input harness selector not matching `matNativeControl`

Address feedback

(cherry picked from commit fe0e963)

Author: devversion

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

@@ -12,7 +12,10 @@ import {InputHarnessFilters} from './input-harness-filters';
 
 /** Harness for interacting with a standard Material inputs in tests. */
 export class MatInputHarness extends MatFormFieldControlHarness {
-  static hostSelector = '[matInput]';
+  // TODO: We do not want to handle `select` elements with `matNativeControl` because
+  // not all methods of this harness work reasonably for native select elements.
+  // For more details. See: https://github.com/angular/components/pull/18221.
+  static hostSelector = '[matInput], input[matNativeControl], textarea[matNativeControl]';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a `MatInputHarness` that meets

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

@@ -28,7 +28,7 @@ export function runHarnessTests(
 
   it('should load all input harnesses', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(3);
+    expect(inputs.length).toBe(5);
   });
 
   it('should load input with specific id', async () => {
@@ -49,48 +49,62 @@ export function runHarnessTests(
 
   it('should be able to get id of input', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(3);
+    expect(inputs.length).toBe(5);
     expect(await inputs[0].getId()).toMatch(/mat-input-\d+/);
     expect(await inputs[1].getId()).toMatch(/mat-input-\d+/);
     expect(await inputs[2].getId()).toBe('myTextarea');
+    expect(await inputs[3].getId()).toBe('nativeControl');
+    expect(await inputs[4].getId()).toMatch(/mat-input-\d+/);
   });
 
   it('should be able to get name of input', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(3);
+    expect(inputs.length).toBe(5);
     expect(await inputs[0].getName()).toBe('favorite-food');
     expect(await inputs[1].getName()).toBe('');
     expect(await inputs[2].getName()).toBe('');
+    expect(await inputs[3].getName()).toBe('');
+    expect(await inputs[4].getName()).toBe('');
   });
 
   it('should be able to get value of input', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(3);
+    expect(inputs.length).toBe(5);
     expect(await inputs[0].getValue()).toBe('Sushi');
     expect(await inputs[1].getValue()).toBe('');
     expect(await inputs[2].getValue()).toBe('');
+    expect(await inputs[3].getValue()).toBe('');
+    expect(await inputs[4].getValue()).toBe('');
   });
 
   it('should be able to set value of input', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(3);
+    expect(inputs.length).toBe(5);
     expect(await inputs[0].getValue()).toBe('Sushi');
     expect(await inputs[1].getValue()).toBe('');
+    expect(await inputs[3].getValue()).toBe('');
+    expect(await inputs[4].getValue()).toBe('');
 
     await inputs[0].setValue('');
     await inputs[2].setValue('new-value');
+    await inputs[3].setValue('new-value');
+    await inputs[4].setValue('new-value');
 
     expect(await inputs[0].getValue()).toBe('');
     expect(await inputs[2].getValue()).toBe('new-value');
+    expect(await inputs[3].getValue()).toBe('new-value');
+    expect(await inputs[4].getValue()).toBe('new-value');
   });
 
   it('should be able to get disabled state', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(3);
+    expect(inputs.length).toBe(5);
 
     expect(await inputs[0].isDisabled()).toBe(false);
     expect(await inputs[1].isDisabled()).toBe(false);
     expect(await inputs[2].isDisabled()).toBe(false);
+    expect(await inputs[3].isDisabled()).toBe(false);
+    expect(await inputs[4].isDisabled()).toBe(false);
 
     fixture.componentInstance.disabled = true;
 
@@ -99,11 +113,13 @@ export function runHarnessTests(
 
   it('should be able to get readonly state', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(3);
+    expect(inputs.length).toBe(5);
 
     expect(await inputs[0].isReadonly()).toBe(false);
     expect(await inputs[1].isReadonly()).toBe(false);
     expect(await inputs[2].isReadonly()).toBe(false);
+    expect(await inputs[3].isReadonly()).toBe(false);
+    expect(await inputs[4].isReadonly()).toBe(false);
 
     fixture.componentInstance.readonly = true;
 
@@ -112,11 +128,13 @@ export function runHarnessTests(
 
   it('should be able to get required state', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(3);
+    expect(inputs.length).toBe(5);
 
     expect(await inputs[0].isRequired()).toBe(false);
     expect(await inputs[1].isRequired()).toBe(false);
     expect(await inputs[2].isRequired()).toBe(false);
+    expect(await inputs[3].isRequired()).toBe(false);
+    expect(await inputs[4].isRequired()).toBe(false);
 
     fixture.componentInstance.required = true;
 
@@ -125,18 +143,22 @@ export function runHarnessTests(
 
   it('should be able to get placeholder of input', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(3);
+    expect(inputs.length).toBe(5);
     expect(await inputs[0].getPlaceholder()).toBe('Favorite food');
     expect(await inputs[1].getPlaceholder()).toBe('');
     expect(await inputs[2].getPlaceholder()).toBe('Leave a comment');
+    expect(await inputs[3].getPlaceholder()).toBe('Native control');
+    expect(await inputs[4].getPlaceholder()).toBe('');
   });
 
   it('should be able to get type of input', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(3);
+    expect(inputs.length).toBe(5);
     expect(await inputs[0].getType()).toBe('text');
     expect(await inputs[1].getType()).toBe('number');
     expect(await inputs[2].getType()).toBe('textarea');
+    expect(await inputs[3].getType()).toBe('text');
+    expect(await inputs[4].getType()).toBe('textarea');
 
     fixture.componentInstance.inputType = 'text';
 
@@ -180,6 +202,24 @@ function getActiveElementTagName() {
     <mat-form-field>
       <textarea id="myTextarea" matInput placeholder="Leave a comment"></textarea>
     </mat-form-field>
+
+    <mat-form-field>
+      <input matNativeControl placeholder="Native control" id="nativeControl">
+    </mat-form-field>
+
+    <mat-form-field>
+      <textarea matNativeControl></textarea>
+    </mat-form-field>
+
+    <mat-form-field>
+      <!--
+        Select native controls should not be handled as part of the input harness. We add this
+        to assert that the harness does not accidentally match it.
+      -->
+      <select matNativeControl>
+        <option value="first">First</option>
+      </select>
+    </mat-form-field>
   `
 })
 class InputHarnessTest {