Search code examples
c#unit-testingblazorxunit

C# Blazor test form with bUnit


I have a Blazor page and want to do unittesting via bUnit with xUnit.

My Blazor-page:

<EditForm Model="login" OnValidSubmit="@LoginSubmit">
    <DataAnnotationsValidator />

    <p>
        <MatBlazor.MatTextField @bind-Value="@login.Mail" Label="Mail-Address" Icon="mail_outline" Dense="true"></MatBlazor.MatTextField>
        <ValidationMessage For="@(() => login.Mail)" />
    </p>
    <p>
        <MatBlazor.MatTextField @bind-Value="@login.Password" Label="Password" Icon="lock_outline" Type="password"></MatBlazor.MatTextField>
        <ValidationMessage For="@(() => login.Password)" />
    </p>
    <p>
        <MatBlazor.MatButton Label="Login" Type="Submit" Raised="true"></MatBlazor.MatButton>
        <MatBlazor.MatButton Label="Register" @onclick="NavigateRegister" Outlined="true"></MatBlazor.MatButton>
    </p>
</EditForm>

and my UnitTest:

var ctx = MyTestContext();
var cut = ctx.RenderComponent<Login>();

var inputs = cut.FindAll("input");
var input1 = inputs.Where(x => x.ParentElement.TextContent.Contains("Mail")).FirstOrDefault();
input1.Change(testuser);
var input2 = inputs.Where(x => x.ParentElement.TextContent.Contains("Password")).FirstOrDefault();
input2.Change("s3cur3_PASS");
var buttons = cut.FindAll("button");
var button = buttons.Where(x => x.TextContent.Contains("Login")).FirstOrDefault();
button.Click();

However the function LoginSubmit is never triggered. Even when I search for form instead of buttom and perform Submit() instead of Click(), the function LoginSubmit isn't triggered.

What can I do in order to

  1. Trigger function LoginSubmit
  2. Trigger the invalid states?

Solution

  • The issue was that only the first Change() was recognized. This is because after every change, submit and click the UI is rendered again. It is smarter to call it the following way:

    var ctx = MyTestContext();
    var cut = ctx.RenderComponent<Login>();
    
    cut.Find("input[aria-label=Mail-Address]").Change(testuser);
    cut.Find("input[type=password]").Change("s3cur3_PASS");
    cut.Find("form").Submit();