CODEWITHSUNDEEP
unit-testingblazorblazor-webassemblymudblazorbunit
DennisL
DennisL

Reputation: 333

BUnit set value to MudTextField with Mask

I test Blazor web assembly project with MudBlazor in BUnit and XUnit. I tried to set MudTextField value using .input("xxx"), and it works in most cases, but have error on those with Mask, anyone know how to do it with Mask?

Razor.code:

<MudTextField id="txtPhoneNumber" Mask="@_mobilePhoneMask" 
Required="false" 
@bind-Value="@_phoneNumber" 
Label="Mobile Number" 
Variant="Variant.Text" 
HelperTextOnFocus="true" 
Immediate="true" 
Adornment="Adornment.Start" 
AdornmentText="+61" 
InputType="InputType.Telephone"/>

Mask:

private readonly PatternMask _mobilePhoneMask = new("0000 000 000")
{
    MaskChars = new[] { new MaskChar('0', @"[0-9]") }, CleanDelimiters = true
};

BUnit:

var Createxxx = RenderComponent<Createxxx>();
var txtPhoneNumber = Createxxx.Find("[id^=\"txtPhoneNumber\"]");
txtPhoneNumber.Input("0400000000");

Without Mask, the out html is as below, there is "blazor:oninput", that's probably the reason that it works

<input class="mud-input-slot mud-input-root mud-input-root-text mud-input-root-adorned-start" 
id="txtPhoneNumber" type="tel" value="" 
blazor:oninput="25" blazor:onchange="26" blazor:onblur="27" inputmode="text" blazor:onkeydown="28" blazor:onkeypress="29" blazor:onkeyup="30" maxlength="524288" aria-invalid="false" blazor:elementreference="">

But With Mask, the outer html doesn't have "blazor:oninput", so the .Input won't work... But how to make it work? I want to use Mask.

<input class="mud-input-slot mud-input-root mud-input-root-text mud-input-root-adorned-start" 
id="txtPhoneNumber" type="tel" value="" 
blazor:onblur="25" blazor:onfocus="26" blazor:oncut="27" blazor:oncopy="28" inputmode="text" blazor:elementreference="">

Below is the error message with Mask, when call ".Input(xxx)" in test

enter image description here

Upvotes: 1

Views: 289

Answers (1)

Link
Link

Reputation: 1711

The straightforward and simple way to do this, is to grab the component and use the API from MudBlazor itself:

var Createxxx = RenderComponent<Createxxx>();
var mudBlazorInputField = Createxxx.FindComponent<MudTextField>();
await mudBlazorInputField.SetText("Your text goes here");
Createxxx.Render(); // Re-render the cut so that the markup is updated

A word of advice: It seems that you want to test 3rd party component code here - namely MudBlazor input control. I would not recommend that way. Mainly because just by upgrading a 3rd party package, your tests might break - even though your production logic is still up and running.

You might want to have a look at the following resources:

  1. https://bunit.dev/docs/providing-input/substituting-components.html?q=Stub&tabs=moq
  2. An experimental source generator package we offer: https://bunit.dev/docs/extensions/bunit-generators.html?q=Stub - that does remove a lot of the boilerplate and manual labor code to make this work more smoothly

The basic principle is that you should "trust" your 3rd party code to do what it promises and only test what is really yours. If you would check if the component works with your mask, that is more or less 3rd party component behaviour.

Upvotes: 1

Related Questions