Testing Component Dependent on Mudblazor Components

[dwarwick]

I am fairly new to Bunit testing, so I apologize if this seems trivial.

We have component that we want to test with the following structure:

<MudPopover` Open="@showUserInfo" Fixed="true" Class="p-3" Style="Width:500px" OverflowBehavior="OverflowBehavior.FlipAlways">
  <LoadingSpinner Loading="IsLoading">
    <MudCard>
      <MudCardHeader>
        <CardHeaderContent>
          <div class="d-flex align-items-center">           
                
          </div>
        </CardHeaderContent>
        <CardHeaderActions>
          <MudIconButton Id="@windowCloseButtonId" Title="Close" Icon="@Icons.Material.Filled.Close" Color="Color.Default" OnClick="@CloseTooltip" />
        </CardHeaderActions>
      </MudCardHeader>
      <MudCardContent>
        @if (CanViewUserNames || IgnoreViewUserNamesPermission)

our own divs, etc ...

I am trying to do something like:

      var wrapper = ctx.RenderComponent<MudPopover>(parameters => parameters.Add(p => p.Open, true)
  .AddChildContent<LoadingSpinner>(p => p.Add(p => p.Loading, false)
));
      //  var loadingSpinner = wrapper.FindComponent<LoadingSpinner>();

        // Act
        var cut = ctx.RenderComponent<UserInfoTooltip>(parameters =>
            parameters.AddCascadingValue<TelerikRootComponent>(mockTelerik.Object)
            .Add(p => p.showUserInfo, true)
            .Add(p => p.userId, 2)
            .Add(p => p.IgnoreViewUserNamesPermission, false));

        // Assert
        Assert.NotNull(cut);

But I don't think this is correct. I only care about what gets rendered below where I wrote our own divs, etc ... I don't think I need to render the mud components or the loading spinner.

Do I have to mock or stub those components? Do I need to use public RenderFragment Wrap(RenderFragment target)? I do know that the LoadingSpinner contains a render fragment.

If I don't include the code

 var wrapper = ctx.RenderComponent<MudPopover>(parameters => parameters.Add(p => p.Open, true)
      .AddChildContent<LoadingSpinner>(p => p.Add(p => p.Loading, false)
    ));

Then all I see in the cut markup is <div id="popover-51179c15-37e3-4c33-aec8-8eb843c58ac9" class="mud-popover-cascading-value"></div>

If I do include that code, then cut is null and the render tree is empty.

The component under test is the UserInfoTooltip component.

I feel so lost right now. Can someone please point me in the right direction?

[egil]

Your instincts are not wrong. Ideally, you should not test MudBlazor's logic, that's their job (and they are using bUnit for that btw.).

You can substitute MudBlazor components with something else, similar to mocking dependencies when in none Blazor testing. How to do that is covered here: https://bunit.dev/docs/providing-input/substituting-components.html

You may not need to do so though, that is, substitute out 3rd party components, if they are not preventing you from rendering. If they are not, just render the component you have created that uses Mud or other 3rd parties, and use `cut.Find("the part of the component I care about") and then assert against that markup.

With "popup" components and similar (dialog), your content may not actually be rendered before a user hovers over a section of the markup, so you will not see that in an initial render using bUnit. In that case, it may be easiest to either substitute out the popup component your component under test is using and that way you can access the render fragment that was passed to the popup component in your test.

You may also find it useful to watch my presentation that is linked here: https://bunit.dev/docs/getting-started.

This may also help: #588

[dwarwick]

Thanks @egil . I have tried Mocking and Stub'ing the Mud components and the ChildContent for the MudPopover is either null or an empty string when I do that.

Things I have tried.

//var mudPop = new Mock<MudPopover>();
            //var mudPoperProvider = new Mock<MudPopoverProvider>();
            //var mudPopService = new Mock<IMudPopoverService>();

            //mudPop.Setup(m => m.SetParametersAsync(new ParameterView())).Returns(Task.CompletedTask);
            //ctx.Services.AddSingleton(mudPoperProvider.Object);
            //ctx.Services.AddSingleton(mudPop.Object);
            //ctx.Services.AddSingleton(mudPopService.Object);

            //var mudPopover =  ctx.RenderComponent<MudPopover>(parameters => parameters
            //        .Add(p => p.Open, true)
            //        .Add(p => p.Fixed, true)
            //        .Add(p => p.Class, "p-3")
            //        .Add(p => p.Style, "width:500px")
            //        .Add(p => p.OverflowBehavior, OverflowBehavior.FlipAlways));

            // Register the mock instance for Bar


            //   ctx.ComponentFactories.AddStub<MudPopover>();
            //ctx.ComponentFactories.AddStub<LoadingSpinner>();

            ////ctx.ComponentFactories.Add<MudPopover>(mudPopover.Object);
            ////ctx.ComponentFactories.Add<LoadingSpinner>(loadingSpinner.Object);
            //ctx.ComponentFactories.Add<MudCard>(mudCard.Object);
            //ctx.ComponentFactories.Add<MudCardHeader>(mudCardHeader.Object);
            //ctx.ComponentFactories.Add<MudIconButton>(mudIconButton.Object);
            //ctx.ComponentFactories.Add<MudCardContent>(mudCardContent.Object);

Also, I have looked at the Mudblazor repo. When I look specifically at the Popover Tests, it looks to me like they are testing the functionality of the MudPopover component, which is not what I want. Is there a specific test or part of those tests that I should be looking at?

Thanks.

[egil]

A simple solution could be for you to put the logic you want to display in the Mud Popover in a component and just test that. That takes the popover component out of the equation.

[egil]

Unless I want to test MudPopover, I would never do var mudPopover = ctx.RenderComponent<MudPopover>(parameters => parameters.... That is something you do when you want to target MudPopover as your component under test.

If you have a component that you have created, which uses MudPopover as a child component, then you are able to substitute it out. In that case, you would do var cut = ctx.RenderComponent<MyComponent>(...).

If you want to test a component that you pass as the child content to MudPopover, just render that directly, e.g. var cut = ctx.RenderComponent<MyPopoverContent>() and test that directly.

[dwarwick]

@egil , I found the answer here. That answer is in the Mudblazor repo and as a reply to that answer, I posted my final working code.

The solution was to add the component <MudPopoverProvider /> above the component under test. See below.

UserInfoTooltipWrapper.razor

<MudPopoverProvider />
<UserInfoTooltip userId="@userId" showUserInfo="@showUserInfo" showUserInfoChanged="@showUserInfoChanged" IgnoreViewUserNamesPermission="@IgnoreViewUserNamesPermission" />

@code {
    [Parameter]
    public int userId { get; set; }

    [Parameter]
    public bool showUserInfo { get; set; }

    [Parameter]
    public EventCallback<bool> showUserInfoChanged { get; set; }

    [Parameter]
    public bool IgnoreViewUserNamesPermission { get; set; } = false;
}

And now my bUnit test calls

// Act
var cut = ctx.RenderComponent<UserInfoTooltipWrapper>(parameters => parameters
   .AddCascadingValue<TelerikRootComponent>(mockTelerik.Object)               
   .Add(p => p.showUserInfo, true)
   .Add(p => p.userId, 2)
   .Add(p => p.IgnoreViewUserNamesPermission, false));

So obviously, in my client project, I had to create a new component just so I can run this test. Is there a better way to do this? As part of the test setup, can I add <MudPopoverProvider /> to the render tree before rendering my UserInfoTooltip component? If so, what would that look like?

Thanks.

[egil]

Glad you find a solution. I generally advocate for having small components that does one thing well. That makes it easy to test each component in isolation and make them more reusable across an app or library.

Here is presentation on that topic specifically: https://youtu.be/L_n-12FglLI