How to open a blazored modal with bunit?

Viewed 457

I want to test whether a modal opens up or not with bunit. The problem is, that the modal doesn't get rendered. How to open a blazored modal with bunit?

Modal Creation in my component under test:

<div style="display: flex; justify-content: flex-end">
    <button class="btn btn-success
                   btn-lg"
                   id="openModalButton"
                  @onclick="CheckOpenModal">
                Hinzufügen
    </button>
</div>
@code 
{
    [CascadingParameter] public IModalService Modal { get; set; }

    private async Task OpenModalForCreation()
    {
        List<string> ParameterA = new List<string>();

        var parameters = new ModalParameters();
        parameters.Add(nameof(CreationModal.ParameterA), ParameterA);

        Modal.Show<CreationModal>("Create something", parameters);
    }
}

My TestClass:

public class PrivateMachinesCompTest : TestContext
{     
    public CompTest()
    {
            Services.AddBlazoredModal();
    }
    [Fact]
    public void CheckOpenModal()
    {
        modalService = new ModalService();
        var cut = RenderComponent<ComponentUnderTest>(parameters => parameters
                .AddCascadingValue(modalService));
        var openModalButton = cut.Find("#openModalButton");
        openModalButton.Click();
        cut.MarkupMatches("Create something");
    }
1 Answers

The problem is that you are not rendering the component that actually does the rendering. Just passing in an IModalService doesn't do it.

My approach would be to create a mock of IModalService and assert that the expected method on it is called.

Related