Add Id to anchor and add test (#1278)

microsoft · Jan 8, 2024 · 8b65007 · 8b65007
1 parent 6567ef5
commit 8b65007
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 17 deletions.
diff --git a/src/Core/Components/Anchor/FluentAnchor.razor b/src/Core/Components/Anchor/FluentAnchor.razor
@@ -1,6 +1,7 @@
 @namespace Microsoft.FluentUI.AspNetCore.Components
 @inherits FluentComponentBase
 <fluent-anchor @ref=Element
+               id=@Id
 			   class=@Class
 			   style=@Style
 			   download=@Download

diff --git a/tests/Core/Anchor/FluentAnchorTests.FluentAnchor_IdAttribute.verified.razor.html b/tests/Core/Anchor/FluentAnchorTests.FluentAnchor_IdAttribute.verified.razor.html
@@ -0,0 +1,4 @@
+
+<fluent-anchor id="xxx" href="https://www.fluentui-blazor.net" appearance="neutral" blazor:onclick="1" blazor:elementreference="xxx">
+  My Anchor
+</fluent-anchor>
diff --git a/tests/Core/Anchor/FluentAnchorTests.cs b/tests/Core/Anchor/FluentAnchorTests.cs
@@ -4,20 +4,20 @@
 
 namespace Microsoft.FluentUI.AspNetCore.Components.Tests.Anchor;
 
-public class FluentAnchorTests : TestBase
+public partial class FluentAnchorTests : TestContext
 {
     private const string FluentAnchorRazorJs = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Anchor/FluentAnchor.razor.js";
 
     public FluentAnchorTests()
     {
-        TestContext.JSInterop.SetupModule(FluentAnchorRazorJs);
+        JSInterop.SetupModule(FluentAnchorRazorJs);
     }
 
     [Fact]
     public void FluentAnchor_AttributesDefaultValues()
     {
         // Arrange
-        var cut = TestContext.RenderComponent<FluentAnchor>(parameters =>
+        var cut = RenderComponent<FluentAnchor>(parameters =>
         {
             parameters.AddChildContent("click me!");
         });
@@ -32,7 +32,7 @@ public void FluentAnchor_AttributesDefaultValues()
     public void FluentAnchor_DownloadAttribute(string download)
     {
         // Arrange && Act
-        var cut = TestContext.RenderComponent<FluentAnchor>(parameters =>
+        var cut = RenderComponent<FluentAnchor>(parameters =>
         {
             parameters.Add(p => p.Href, "https://fast.design");
             parameters.Add(p => p.Download, download);
@@ -50,7 +50,7 @@ public void FluentAnchor_DownloadAttribute(string download)
     public void FluentAnchor_HrefAttribute(string url, string suffix)
     {
         // Arrange && Act
-        var cut = TestContext.RenderComponent<FluentAnchor>(parameters =>
+        var cut =  RenderComponent<FluentAnchor>(parameters =>
         {
             parameters.Add(p => p.Href, url);
             parameters.AddChildContent("click me!");
@@ -66,7 +66,7 @@ public void FluentAnchor_HrefAttribute(string url, string suffix)
     public void FluentAnchor_HrefLangAttribute(string lang)
     {
         // Arrange
-        var cut = TestContext.RenderComponent<FluentAnchor>(
+        var cut = RenderComponent<FluentAnchor>(
             parameters => parameters
                 .Add(p => p.Hreflang, lang)
                 .Add(p => p.Href, "https://fast.design")
@@ -82,7 +82,7 @@ public void FluentAnchor_HrefLangAttribute(string lang)
     public void FluentAnchor_PingAttribute(string ping, string suffix)
     {
         // Arrange
-        var cut = TestContext.RenderComponent<FluentAnchor>(
+        var cut = RenderComponent<FluentAnchor>(
             parameters => parameters
                 .Add(p => p.Ping, ping)
                 .Add(p => p.Href, "https://fast.design")
@@ -98,7 +98,7 @@ public void FluentAnchor_PingAttribute(string ping, string suffix)
     public void FluentAnchor_ReferrerPolicyAttribute(string referrerPolicy)
     {
         // Arrange
-        var cut = TestContext.RenderComponent<FluentAnchor>(
+        var cut = RenderComponent<FluentAnchor>(
             parameters => parameters
                 .Add(p => p.Referrerpolicy, referrerPolicy)
                 .Add(p => p.Href, "https://fast.design")
@@ -114,7 +114,7 @@ public void FluentAnchor_ReferrerPolicyAttribute(string referrerPolicy)
     public void FluentAnchor_RelAttribute(string rel)
     {
         // Arrange
-        var cut = TestContext.RenderComponent<FluentAnchor>(
+        var cut = RenderComponent<FluentAnchor>(
             parameters => parameters
                 .Add(p => p.Rel, rel)
                 .Add(p => p.Href, "https://fast.design")
@@ -136,7 +136,7 @@ public void FluentAnchor_TargetAttribute(string target)
         IRenderedComponent<FluentAnchor>? cut = null;
         Action action = () =>
         {
-            cut = TestContext.RenderComponent<FluentAnchor>(
+            cut = RenderComponent<FluentAnchor>(
                 parameters => parameters
                     .Add(p => p.Target, target)
                     .Add(p => p.Href, "https://fast.design")
@@ -161,7 +161,7 @@ public void FluentAnchor_TargetAttribute(string target)
     public void FluentAnchor_TypeAttribute(string type, string suffix)
     {
         // Arrange
-        var cut = TestContext.RenderComponent<FluentAnchor>(
+        var cut = RenderComponent<FluentAnchor>(
             parameters => parameters
                 .Add(p => p.Type, type)
                 .Add(p => p.Href, "https://fast.design")
@@ -182,7 +182,7 @@ public void FluentAnchor_TypeAttribute(string type, string suffix)
     public void FluentAnchor_AppearanceAttribute(Appearance appearance)
     {
         // Arrange
-        var cut = TestContext.RenderComponent<FluentAnchor>(
+        var cut = RenderComponent<FluentAnchor>(
             parameters => parameters
                 .Add(p => p.Appearance, appearance)
                 .Add(p => p.Href, "https://fast.design")
@@ -196,7 +196,7 @@ public void FluentAnchor_AppearanceAttribute(Appearance appearance)
     public void FluentAnchor_Without_ChildContent()
     {
         // Arrange
-        var cut = TestContext.RenderComponent<FluentAnchor>();
+        var cut = RenderComponent<FluentAnchor>();
 
         // Assert
         cut.Verify();
@@ -206,7 +206,7 @@ public void FluentAnchor_Without_ChildContent()
     public void FluentAnchor_WithAdditionalCSSClass()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAnchor>(
+        var cut = RenderComponent<FluentAnchor>(
             parameters => parameters
                 .Add(p => p.Href, "https://fast.design")
                 .Add(p => p.Class, "additional-class")
@@ -220,7 +220,7 @@ public void FluentAnchor_WithAdditionalCSSClass()
     public void FluentAnchor_WithAdditionalStyle()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAnchor>(
+        var cut = RenderComponent<FluentAnchor>(
             parameters => parameters
                 .Add(p => p.Href, "https://fast.design")
                 .Add(p => p.Style, "background-color: black;")
@@ -234,7 +234,7 @@ public void FluentAnchor_WithAdditionalStyle()
     public void FluentAnchor_WithASingleAdditionalAttribute()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAnchor>(
+        var cut = RenderComponent<FluentAnchor>(
             parameters => parameters
                 .Add(p => p.Href, "https://fast.design")
                 .AddUnmatched("additional", "additional-value")
@@ -248,7 +248,7 @@ public void FluentAnchor_WithASingleAdditionalAttribute()
     public void FluentAnchor_WithMultipleAdditionalAttributes()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAnchor>(
+        var cut = RenderComponent<FluentAnchor>(
             parameters => parameters
                 .Add(p => p.Href, "https://fast.design")
                 .AddUnmatched("additional1", "additional1-value")

diff --git a/tests/Core/Anchor/FluentAnchorTests.razor b/tests/Core/Anchor/FluentAnchorTests.razor
@@ -0,0 +1,17 @@
+@using Xunit
+@inherits TestContext
+
+@code
+{
+    [Fact]
+    public void FluentAnchor_IdAttribute()
+    {
+        // Arrange
+        // Act
+        var cut = Render(@<FluentAnchor Id="my_id" Href="https://www.fluentui-blazor.net">
+                            My Anchor
+                          </FluentAnchor>);
+        // Assert
+        cut.Verify();
+    }
+}