fix(cdk/testing): entering negative number values not working with reactive forms (#24656)

We were entering negative values into number inputs character-by-character which doesn't appear to work with Angular's reactive forms. These changes switch to entering the entire value all at once.

Fixes #24414.

(cherry picked from commit 5b4bcf5)

Author: crisbeto

src/cdk/testing/testbed/fake-events/type-in-element.ts

@@ -97,7 +97,7 @@ export function typeInElement(element: HTMLElement, ...modifiersAndKeys: any[])
   const enterValueIncrementally =
     inputType === 'number'
       ? // The value can be set character by character in number inputs if it doesn't have any decimals.
-        keys.every(key => key.key !== '.' && key.keyCode !== PERIOD)
+        keys.every(key => key.key !== '.' && key.key !== '-' && key.keyCode !== PERIOD)
       : incrementalInputTypes.has(inputType);
 
   triggerFocus(element);

src/cdk/testing/tests/cross-environment.spec.ts

@@ -465,6 +465,15 @@ export function crossEnvironmentSpecs(
       expect(await value.text()).toBe('Number value: 123.456');
     });
 
+    it('should be able to set a negative input value on a reactive form control', async () => {
+      const input = await harness.numberInput();
+      const value = await harness.numberInputValue();
+      await input.sendKeys('-123');
+
+      expect(await input.getProperty<string>('value')).toBe('-123');
+      expect(await value.text()).toBe('Number value: -123');
+    });
+
     it('should be able to retrieve dimensions', async () => {
       const dimensions = await (await harness.title()).getDimensions();
       expect(dimensions).toEqual(jasmine.objectContaining({height: 100, width: 200}));