bug(MatInputHarness): Numeric values are not supported on <input type="number" />

[undsoft]

Reproduction

Use StackBlitz to reproduce your issue:
https://stackblitz.com/edit/harness-issue-7whdxy?devtoolsheight=33&file=src/app/button-harness-example.spec.ts

Steps to reproduce:

1. Have an input with type = "number"
2. Try to set input value to a numeric value via matInputHarness.setValue(24)
   or try to read a numeric value via matInputHarness.getValue().

Expected Behavior

I can read and set values as numbers (not strings), as numbers would appear in FormControl when user interacts with <input type="number">.

Actual Behavior

I can only set and read values as strings.

Environment

• Angular: 12
• CDK/Material: 12
• Browser(s): Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu

[jelbourn]

It would be technically possible to return string | number here, but I'm not sure if that's the most ergonomic API for the majority of cases (since I suspect values are string more often than numbers). It would also be a breaking change at this point. If we go that route, we'd also probably want to include other types like Date for <input type="date">, which IMO makes interacting with the harness more cumbersome in the common case.

I'll leave this open for other people to chime in, but changing this would be a pretty low priority.

[undsoft]

Did a bit more testing.
Both in browser (Firefox) and in jsdom, while it's possible to try to assign number to a value of HTMLInputElement, reading it still results in a string:

input.value = 2332 as any;
console.log(input.value, typeof input.value);
// output is "2332" string

So, it looks like it's something in reactive forms that is adding support for other types.
It's unfortunate that behavior in tests does not correspond to what's happening in browser. I can see some people getting confused by it.