How can I update the Value of a CascadingValue after the first render?

[icnocop]

Hi.

I'm able to test a component which uses a CascadingValue without issues, but I'm unable to figure out how to update the value of the cascading value and verify the component is re-rendered as expected.

Here's an example scenario where the component under test is a custom Telerik Grid data column which is expected to display the DateTime field in the user's current time zone, specified by the cascading value. This is a Blazor Server web application which targets ASP.NET Core 3.1, and the user's time zone is retrieved from the browser using JavaScript, so it's expected to be null during the first render:

        [TestMethod]
        public void test()
        {
            // test data model
            var data = new TestModel[]
            {
                new TestModel
                {
                    MyDateTime = new DateTime(2022, 8, 11, 0, 0, 0, DateTimeKind.Utc),
                }
            };

            // add a Telerik Root Component to hold all Telerik components and other content
            this.EnsureRootComponent();

            // add the cascading value which contains the time zone information
            this.RenderTree.TryAdd<CascadingValue<TimeZoneInfo>>(p =>
            {
                p.Add(parameters => parameters.Value, null);
            });

            // render the custom date time grid column
            RenderFragment dateTimeGridColumnRenderFragment = new ComponentParameterCollectionBuilder<DateTimeGridColumn>(parameter => parameter
                .Add(cp => cp.Title, "Test Column")
                .Add(cp => cp.Field, nameof(TestModel.MyDateTime)))
                    .Build()
                    .ToRenderFragment<DateTimeGridColumn>();

            // render the Telerik data grid with the custom date time grid column
            var cut = this.RenderComponent<TelerikGrid<TestModel>>(parameters => parameters
                .Add(t => t.Data, data)
                .Add(t => t.GridColumns, dateTimeGridColumnRenderFragment));

            // TODO: Update the value of the CascadingValue here
            // ex. TZConvert.GetTimeZoneInfo("America/Los_Angeles")

            // re-render the component under test
            cut.Render();

            // TODO: verify the date is displayed in relation to the time zone information specified in the cascading value
            cut.Find("td").InnerHtml.MarkupMatches("8/10/2022 5:00 PM");
        }

        private class TestModel
        {
            public DateTime MyDateTime { get; set; }
        }

I'm currently using bUnit 1.6.4.

When I tried the following:

cut.SetParametersAndRender(x => x
    .AddCascadingValue<TimeZoneInfo>(TZConvert.GetTimeZoneInfo("America/Los_Angeles")));

I got the following exception:

System.InvalidOperationException: You cannot provide a new cascading value through the SetParametersAndRender method.

Stack Trace: 
RenderedComponentRenderExtensions.ToParameterView(IReadOnlyCollection`1 parameters) line 97
RenderedComponentRenderExtensions.SetParametersAndRender[TComponent](IRenderedComponentBase`1 renderedComponent, Action`1 parameterBuilder) line 83

Thank you!

[icnocop]

I was able to set the properties of the component and re-render as follows:

            IRenderedComponent<DateTimeGridColumn> g = cut.FindComponent<DateTimeGridColumn>();
            g.Instance.UserTimeZoneInfo = TZConvert.GetTimeZoneInfo("America/Los_Angeles");

            cut.Render();

[linkdotnet]

Basically allowing IsFixed to be false via default would allow that.. well we still would need to re-render :D
So a mixture of that plus SetParametersAndRender would be good... but maybe there is a reason we disallow this in the first place. Have to check

[egil]

... @egil was this to prevent unintended changes? ...

I honestly cannot remember. I wonder how this behaves in i "razor based tests", and there are probably differences with stucts and ref types.

[linkdotnet]

And I guess SetParametersAndRender disallows CascadingValues because Blazor does so as well:

                   // We don't allow you to set a cascading parameter with a non-cascading value. Put another way:
                    // cascading parameters are not part of the public API of a component, so it's not reasonable
                    // for someone to set it directly.
                    //
                    // If we find a strong reason for this to work in the future we can reverse our decision since
                    // this throws today.
                    ThrowForSettingCascadingParameterWithNonCascadingValue(targetType, parameterName);

This gets called on SetParametersAsync where we use the ParameterView to set those properties.

[linkdotnet]

Found in ComponentProperties.cs.

[linkdotnet]

I wonder how this behaves in i "razor based tests"

That works like a charm, given the fact that it is no problem to have an int as cascading value which might get updated on a button click.

For now, we could set IsFixed to false or let the user decide, where the default would be true. Still the user has to call Render() so that the updated version can be propagated. (But that is no news, given the fact if you have a two-way binding and you change the value inside your test, your component has to be re-rendered as well).