();
-
- // Act
- // Use a Find to query the rendered DOM tree and find the button element
- // and trigger the @onclick event handler by calling Click
- cut.Find("button").Click();
-
- // Assert
- // Use a Find to query the rendered DOM tree and find the paragraph element
- // and assert that its text content is the expected (calling Trim first to remove insignificant whitespace)
- cut.Find("p").TextContent.Trim().ShouldBe("Current count: 1");
-
- // Repeat the above steps to ensure that counter works for multiple clicks
- cut.Find("button").Click();
- cut.Find("p").TextContent.Trim().ShouldBe("Current count: 2");
- }
-}
-```
-
-A few things worth noting about the tests above:
-
-1. `InitialHtmlIsCorrect` uses the `ShouldBe` method that performs a semantic comparison of the generated HTML from CUT and the expected HTML string. That ensures that insignificant whitespace doesn't give false positives, among other things.
-
-2. The "**strict**" test (`ClickingButtonIncreasesCountStrict`) and the "**targeted**" test (`ClickingButtonIncreasesCountTargeted`) takes two different approaches to verifying CUT renders the expected output:
-
- - The **strict** version generates a diff between the initial rendered HTML and the rendered HTML after the button click, and then asserts that the compare result only contains the expected change.
- - The **targeted** version finds the `` element expect to have changed, and asserts against its text content.
-
- With the _targeted_ version, we cannot guarantee that there are not other changes in other places of the rendered HTML, if that is a concern, use the strict style. If it is not, then the targeted style can lead to simpler test.
-
-## Testing components with parameters
-
-In the following tests we will pass regular parameters to a component under test, e.g. `[Parameter] public SomeType PropName { get; set; }` style properties, where `SomeType` **is not** a `RenderFragment` or a `EventCallback` type.
-
-The component under test will be the [Aside.razor](https://github.com/egil/razor-components-testing-library/tree/master/sample/src/Components/Aside.razor) component, which looks like this:
-
-```cshtml
-
-@code {
- [Parameter(CaptureUnmatchedValues = true)]
- public IReadOnlyDictionary? Attributes { get; set; }
-
- [Parameter] public string? Header { get; set; }
-
- [Parameter] public RenderFragment? ChildContent { get; set; }
-}
-```
-
-The [AsideTest.cs](https://github.com/egil/razor-components-testing-library/tree/master/sample/tests/Tests/Components/AsideTest.cs) looks like this:
-
-```csharp
-public class AsideTest : ComponentTestFixture
-{
- [Fact(DisplayName = "Aside should render header and additional parameters correctly")]
- public void Test001()
- {
- // Arrange
- var header = "Hello testers";
- var cssClass = "some-class";
-
- // Act - render the Aside component with two parameters (passed as pairs of name, value tuples).
- // Note the use of the nameof operator to get the name of the Header parameter. This
- // helps keeps the test passing if the name of the parameter is refactored.
- //
- // This is equivalent to the follow Razor code:
- //
- //
- var cut = RenderComponent