You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/site/docs/getting-started/writing-csharp-tests.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,9 +5,9 @@ title: Writing Tests in C# for Blazor Components
5
5
6
6
# Writing Tests in C# for Blazor Components
7
7
8
-
Testing Blazor components is a different from testing regular C# classes: Blazor components are *rendered*, they have the *Blazor component life cycle*, during which we can *provide input* to them and where they *produce output*.
8
+
Testing Blazor components is a little different from testing regular C# classes: Blazor components are *rendered*, they have the *Blazor component life cycle*, during which we can *provide input* to them and where they *produce output*.
9
9
10
-
Use **bUnit** to render the component you want to test, pass in parameters to it, inject services into it, and access the rendered component instance and the markup it has produced.
10
+
Use **bUnit** to render the component under test, pass in it's parameters, inject required services, and access the rendered component instance and the markup it has produced.
11
11
12
12
Rendering a component happens through bUnit's <xref:Bunit.TestContext>, and the result of the rendering, a <xref:Bunit.IRenderedComponent`1>, provides access to the component instance, and the markup produced by the component.
13
13
@@ -40,12 +40,12 @@ This is a simple example, that tests the following `<HelloWorld>` component:
40
40
41
41
The following happens in the test above:
42
42
43
-
1.New up the disposable <xref:Bunit.TestContext>, and assign it using the `using var` syntax, to avoid unnecessary indention.
44
-
2. Render the `<HelloWorld>` component using <xref:Bunit.TestContext>, which we do through the <xref:Bunit.TestContext.RenderComponent``1(Bunit.Rendering.ComponentParameter[])> method. We will cover passing parameters to components elsewhere.
45
-
3. Verify the rendered markup from the `<HelloWorld>` component using the `MarkupMatches` method, which performs a semantic comparison of the expected markup with the rendered markup.
43
+
1.Create a new instance of the disposable bUnit <xref:Bunit.TestContext>, and assign it to ctx using the `using var` syntax, to avoid unnecessary source code indention.
44
+
2. Render the `<HelloWorld>` component using <xref:Bunit.TestContext>, which is done through the <xref:Bunit.TestContext.RenderComponent``1(Bunit.Rendering.ComponentParameter[])> method. We cover passing parameters to components elsewhere.
45
+
3. Verify the rendered markup from the `<HelloWorld>` component, using the `MarkupMatches` method. The `MarkupMatches` method performs a semantic comparison of the expected markup with the rendered markup.
46
46
47
47
> [!TIP]
48
-
> Learn more about how the semantic HTML/markup comparison in bUnit work, and how to customize it on the <xref:semantic-html-comparison> page.
48
+
> Learn more about how the semantic HTML/markup comparison in bUnit works, and how to customize it on the <xref:semantic-html-comparison> page.
49
49
50
50
> [!TIP]
51
51
> In bUnit tests, we like to use the abbreviation `CUT`, short for "component under test", to indicate the component that is being tested. This is inspired by the common testing abbreviation `SUT`, short for "system under test".
@@ -58,7 +58,7 @@ We can remove some boilerplate code from each test by making the <xref:Bunit.Tes
Since xUnit instantiates test classes for each execution of test methods inside them and disposes them after each test method has run, we simply inherit from <xref:Bunit.TestContext>, and methods like <xref:Bunit.TestContext.RenderComponent``1(Bunit.Rendering.ComponentParameter[])> can now be called directly from each test, as seen in the listing above.
61
+
Since xUnit instantiates test classes for each execution of test methods inside them and disposes of them after each test method has run, we simply inherit from <xref:Bunit.TestContext>, and methods like <xref:Bunit.TestContext.RenderComponent``1(Bunit.Rendering.ComponentParameter[])> can now be called directly from each test, as seen in the listing above.
62
62
63
63
# [NUnit](#tab/nunit)
64
64
@@ -76,18 +76,18 @@ Then methods like <xref:Bunit.TestContext.RenderComponent``1(Bunit.Rendering.Com
Since MSTest instantiates the test class is once, we cannot simply inherit directly from <xref:Bunit.TestContext>, as we want a fresh instance of <xref:Bunit.TestContext> for each test. Instead, we create a helper class, `BunitTestContext`, which is listed above, and use that to hook into MSTest's `[TestInitialize]` and `[TestCleanup]` methods, which runs before and after each test.
79
+
Since MSTest instantiates the test class once, we cannot simply inherit directly from <xref:Bunit.TestContext>, as we want a fresh instance of <xref:Bunit.TestContext> for each test. Instead, we create a helper class, `BunitTestContext`, which is listed above, and use that to hook into MSTest's `[TestInitialize]` and `[TestCleanup]` methods, which runs before and after each test.
80
80
81
81
Then methods like <xref:Bunit.TestContext.RenderComponent``1(Bunit.Rendering.ComponentParameter[])> can now be called directly from each test, as seen in the listing above.
82
82
83
83
***
84
84
85
85
## Further Reading
86
86
87
-
With the basics out of the way, we will next look at how to pass parameters and inject services into our components under test, and after that, cover in more details the various ways we can verify the outcome of a rendering.
87
+
With the basics out of the way, we will next look at how to pass parameters and inject services into our component under test, and after that, cover in more detail ways we can verify the outcome of a rendering.
0 commit comments