[FluentIcon] Add Unit Tests (#1140)

* Add Icons Tests

* Fix UnitTest

* Add Exception Test

* Add Missing Test

tests/Core/Extensions/SampleIcons.cs

@@ -8,7 +8,7 @@ public static class SampleIcons
 
     public static readonly Icon PresenceAvailable = new Samples.PresenceAvailable();
 
-    private class Samples
+    internal class Samples
     {
         internal class Info : Icon { public Info() : base("Info", IconVariant.Filled, IconSize.Size24, "<path d=\"M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z\"/>") { } }
 

tests/Core/Icons/FluentIconTests.FluentIcon_ButtonStart.verified.razor.html

@@ -0,0 +1,5 @@
+
+<fluent-button type="button" appearance="neutral" blazor:onclick="1" b-x1200685t0="" blazor:elementreference="xxx">
+  <svg slot="start" style="width: 24px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="2">
+    <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+  </svg>My Button</fluent-button>

tests/Core/Icons/FluentIconTests.FluentIcon_Color.verified.razor.html

@@ -0,0 +1,4 @@
+
+<svg style="width: 24px; fill: var(--info);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>

tests/Core/Icons/FluentIconTests.FluentIcon_CustomColor.verified.razor.html

@@ -0,0 +1,4 @@
+
+<svg style="width: 24px; fill: #ff0000;" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>

tests/Core/Icons/FluentIconTests.FluentIcon_Default.verified.razor.html

@@ -0,0 +1,4 @@
+
+<svg style="width: 24px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>

tests/Core/Icons/FluentIconTests.FluentIcon_Icon_FromImage.verified.razor.html

@@ -0,0 +1,4 @@
+
+<div style="width: 24px; fill: var(--accent-fill-rest); display: inline-block;" blazor:onclick="1">
+  <img src="./logo.png" style="width: 100%;">
+</div>

tests/Core/Icons/FluentIconTests.FluentIcon_Icon_ToMarkup.verified.razor.html

@@ -0,0 +1,6 @@
+
+<div>
+  <svg viewBox="0 0 24 24" fill="var(--accent-fill-rest)" style="background-color: var(--neutral-layer-1); width: 24px;" aria-hidden="true">
+    <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+  </svg>
+</div>

tests/Core/Icons/FluentIconTests.FluentIcon_Icon_ToMarkupColor.verified.razor.html

@@ -0,0 +1,6 @@
+
+<div>
+  <svg viewBox="0 0 24 24" fill="blue" style="background-color: var(--neutral-layer-1); width: 24px;" aria-hidden="true">
+    <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+  </svg>
+</div>

tests/Core/Icons/FluentIconTests.FluentIcon_Icon_ToMarkupSize.verified.razor.html

@@ -0,0 +1,6 @@
+
+<div>
+  <svg viewBox="0 0 24 24" fill="var(--accent-fill-rest)" style="background-color: var(--neutral-layer-1); width: 100px;" aria-hidden="true">
+    <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+  </svg>
+</div>

tests/Core/Icons/FluentIconTests.FluentIcon_Icon_WithColorRed.verified.razor.html

@@ -0,0 +1,4 @@
+
+<svg style="width: 24px; fill: red;" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>

tests/Core/Icons/FluentIconTests.FluentIcon_Icon_WithColorRed_OverridenByColor.verified.razor.html

@@ -0,0 +1,4 @@
+
+<svg style="width: 24px; fill: var(--info);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>

tests/Core/Icons/FluentIconTests.FluentIcon_Icon_WithColorSuccess.verified.razor.html

@@ -0,0 +1,4 @@
+
+<svg style="width: 24px; fill: var(--success);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>

tests/Core/Icons/FluentIconTests.FluentIcon_SlotTitle.verified.razor.html

@@ -0,0 +1,5 @@
+
+<svg slot="start" style="width: 24px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <title>My title</title>
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>

tests/Core/Icons/FluentIconTests.FluentIcon_Type.verified.razor.html

@@ -0,0 +1,4 @@
+
+<svg style="width: 24px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>

tests/Core/Icons/FluentIconTests.FluentIcon_Type_Color.verified.razor.html

@@ -0,0 +1,4 @@
+
+<svg style="width: 24px; fill: var(--info);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>

tests/Core/Icons/FluentIconTests.FluentIcon_Width.verified.razor.html

@@ -0,0 +1,4 @@
+
+<svg style="width: 100px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>

tests/Core/Icons/FluentIconTests.razor

@@ -0,0 +1,206 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Tests.Extensions
+@using Xunit;
+@inherits TestContext
+@code
+{
+    [Fact]
+    public void FluentIcon_Default()
+    {
+        // Arrange && Act
+        var icon = new SampleIcons.Samples.Info();
+        var cut = Render(@<FluentIcon Value="@icon" />);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentIcon_Type()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentIcon Icon="SampleIcons.Samples.Info" />);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentIcon_SlotTitle()
+    {
+        // Arrange && Act
+        var icon = new SampleIcons.Samples.Info();
+        var cut = Render(@<FluentIcon Value="@icon" Slot="start" Title="My title" />);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentIcon_Color()
+    {
+        // Arrange && Act
+        var icon = new SampleIcons.Samples.Info();
+        var cut = Render(@<FluentIcon Value="@icon" Color="Color.Info" />);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentIcon_Type_Color()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentIcon Icon="SampleIcons.Samples.Info" Color="Color.Info" />);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentIcon_CustomColor()
+    {
+        // Arrange && Act
+        var icon = new SampleIcons.Samples.Info();
+        var cut = Render(@<FluentIcon Value="@icon" Color="Color.Custom" CustomColor="#ff0000" />);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentIcon_CustomColor_RequiresColorAttribute()
+    {
+        Assert.Throws<ArgumentException>(() =>
+        {
+            // Arrange && Act
+            var icon = new SampleIcons.Samples.Info();
+            var cut = Render(@<FluentIcon Value="@icon" CustomColor="#ff0000" />);
+
+            // Assert an exception because Color=Color.Custom is required
+        });
+    }
+
+    [Fact]
+    public void FluentIcon_Width()
+    {
+        // Arrange && Act
+        var icon = new SampleIcons.Samples.Info();
+        var cut = Render(@<FluentIcon Value="@icon" Width="100px" />);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentIcon_OnClick()
+    {
+        var isClicked = false;
+
+        // Arrange
+        var icon = new SampleIcons.Samples.Info();
+        var cut = Render(@<FluentIcon Value="@icon" OnClick="@(e => isClicked = true)" />);
+
+        // Act
+        cut.Find("svg").Click();
+
+        // Assert
+        Assert.True(isClicked);
+    }
+
+    [Fact]
+    public void FluentIcon_ButtonStart()
+    {
+        // Arrange && Act
+        var icon = new SampleIcons.Samples.Info();
+        var cut = Render(@<FluentButton IconStart="@icon">My Button</FluentButton>);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentIcon_Icon_FromImage()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentIcon Value="@(Icon.FromImageUrl("./logo.png"))" />);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentIcon_Icon_FromEmptyImage()
+    {
+        // Arrange && Act
+        var icon = new IconFromImage();
+
+        // Assert
+        Assert.Empty(icon.Content);
+
+    }
+    [Fact]
+    public void FluentIcon_Icon_WithColorRed()
+    {
+        // Arrange && Act
+        var icon = new SampleIcons.Samples.Info();
+        var cut = Render(@<FluentIcon Value="@(icon.WithColor("red"))" />);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentIcon_Icon_WithColorRed_OverridenByColor()
+    {
+        // Arrange && Act
+        var icon = new SampleIcons.Samples.Info();
+        var cut = Render(@<FluentIcon Value="@(icon.WithColor("red"))" Color="Color.Info" />);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentIcon_Icon_WithColorSuccess()
+    {
+        // Arrange && Act
+        var icon = new SampleIcons.Samples.Info();
+        var cut = Render(@<FluentIcon Value="@(icon.WithColor(Color.Success))" />);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentIcon_Icon_ToMarkup()
+    {
+        // Arrange && Act
+        var icon = new SampleIcons.Samples.Info();
+        var cut = Render(@<div>@icon.ToMarkup()</div>);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentIcon_Icon_ToMarkupSize()
+    {
+        // Arrange && Act
+        var icon = new SampleIcons.Samples.Info();
+        var cut = Render(@<div>@icon.ToMarkup(size: "100px")</div>);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentIcon_Icon_ToMarkupColor()
+    {
+        // Arrange && Act
+        var icon = new SampleIcons.Samples.Info();
+        var cut = Render(@<div>@icon.ToMarkup(color: "blue")</div>);
+
+        // Assert
+        cut.Verify();
+    }
+}