A testing library for Blazor components. Get started testing Blazor components at https://bunit.dev
@egilhansen:matrix.org Good question... I didn't know either. It's a wrapper method in MudBlazor test project. https://github.com/MudBlazor/MudBlazor/blob/dev/src/MudBlazor.UnitTests/Extensions/IRenderedComponentExtensions.cs
now that I know that, I would rather to vanilla bunit
basically, I need to mockup user inputting data into the text field
I'm not checking the binding itself, but the rendering after the binding.. but this
setparam doesn't seem to cut it
Hmm not sure where to start helping you. Bunit comes with SetParametersAndRender that should work
My version, unlike theirs, is actually strongly typed: https://bunit.dev/docs/interaction/trigger-renders.html#setparametersandrender
here's my component razor
<MudGrid>
<MudItem xs="12" sm="4">
<MudAutocomplete T="string" Label="US States" @bind-Value="ActiveStringHolder.StringValue" SearchFunc="@Search1"
ResetValueOnEmptyText="@resetValueOnEmptyText"
CoerceText="@coerceText" CoerceValue="@coerceValue"/>
</MudItem>
<MudItem xs="12" sm="4">
<MudButton OnClick="(()=>ToggleValue())" Variant="Variant.Outlined">Toggle Value</MudButton>
</MudItem>
<MudItem xs="12" md="12" class="flex-column">
<MudSwitch @bind-Checked="resetValueOnEmptyText" Color="Color.Primary">Reset Value on empty Text</MudSwitch>
<MudSwitch @bind-Checked="coerceText" Color="Color.Secondary">Coerce Text to Value</MudSwitch>
<MudSwitch @bind-Checked="coerceValue" Color="Color.Tertiary">Coerce Value to Text (if not found)</MudSwitch>
</MudItem>
</MudGrid>
I'm changing the value of @bind-Value="ActiveStringHolder.StringValue" via the UI
so it should update the object
The display will update correctly. If the user changes the StringValue, it should update ActiveStringHolder and update the display
Ok all, I am trying to write bUnit tests using razor files. Test Explorer (VS 2019) sees my "MessageCenter_RendersPage" test, but when it goes to actually execute I get a "No test matches the given testcase filter....." error in the Output window. The test is seen...but not really. I'm missing something, just not exactly sure what.
5 replies
public async Task Autocomplete_ChangeBoundValue()
{
var comp = Context.RenderComponent<AutocompleteChangeBoundObjectTest>();
Console.WriteLine(comp.Markup);
var autocompletecomp = comp.FindComponent<MudAutocomplete<string>>();
var autocomplete = autocompletecomp.Instance;
autocompletecomp.SetParametersAndRender(parameters => parameters.Add(p=> p.DebounceInterval, 0));
autocompletecomp.SetParametersAndRender(parameters => parameters.Add(p => p.CoerceText, true));
// check initial state
autocomplete.Value.Should().Be("Florida");
autocomplete.Text.Should().Be("Florida");
comp.WaitForAssertion(() => autocompletecomp.Find("input").GetAttribute("value").Should().Be("Florida"));//redundant?
//Get the button to toggle the value
var buttonElement = comp.Find("button");
await comp.InvokeAsync(() => buttonElement.Click());
autocomplete.Value.Should().Be("Georgia");
autocomplete.Text.Should().Be("Georgia");
comp.WaitForAssertion(() => autocompletecomp.Find("input").GetAttribute("value").Should().Be("Georgia"));//redundant?
//Change the value of the current bound value component
//insert "Calif"
autocompletecomp.Find("input").Input("Alabam");
await Task.Delay(100);
var args = new KeyboardEventArgs();
args.Key = "Enter";
//press Enter key
autocompletecomp.Find("input").KeyUp(args);
//The value of the input should be California
comp.WaitForAssertion(() => autocompletecomp.Find("input").GetAttribute("value").Should().Be("Alabama"));
autocomplete.Value.Should().Be("Alabama");
autocomplete.Text.Should().Be("Alabama");
//Change the bound object
var markup1 = autocompletecomp.Markup;
await comp.InvokeAsync(()=> buttonElement.Click());
//await comp.InvokeAsync(() => comp.Render());
autocomplete.Value.Should().Be("Florida"); //pass
autocomplete.Text.Should().Be("Florida"); //fail
comp.WaitForAssertion(() => autocompletecomp.Find("input").GetAttribute("value").Should().Be("Florida"));//breaks here:
var markup2 = autocompletecomp.Markup;
autocomplete.Value.Should().Be("Florida");
//autocomplete.Text.Should().Be("Florida");
//Change the bound object back and check again.
//await buttonComp.InvokeAsync(() => button.OnClick.InvokeAsync());
await comp.InvokeAsync(() => buttonElement.Click());
var t1 = autocompletecomp.Find("input").GetAttribute("value");
var t2 = autocompletecomp.Find("input").GetAttribute("text");
autocomplete.Value.Should().Be("Alabama");
autocomplete.Text.Should().Be("Alabama");
}
@gismofx: I dont mind helping, but I need a minimal reproducable example that I can download and play with to help. If you can, create a QA in the dicsussion forum on GitHub.
[Fact]
public void RendersCorrectly() {
using var ctx = new TestContext();
var rc = ctx.RenderComponent<EditForm>(
@<EditForm Model="TestData" >
<DataAnnotationsValidator />
<EnumInputSelect Id="TestCountryId"
@bind-Value="TestData.TestCountry" @bind-Value:event="ValueChanged" />
<ValidationSummary></ValidationSummary>
</EditForm>
);
rc.MarkupMatches(
@<form >
<select id="TestCountryId" class="valid" value="0" >
<option value="128">Default</option>
<option value="129">UnitedStates</option>
</select>
</form>
);
rc.Find("#TestCountryId").Change("129");
rc.Render();
rc.MarkupMatches(
@<form >
<select id="TestCountryId" class="valid" value="129" >
<option value="128">Default</option>
<option value="129">UnitedStates</option>
</select>
</form>
);
}
I am trying to test a component that basically is a fancy Select. I want to test the returned (for default). Then select on option and then test that is has changed. I feel I am close but The RenderComponent doesn't work? Is there a sample to look at?
I choose to just call that method Render since you simple pass in a RenderFragment that you want if to render.
I admit that
Render<TCom>(RenderFragment) might confuse things. That is added as a shorthand for Render(@<MyComp...). FindComponent<MyComp>(). You use it when you need an IRenderedComponent instead of an IRenderedFragment that Render gives you. RenderComponent always return an IRenderedComponent.
Ps. An IRenderedComponent inherit from IRenderedFragment.
You basically want this: https://bunit.dev/api/Bunit.TestContext.html#Bunit_TestContext_Render__1_RenderFragment_
@egilhansen:matrix.org I'm having trouble making a minimal example, but the complete example is on my repo https://github.com/gismofx/MudBlazor/blob/77dd2c1d2ee12d868982a20795f59754f4eecfa4/src/MudBlazor.UnitTests/Components/AutocompleteTests.cs#L607
4 replies
Ok, I'll see if I can get some time to look at this tomorrow. Mind just creating a QA in the bunit discussion forum so i don't forget. It's almost midnight here in Iceland so I'm off to bed
goodnight
hey friends, i'm live streaming some bUnit enhancement work right now. Come join at twitch.tv/egilhansen if you want to help out :)
Hey everyone!
Quick question regarding the nuget packages. Right now bunit and bunit.web are basically the same. Therefore the question in one of my projects arose: which of those nuget packages should we use when? Or rather: what was the reasoning behind having a bunit and a bunit.web package?
Quick question regarding the nuget packages. Right now bunit and bunit.web are basically the same. Therefore the question in one of my projects arose: which of those nuget packages should we use when? Or rather: what was the reasoning behind having a bunit and a bunit.web package?
1 reply
Hi guys! I think I have a weird problem. When I test a component that has
await element.FocusAsync(), the code never continues. I am not really interested in catching focus event, but I don't understand why it gets stuck there and never continues. For net3.1 I have a JSInterop.SetupVoid("myfocusevent", _ => true).SetVoidResult() but I cannot find anywhere how to handle FocusAsync().
2 replies
Ok, there should be focusasync support builtin, but it does require you are using bunit's JSInterop and not injecting your own IJSRuntime