Skip to content

Commit fdc519e

Browse files
egilegil
committed
docs: snapshottest details
1 parent 9b569bf commit fdc519e

6 files changed

Lines changed: 71 additions & 17 deletions

File tree

docs/docs/getting-started/fixture-options.md renamed to docs/docs/getting-started/fixture-details.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
---
2-
uid: fixture-options
3-
title: Fixture options in Razor Tests
2+
uid: fixture-details
3+
title: Fixture Test Details
44
---
55

6-
# `<Fixture>` options in Razor Tests
6+
# `<Fixture>` Test Details
77

88
bUnit's <xref:Bunit.Fixture> component provides different parameters you can set on it, that changes the behavior of the test. It also allows you to both set up a component under test, and additional fragments, that can be used in the test.
99

10+
> [!WARNING]
11+
> Razor tests, where <xref:Bunit.Fixture> components are used, are currently only compatible with using xUnit as the general purpose testing framework.
1012
1113
## Parameters
1214

13-
All the parameters the `<Fixture>` support is shown in the listing below:
15+
All the parameters the <xref:Bunit.Fixture> component support is shown in the listing below:
1416

1517
[!code-html[](../../samples/tests/razor/AllFixtureParameters.razor)]
1618

@@ -39,7 +41,7 @@ The other parameters affect how the test runs, and how it is displayed in e.g. V
3941
1. **<xref:Bunit.RazorTesting.RazorTestBase.Description>:**
4042
If a description is provided, it will be displayed by the test runner when the test runs, and in Visual Studio's Test Explorer. If no description is provided, the name of the provided test method is used.
4143
2. **<xref:Bunit.RazorTesting.RazorTestBase.Skip>:**
42-
If the skip parameter is provided, the test is skipped and the text entered in the skip parameter is passed to the test runner as the reason to skip the test.
44+
If the skip parameter is provided, the test is skipped, and the text entered in the skip parameter is passed to the test runner as the reason to skip the test.
4345
3. **<xref:Bunit.RazorTesting.RazorTestBase.Timeout>:**
4446
If provided, the test runner will terminate the test after the specified amount of time, if it has not completed already.
4547

‎docs/docs/getting-started/snapshot-options.md‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎docs/docs/getting-started/snapshottest-details.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
uid: snapshottest-details
3+
title: SnapshotTest Details
4+
---
5+
6+
# `<SnapshotTest>` Details
7+
8+
bUnit's support for snapshot testing comes with the <xref:Bunit.SnapshotTest> component. In snapshot testing, you declare your input (e.g. one or more component under test) and the expected output, and the library will automatically tell you if they do not match.
9+
10+
> [!NOTE]
11+
> One notable snapshot testing feature is missing now; the ability to auto-generate the expected output initially, when it is not specified. If you want to contribute to this, take a look at [issue #3 on GitHub](https://github.com/egil/bunit/issues/3).
12+
13+
> [!WARNING]
14+
> Razor tests, where <xref:Bunit.SnapshotTest> components are used, are currently only compatible with using xUnit as the general purpose testing framework.
15+
16+
## Parameters
17+
18+
All the parameters the <xref:Bunit.SnapshotTest> component support is shown in the listing below:
19+
20+
[!code-html[](../../samples/tests/razor/AllSnapshotTestParameters.razor)]
21+
22+
Let us go over each of these:
23+
24+
1. **<xref:Bunit.RazorTesting.FixtureBase`1.Setup>** and **<xref:Bunit.RazorTesting.FixtureBase`1.SetupAsync>:**
25+
The `Setup` and `SetupAsync` methods can be used to register any services that should be injected into the components declared inside the `<TestInput>` and `<ExpectedOutput>`, and you can use both `Setup` and `SetupAsync`, if needed. If both are provided, `Setup` is called first.
26+
2. **<xref:Bunit.RazorTesting.RazorTestBase.Description>:**
27+
If a description is provided, it will be displayed by the test runner when the test runs, and in Visual Studio's Test Explorer. If no description is provided, "SnapshotTest #NUM" is used, where NUM is the position the test has in the file it is declared in.
28+
3. **<xref:Bunit.RazorTesting.RazorTestBase.Skip>:**
29+
If the skip parameter is provided, the test is skipped, and the text entered in the skip parameter is passed to the test runner as the reason to skip the test.
30+
4. **<xref:Bunit.RazorTesting.RazorTestBase.Timeout>:**
31+
If provided, the test runner will terminate the test after the specified amount of time, if it has not completed already.
32+
5. **<xref:Bunit.SnapshotTest.TestInput> child component:**
33+
Inside the `<TestInput>` child component is where you put all Razor and HTML markup, that constitute the test input or component under test.
34+
6. **<xref:Bunit.SnapshotTest.ExpectedOutput> child component:**
35+
Inside the `<ExpectedOutput>` child component is where you put all Razor and HTML markup that represents what the rendered result of `<TestInput>` of should be.
36+
37+
## What Happens When The Test Runs?
38+
39+
When a <xref:Bunit.SnapshotTest> runs, this happens:
40+
41+
1. It will first call the setup methods.
42+
2. Then it will render the `<TestInput>` and `<ExpectedOutput>` child components.
43+
3. Finally, it will compare the rendered markup from the `<TestInput>` and `<ExpectedOutput>` child components, using the semantic HTML comparer built into bUnit.
44+
45+
The semantic comparison in bUnit allows you to customize the it through _"comparison modifiers"_ in the `<ExpectedOutput>` markup. For example, if you want to tell the semantic comparer to ignore the case of the text content inside an element, you can add the `diff:ignoreCase` attribute to the element inside `<ExpectedOutput>`.
46+
47+
To learn more about semantic comparison modifiers, go to the <xref:semantic-html-comparison> page.

‎docs/docs/getting-started/writing-razor-tests.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,8 @@ Injecting services into the components under test is covered on the <xref:inject
9696

9797
Now that we have covered the basics of writing tests using Razor syntax, you can continue digging deeper, e.g. by looking at:
9898

99-
- <xref:fixture-options>
100-
- <xref:snapshot-options>
99+
- <xref:fixture-details>
100+
- <xref:snapshottest-details>
101101
- <xref:inject-services-into-components>
102102
- <xref:verify-markup>
103103
- <xref:verify-component-state>

‎docs/docs/toc.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
## [Create a Test Project](xref:create-test-project)
33
## [Writing Tests in C#](xref:writing-csharp-tests)
44
## [Writing Tests in Razor Syntax](xref:writing-razor-tests)
5-
## [Razor Fixture Options](xref:fixture-options)
6-
## [Razor SnapshotTest Options](xref:snapshot-options)
5+
## [Fixture Test Details](xref:fixture-details)
6+
## [SnapshotTest Details](xref:snapshottest-details)
77

88
# [Providing Input](xref:providing-input)
99
## [Parameters and Cascading Values](xref:passing-parameters-to-components)

‎docs/samples/tests/razor/AllSnapshotTestParameters.razor‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<SnapshotTest Setup=@Setup
2+
SetupAsync=@SetupAsync
3+
Description="Description of test"
4+
Timeout="TimeSpan.FromSeconds(2)"
5+
Skip="Reason to skip the test">
6+
<TestInput>...</TestInput>
7+
<ExpectedOutput>...</ExpectedOutput>
8+
@code
9+
{
10+
void Setup(SnapshotTest test) { }
11+
Task SetupAsync(SnapshotTest test) => Task.CompletedTask;
12+
}
13+
</SnapshotTest>

0 commit comments

Comments
 (0)