Skip to content

Commit 82a64be

Browse files
authored
Update razor-examples.md
1 parent 248b149 commit 82a64be

File tree

1 file changed

+8
-8
lines changed

1 file changed

+8
-8
lines changed

docs/razor-examples.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# Writing Blazor Component tests in a mix of Razor and C# code
22

3-
The library supports specifying the component under test and other markup/fragments using Razor syntax. The advantage is that we get Visual Studio help writing Razor and HTML, which is a much nicer experience than writing HTML in a string in a C# class/file. This is especially useful for more complex scenarios, where e.g. a component under test has many parameters or complex child contents.
3+
The library supports specifying the component under test and other markup/fragments using Razor syntax. The advantage is that we get Visual Studio's help writing Razor and HTML with IntelliSense and auto complete, which is a much nicer experience than writing HTML in a string in a C# class/file. This is especially useful for more complex scenarios, where e.g. a component under test has many parameters or complex child contents.
44

5-
**NOTE:** This feature is _EXPERIMENTAL_ and syntax and API will likely changed. See [Contribute](readme.md/#contribute) for info on how to provide feedback and suggestions.
5+
**NOTE:** This feature is _EXPERIMENTAL_, and syntax and API will likely be changed. See [Contribute](readme.md/#contribute) for info on how to provide feedback and suggestions.
66

77
1. [Creating new test component](#creating-new-test-component)
88
2. [Defining test cases](#defining-test-cases)
@@ -25,13 +25,13 @@ You will also need to import a few namespaces to make asserting and mocking poss
2525
@using Xunit @*or e.g. Shouldly*@
2626
```
2727

28-
**Tip:** In the folder you keep your Razor-based tests, add a `_Imports.razor` file, and put the above into that. Then all test components inherits the correct base component by default and have the default imports available.
28+
**Tip:** In the folder you keep your Razor-based tests, add a `_Imports.razor` file, and put the above into that. Then all test components inherit the correct base component by default and have the default imports available.
2929

3030
## Defining test cases
3131

32-
When you have a Razor test component created, its time to add test cases. This is done via the `<Fixture>` component and related test methods and child components.
32+
When you have a Razor test component created, it's time to add test cases. This is done via the `<Fixture>` component and related test methods and child components.
3333

34-
Lets look at what options we have by setting up an empty test case, first the code:
34+
Let's look at what options we have by setting up an empty test case, first the code:
3535

3636
```cshtml
3737
<Fixture Setup="Setup"
@@ -75,7 +75,7 @@ The code above works as follows:
7575
- It is inside child component `<ComponentUnderTest>` where you declare the component under test.
7676
- Any markup or component fragments that is needed for the test can be declared inside the optional `<Fragment>` components. The `Id` parameter is optional, and only needed if you have more than one.
7777

78-
- To render and get the component under test or any of the fragments, use the `GetComponentUnderTest<TComponent>()` method on the `IRazorTestContext` object. `GetFragment()` can be called both with and without a `TComponent`, e.g. if its just markup defined in it.
78+
- To render and get the component under test or any of the fragments, use the `GetComponentUnderTest<TComponent>()` method on the `IRazorTestContext` object. `GetFragment()` can be called both with and without a `TComponent`, e.g. if it's just markup defined in it.
7979

8080
- Inside the `Test` methods you can do all the things you can in C#-based tests, e.g. assert against the CUT. The only difference is that some methods such as `TakeSnapshot()` is not available on the local scope, but through the `IRazorTestContext` object passed to each Test method.
8181

@@ -128,9 +128,9 @@ This example shows how [ThemedElement.razor](../sample/src/Components/ThemedElem
128128
}
129129
```
130130

131-
This example shows how [ThemedButton.razor](../sample/src/Components/ThemedButton.razor) can be tested with with child content, and how a `<Fragment>` can be used to specify the expected output.
131+
This example shows how [ThemedButton.razor](../sample/src/Components/ThemedButton.razor) can be tested with child content, and how a `<Fragment>` can be used to specify the expected output.
132132

133-
Lets look at a more complex example, a test of the [TodoList.razor](../sample/src/Pages/TodoList.razor) component:
133+
Let's look at a more complex example, a test of the [TodoList.razor](../sample/src/Pages/TodoList.razor) component:
134134

135135
```cshtml
136136
<Fixture Setup="ctx => ctx.Services.AddMockJsRuntime()"

0 commit comments

Comments
 (0)