System.InvalidOperationException : The render handle is not yet assigned.

[Alessandro2212]

Hi, I am getting an exception when trying to render my component with bunit.

 Stack Trace: 
    RenderHandle.ThrowNotInitialized()
    RenderHandle.get_Dispatcher()
    ComponentBase.InvokeAsync(Func`1 workItem)
    Validations.RaiseStatusChanged(ValidationStatus status, IReadOnlyCollection`1 messages)
    Validations.ClearAll()
    OfferTypeComponent.OnLoad(Object model) line 38
    EditableViewModel`2.LoadModel(TModel model) line 208
    OfferTypeViewModel.Load(Guid offerTypeId) line 39
    OfferTypeComponent.OnParametersSetAsync() line 29
    ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
    ComponentBase.RunInitAndSetParametersAsync()
    TestRenderer.AssertNoUnhandledExceptions() line 355
    TestRenderer.Render[TResult](RenderFragment renderFragment, Func`2 activator) line 237
    TestRenderer.RenderFragment(RenderFragment renderFragment) line 55
    TestContextBaseRenderExtensions.RenderInsideRenderTree(TestContextBase testContext, RenderFragment renderFragment) line 45
    TestContextBaseRenderExtensions.RenderInsideRenderTree[TComponent](TestContextBase testContext, RenderFragment renderFragment) line 25
    TestContext.Render[TComponent](RenderFragment renderFragment) line 70
    TestContext.RenderComponent[TComponent](Action`1 parameterBuilder) line 56
    OfferTypeComponentTests.OfferTypeComponent_Regularly_ShouldShowTheDetailsOfTheSelectedOfferType() line 101

The component I'm trying to render has a nested component to render, and when the nested component's OnParametersSetAsync() is completed, I get that exception.

There is a two-way binding on the nested component's parameter, and when that parameter changes the "mother" component's view model gets notified and triggers StateHasChange().

this is the "mother" component (OfferTypeComponent) razor code:

    @if (this.ViewModel.IsNewInvoiceText && !this.ViewModel.IsReadOnly())
     {
                                   
                      <InvoiceTextSelectorComponent @bind-SelectedInvoiceTextId="@this.ViewModel.InvoiceTextId" 
                                                   Disabled="@this.ViewModel.IsReadOnly()" />
     }

this is the nested component (InvoiceTextSelectorComponent) razor.cs code:

    [Parameter] public Guid SelectedInvoiceTextId { get; set; }
    [Parameter] public bool Disabled { get; set; }
 
    protected override async Task OnParametersSetAsync()
    {
       this.ViewModel.SelectedInvoiceTextId = this.SelectedInvoiceTextId;
        await base.OnParametersSetAsync();
    }

this is the unit test triggering the excp:

    public OfferTypeComponentTests()
    {
        var mockInvoiceTextService = new Mock<IInvoiceTextService>();
        var mockOfferTypeService = new Mock<IOfferTypeService>();
        var offerTypeValidation = new Mock<Validations>();

        //mock service methods
        mockInvoiceTextService
            .Setup(ch => ch.Query(It.IsAny<Expression<Func<InvoiceText, bool>>>()))
            .Returns(() => Task.FromResult(GetInvoiceTexts()));

        mockOfferTypeService
           .Setup(ch => ch.GetById(It.IsAny<Guid>()))
           .Returns((Guid offerTypeId) => Task.FromResult(GetOfferType(offerTypeId)));

        this.OfferTypeViewModel = new OfferTypeViewModel(mockOfferTypeService.Object, mockInvoiceTextService.Object);
        this.OfferTypeViewModel.Validations = offerTypeValidation.Object;

        this.InvoiceTextSelectorViewModel = new InvoiceTextSelectorViewModel(mockInvoiceTextService.Object);

        this.OfferTypes = GetOfferTypes();

        //services registration for the mocked component
        testContext = new TestContext();       
        testContext.Services.AddSingleton(OfferTypeViewModel);
        testContext.Services.AddSingleton(InvoiceTextSelectorViewModel);
    }

    [Fact]
    public void OfferTypeComponent_Regularly_ShouldShowTheDetailsOfTheSelectedOfferType()
    {
        //arrange
        using var ctx = testContext;

        //act
        var offertype = OfferTypes.First();
        Guid offerTypeId = offertype.Id;          

        var cut = ctx.RenderComponent<OfferTypeComponent>(
            param => param
                .Add(p => p.OfferTypeId, offerTypeId)
                .AddCascadingValue(MockAuthStateProvider.GetAuthenticationStateAsync())
        );  -->exception here

        //assert
        Assert.Collection(cut.FindAll("option"),
            ul => Assert.Contains("InvoiceText1", ul.TextContent),
            ul => Assert.Contains("InvoiceText2", ul.TextContent));
    }

Any help/suggestion ?

Thanks

[egil]

Hi @Alessandro2212,

Can you share the exception message (stack trace alone is not useful :))?

[Alessandro2212]

Hi @egil,

thanks for your quick reaction,

the exception message is the following:

Message: "The render handle is not yet assigned"
Source: "Microsoft.AspNetCore.Components"

[egil]

Hmm not sure. Can you share a repo where I can try it myself?

[Alessandro2212]

Hi @egil
I shared with you the repo (Extras) where the code is.

the solution is "JAP-Loyalty"

the test having the issue is "OfferTypeComponent_Regularly_ShouldShowTheDetailsOfTheSelectedOfferType" in prj "JAP.Gateways.LoyaltyManager.Module.Tests"

the exception message : System.InvalidOperationException : The render handle is not yet assigned.

thanks for the support

[egil]

Ok I'll take a look as soon as possible. Perhaps over the weekend.

[egil]

Hi @Alessandro2212, weekend does not seem to turn out as I hope. Hopefully I will have time to look at this next week!

[Alessandro2212]

Hi @egil Thanks for your update, it is perfectly fine the next weekend too Il Dom 15 Ago 2021, 12:56 Egil Hansen ***@***.***> ha scritto:

…

Hi @Alessandro2212 <https://github.com/Alessandro2212>, weekend does not seem to turn out as I hope. Hopefully I will have time to look at this next week! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#476 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGJLEH57G6TQ5X7Y33XE7MTT46MMVANCNFSM5B4BQVXQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

[egil]

OK, I had a look at the code, and it happens because you are calling

this.ViewModel?.Validations.ClearAll(); in OfferTypeComponent in OnLoad. Commenting that out fixes the problem.

ClearAll seems to be a method in Blazorise, that triggers a re-render of a component that has not yet been initialized. as far as I can see. Its a pretty complex project you have, so that's about the level of input I can provide. If you think there is a bug here, please create a minimal reproducible example that I can investigate.

A few other observations from looking at your code:

1. You test class inherits from TestContext. When it does that, you should NOT new one up in your test, since your test class is a TestContext now.

So instead of doing this in your test ctor:

testContext = new TestContext();
testContext.Services
   .AddBlazorise(options =>
   {
       options.ChangeTextOnKeyPress = true;
   })...

just do this:

```c#
Services
   .AddBlazorise(options =>
   {
       options.ChangeTextOnKeyPress = true;
   })...

And in your test methods, dont do:

using var ctx = testContext;
var cut = ctx.RenderComponent<...>

just do this:

var cut = RenderComponent<...>

See more about this at https://bunit.dev/docs/getting-started/writing-tests.html#remove-boilerplate-code-from-tests-1

2. You can also use the built-in fake authentication and authorization providers in bUnit, that will set cascading values and inject stuff as needed in components. Just issue a ctx.AddTestAuthorization().SetAuthorized("homer@simpsons.com"); See more here about this: https://bunit.dev/docs/test-doubles/faking-auth.html

Hope this helps.