Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • May 13 22:31
    egil closed #391
  • May 13 22:31
    egil closed #388
  • May 13 22:08
    egil auto_merge_disabled #391
  • May 13 22:08
    egil synchronize #391
  • May 13 22:02
    egil auto_merge_enabled #391
  • May 13 21:56
    egil edited #391
  • May 13 21:56
    egil edited #391
  • May 13 21:56
    egil synchronize #391
  • May 13 21:44
    egil synchronize #391
  • May 08 17:08
    egil synchronize #391
  • May 08 17:08
    egil edited #391
  • May 08 17:08
    egil edited #391
  • May 08 17:08
    egil edited #391
  • May 08 17:08
    egil edited #391
  • May 08 17:08
    egil edited #391
  • May 08 17:08
    egil edited #391
  • May 08 17:07
    egil edited #391
  • May 08 17:07
    egil edited #391
  • May 08 17:07
    egil edited #391
  • May 08 17:07
    egil opened #391
Hosch250
@Hosch250
System.ArgumentNullException : Value cannot be null. (Parameter 'jsObjectReference')

    --ArgumentNullException
    JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
    HeadManagementJSObjectReference.SetTitleAsync(String title)
    Title.OnAfterRenderAsync(Boolean firstRender)
Appears to be because there is no <title> tag (because that's in my index.html file). So, I'd like to mock that component instead of using the actual one.
Egil Hansen
@egil
@Hosch250 sorry no, its not support currently. The next release should make mocking the IJSRuntime interaction between the Title component and the browser possible though.
I also plan to add support for mocking components, thats a little longer out in the future though.
Hosch250
@Hosch250
Cool, thanks.
Do you have a rough timeline for this?
No major rush; I'm just writing tests with it commented out, then adding it back in for now.
Jochem de Kruijf
@jochem4207
Hey @egil i still have to do a write up, but is it a idea to link to discussion in your main readme? I'm not using github that much, but because it doesn't had a number above it, it looked not intresting.
Jochem de Kruijf
@jochem4207
https://github.com/egil/bUnit/discussions/239 created one :) let me know if there should be any changes to it ^^
Egil Hansen
@egil
Thanks for the wirte up @jochem4207. If folks need more info they can just ask there in the "discussion". And yes, think its a good idea to highlight thr discussion forum as place to ask questions and share testing tricks.
@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.
Hosch250
@Hosch250
Completely understandable. This is a really impressive project and is one of the reasons I chose to use Blazor instead of Fable Elmish or Angular.
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.
Egil Hansen
@egil
I do too, and have a good feeling about it.
And thanks for saying so. Motivating with happy "customers"
Jochem de Kruijf
@jochem4207
I'm a happy customer to ^^
Egil Hansen
@egil
Awesome :)
Alexandra Bianca Crisan
@alecrisan
@egil here is my post for testing syncfusion components :) https://github.com/egil/bUnit/discussions/242
Egil Hansen
@egil
Thanks @alecrisan, appreciate the effort.
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
Alexandra Bianca Crisan
@alecrisan
Honestly I don't have a preference, if the second way feels more safe I say you go for it
Egil Hansen
@egil
The second is more safe, since it force you to pass in something that you can assign to the property you have selected using the parameter selector, and will give you a compiler error if you change the parameter type and forget to update the test.
That said, the tuple passing approach, ("HeaderTitle", headerName), can be more terse.
kp577
@kp577
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?
Egil Hansen
@egil
Hi @kp577, Im not sure I follow exactly what you are saying. Can you share a minimal example of the component under test and your test method?
kp577
@kp577
@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
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>();

or

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