Beta 4: Breaking changes in tests, rendering logic, and assertions

This release include a bunch of breaking changes:

• Renamed ShouldBe assert helper methods that performs semantic HTML comparison to MarkupMatches.
• Upgraded to AngleSharp Diffing version 0.13.2.
• Simplified razor based tests and snapshot tests by removing need for explicit IRazorTestContext to be passed into test methods and setup methods (#19).
• Added a Description parameter to <Fixture> component, whose value will be displayed in the error message if the fixtures setup or test methods fails. If a description is not provided, the name of the test or setup method that caused the error is used in the error message instead.
• Enabled RenderedFragment/RenderedComponent to detect when it and child components have updates during a render. This prevents unnecessary generating and parsing of markup to AngleSharp nodes.
• TakeSnapshot method in IRenderFragment has been changed to SaveSnapshot
• Added the missing event dispatcher extension methods.

Upgrading to beta 4

See the following sections for a guide to upgrading from beta-3 and eariler to beta 4.

Breaking change: Razor and Snapshot-based tests

In razor and snapshot tests, the setup and test methods no longer gets passed a IRazorTestContext. Instead, the IRazorTestContext is implicitly available in the scope of the setup and test methods, when a <Fixture> or <SnapshotTest>.

So to update your code, change all Setup and Tests methods to not take an IRazorTestContext as input. For example, a Setup like this:

void Setup(IRazorTestContext context)
{
  // Add services and do other setup work in this method.
  context.Services.AddMockJsRuntime();
}

becomes this:

void Setup()
{
  // Add services and do other setup work in this method.
  Services.AddMockJsRuntime();
}

and a Test method like this:

void Test1(IRazorTestContext context)
{
  // Renders a MyComponent component and assigns the result to
  // a cut variable. CUT is short for Component Under Test.
  var cut = context.GetComponentUnderTest<MyComponent>();

  // Renders the markup in the "first" fragment by calling GetFragment without an id.
  var firstFragment = context.GetFragment();
}

becomes this:

void Test1()
{
  // Renders a MyComponent component and assigns the result to
  // a cut variable. CUT is short for Component Under Test.
  var cut = GetComponentUnderTest<MyComponent>();

  // Renders the markup in the "first" fragment by calling GetFragment without an id.
  var firstFragment = GetFragment();
}

Semantic HTML assert helper ShouldBe changed to MarkupMatches

To make it more clear what is being verified in tests, the more generic sounding semantic HTML verifying assert method ShouldBe has been renamed to MarkupMatches.

For example, the following test:

[Fact]
public void InitialHtmlIsCorrect()
{
    var cut = RenderComponent<Counter>();

    var expectedHtml = @"<h1>Counter</h1>
                        <p>Current count: 0</p>
                        <button class=""btn-primary btn"">Click me</button>";

    cut.ShouldBe(expectedHtml); // OLD CODE HERE
}

has to be updated to this:

[Fact]
public void InitialHtmlIsCorrect()
{
    var cut = RenderComponent<Counter>();

    var expectedHtml = @"<h1>Counter</h1>
                        <p>Current count: 0</p>
                        <button class=""btn-primary btn"">Click me</button>";

    cut.MarkupMatches(expectedHtml); // NEW CODE HERE
}

TakeSnapshot changed to SaveSnapshot in IRenderFragment

I wasn't happy with the word Take in TakeSnapshot. The word Save seems more appropriate. Thus, if you are using this feature, you need to update all calls to cut.TakeSnapshot() to cut.SaveSnapshot().