bUnit Integration Test of a Modal Dialog gets stuck in a deadlock

[mdausman-bi]

I have a grid component on a razor page with a button that fires the ShowDialog method below to get user input. The MudBlazor Dialog "sits" on the DialogService.ShowAsync call until the user clicks OK or Cancels. The Refresh() method updates the razor page with updated data in other razor components on the same page. I am unable to figure out how to unit test this integration between components because the unit test code is waiting for the dialog to be closed and that never happens. Basically it's stuck in a deadlock.

    private async Task ShowDialog(string title, Guid requirementId)
    {
        var requirement = _requirements.Single(x => x.RequirementId == requirementId);

        var parameters = new DialogParameters<RequirementsUplineDialog>
        {
            {x => x.Title, title},
            {x => x.Instructions, requirement.Instructions}
        };

        var dialog = await DialogService.ShowAsync<RequirementDialog>(title, parameters);
        var result = await dialog.Result;

        if (result != null && !result.Canceled && !string.IsNullOrEmpty((string?)result.Data))
        {
            var data = (string)result.Data;
            await RequirementService.UpdateRequirementAsync(requirementId, data);

            await Refresh();
        }
    }

Unit Test:

    [Fact]
    public async Task RequirementUpdate_ProgressUpdates()
    {
        var component = RenderComponent<MudBlazorTestWrapper>(x  => 
            x.AddChildContent<ContractStatusDetails>(parameters =>
                parameters.Add(queryString => queryString.ContractDetailId, _contractDetailId.ToString()))
        );
	
        // Check the actions needed
        var progress = component.Find(".progress");
        progress.InnerHtml.Should().Contain("Action Needed (4)");
	
        // Click the button to open the Upline modal
        var actionButtons = component.FindAll(".action-button");
        var button = actionButtons[0];
        await button.ClickAsync(new MouseEventArgs());  // Test hangs here but needs the enter and click lines below 

        component.WaitForAssertion(() => component.Markup.Should().Contain("dialogText"));

        // Enter data
        var textBox = component.Find("#dialogText");
        textBox.TextContent = "Test Data";

        // Click the button to save the data
        var saveButton = component.Find("#dialogApplyButton");
        saveButton.Click();

        // Re-check the progress
        progress = component.Find(".progress");
        component.WaitForAssertion(() => progress.InnerHtml.Should().Contain("Action Needed (3)"));
    }

Just testing the dialog works fine and I can get the return value. However, for this test I need to validate that another component opens the dialog and when saved/applied a third razor component is updated.

[ScarletKuro]

This could possibly fix your problem: #8964, but it's for v7, and it's not guaranteed that it will.

Do you have the MudDialogProvider in your test? In fact, the ShowAsync method waits for the dialog to be rendered there.

[mdausman-bi]

Thank you ScarletKuro... I will check out #8964. Yes, I have the MudDialogProvider... the MudBlazorTestWrapper.Razor component in the test is this:

@using MudBlazor;

<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

@ChildContent

@code {
    [Parameter] public RenderFragment ChildContent { get; set; }
}

[mdausman-bi]

I stumbled upon the solution... Make the test case synchronous and don't await the mouse call to open the dialog. The code below works as desired.

    [Fact]
    public void RequirementUpdate_ProgressUpdates() // Change "async Task" to "void"
    {
        var component = RenderComponent<MudBlazorTestWrapper>(x  => 
            x.AddChildContent<ContractStatusDetails>(parameters =>
                parameters.Add(queryString => queryString.ContractDetailId, _contractDetailId.ToString()))
        );
	
        // Check the actions needed
        var progress = component.Find(".progress");
        progress.InnerHtml.Should().Contain("Action Needed (4)");
	
        // Click the button to open the Upline modal
        var actionButtons = component.FindAll(".action-button");
        var button = actionButtons[0];
        button.ClickAsync(new MouseEventArgs());  // Don't await the click

        component.WaitForAssertion(() => component.Markup.Should().Contain("dialogText"));

        // Enter data
        var textBox = component.Find("#dialogText");
        textBox.TextContent = "Test Data";

        // Click the button to save the data
        var saveButton = component.Find("#dialogApplyButton");
        saveButton.Click();

        // Re-check the progress
        progress = component.Find(".progress");
        component.WaitForAssertion(() => progress.InnerHtml.Should().Contain("Action Needed (3)"));
    }

[ScarletKuro]

Interesting. Thanks for the workaround. Did the #8964 not help, or did you not have a chance to check it out? In any case, if you want me to take a deeper look into this issue, let me know, but I'd need a full reproduction project.

[mdausman-bi]

The #8964 did help and I tried to apply it, but still hit roadblocks. I'll add you to a full project. Appreciate your help on this and quick response.

[ScarletKuro]

Okay, so after debugging and reviewing the entire code, I believe your "workaround" is a completely legitimate solution.
The issue arises because bUnit wraps these click calls inside an InvokeAsync, which essentially queues the work item and returns control (if you decide to await it) once that item is processed on the renderer thread. However, the queue gets "blocked" by the await dialog.Result, and we never reach that call until the dialog is closed, which never happens.
It's not really a bug from either party, just something to keep in mind when dealing with UI dispatchers.
I suppose you could even replace the openButton.ClickAsync(new MouseEventArgs()) with just openButton.Click().