A testing library for Blazor components. Get started testing Blazor components at https://bunit.dev
No major rush; I'm just writing tests with it commented out, then adding it back in for now.
https://github.com/egil/bUnit/discussions/239 created one :) let me know if there should be any changes to it ^^
@Hosch250 with no guarantees at all, i do hope to have it done by the time . net 5 ships in a few weeks. But this is the thing i do after work and family have taken their slice of my time.
I hope you can get the .NET Foundation to pick it up when you are ready; it would really help ensure Blazor doesn't just fall by the wayside like so many other projects.
And thanks for saying so. Motivating with happy "customers"
@egil here is my post for testing syncfusion components :) https://github.com/egil/bUnit/discussions/242
I wonder, do you prefer that way of passing parameters?
I am actually thinking about deprecating it just supporting the builder method.
E.g.:
IRenderedComponent<Dialog> cut = RenderComponent<Dialog>(ps => ps.Add(p => p.HeaderTitle, headerName));
Its not as visual, but its type safe and refactor safe by default
That said, the tuple passing approach,
("HeaderTitle", headerName), can be more terse.
Hi @egil
I want to cover a scenario in test cases, it can be like to validate that 2 way data binding is working perfectly
Say I have a Model class with a property FirstName. (It is not a parameter type) and i have used InputText to to bind data in razor component.
For this i want to write a test case. When i load component it loads as expected, but i am struck on a point on how to update this FirstName text type value inside test the case.
Do we have a option to change the value of the input type based on the id in the test cases?
I want to cover a scenario in test cases, it can be like to validate that 2 way data binding is working perfectly
Say I have a Model class with a property FirstName. (It is not a parameter type) and i have used InputText to to bind data in razor component.
For this i want to write a test case. When i load component it loads as expected, but i am struck on a point on how to update this FirstName text type value inside test the case.
Do we have a option to change the value of the input type based on the id in the test cases?
@egil Actually I am not so sure to how to start my test case
I have a add employee page with some input text fields, save and cancel buttons
when I render this component in test case all the input fields will be empty, I want to check save button functionality. so ideally before calling on click for save button in the test case I want to fill those input fields.. but I don't understand how to change the values of input fields inside test cases
I have a add employee page with some input text fields, save and cancel buttons
when I render this component in test case all the input fields will be empty, I want to check save button functionality. so ideally before calling on click for save button in the test case I want to fill those input fields.. but I don't understand how to change the values of input fields inside test cases
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".