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.

Author: devversion

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

@@ -12,7 +12,7 @@ import {InputHarnessFilters} from './input-harness-filters';
 
 /** Harness for interacting with a standard Material inputs in tests. */
 export class MatInputHarness extends MatFormFieldControlHarness {
-  static hostSelector = '[matInput]';
+  static hostSelector = '.mat-input-element';
 
   /**
    * 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(4);
   });
 
   it('should load input with specific id', async () => {
@@ -49,48 +49,55 @@ 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(4);
     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');
   });
 
   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(4);
     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('');
   });
 
   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(4);
     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('');
   });
 
   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(4);
     expect(await inputs[0].getValue()).toBe('Sushi');
     expect(await inputs[1].getValue()).toBe('');
+    expect(await inputs[3].getValue()).toBe('');
 
     await inputs[0].setValue('');
     await inputs[2].setValue('new-value');
+    await inputs[3].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');
   });
 
   it('should be able to get disabled state', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(3);
+    expect(inputs.length).toBe(4);
 
     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);
 
     fixture.componentInstance.disabled = true;
 
@@ -99,11 +106,12 @@ 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(4);
 
     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);
 
     fixture.componentInstance.readonly = true;
 
@@ -112,11 +120,12 @@ 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(4);
 
     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);
 
     fixture.componentInstance.required = true;
 
@@ -125,18 +134,20 @@ 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(4);
     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');
   });
 
   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(4);
     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');
 
     fixture.componentInstance.inputType = 'text';
 
@@ -180,6 +191,10 @@ 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>
   `
 })
 class InputHarnessTest {