egil/bunit

A testing library for Blazor components. Get started testing Blazor components at bunit.egilhansen.com/docs/getting-started/

Egil Hansen

@egil

ok.

So @kp577 there are helpers for that. A good guess is that cut.Find("input-field css selector").Change("NEW VALUE"); works

kp577

@kp577

Tq that helped

Patrick Swayc

@therubble_twitter

Hi, Does anyone have an example for testing a component that's inside an EditForm?
I've tried .AddCascadingValue("EditContext", new EditContext(model)) but it never seems to be set

Patrick Swayc

@therubble_twitter

I'm current getting

System.InvalidOperationException
Microsoft.AspNetCore.Components.Forms.InputNumber`1[System.Decimal] requires a cascading parameter of type EditContext

Egil Hansen

@egil

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>();

using var ctx = new TestContext();
var cut = ctx.RenderComponent<EditForm>(ps => ps
    .Add(p => p.Model, myModel)
    .AddChildContent<MyComponent>()
);

Patrick Swayc

@therubble_twitter

Hi @egil - I'd already tried the 2 example you'd given me and get the following exception

Unable to set property 'ChildContent' on object of type 'Microsoft.AspNetCore.Components.Forms.EditForm'.

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; }
}

Egil Hansen

@egil

Ahh @therubble_twitter, I think its because ChildContent of EditForm is of type RenderFragment<T>

https://source.dot.net/#Microsoft.AspNetCore.Components.Web/Forms/EditForm.cs,61

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

Egil Hansen

@egil

@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.

Patrick Swayc

@therubble_twitter

I'll give it a whirl

You happy for me to update the bunit docs with this info if it works?

Egil Hansen

@egil

See https://bunit.egilhansen.com/docs/providing-input/passing-parameters-to-components.html#passing-a-component-based-template

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".

Egil Hansen

@egil

Or whatever you thing :)

Patrick Swayc

@therubble_twitter

Will do, let me get this up and running first

Egil Hansen

@egil

Forgot to add that you also have to pass a model to the EditForm's parameters, e.g.:

var cut = RenderComponent<EditForm>(ps => ps
    .Add(p => p.Model, myModelInstance)
    .Add<MyForm, EditContext>(p => p.ChildContent, ctx => myformParams => myformParams.Add(x => x.Model, ctx.Model))
);

Jochem de Kruijf

@jochem4207

Hi all, hows it going :)?

Egil Hansen

@egil

busy busy, how are you?

Jochem de Kruijf

@jochem4207

Lost my touch and energy for a few days but picking up soon! Energy is back. Busy as always with work. Just started reading trailblazer (book from the Salesforce CEO)

Egil Hansen

@egil

Good, my energi level is more or less controlled by how my kids sleep these days :)

Jochem de Kruijf

@jochem4207

Haha i see, ive many fathers as coworkers. You know a little bit of alcohol or sleep medicine hahah #shitty tips

Egil Hansen

@egil

for the kids or the parents?

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 :)

Jochem de Kruijf

@jochem4207

Hahah for the kids

Oof. 6 am on a hangover. Idk if the hangover already started by then or its still the drunk phase

Egil Hansen

@egil

paevans87

@paevans87

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

Egil Hansen

@egil

Hi @paevans87, is your cascading parameter named or unnamed?

https://bunit.egilhansen.com/docs/providing-input/passing-parameters-to-components.html#cascading-parameters-and-cascading-values

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));

paevans87

@paevans87

Hi @paevans87, is your cascading parameter named or unnamed?

I haven't come across this post! I suspect that'll have all the info to get me up & running, thanks!

Egil Hansen

@egil

Hopefully, there is lots of documentation on that site :)

Forex Ray

@forex.ray.v1_gitlab

hello everyone, I'm new here... Let me start by saying Hello from England :)

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?

Egil Hansen

@egil

Welcome @forex.ray.v1_gitlab to the community

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?

Forex Ray

@forex.ray.v1_gitlab

hello @egil , we are loading the real data from the APIs and it's not a mock. That's why there is time delay in the data load.

Egil Hansen

@egil

Then you can use WaitForState(() => cut.FindAll("css selector for element that should show up").Count > 1)

Forex Ray

@forex.ray.v1_gitlab

ah ok. let me try that. Thanks @egil

Egil Hansen

@egil

Ohh forgot to mention, if you need more than 1 second of wait time, you can change that by passing a second parameter to WaitForState, e.g. WaitForState(() => ...., TimeSpan.FromSeconds(xx))

camelCaseSharp

@camelCaseSharp

I am thinking about using bunit to write BDD style tests, these typically involve writing longer UI scenarios than a TDD style unit test. Is is possible for a single bunit cut to navigate between two routable Blazor components (also known as pages)?

Where communities thrive

People

Repo info

Activity