diff --git a/src/material/input/testing/input-harness.ts b/src/material/input/testing/input-harness.ts index ce982f6119e0..c74ea2476bae 100644 --- a/src/material/input/testing/input-harness.ts +++ b/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 diff --git a/src/material/input/testing/shared.spec.ts b/src/material/input/testing/shared.spec.ts index 058720daf0a7..0a405f88520d 100644 --- a/src/material/input/testing/shared.spec.ts +++ b/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() { + + + + + + + + + + + + + ` }) class InputHarnessTest {