From 04180f983ae27ff7af34502e3dc9fb953644fbc4 Mon Sep 17 00:00:00 2001
From: Steven Giesel <stgiesel35@gmail.com>
Date: Mon, 28 Aug 2023 17:18:21 +0200
Subject: [PATCH] Update bUnit docs (#30166)

---
 aspnetcore/blazor/test.md | 53 ++++++++++++++++++++++++++++-----------
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/aspnetcore/blazor/test.md b/aspnetcore/blazor/test.md
index 0713fa875b..889483bf31 100644
--- a/aspnetcore/blazor/test.md
+++ b/aspnetcore/blazor/test.md
@@ -107,34 +107,59 @@ The following demonstrates the structure of a bUnit test on the `Counter` compon
 
 The following bUnit test verifies that the CUT's counter is incremented correctly when the button is selected:
 
+```razor
+@code {
+    [Fact]
+    public void CounterShouldIncrementWhenClicked()
+    {
+        // Arrange
+        using var ctx = new TestContext();
+        var cut = ctx.Render(@<Counter />);
+        var paraElm = cut.Find("p");
+
+        // Act
+        cut.Find("button").Click();
+
+        // Assert
+        var paraElmText = paraElm.TextContent;
+        paraElm.MarkupMatches("Current count: 1");
+    }
+}
+```
+
+Tests can also be written in a C# class file:
+
 ```csharp
-[Fact]
-public void CounterShouldIncrementWhenSelected()
+public class CounterTests
 {
-    // Arrange
-    using var ctx = new TestContext();
-    var cut = ctx.RenderComponent<Counter>();
-    var paraElm = cut.Find("p");
+    [Fact]
+    public void CounterShouldIncrementWhenClicked()
+    {
+        // Arrange
+        using var ctx = new TestContext();
+        var cut = ctx.RenderComponent<Counter>();
+        var paraElm = cut.Find("p");
 
-    // Act
-    cut.Find("button").Click();
-    var paraElmText = paraElm.TextContent;
+        // Act
+        cut.Find("button").Click();
 
-    // Assert
-    paraElmText.MarkupMatches("Current count: 1");
+        // Assert
+        var paraElmText = paraElm.TextContent;
+        paraElmText.MarkupMatches("Current count: 1");
+    }
 }
 ```
 
 The following actions take place at each step of the test:
 
-* *Arrange*: The `Counter` component is rendered using bUnit's `TestContext`. The CUT's paragraph element (`<p>`) is found and assigned to `paraElm`.
+* *Arrange*: The `Counter` component is rendered using bUnit's `TestContext`. The CUT's paragraph element (`<p>`) is found and assigned to `paraElm`. In Razor syntax, a component can be passed as a <xref:Microsoft.AspNetCore.Components.RenderFragment> to bUnit.
 
-* *Act*: The button's element (`<button>`) is located and then selected by calling `Click`, which should increment the counter and update the content of the paragraph tag (`<p>`). The paragraph element text content is obtained by calling `TextContent`.
+* *Act*: The button's element (`<button>`) is located and selected by calling `Click`, which should increment the counter and update the content of the paragraph tag (`<p>`). The paragraph element text content is obtained by calling `TextContent`.
 
 * *Assert*: `MarkupMatches` is called on the text content to verify that it matches the expected string, which is `Current count: 1`.
 
 > [!NOTE]
-> The `MarkupMatches` assert method differs from a regular string comparison assertion (for example, `Assert.Equal("Current count: 1", paraElmText);`) `MarkupMatches` performs a semantic comparison of the input and expected HTML markup. A semantic comparison is aware of HTML semantics, meaning things like insignificant whitespace is ignored. This results in more stable tests. For more information, see [Customizing the Semantic HTML Comparison](https://bunit.egilhansen.com/docs/verification/semantic-html-comparison).
+> The `MarkupMatches` assert method differs from a regular string comparison assertion (for example, `Assert.Equal("Current count: 1", paraElmText);`). `MarkupMatches` performs a semantic comparison of the input and expected HTML markup. A semantic comparison is aware of HTML semantics, meaning things like insignificant whitespace is ignored. This results in more stable tests. For more information, see [Customizing the Semantic HTML Comparison](https://bunit.egilhansen.com/docs/verification/semantic-html-comparison).
 
 ## Additional resources