Testing components with Telerik Grid throws System.InvalidOperationException #38

jpiell · 2020-01-21T14:48:51Z

I am testing a component that uses the Telerik UI Blazor grid component. The grid component throws an exception: Message=Cannot provide a value for property 'State' on type 'Telerik.Blazor.Components.TelerikGrid, There is no registered service of type 'Telerik.Blazor.Components.Grid.State.IGridState'.

IGridState is private so it cannot be mocked.

I would like some help on how to work around this issue.

Attached is a sample app I put together to demonstrate the issue I am having.

SampleApp.zip

egil · 2020-01-21T17:28:38Z

Hi @jpiell

I will take a look later tonight if time allows, otherwise tomorrow.

jpiell · 2020-01-21T17:30:27Z

Thank you!

…

On Tue, Jan 21, 2020 at 12:28 PM Egil Hansen ***@***.***> wrote: Hi @jpiell <https://github.com/jpiell> I will take a look later tonight if time allows, otherwise tomorrow. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#38>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHE7FBYVTITLEGGE25MYNFDQ64WEPANCNFSM4KJUVQUA> .

EdCharbeneau · 2020-01-22T15:40:54Z

@jpiell Hi, I work for Telerik. Sorry you're having trouble getting this set up. Because Blazor is new (still in preview), we haven't checked it against all integration points yet, this great testing framework by @egil is the perfect example.

We are evaluating how we can provide better support for this, and I'm testing myself as well.

Short term solution
I believe that if TestServiceProvider implemented IServiceCollection then one could simply call Services.AddTeleirkBlazor() and that would solve the issue. This appears to be on the roadmap here.

Long term solution
This also seems to be the only Telerik service that is set to private. I will forward this to the engineering team and see what the reason is and if it's possible to open up the interface. However, this will likely not change in the immediate future as it would need to be tested and queued for release. If you would like to track this, I would suggest making an entry on our feedback portal.

egil · 2020-01-22T15:49:26Z

@jpiell #39 should be fixed in the upcoming beta 5 release. My plan is to push that out in a day or two, so hopefully that will solve your issue.

jpiell · 2020-01-22T17:21:22Z

Hi Ed, I believe you are correct. It looks like Egil just implemented IServiceCollection which should resolve the issue I am having. If engineering could make IGridState public, I could mock the interface and that would work as well (maybe even better). I believe Beta 5 of the Razor.Component.Testing.Library will be released in the next couple of days. Thanks for keeping an eye on the issue. Regards, Jeff

…

On Wed, Jan 22, 2020 at 10:49 AM Egil Hansen ***@***.***> wrote: Closed #38 <#38>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#38>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHE7FBYZ3VGG5YOSWZJGMWDQ7BTI5ANCNFSM4KJUVQUA> .

jpiell · 2020-01-22T22:01:52Z

Thank you sir!

…

Sent from my iPhone

On Jan 22, 2020, at 10:49 AM, Egil Hansen ***@***.***> wrote: @jpiell #39 should be fixed in the upcoming beta 5 release. My plan is to push that out in a day or two, so hopefully that will solve your issue. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

jpiell · 2020-01-23T12:36:27Z

Egil,

You need to expose the IServiceCollection or we will not be able to register services.

Thanks,

Jeff

egil · 2020-01-23T12:46:47Z

Egil,

You need to expose the IServiceCollection or we will not be able to register services.

Thanks,

Jeff

jpiell, in beta-5, TestServiceProvider, available through the Services property in the test context, is a IServiceCollection.

I just did a dotnet new razortest with beta-5, and it looks as if it works as it should. This is my test file:

using System;
using Xunit;
using Egil.RazorComponents.Testing;
using Egil.RazorComponents.Testing.Diffing;
using Egil.RazorComponents.Testing.Asserting;
using Egil.RazorComponents.Testing.Mocking.JSInterop;
using Egil.RazorComponents.Testing.EventDispatchExtensions;
using Microsoft.Extensions.DependencyInjection;

namespace tspsc
{
  public class Component1Test : ComponentTestFixture
  {
    [Fact]
    public void Component1RendersCorrectly()
    {
      Services.AddMySrvs();
      var cut = RenderComponent<Component1>();      

      cut.MarkupMatches(@"<div class=""my-component"">
                            This Blazor component is defined in the <strong>razorclasslib1</strong> package.
                          </div>");
    }
  }

  public static class SrvColExt 
  {
    public static void AddMySrvs(this IServiceCollection services)
    {
      services.AddSingleton(new object());
    }
  }
}

And in razor based tests:

@inherits TestComponentBase

<Fixture Setup="() => Services.AddMySrvs()">
    <ComponentUnderTest><Component1/></ComponentUnderTest>
</Fixture>

Both files compile and run on my computer.

egil · 2020-01-23T13:07:17Z

It looks as if Teleriks ServiceCollectionExtensions class matches the SrvColExt class in my comment above (https://docs.telerik.com/blazor-ui/api/Microsoft.Extensions.DependencyInjection.ServiceCollectionExtensions.html), so it should work.

Am I missing something here?

egil · 2020-01-23T13:20:02Z

OK, so I installed into my testing project: <PackageReference Include="Telerik.UI.for.Blazor.Trial" Version="2.6.1" />

Afterwords, both cs and razor tests compile and execute:

using Xunit;
using Egil.RazorComponents.Testing;
using Egil.RazorComponents.Testing.Asserting;
using Microsoft.Extensions.DependencyInjection;

namespace tspsc
{
    public class Component1Test : ComponentTestFixture
    {
        [Fact]
        public void Component1RendersCorrectly()
        {
            Services.AddMySrvs();
            Services.AddTelerikBlazor();

            var cut = RenderComponent<Component1>();

            cut.MarkupMatches(@"<div class=""my-component"">
                            This Blazor component is defined in the <strong>razorclasslib1</strong> package.
                          </div>");
        }
    }

    public static class SrvColExt
    {
        public static void AddMySrvs(this IServiceCollection services)
        {
            services.AddSingleton(new object());
        }
    }
}

@inherits TestComponentBase

<Fixture Setup="() => Services.AddTelerikBlazor()">
    <ComponentUnderTest><Component1/></ComponentUnderTest>
</Fixture>

jpiell · 2020-01-23T13:29:25Z

Do I need to do something other than update my NuGet package?

egil · 2020-01-23T13:36:03Z

Not entirely sure. But if you follow the guide here: https://github.com/egil/razor-components-testing-library/wiki/Creating-a-new-test-project

Install the template, and the use the dotnet new razortest command, you should end up with a project where you can get my examples above working. Then you can compare and contrast with your existing.

That said, going to beta-5 should be enough, but you might also have to change/add some imports.

jpiell · 2020-01-23T14:30:23Z

All is good now - Thanks again for your help!

EdCharbeneau · 2020-01-23T18:05:19Z

@jpiell I was able to verify that a cut could render a Telerik Grid.

@inherits TestComponentBase
@using Microsoft.AspNetCore.Components.Web
@using Egil.RazorComponents.Testing
@using Egil.RazorComponents.Testing.Diffing
@using Egil.RazorComponents.Testing.Asserting
@using Egil.RazorComponents.Testing.EventDispatchExtensions
@using Xunit
@using Telerik.Blazor.Components
@using Microsoft.Extensions.DependencyInjection;

<Fixture Test="Test1">
    <ComponentUnderTest>
        <TelerikRootComponent>
            <TelerikGrid Data="forecasts">
                <GridColumns>
                    <GridColumn Field="@nameof(WeatherForecast.Date)"></GridColumn>
                </GridColumns>
            </TelerikGrid>
        </TelerikRootComponent>
    </ComponentUnderTest>
</Fixture>
@code {

    WeatherForecast[] forecasts = new List<WeatherForecast>().ToArray();

    public void AddTelerikBlazor()
    {
        Services.AddMockJsRuntime();
        Services.AddTelerikBlazor();

}

    void Test1()
    {
        AddTelerikBlazor();

        var cut = GetComponentUnderTest();

        Assert.NotNull(cut);
    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

jpiell · 2020-01-23T19:24:19Z

@jpiell Hi, I work for Telerik. Sorry you're having trouble getting this set up. Because Blazor is new (still in preview), we haven't checked it against all integration points yet, this great testing framework by @egil is the perfect example.

We are evaluating how we can provide better support for this, and I'm testing myself as well.

Short term solution
I believe that if TestServiceProvider implemented IServiceCollection then one could simply call Services.AddTeleirkBlazor() and that would solve the issue. This appears to be on the roadmap here.

Long term solution
This also seems to be the only Telerik service that is set to private. I will forward this to the engineering team and see what the reason is and if it's possible to open up the interface. However, this will likely not change in the immediate future as it would need to be tested and queued for release. If you would like to track this, I would suggest making an entry on our feedback portal.

Hi Ed,

Would you happen to have any advice on how to get around:

@inherits LayoutComponentBase

    <TelerikRootComponent>

        <div class="sidebar">
            <NavMenu />
        </div>

        <div class="main">
            @Body
        </div>

    </TelerikRootComponent>

My tests are c# only.

Thanks,

Jeff Piell

EdCharbeneau · 2020-01-23T22:26:29Z

@jpiell

I believe this is the right start. However, I don't know how the various templates are described. @egil ??
Reference markup

        <TelerikRootComponent> (cascading value)
            <TelerikGrid Data="forecasts"> (component<T> parameter Data)
                <GridColumns> (parameter of TelerikGrid)
                    <GridColumn Field="@nameof(WeatherForecast.Date)"></GridColumn> (GridColumn component cascading value from TelerikGrid, parameter Field)
                </GridColumns>
            </TelerikGrid>
        </TelerikRootComponent>

using Egil.RazorComponents.Testing;
using Xunit;
using Telerik.Blazor.Components;
using Microsoft.Extensions.DependencyInjection;
using System;

public class CounterTest : ComponentTestFixture
{
    [Fact]
    public void InitialHtmlIsCorrect()
    {
        Services.AddMockJsRuntime();
        Services.AddTelerikBlazor();
        // Arrange - renders the Counter component
        var root = new TelerikRootComponent();
        var cut = RenderComponent<TelerikGrid<WeatherForecast>>(
            CascadingValue(root));
        Assert.NotNull(cut);
    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

jpiell · 2020-01-24T11:49:04Z

Ed, I got it to work! Thanks for your help! Jeff Piell

…

On Thu, Jan 23, 2020 at 5:26 PM Ed Charbeneau ***@***.***> wrote: @jpiell <https://github.com/jpiell> I believe this is the right start. However, I don't know how the various templates are described. @egil <https://github.com/egil> ?? Reference markup <TelerikRootComponent> (cascading value) <TelerikGrid Data="forecasts"> (component<T> parameter Data) <GridColumns> (parameter of TelerikGrid) <GridColumn ***@***.***(WeatherForecast.Date)"></GridColumn> (GridColumn component cascading value from TelerikGrid, parameter Field) </GridColumns> </TelerikGrid> </TelerikRootComponent> using Egil.RazorComponents.Testing; using Xunit; using Telerik.Blazor.Components; using Microsoft.Extensions.DependencyInjection; using System; public class CounterTest : ComponentTestFixture { [Fact] public void InitialHtmlIsCorrect() { Services.AddMockJsRuntime(); Services.AddTelerikBlazor(); // Arrange - renders the Counter component var root = new TelerikRootComponent(); var cut = RenderComponent<TelerikGrid<WeatherForecast>>( CascadingValue(root)); Assert.NotNull(cut); } public class WeatherForecast { public DateTime Date { get; set; } public int TemperatureC { get; set; } public string Summary { get; set; } public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); } } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#38>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHE7FBZU2XTT5QE6KUZ36BLQ7IKRNANCNFSM4KJUVQUA> .

jpiell · 2020-01-30T17:16:20Z

Ed,

The example doesn't populate the grid.

See the cut.Markup below:

<div id="840207f6-cc00-4007-aab4-bb4e5b86f403" class="k-grid k-widget telerik-blazor" style="" __internal_stopPropagation_onkeydown>


    <div class="k-grid-header" id="ac16a65b-ddff-41bf-b45d-5959cd7d9fdd" role="presentation">
<div class="k-grid-header-wrap" role="presentation">
    <table role="grid" style="width: ;">
        <colgroup role="presentation">


        </colgroup>
        <thead role="rowgroup">
            <tr role="row" data-render-row-index="0">



            </tr>
        </thead>
    </table>
</div>

    <div class="k-grid-container">
        <div class="k-grid-content k-virtual-content" id="72b5dfe2-5b56-4e8f-8798-bfdb9e1db4eb">
<div style="position: relative;">
    <div class="k-virtual-position" style="" data-translate="0" data-total="0">
        
            <table data-role="grid" role="grid" class="k-grid-table" style="height: auto; width: ;" aria-rowcount="0" aria-colcount="0">
                <colgroup>


                </colgroup>
                <tbody role="rowgroup">





                </tbody>
            </table>
        
    </div>
</div>
<div class="k-height-container">
    <div style=""></div>
</div>

</div>

jpiell · 2020-01-30T18:08:03Z

@jpiell I was able to verify that a cut could render a Telerik Grid.

@inherits TestComponentBase
@using Microsoft.AspNetCore.Components.Web
@using Egil.RazorComponents.Testing
@using Egil.RazorComponents.Testing.Diffing
@using Egil.RazorComponents.Testing.Asserting
@using Egil.RazorComponents.Testing.EventDispatchExtensions
@using Xunit
@using Telerik.Blazor.Components
@using Microsoft.Extensions.DependencyInjection;

<Fixture Test="Test1">
    <ComponentUnderTest>
        <TelerikRootComponent>
            <TelerikGrid Data="forecasts">
                <GridColumns>
                    <GridColumn Field="@nameof(WeatherForecast.Date)"></GridColumn>
                </GridColumns>
            </TelerikGrid>
        </TelerikRootComponent>
    </ComponentUnderTest>
</Fixture>
@code {

    WeatherForecast[] forecasts = new List<WeatherForecast>().ToArray();

    public void AddTelerikBlazor()
    {
        Services.AddMockJsRuntime();
        Services.AddTelerikBlazor();

}

    void Test1()
    {
        AddTelerikBlazor();

        var cut = GetComponentUnderTest();

        Assert.NotNull(cut);
    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

It should actually be:

        var cut = RenderComponent<TelerikRootComponent>(
            ChildContent<FetchData>(
            ));

egil added the question Further information is requested label Jan 21, 2020

egil added bug Something isn't working enhancement New feature or request labels Jan 22, 2020

egil closed this as completed Jan 22, 2020

egil reopened this Jan 23, 2020

egil mentioned this issue Jan 23, 2020

Beta 5 - Services does not expose IServiceCollection #42

Closed

jpiell closed this as completed Jan 23, 2020

egil mentioned this issue Feb 4, 2020

Mocking components in render tree #53

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Testing components with Telerik Grid throws System.InvalidOperationException #38

Testing components with Telerik Grid throws System.InvalidOperationException #38

jpiell commented Jan 21, 2020

egil commented Jan 21, 2020

jpiell commented Jan 21, 2020 via email

EdCharbeneau commented Jan 22, 2020

egil commented Jan 22, 2020

jpiell commented Jan 22, 2020 via email

jpiell commented Jan 22, 2020 via email

jpiell commented Jan 23, 2020

egil commented Jan 23, 2020

egil commented Jan 23, 2020

egil commented Jan 23, 2020

jpiell commented Jan 23, 2020

egil commented Jan 23, 2020

jpiell commented Jan 23, 2020

EdCharbeneau commented Jan 23, 2020

jpiell commented Jan 23, 2020

EdCharbeneau commented Jan 23, 2020

jpiell commented Jan 24, 2020 via email

jpiell commented Jan 30, 2020

jpiell commented Jan 30, 2020

Testing components with Telerik Grid throws System.InvalidOperationException #38

Testing components with Telerik Grid throws System.InvalidOperationException #38

Comments

jpiell commented Jan 21, 2020

egil commented Jan 21, 2020

jpiell commented Jan 21, 2020 via email

EdCharbeneau commented Jan 22, 2020

egil commented Jan 22, 2020

jpiell commented Jan 22, 2020 via email

jpiell commented Jan 22, 2020 via email

jpiell commented Jan 23, 2020

egil commented Jan 23, 2020

egil commented Jan 23, 2020

egil commented Jan 23, 2020

jpiell commented Jan 23, 2020

egil commented Jan 23, 2020

jpiell commented Jan 23, 2020

EdCharbeneau commented Jan 23, 2020

jpiell commented Jan 23, 2020

EdCharbeneau commented Jan 23, 2020

jpiell commented Jan 24, 2020 via email

jpiell commented Jan 30, 2020

jpiell commented Jan 30, 2020