A testing library for Blazor components. Get started testing Blazor components at https://bunit.dev
So @kp577 there are helpers for that. A good guess is that
cut.Find("input-field css selector").Change("NEW VALUE"); works
hi @therubble_twitter, I cant remember, but I think the EditForm provides a context, so you just need to give it a model. Something like thus (warning, untested code):
// using the new RenderTree option in beta 11 (https://bunit.egilhansen.com/docs/providing-input/root-render-tree.html)
using var ctx = new TestContext();
ctx.RenderTree.Add<EditForm>(ps => ps.Add(p => p.Model, myModel));
var cut = ctx.RenderComponent<MyComponent>();or
using var ctx = new TestContext();
var cut = ctx.RenderComponent<EditForm>(ps => ps
.Add(p => p.Model, myModel)
.AddChildContent<MyComponent>()
);
The component I'm trying to test looks like :
@{
if (ChildContent != null)
{
@ChildContent(Model)
}
else
{
<!-- Output a placeholder -->
<div>
<InputNumber @bind-Value="Model.BindableValue" disabled="@Model.ReadOnly"></InputNumber>
<ValidationMessage For="@(() => Model.BindableValue)"></ValidationMessage>
<SourceSystemMessages Model="Model.SourceSystemMessages"></SourceSystemMessages>
</div>
}
}
@code{
[Parameter]
public virtual RenderFragment<Core.DecimalValue> ChildContent { get; set; }
[Parameter]
public virtual Core.DecimalValue Model { get; set; }
}
In that case, I think the easiest approach is to use razor based testing (if you are using xUnit) ... https://bunit.egilhansen.com/docs/getting-started/writing-razor-tests.html
@therubble_twitter Otherwise, this might work, although we are getting to the limit of what the c# only builder syntax can do:
var cut = RenderComponent<EditForm>(ps => ps
.Add<MyForm, EditContext>(p => p.ChildContent, ctx => myformParams => myformParams.Add(x => x.Model, ctx.Model))
);
Havent testet, but it should work.
You happy for me to update the bunit docs with this info if it works?
I want to build up a set of how-to guides at some point in the docs, but for now it would be awesome if you could add your example to https://github.com/egil/bUnit/discussions?discussions_q=category%3A%22Show+and+tell%22
E.g. with a title such as "How to render component inside an EditForm".
What I've learned is the small kids dont care about your hangovers, they wake up at 6am anyway, so I prefer not to have them any more :)
Oof. 6 am on a hangover. Idk if the hangover already started by then or its still the drunk phase
Hey all - hoping someone is able to help out with an issue I'm having writing some tests. I have a cascading parameter that takes some services from DI. I'm trying to create tests for my child component and pass in the CascadingValue which from what I've read seems like it should be as simple as:
var cut = ctx.RenderComponent<Toast>(ComponentParameter.CreateCascadingValue("ParameterName", myValue)
In my situation here myValue is a `Mock<ParentComponent>' but whenever I debug the test the value is null so it's not picking it up
The easiest, if you dont want to think about it, is to use the builder pattern to pass parameters, e.g.:
ctx.RenderComponent<Toast>(ps => ps.Add(p => p.ParameterName, myValue));
is there a good working example of bUnit using Async web pages? I have a simple project which loads data base from database. when i test it with bUnit all is see is "loading"... and it is completing testing before data is loaded. so its a sync call. how can i make it async call... so bUnit waits for the page to completely load the data and then triggers test?
or a link to youtube video demoing the async funtionality for bUnit?
would like a working example and i will be able to figure it out from there
any such link available?
Its a common scenario. You can look at https://bunit.egilhansen.com/docs/interaction/awaiting-async-state.html and https://bunit.egilhansen.com/docs/verification/async-assertion.html for general input on handling async/delayed rendering of the component under test
Are you loading data from a real data source in your tests, or are you mocking your data source?
