BUnit doesn't work with MudTooltip

[kostyrin]

BUnit doesn't work with MudTooltip

Good afternoon,

I wrote a sample

Example:
Testing this component:

@using MudBlazor

<p>@text</p>
<MudTooltip>
    <ChildContent>
        <MudMenu id="@_id">
            @{
                <MudMenuItem id="@_id" @onclick=@(() => openDialog("Y", _id))>name</MudMenuItem>
            }
        </MudMenu>
    </ChildContent>
</MudTooltip>

@code {
    private long _id { get; set; } = 1;
    public string text { get; set; }

    private void openDialog(string approval, long id)
    {
        text = "test";
    }
}

With this test:

          using var ctx = new TestContext();
          ctx.JSInterop.SetupVoid("mudPopover.connect", _ => true);
          ctx.Services.AddMudServices();
          var testComponent = ctx.RenderComponent<MudTestComponent>();

          var button = testComponent.Find("button");
          button.Click();
          testComponent.WaitForState(() => testComponent.Instance.text == "test", TimeSpan.FromSeconds(5))

Markup:

<p></p>
<div class="mud-tooltip-root mud-tooltip-inline" blazor:onmouseenter="1" blazor:onmouseleave="2" blazor:onmouseup="3" blazor:onfocusin="4" blazor:onfocusout="5">
   <div id="1" Class="mud-menu" blazor:onmouseenter="6" blazor:onmouseleave="7">
      <button blazor:onclick="8" type="button" class="mud-button-root mud-button mud-button-text mud-button-text-default mud-button-text-size-medium mud-ripple" blazor:onclick:stopPropagation blazor:elementReference=""><span class="mud-button-label"></span></button>
      <div id="popover-443c299a-34de-4546-b6c3-79b04e5c7512" class="mud-popover-cascading-value"></div>
      <div class="mud-overlay" style="" blazor:onclick="9" blazor:onclick:stopPropagation></div>
   </div>
</div>

Results in this output:

doesn't pass the test
Bunit.Extensions.WaitForHelpers.WaitForFailedException : The state predicate did not pass before the timeout period passed. Check count: 1. Component render count: 2. Total render count: 2.

Expected behavior:

When click at the button we will see a message: pass the test

Version info:

• bUnit version: 1.18.4
• .NET Runtime and Blazor version: 6.0.11
• MudBlazor version: 6.2.0

Additional context:
Nothing happened when trying to debug the clicking or when set a break inside openDialog method

[LunicLynx]

Have you tried debugging that your openDialog method is invoked?
If not, this is probably something inside the MudBlazor library bUnit can't help you with. (async javascript for example).

Also be aware that this is probably not doing what you expect, in a UnitTest scenario.

ctx.Services.AddMudServices();

[kostyrin]

Yes I have tried, it didn't call the method

[kostyrin]

BTW it's working with <MudButton @onclick=@(() => openDialog("Y", _id))></MudButton>

[LunicLynx]

Looking at:
https://github.com/MudBlazor/MudBlazor/blob/2df95f8f1c62b647575d0bf26ca5ee9d37ad4a66/src/MudBlazor/Components/Menu/MudMenuItem.razor.cs#L58

I think you have to use the ‘OnClick‘ event handler instead of the ‘onclick‘ event, because the ‘MudMenuItem‘ set does set its own ‘onclick‘ handler.

[kostyrin]

@LunicLynx find out, thanks a lot. turn out code should be like

var button = testComponent.Find("button");
button.Click();
testComponent.FindAll("div.mud-list-item")[0].Click();

there are test cases
https://github.com/MudBlazor/MudBlazor/blob/dev/src/MudBlazor.UnitTests/Components/MenuTests.cs

[egil]

@kostyrin I know MudBlazor uses bUnit to test their components, so I would check in their repo how they test MudTooltip. You can also check out the discussion forum here, others before you have asked about testing components that use Mud.

I will convert this issue to a QA discussion.

[kostyrin]

we can close the discussion.