fix(input/testing): unable to set the value of inputs that don't respond to typing (#18812)

The `setValue` method of the input harness is set up so that it types out the value in the input. This won't work for input that don't respond to typing (e.g. `color`). These changes add an extra call that also sets the `value` property of the input, on top of typing into it.

Fixes #18790.

Author: crisbeto

src/cdk/testing/protractor/protractor-element.ts

@@ -147,6 +147,10 @@ export class ProtractorElement implements TestElement {
     return browser.executeScript(`return arguments[0][arguments[1]]`, this.element, name);
   }
 
+  async setInputValue(value: string): Promise<void> {
+    return browser.executeScript(`arguments[0].value = arguments[1]`, this.element, value);
+  }
+
   async matchesSelector(selector: string): Promise<boolean> {
       return browser.executeScript(`
           return (Element.prototype.matches ||

src/cdk/testing/test-element.ts

@@ -113,6 +113,12 @@ export interface TestElement {
   /** Gets the value of a property of an element. */
   getProperty(name: string): Promise<any>;
 
+  /**
+   * Sets the value of a property of an input.
+   * @breaking-change 11.0.0 To become a required method.
+   */
+  setInputValue?(value: string): Promise<void>;
+
   /** Checks whether this element matches the given selector. */
   matchesSelector(selector: string): Promise<boolean>;
 

src/cdk/testing/testbed/unit-test-element.ts

@@ -153,6 +153,11 @@ export class UnitTestElement implements TestElement {
     return (this.element as any)[name];
   }
 
+  async setInputValue(value: string): Promise<void> {
+    await this._stabilize();
+    (this.element as any).value = value;
+  }
+
   async matchesSelector(selector: string): Promise<boolean> {
     await this._stabilize();
     const elementPrototype = Element.prototype as any;

src/cdk/testing/tests/protractor.e2e.spec.ts

@@ -283,6 +283,14 @@ describe('ProtractorHarnessEnvironment', () => {
       expect(await input.getProperty('value')).toBe('Hello');
     });
 
+    it('should be able to set the value of an input', async () => {
+      const input = await harness.input();
+
+        // @breaking-change 11.0.0 Remove non-null assertion once `setInputValue` is required.
+      await input.setInputValue!('hello');
+      expect(await input.getProperty('value')).toBe('hello');
+    });
+
     it('should check if selector matches', async () => {
       const button = await harness.button();
       expect(await button.matchesSelector('button:not(.fake-class)')).toBe(true);

src/cdk/testing/tests/testbed.spec.ts

@@ -368,6 +368,14 @@ describe('TestbedHarnessEnvironment', () => {
       expect(await input.getProperty('value')).toBe('Hello');
     });
 
+    it('should be able to set the value of an input', async () => {
+      const input = await harness.input();
+
+      // @breaking-change 11.0.0 Remove non-null assertion once `setInputValue` is required.
+      await input.setInputValue!('hello');
+      expect(await input.getProperty('value')).toBe('hello');
+    });
+
     it('should check if selector matches', async () => {
       const button = await harness.button();
       expect(await button.matchesSelector('button:not(.fake-class)')).toBe(true);

src/material/input/testing/BUILD.bazel

@@ -26,6 +26,7 @@ ng_test_library(
     srcs = ["shared.spec.ts"],
     deps = [
         ":testing",
+        "//src/cdk/platform",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material/input",

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

@@ -111,5 +111,13 @@ export class MatInputHarness extends MatFormFieldControlHarness {
     if (newValue) {
       await inputEl.sendKeys(newValue);
     }
+
+    // Some input types won't respond to key presses (e.g. `color`) so to be sure that the
+    // value is set, we also set the property after the keyboard sequence. Note that we don't
+    // want to do it before, because it can cause the value to be entered twice.
+    // @breaking-change 11.0.0 Remove non-null assertion once `setInputValue` is required.
+    if (inputEl.setInputValue) {
+      await inputEl.setInputValue(newValue);
+    }
   }
 }

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

@@ -4,6 +4,7 @@ import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
+import {getSupportedInputTypes} from '@angular/cdk/platform';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MatInputHarness} from './input-harness';
 
@@ -28,7 +29,7 @@ export function runHarnessTests(
 
   it('should load all input harnesses', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(5);
+    expect(inputs.length).toBe(6);
   });
 
   it('should load input with specific id', async () => {
@@ -49,7 +50,7 @@ export function runHarnessTests(
 
   it('should be able to get id of input', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(5);
+    expect(inputs.length).toBe(6);
     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');
@@ -59,7 +60,7 @@ export function runHarnessTests(
 
   it('should be able to get name of input', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(5);
+    expect(inputs.length).toBe(6);
     expect(await inputs[0].getName()).toBe('favorite-food');
     expect(await inputs[1].getName()).toBe('');
     expect(await inputs[2].getName()).toBe('');
@@ -69,7 +70,7 @@ export function runHarnessTests(
 
   it('should be able to get value of input', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(5);
+    expect(inputs.length).toBe(6);
     expect(await inputs[0].getValue()).toBe('Sushi');
     expect(await inputs[1].getValue()).toBe('');
     expect(await inputs[2].getValue()).toBe('');
@@ -79,7 +80,7 @@ export function runHarnessTests(
 
   it('should be able to set value of input', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(5);
+    expect(inputs.length).toBe(6);
     expect(await inputs[0].getValue()).toBe('Sushi');
     expect(await inputs[1].getValue()).toBe('');
     expect(await inputs[3].getValue()).toBe('');
@@ -98,7 +99,7 @@ export function runHarnessTests(
 
   it('should be able to get disabled state', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(5);
+    expect(inputs.length).toBe(6);
 
     expect(await inputs[0].isDisabled()).toBe(false);
     expect(await inputs[1].isDisabled()).toBe(false);
@@ -113,7 +114,7 @@ export function runHarnessTests(
 
   it('should be able to get readonly state', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(5);
+    expect(inputs.length).toBe(6);
 
     expect(await inputs[0].isReadonly()).toBe(false);
     expect(await inputs[1].isReadonly()).toBe(false);
@@ -128,7 +129,7 @@ export function runHarnessTests(
 
   it('should be able to get required state', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(5);
+    expect(inputs.length).toBe(6);
 
     expect(await inputs[0].isRequired()).toBe(false);
     expect(await inputs[1].isRequired()).toBe(false);
@@ -143,7 +144,7 @@ export function runHarnessTests(
 
   it('should be able to get placeholder of input', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(5);
+    expect(inputs.length).toBe(6);
     expect(await inputs[0].getPlaceholder()).toBe('Favorite food');
     expect(await inputs[1].getPlaceholder()).toBe('');
     expect(await inputs[2].getPlaceholder()).toBe('Leave a comment');
@@ -153,7 +154,7 @@ export function runHarnessTests(
 
   it('should be able to get type of input', async () => {
     const inputs = await loader.getAllHarnesses(inputHarness);
-    expect(inputs.length).toBe(5);
+    expect(inputs.length).toBe(6);
     expect(await inputs[0].getType()).toBe('text');
     expect(await inputs[1].getType()).toBe('number');
     expect(await inputs[2].getType()).toBe('textarea');
@@ -180,6 +181,18 @@ export function runHarnessTests(
     await input.blur();
     expect(getActiveElementTagName()).not.toBe('input');
   });
+
+  it('should be able to set the value of a control that cannot be typed in', async () => {
+    // We can't test this against browsers that don't support color inputs.
+    if (!getSupportedInputTypes().has('color')) {
+      return;
+    }
+
+    const input = await loader.getHarness(inputHarness.with({selector: '#colorControl'}));
+    expect(await input.getValue()).toBe('#000000'); // Color inputs default to black.
+    await input.setValue('#00ff00');
+    expect((await input.getValue()).toLowerCase()).toBe('#00ff00');
+  });
 }
 
 function getActiveElementTagName() {
@@ -220,6 +233,10 @@ function getActiveElementTagName() {
         <option value="first">First</option>
       </select>
     </mat-form-field>
+
+    <mat-form-field>
+      <input matNativeControl placeholder="Color control" id="colorControl" type="color">
+    </mat-form-field>
   `
 })
 class InputHarnessTest {

tools/public_api_guard/cdk/testing.d.ts

@@ -120,6 +120,7 @@ export interface TestElement {
     matchesSelector(selector: string): Promise<boolean>;
     sendKeys(...keys: (string | TestKey)[]): Promise<void>;
     sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;
+    setInputValue?(value: string): Promise<void>;
     text(): Promise<string>;
 }
 

tools/public_api_guard/cdk/testing/protractor.d.ts

@@ -15,6 +15,7 @@ export declare class ProtractorElement implements TestElement {
     matchesSelector(selector: string): Promise<boolean>;
     sendKeys(...keys: (string | TestKey)[]): Promise<void>;
     sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;
+    setInputValue(value: string): Promise<void>;
     text(): Promise<string>;
 }
 

tools/public_api_guard/cdk/testing/testbed.d.ts

@@ -32,5 +32,6 @@ export declare class UnitTestElement implements TestElement {
     matchesSelector(selector: string): Promise<boolean>;
     sendKeys(...keys: (string | TestKey)[]): Promise<void>;
     sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;
+    setInputValue(value: string): Promise<void>;
     text(): Promise<string>;
 }