Enable input number component to support type='range' attribute (#55583)

* Commit modifies the InputNumber component to allow the 'type' attribute specified by the user to take precedence over the default 'type="number"'. By swapping the order in which attributes are added to the builder, any user-defined 'type' attribute is now respected, enabling the usage of different input types like 'range'.

Previously, the InputNumber component hardcoded the 'type' attribute as 'number', which prevented using it for other input types such as sliders (range inputs).

* Adding a test to the inputNumberTests to ensure the user defined type attribute overrides the default.

* Using the TestRederer to extract attributes and assert the user-defined type override the default

* Retrieving frames with new methodology

* Isolating the correct element to extract attributes from

* Only asserting the type attribute = range

* Isolating input element, atrributes and type attribute correctly

* Improving methodology of handling render tree frames and isolating the input element and attributes

* Ammendments to tests

* Update src/Components/Web/test/Forms/InputNumberTest.cs

Co-authored-by: Mackinnon Buck <[email protected]>

* Update src/Components/Web/test/Forms/InputNumberTest.cs

Co-authored-by: Mackinnon Buck <[email protected]>

* Update src/Components/Web/test/Forms/InputNumberTest.cs

Co-authored-by: Mackinnon Buck <[email protected]>

* re-adding missing tests

* Using helper methods in tests.

* Update src/Components/Web/test/Forms/InputNumberTest.cs

---------

Co-authored-by: Mackinnon Buck <[email protected]>

Author: MattyLeslie

src/Components/Web/src/Forms/InputNumber.cs

@@ -53,8 +53,8 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
     {
         builder.OpenElement(0, "input");
         builder.AddAttribute(1, "step", _stepAttributeValue);
-        builder.AddMultipleAttributes(2, AdditionalAttributes);
-        builder.AddAttribute(3, "type", "number");
+        builder.AddAttribute(2, "type", "number");
+        builder.AddMultipleAttributes(3, AdditionalAttributes);
         builder.AddAttributeIfNotNullOrEmpty(4, "name", NameAttributeValue);
         builder.AddAttributeIfNotNullOrEmpty(5, "class", CssClass);
         builder.AddAttribute(6, "value", CurrentValueAsString);

src/Components/Web/test/Forms/InputNumberTest.cs

@@ -1,10 +1,25 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
+using Microsoft.AspNetCore.Components.Forms.Mapping;
+using Microsoft.AspNetCore.Components.Infrastructure;
+using Microsoft.AspNetCore.Components.RenderTree;
+using Microsoft.AspNetCore.Components.Test.Helpers;
+using Microsoft.Extensions.DependencyInjection;
+
 namespace Microsoft.AspNetCore.Components.Forms;
 
 public class InputNumberTest
 {
+    private readonly TestRenderer _testRenderer;
+
+    public InputNumberTest()
+    {
+        var services = new ServiceCollection();
+        services.AddLogging();
+        _testRenderer = new TestRenderer(services.BuildServiceProvider());
+    }
+
     [Fact]
     public async Task ValidationErrorUsesDisplayAttributeName()
     {
@@ -49,6 +64,43 @@ public async Task InputElementIsAssignedSuccessfully()
         Assert.NotNull(inputSelectComponent.Element);
     }
 
+    [Fact]
+    public async Task UserDefinedTypeAttributeOverridesDefault()
+    {
+        // Arrange
+        var model = new TestModel();
+        var hostComponent = new TestInputHostComponent<int, TestInputNumberComponent>
+        {
+            EditContext = new EditContext(model),
+            ValueExpression = () => model.SomeNumber,
+            AdditionalAttributes = new Dictionary<string, object>
+            {
+                { "type", "range" }  // User-defined 'type' attribute to override default
+            }
+        };
+
+        // Act
+        var componentId = await RenderAndGetTestInputNumberComponentIdAsync(hostComponent);
+
+        // Retrieve the render tree frames and extract attributes using helper methods
+        var frames = _testRenderer.GetCurrentRenderTreeFrames(componentId);
+
+        var typeAttributeFrame = frames.Array.Single(frame =>
+            frame.FrameType == RenderTreeFrameType.Attribute &&
+            frame.AttributeName == "type");
+
+        // Assert
+        Assert.Equal("range", typeAttributeFrame.AttributeValue);
+    }
+
+    private async Task<int> RenderAndGetTestInputNumberComponentIdAsync(TestInputHostComponent<int, TestInputNumberComponent> hostComponent)
+    {
+        var hostComponentId = _testRenderer.AssignRootComponentId(hostComponent);
+        await _testRenderer.RenderRootComponentAsync(hostComponentId);
+        var batch = _testRenderer.Batches.Single();
+        return batch.GetComponentFrames<TestInputNumberComponent>().Single().ComponentId;
+    }
+
     private class TestModel
     {
         public int SomeNumber { get; set; }