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: README.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@
15
15
- Pass parameters, cascading values and inject services into components under test
16
16
- Mock `IJSRuntime`, Blazor authentication and authorization, and others
17
17
18
-
bUnit builds on top of existing unit testing frameworks such as xUnit, NUnit, and MSTest, which run the Blazor components tests in just the same way as any normal unit test. bUnit runs a test in milliseconds, compared to browser-based UI tests which usually take seconds to run.
18
+
bUnit builds on top of existing unit testing frameworks such as xUnit, NUnit, and MSTest, which run the Blazor component tests in just the same way as any normal unit test. bUnit runs a test in milliseconds, compared to browser-based UI tests which usually take seconds to run.
19
19
20
20
**Go to [bUnit.egilhansen.com](https://bunit.egilhansen.com) to learn more.**
Copy file name to clipboardExpand all lines: docs/site/docs/getting-started/writing-tests.md
+15-15Lines changed: 15 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,26 +12,26 @@ Use **bUnit** to render the component under test, pass in its parameters, inject
12
12
Rendering a component happens through bUnit's <xref:Bunit.TestContext>. The result of the rendering is an `IRenderedComponent`, referred to as a "rendered component", that provides access to the component instance and the markup produced by the component.
13
13
14
14
> [!NOTE]
15
-
> The preview and beta versions of bUnit included an experimental feature for writing tests using two test components, `<Fixture>` and `<SnapshotTest>`. Since there is now a better way to write tests in `.razor` files, the old experimental feature has been moved into a separate project named `bunit.web.testcomponents`. It is kept around to not break early adopters, but _no additional features or improvements_is planned to it.
15
+
> The preview and beta versions of bUnit included an experimental feature for writing tests using two test components, `<Fixture>` and `<SnapshotTest>`. Since there is now a better way to write tests in `.razor` files, the old experimental feature has been moved into a separate project named `bunit.web.testcomponents`. It is kept around to not break early adopters, but _no additional features or improvements_are planned to it.
16
16
>
17
17
> To learn more, head over to the [bunit.web.testcomponents project](https://github.com/egil/bUnit/tree/main/src/bunit.web.testcomponents) on GitHub.
18
18
19
19
## Write tests in `.cs` or `.razor` files
20
20
21
21
bUnit works with MSTest, NUnit, and xUnit, and it allows you to write the unit tests in either `.cs` or `.razor` files.
22
22
23
-
The latter, writing tests in `.razor` files, provides an easier way to declare component- and HTML-markup in the tests, so it will most likely be the goto for many people in the future.
23
+
The latter, writing tests in `.razor` files, provides an easier way to declare component markup and HTMLmarkup in the tests, so it will most likely be the go-to for many people in the future.
24
24
25
25
*However*, the current Razor editor in Visual Studio 2019 does not offer all the code editing features available in the C# editor, and has some formatting bugs on top of that, so that is something to consider if you choose to write tests in `.razor` files.
26
26
27
-
The following sections will show how to get started writing tests in either `.cs` or `.razor` files.
27
+
The following sections show how to get started writing tests in either `.cs` or `.razor` files.
28
28
29
29
## Creating basic tests in `.razor` files
30
30
31
31
Before writing tests in `.razor` files, a few things needs to be in place:
32
32
33
33
1. Make sure the test project has the SDK type set to `Microsoft.NET.Sdk.Razor`. Otherwise the Blazor compiler will not translate your `.razor` files into runnable code.
34
-
2. Add a`_Imports.razor` file to the test project. It serves the same purpose as `_Imports.razor` files in regular Blazor projects. These using statements are useful to add right away:
34
+
2. Add an`_Imports.razor` file to the test project. It serves the same purpose as `_Imports.razor` files in regular Blazor projects. These using statements are useful to add right away:
35
35
36
36
```cshtml
37
37
@using Microsoft.AspNetCore.Components.Forms
@@ -43,7 +43,7 @@ Before writing tests in `.razor` files, a few things needs to be in place:
43
43
@using Bunit.TestDoubles
44
44
```
45
45
46
-
Also add a using statement for your general purpose testing framework, e.g. `@using Xunit` for xUnit.
46
+
Also add an using statement for your general purpose testing framework, e.g. `@using Xunit` for xUnit.
47
47
48
48
With that in place, lets look at a simple example that tests the following `<HelloWorld>` component:
49
49
@@ -71,7 +71,7 @@ With that in place, lets look at a simple example that tests the following `<Hel
71
71
72
72
The test above does the following:
73
73
74
-
1. Creates a new instance of the disposable bUnit <xref:Bunit.TestContext>, and assigns it to `ctx` variable using the `using var` syntax to avoid unnecessary source code indention.
74
+
1. Creates a new instance of the disposable bUnit <xref:Bunit.TestContext>, and assigns it to `ctx`the variable using the `using var` syntax to avoid unnecessary source code indention.
75
75
2. Renders the `<HelloWorld>` component using <xref:Bunit.TestContext>, which is done through the <xref:Bunit.TestContext.Render(Microsoft.AspNetCore.Components.RenderFragment)> method. We cover passing parameters to components on the <xref:passing-parameters-to-components> page.
76
76
3. Verifies 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.
77
77
@@ -83,7 +83,7 @@ The test above does the following:
83
83
84
84
### Secret sauce of '.razor' files tests
85
85
86
-
The trick employed in these tests is the "[inline Razor templates syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-5.0#razor-templates)", i.e. where a render fragment is simply created using the `@<{HTML tag}>...</{HTML tag}>` notation. In that notation there is no need to do any escaping of e.g. the quatation mark (`"`), that is usually associated with working with markup in C# code.
86
+
The trick employed in these tests is the "[inline Razor templates syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-5.0#razor-templates)", i.e. where a render fragment is simply created using the `@<{HTML tag}>...</{HTML tag}>` notation. In that notation there is no need to do any escaping of e.g. the quotation mark (`"`), that is usually associated with working with markup in C# code.
87
87
88
88
One small caveat to be aware of is that the inline Razor templates syntax only supports one outer element, e.g. this is OK:
89
89
@@ -102,7 +102,7 @@ However, this will **not** work:
102
102
<Bar></Bar>
103
103
```
104
104
105
-
There is a simple workaround though. Wrap all elements in the special Blazor element `<text>`. The `<text>` element will not be part of the rendered output, but is provides a simple way to group multiple root elements into a single inline Razor templates. E.g.:
105
+
There is a simple workaround though: wrap all elements in the special Blazor element `<text>`. The `<text>` element will not be part of the rendered output, but it provides a simple way to group multiple root elements into a single inline Razor template. E.g.:
106
106
107
107
```cshtml
108
108
@<text>
@@ -113,7 +113,7 @@ There is a simple workaround though. Wrap all elements in the special Blazor ele
113
113
114
114
### Remove boilerplate code from tests
115
115
116
-
We can remove some boilerplate code from each test by making the <xref:Bunit.TestContext> implicitly available to the test class, so we don't have to have `using var ctx = new Bunit.TestContext();` in every test. This can be done like this:
116
+
We can remove some boilerplate code from each test by making the <xref:Bunit.TestContext> implicitly available to the test class, so we don't have to have `using var ctx = new Bunit.TestContext();` in every test. This can be done like so:
117
117
118
118
# [xUnit](#tab/xunit)
119
119
@@ -146,7 +146,7 @@ Then methods like <xref:Bunit.TestContext.Render(Microsoft.AspNetCore.Components
146
146
> [!IMPORTANT]
147
147
> All the examples in the documentation explicitly new up a `TestContext`, i.e. `using var ctx = new TestContext()`. If you are using the trick above and have your test class inherit from `TestContext`, you should **NOT** new up a `TestContext` in test methods also.
148
148
>
149
-
> Simply call the test contest's methods directly, as they are available in your test class.
149
+
> Simply call the test context's methods directly, as they are available in your test class.
150
150
>
151
151
> For example, `var cut = ctx.Render(@<HelloWorld/>);`
152
152
> becomes `var cut = Render(@<HelloWorld/>);`.
@@ -180,7 +180,7 @@ This is a simple example of writing tests in `.cs` files which tests the followi
180
180
181
181
The test above does the following:
182
182
183
-
1. Creates a new instance of the disposable bUnit <xref:Bunit.TestContext>, and assigns it to `ctx` variable using the `using var` syntax to avoid unnecessary source code indention.
183
+
1. Creates a new instance of the disposable bUnit <xref:Bunit.TestContext>, and assigns it to the `ctx` variable using the `using var` syntax to avoid unnecessary source code indention.
184
184
2. Renders the `<HelloWorld>` component using <xref:Bunit.TestContext>, which is done through the <xref:Bunit.TestContext.RenderComponent``1(System.Action{Bunit.ComponentParameterCollectionBuilder{``0}})> method. We cover passing parameters to components on the <xref:passing-parameters-to-components> page.
185
185
3. Verifies 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.
186
186
@@ -192,7 +192,7 @@ The test above does the following:
192
192
193
193
### Remove boilerplate code from tests
194
194
195
-
We can remove some boilerplate code from each test by making the <xref:Bunit.TestContext> implicitly available to the test class, so we don't have to have `using var ctx = new Bunit.TestContext();` in every test. This can be done like this:
195
+
We can remove some boilerplate code from each test by making the <xref:Bunit.TestContext> implicitly available to the test class, so we don't have to have `using var ctx = new Bunit.TestContext();` in every test. This can be done like so:
196
196
197
197
# [xUnit](#tab/xunit)
198
198
@@ -206,7 +206,7 @@ Since xUnit instantiates test classes for each execution of the test methods ins
Since NUnit instantiates a test class only once for all tests inside it, 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`, listed above, and use that to hook into NUnit's `[SetUp]` and `[TearDown]` methods, which runs before and after each test.
209
+
Since NUnit instantiates a test class only once for all tests inside it, 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`, listed above, and use that to hook into NUnit's `[SetUp]` and `[TearDown]` methods, which run before and after each test.
210
210
211
211
Then methods like <xref:Bunit.TestContext.RenderComponent``1(System.Action{Bunit.ComponentParameterCollectionBuilder{``0}})> can be called directly from each test, as seen in the listing above.
212
212
@@ -223,7 +223,7 @@ Then methods like <xref:Bunit.TestContext.RenderComponent``1(System.Action{Bunit
223
223
***
224
224
225
225
> [!IMPORTANT]
226
-
> All the examples in the documentation explicitly new up a `TestContext`, i.e. `using var ctx = new TestContext()`. If you are using the trick above and have your test class inherit from `TestContext`, you should **NOT** new up a`TestContext` in test methods also.
226
+
> All the examples in the documentation explicitly new up a `TestContext`, i.e. `using var ctx = new TestContext()`. If you are using the trick above and have your test class inherit from `TestContext`, you should **NOT** new up another`TestContext` in test methods also.
227
227
>
228
228
> Simply call the test contest's methods directly, as they are available in your test class.
229
229
>
@@ -232,7 +232,7 @@ Then methods like <xref:Bunit.TestContext.RenderComponent``1(System.Action{Bunit
232
232
233
233
## Further reading
234
234
235
-
With the basics out of the way, next we will look at how to pass parameters and inject services into our component under test. After that, we will cover ways we can verify the outcome of a rendering in more detail
235
+
With the basics out of the way, next we will look at how to pass parameters and inject services into our component under test. After that, we will cover the ways in which we can verify the outcome of a rendering in more detail
Copy file name to clipboardExpand all lines: docs/site/docs/interaction/trigger-renders.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ To trigger a re-render of a component under test, a reference to it through a <x
9
9
10
10
In `.razor` based tests, using the <xref:Bunit.TestContext>'s <xref:Bunit.TestContext.Render``1(Microsoft.AspNetCore.Components.RenderFragment)> method also returns an <xref:Bunit.IRenderedComponent`1> (as opposed to the <xref:Bunit.TestContext.Render(Microsoft.AspNetCore.Components.RenderFragment)> method which returns the more simple <xref:Bunit.IRenderedFragment>).
11
11
12
-
If you have a <xref:Bunit.IRenderedFragment> or a <xref:Bunit.IRenderedComponent`1> in a test, but need a child component's <xref:Bunit.IRenderedComponent`1>, then use the `FindComponent<TComponent>()` or the `FindComponents<TComponent>()` methods, which traverses down the render tree and finds rendered components.
12
+
If you have a <xref:Bunit.IRenderedFragment> or a <xref:Bunit.IRenderedComponent`1> in a test, but need a child component's <xref:Bunit.IRenderedComponent`1>, then use the `FindComponent<TComponent>()` or the `FindComponents<TComponent>()` methods, which traverse down the render tree and finds rendered components.
13
13
14
14
With a <xref:Bunit.IRenderedComponent`1>, it is possible to cause the component to render again directly through the [`Render()`](xref:Bunit.RenderedComponentRenderExtensions.Render``1(Bunit.IRenderedComponentBase{``0})) method or one of the [`SetParametersAndRender()`](xref:Bunit.RenderedComponentRenderExtensions.SetParametersAndRender``1(Bunit.IRenderedComponentBase{``0},System.Action{Bunit.ComponentParameterCollectionBuilder{``0}})) methods, or indirectly through the [`InvokeAsync()`](xref:Bunit.IRenderedFragmentBase.Bunit.RenderedFragmentInvokeAsyncExtensions.InvokeAsync(System.Action)) method.
Copy file name to clipboardExpand all lines: docs/site/docs/providing-input/inject-services-into-components.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ In bUnit, you register the services in the `Services` collection _before_ you re
14
14
> [!NOTE]
15
15
> The `AddSingleton()` method is only available on the `Services` collection if you **import the `Microsoft.Extensions.DependencyInjection` namespace in your test class**.
16
16
17
-
The following sections demonstrate how to do. The examples we will cover will test the `<WeatherForecasts>` component listed below, which depends on the `IWeatherForecastService` service, injected in line 1:
17
+
The following sections demonstrate how to do this. The examples we will cover will test the `<WeatherForecasts>` component listed below, which depends on the `IWeatherForecastService` service, injected in line 1:
0 commit comments