Show ErrorBoundary ErrorContent

[marcoatribeiro]

Hi Egil et all,

I'd like to know if there is a way to test the display of the ErrorContent area of an ErrorBounday. In other words, to simulate an exception on rendering a component.

Currently I have the following setup in one of my components:

<ErrorBoundary>
   <ChildContent>
      <ChildComponent />
   </ChildContent>
   <ErrorContent Context="exception">
      ...
   </ErrorContent>
</ErrorBoundary>

What I want is for someway to simulate an exception being thrown on the rendering of ChildComponent so that ErrorBounday displays the ErrorContent area contents.

I though about mocking it (with Moq) and setup an exception being thrown, but I'm not sure if it is possible as BuildRenderTree method is not public.

Any help/ideas on this are greatly appreciated.

Best regards,
Marco.

[linkdotnet]

Hey @marcoatribeiro.
There are multiple ways to approach that, but let's start with the basics (if you know this already just jump to the next section).
Imagine we have this component which is almost the same as your example:

<ErrorBoundary>
    <ChildContent>
        <MyErrorComponent></MyErrorComponent>
    </ChildContent>
    <ErrorContent Context="exception">
        <p>Here could be an exception</p> 
    </ErrorContent>
</ErrorBoundary>

Where MyErrorComponent throws an Exception in OnInitialized.

We can write a test to check that:

[Fact]
public void ShouldShowErrorOnException()
{
    var cut = RenderComponent<ErrorComponent>();

    var error = cut.FindComponent<ErrorBoundary>();

    error.Find("p").TextContent.Should().Be("Here could be an exception");
}

Stub ChildComponent to throw an exception

Now I guess in your example you want to have a stub of ChildComponent which directly throws an exception to test your behavior. And also we can do this with bUnit thanks to ComponentFactories.

We are creating a replacement for our original component which directly throws an exception like this:

[Fact]
public void ShouldShowErrorOnException()
{
    // The first type defines the component to be replaced
    // The second one defines the replaced content
    // We can leverage that to use a replacement content which directly fires an exception
    ComponentFactories.Add<MyChildComponent, MyReplacementComponent>();
    var cut = RenderComponent<ErrorComponent>();

    var error = cut.FindComponent<ErrorBoundary>();

    error.Find("p").TextContent.Should().Be("Here could be an exception");
}

private class MyReplacementComponent : ComponentBase
{
    protected override void OnInitialized()
    {
        throw new InvalidOperationException();
    }
}

Hope that helps.
Cheers Steven

[marcoatribeiro]

Thanks a lot, @linkdotnet! Your 2nd suggestion was what exactly I needed.

Best regards,
Marco.