problems finding rendered fragments

[aprax11]

Good day,
I want to test a blazor application with blazor dev express components (it is a dxGrid). I can see in the markup, while debugging, that everything is rendered correctly but when I use the Find("table") or FindAll("table") method it won't find the

object. Any help or ideas would be greatly appreciated.

test-class:

namespace ProjectTests.Pages
{
    public class IndexTest : TestContext
    {
        public List<ConnectionInfo> connectionInfos;
        public List<ClientUpdateServiceInfo> clientUpdateServiceInfos;
        public List<ServerUpdateServiceInfo> serverUpdateServiceInfos;
        public List<ClientModelUpdateServiceInfo> clientModelUpdateServiceInfos;
        public List<ServerModelUpdateServiceInfo> serverModelUpdateServiceInfos;
        public IndexTest() {

            Services.AddDevExpressBlazor(o => o.SizeMode = DevExpress.Blazor.SizeMode.Small);
            //Services.AddSingleton<IConfiguration>(Substitute.For<IConfiguration>());
            //JSInterop.Setup<string>(invocation => invocation.Identifier == "DxBlazor.Grid.dispose").SetResult(string.Empty);
            JSInterop.SetupVoid("DxBlazor.UiHandlersBridge.loadModule");
            JSInterop.SetupVoid("DxBlazor.AdaptiveDropDown.init");
            JSInterop.SetupVoid("DxBlazor.ScrollViewer.loadModule");
            JSInterop.SetupVoid("DxBlazor.ButtonEdit.loadModule");
            JSInterop.SetupVoid("DxBlazor.CheckBox.loadModule");


            start();

            var grpcService = Substitute.For<IGrpcServiceImpl>();
            grpcService.GetConnectionInfos(Arg.Any<string>()).Returns(new BindingList<ConnectionInfo>(connectionInfos));
            grpcService.GetClientUpdateServiceInfo(Arg.Any<string>(), Arg.Any<ConnectionInfo>()).Returns(clientUpdateServiceInfos);
            grpcService.GetServerUpdateServiceInfo(Arg.Any<string>(), Arg.Any<ConnectionInfo>()).Returns(serverUpdateServiceInfos);
            grpcService.GetClientModelUpdateServiceInfo(Arg.Any<string>(), Arg.Any<ConnectionInfo>()).Returns(clientModelUpdateServiceInfos);
            grpcService.GetServerModelUpdateServiceInfo(Arg.Any<string>(), Arg.Any<ConnectionInfo>()).Returns(serverModelUpdateServiceInfos);

            Services.AddSingleton<IGrpcServiceImpl>(grpcService);
        }
        [Fact]
        public void MyFirstTest()
        {

            var cut = RenderComponent<WebMetricViewer.Pages.Index>();

            cut.Find("table");
        }

        
        private void start()
        {
            List<ClientInfo> clientInfos= new List<ClientInfo> { new ClientInfo { PifVersionNumber = "testPifVersionsnummer1", SessionID = 1, StreamingMode = "testStreamingMode"} };
            List<MessageQueueClass> messageQueueClasses = new List<MessageQueueClass> { new MessageQueueClass { ClassId = 1, ClassName = "testMesageQueueClass", QueueSize = 2 } };

            connectionInfos = new List<ConnectionInfo> { new ConnectionInfo { Database = "testDatabase1", SqlServer = "testSqlServer1" } };
            clientUpdateServiceInfos = new List<ClientUpdateServiceInfo> { new ClientUpdateServiceInfo { 
                ConnectedClients = { clientInfos }, MessageQueueSize = 2, MessagesPerSecond = 3 } };
            
            serverUpdateServiceInfos = new List<ServerUpdateServiceInfo> { new ServerUpdateServiceInfo { 
                ConnectedClients = { clientInfos }, MessageQueueSize = 2, MessagesPerSecond = 2, TransactionTableQueueSize = 2 } };
            
            clientModelUpdateServiceInfos = new List<ClientModelUpdateServiceInfo> { new ClientModelUpdateServiceInfo {
                ConnectedClients = { clientInfos }, MessageQueueClass = { messageQueueClasses }, MessagesPerSecond = 2, GateState = "testState" } };
            
            serverModelUpdateServiceInfos= new List<ServerModelUpdateServiceInfo> { new ServerModelUpdateServiceInfo { 
                ConnectedClients= { clientInfos }, MessagesPerSecond = 2, GateState = "testGateState", MessageQueueSizePerClass = 3} };
        }
    }
}

[egil]

Have you tried cut.WaitForElement("table")? If the elements are added to the DOM asynchronously then that should be your go-to.

[aprax11]

[aprax11]

like this?

[linkdotnet]

I meant the razor/C# code behind the WebMetricViewer.Pages.Index type.

[linkdotnet]

If possible as text, not as image as it you can't use the search function inside a image nor can you copy & paste it somewhere to try it out on your own.

[aprax11]

ok :)

[aprax11]

@page "/"

@@Inject Microsoft.Extensions.Configuration.IConfiguration _config@
@Inject GrpcService.IGrpcServiceImpl grpcService

@using Grpc.Net.Client
@using Pages
@using Google.Protobuf.WellKnownTypes
@using System.ComponentModel
@using Modles
@using System.Data;

<head>
    <link href="/css/StyleSheet.css" rel="stylesheet" />
</head>

<!-- Side navigation -->
<div class="sidenav">

    <h2 id="heading">Metric Viewer</h2>
    @if(isShowGrid)
    {
        <a href="#" style="color: #fcfcfa;" @onclick="@(e => setConnectionInfoDisplayModels())">Gesamtübersicht </a>
    }else
    {
        <a href="#" @onclick="@(e => setConnectionInfoDisplayModels())">Gesamtübersicht </a>
    }
    @if (isShowClientUpdateServiceInfo)
    {
        <a href="#" style="color: #fcfcfa;" @onclick="@(e => setDisplayClientUpdateServiceInfos())">Client Update Service Infos </a>
    }
    else
    {
        <a href="#"  @onclick="@(e => setDisplayClientUpdateServiceInfos())">Client Update Service Infos </a>
    }
    @if (isShowServerUpdateServiceInfo)
    {
        <a href="#" style="color: #fcfcfa;" @onclick="@(e => setDisplayServerUpdateServiceInfo())">Server Update Service Infos </a>
    }
    else
    {
        <a href="#" @onclick="@(e => setDisplayServerUpdateServiceInfo())">Server Update Service Infos </a>
    }
    @if (isShowClientModelUpdateServiceInfo)
    {
        <a href="#" style="color: #fcfcfa;" @onclick="@(e => setDisplayClientModelUpdateServiceInfos())">Client Model Update Service Infos </a>
    }
    else
    {
        <a href="#" @onclick="@(e => setDisplayClientModelUpdateServiceInfos())">Client Model Update Service Infos </a>
    }
    @if (isShowServerModelUpdateServiceInfo)
    {
        <a href="#" style="color: #fcfcfa;" @onclick="@(e => setDisplayServerModelUpdateServiceInfo())">Server Model Update Service Infos </a>
    }
    else
    {
        <a href="#" @onclick="@(e => setDisplayServerModelUpdateServiceInfo())">Server Model Update Service Infos </a>
    }
</div>

<div class="main">
    <div style="">
        @*@if (isShowGrid)
        {*@
            <div>
                <h2>Connections: </h2>
            </div>
            <DxGrid Data="connectionInfoDisplayModels"
                PageSize="4"
                ShowFilterRow="true">
                <Columns>
                    <DxGridDataColumn FieldName="sqlServer"></DxGridDataColumn>
                    <DxGridDataColumn FieldName="database"></DxGridDataColumn>
                    <DxGridDataColumn FieldName="connectedClients"></DxGridDataColumn>
                    <DxGridDataColumn FieldName="clientUpdateServiceInfo" UnboundType="GridUnboundColumnType.Boolean">
                        <CellDisplayTemplate>
                            <DxCheckBox CssClass="d-inline-block" Enabled="false" Checked="(bool)context.Value" />
                        </CellDisplayTemplate>
                        <FilterRowCellTemplate>
                            <DxComboBox Value="(bool?)context.FilterRowValue"
                                    ValueChanged="(bool? v) => context.FilterRowValue = v"
                                    Data="activityBools" ValueFieldName="Value" TextFieldName="DisplayText"
                                    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
                        </FilterRowCellTemplate>
                    </DxGridDataColumn>
                    <DxGridDataColumn FieldName="serverUpdateServiceInfo" UnboundType="GridUnboundColumnType.Boolean">
                        <CellDisplayTemplate>
                            <DxCheckBox CssClass="d-inline-block" Enabled="false" Checked="(bool)context.Value" />
                        </CellDisplayTemplate>
                        <FilterRowCellTemplate>
                            <DxComboBox Value="(bool?)context.FilterRowValue"
                                    ValueChanged="(bool? v) => context.FilterRowValue = v"
                                    Data="activityBools" ValueFieldName="Value" TextFieldName="DisplayText"
                                    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
                        </FilterRowCellTemplate>
                    </DxGridDataColumn>
                    <DxGridDataColumn FieldName="clientModelUpdateServiceInfo" UnboundType="GridUnboundColumnType.Boolean">
                        <CellDisplayTemplate>
                            <DxCheckBox CssClass="d-inline-block" Enabled="false" Checked="(bool)context.Value" />
                        </CellDisplayTemplate>
                        <FilterRowCellTemplate>
                            <DxComboBox Value="(bool?)context.FilterRowValue"
                                    ValueChanged="(bool? v) => context.FilterRowValue = v"
                                    Data="activityBools" ValueFieldName="Value" TextFieldName="DisplayText"
                                    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
                        </FilterRowCellTemplate>
                    </DxGridDataColumn>
                    <DxGridDataColumn FieldName="serverModelUpdateServiceInfo" UnboundType="GridUnboundColumnType.Boolean">
                        <CellDisplayTemplate>
                            <DxCheckBox CssClass="d-inline-block" Enabled="false" Checked="(bool)context.Value" />
                        </CellDisplayTemplate>
                        <FilterRowCellTemplate>
                            <DxComboBox Value="(bool?)context.FilterRowValue"
                                    ValueChanged="(bool? v) => context.FilterRowValue = v"
                                    Data="activityBools" ValueFieldName="Value" TextFieldName="DisplayText"
                                    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
                        </FilterRowCellTemplate>
                    </DxGridDataColumn>
                </Columns>
            </DxGrid>
        @*}*@
    </div>
    
    <div style="">
        
        @if (isShowClientUpdateServiceInfo)
        {
            <div style="height: 50px;"></div>
            <div>
                <h2>Client Update Service Infos: </h2>
            </div>
            <DxGrid @ref="Grid" Data="displayClientUpdateServiceInfos" AutoCollapseDetailRow="true">
                <Columns>
                    <DxGridDataColumn FieldName="MessagesPerSecond" />
                    <DxGridDataColumn FieldName="MessageQueueSize" />
                </Columns>
                <DetailRowTemplate>
                    <GridDetail clientInfo="(ClientUpdateServiceInfo)context.DataItem" />
                </DetailRowTemplate>
            </DxGrid>
        }
    </div>

    <div style="">
        @if (isShowServerUpdateServiceInfo)
        {
            <div style="height: 50px;"></div>
            <div>
                <h2>Server Update Service Infos: </h2>
            </div>
            <DxGrid @ref="Grid" Data="displayServerUpdateServiceInfos" AutoCollapseDetailRow="true">
                <Columns>
                    <DxGridDataColumn FieldName="MessagesPerSecond" />
                    <DxGridDataColumn FieldName="MessageQueueSize" />
                    <DxGridDataColumn FieldName="TransactionTableQueueSize" />
                </Columns>
                <DetailRowTemplate>
                    <GridDetail serverInfo="(ServerUpdateServiceInfo)context.DataItem" />
                </DetailRowTemplate>
            </DxGrid>
        }
    </div>

    <div style="">
        @if (isShowClientModelUpdateServiceInfo)
        {
            <div style="height: 50px;"></div>

            <div>
                <h2>Client Model Update Service Infos: </h2>
            </div>
            <DxGrid @ref="Grid" Data="displayClientModelUpdateServiceInfos" AutoCollapseDetailRow="true">
                <Columns>
                    <DxGridDataColumn FieldName="MessagesPerSecond" />
                    <DxGridDataColumn FieldName="GateState" />
                </Columns>
                <DetailRowTemplate>
                    <GridDetail clientModelInfo="(ClientModelUpdateServiceInfo)context.DataItem" />
                </DetailRowTemplate>
            </DxGrid>
        }
    </div>

    <div style="">
        @if (isShowServerModelUpdateServiceInfo)
        {
            <div style="height: 50px;"></div>
            <div>
                <h2>Server Model Update Service Infos: </h2>
            </div>
            <DxGrid @ref="Grid" Data="displayServerModelUpdateServiceInfos" AutoCollapseDetailRow="true">
                <Columns>
                    <DxGridDataColumn FieldName="MessagesPerSecond" />
                    <DxGridDataColumn FieldName="MessageQueueSizePerClass" />
                    <DxGridDataColumn FieldName="GateState" />
                </Columns>
                <DetailRowTemplate>
                    <GridDetail serverModelInfo="(ServerModelUpdateServiceInfo)context.DataItem" />
                </DetailRowTemplate>
            </DxGrid>
        }
    </div>
    <div style="height: 30px;"></div>
</div>

@code {

    //////////////////Front-End props//////////////////
    IGrid Grid { get; set; }

    private bool isShowGrid = false;
    private bool isShowClientUpdateServiceInfo = false;
    private bool isShowServerUpdateServiceInfo = false;
    private bool isShowClientModelUpdateServiceInfo = false;
    private bool isShowServerModelUpdateServiceInfo = false;

    public BindingList<ConnectionInfo> connectionInfos { get; private set; }
    private BindingList<ConnectionInfoDisplayModel> connectionInfoDisplayModels = new();
    private BindingList<ClientUpdateServiceInfo> displayClientUpdateServiceInfos = new();
    private BindingList<ServerUpdateServiceInfo> displayServerUpdateServiceInfos = new();
    private BindingList<ClientModelUpdateServiceInfo> displayClientModelUpdateServiceInfos = new();
    private BindingList<ServerModelUpdateServiceInfo> displayServerModelUpdateServiceInfos = new();

    static readonly IReadOnlyList<ActivityBool> activityBools = new ActivityBool[] {
        new(true, "active"),
        new(false, "not active")
    };
    record ActivityBool(bool? Value, string DisplayText);

    //////////////////gRPC props//////////////////
    private string grpcAddr = "http://localhost:5001";


    protected override async Task OnInitializedAsync()
    {
        //grpcAddr = _config.GetSection("gRPCServerAddress").Value;
        await setConnectionInfoDisplayModels();
    }

    private async Task setConnectionInfoDisplayModels()
    {
        await setConnectionInfos();
        connectionInfoDisplayModels.Clear();

        isShowGrid = !isShowGrid;
        if (isShowGrid)
        {
            foreach (var ele in connectionInfos)
            {
                List<ClientUpdateServiceInfo> clientUpdateServiceInfos = await grpcService.GetClientUpdateServiceInfo(grpcAddr, ele);
                List<ServerUpdateServiceInfo> serverUpdateServiceInfos = await grpcService.GetServerUpdateServiceInfo(grpcAddr, ele);
                List<ClientModelUpdateServiceInfo> clientModelUpdateServiceInfos = await grpcService.GetClientModelUpdateServiceInfo(grpcAddr, ele);
                List<ServerModelUpdateServiceInfo> serverModelUpdateServiceInfos = await grpcService.GetServerModelUpdateServiceInfo(grpcAddr, ele);

                bool isClientUpdateServiceInfo = (clientUpdateServiceInfos.Last().ConnectedClients.Count >= 1);
                bool isServerUpdateServiceInfo = (serverUpdateServiceInfos.Last().ConnectedClients.Count >= 1);
                bool isClientModelUpdateServiceInfo = (clientModelUpdateServiceInfos.Last().ConnectedClients.Count >= 1);
                bool isServerModelUpdateServiceInfo = (serverModelUpdateServiceInfos.Last().ConnectedClients.Count >= 1);

                int calculateConnectedClients = clientUpdateServiceInfos.Last().ConnectedClients.ToList().Count
                    + serverUpdateServiceInfos.Last().ConnectedClients.ToList().Count
                    + clientModelUpdateServiceInfos.Last().ConnectedClients.ToList().Count
                    + serverModelUpdateServiceInfos.Last().ConnectedClients.ToList().Count;

                ConnectionInfoDisplayModel model = new ConnectionInfoDisplayModel
                    {
                        sqlServer = ele.SqlServer
                        ,
                        database = ele.Database
                        ,
                        connectedClients = calculateConnectedClients
                        ,
                        clientUpdateServiceInfo = isClientUpdateServiceInfo
                        ,
                        clientModelUpdateServiceInfo = isClientModelUpdateServiceInfo
                        ,
                        serverUpdateServiceInfo = isServerUpdateServiceInfo
                        ,
                        serverModelUpdateServiceInfo = isServerModelUpdateServiceInfo
                    };

                connectionInfoDisplayModels.Add(model);
            }
        }
    }

    private async Task setConnectionInfos()
    {
        connectionInfos = await grpcService.GetConnectionInfos(grpcAddr);
    }

    private async Task setDisplayClientUpdateServiceInfos()
    {
        isShowClientUpdateServiceInfo = !isShowClientUpdateServiceInfo;
        if (isShowClientUpdateServiceInfo)
        {
            displayClientUpdateServiceInfos = new BindingList<ClientUpdateServiceInfo>( await setDisplayLists<ClientUpdateServiceInfo>());
        }
    }

    private async Task setDisplayServerUpdateServiceInfo()
    {
        isShowServerUpdateServiceInfo = !isShowServerUpdateServiceInfo;
        if (isShowServerUpdateServiceInfo)
        {
            displayServerUpdateServiceInfos = new BindingList<ServerUpdateServiceInfo>(await setDisplayLists<ServerUpdateServiceInfo>());
        }
    }

    private async Task setDisplayClientModelUpdateServiceInfos()
    {
        isShowClientModelUpdateServiceInfo = !isShowClientModelUpdateServiceInfo;
        if (isShowClientModelUpdateServiceInfo)
        {
            displayClientModelUpdateServiceInfos = new BindingList<ClientModelUpdateServiceInfo>(await setDisplayLists<ClientModelUpdateServiceInfo>());
        }
    }

    private async Task setDisplayServerModelUpdateServiceInfo()
    {
        isShowServerModelUpdateServiceInfo = !isShowServerModelUpdateServiceInfo;
        if (isShowServerModelUpdateServiceInfo)
        {
            displayServerModelUpdateServiceInfos = new BindingList<ServerModelUpdateServiceInfo>(await setDisplayLists<ServerModelUpdateServiceInfo>());
        }
    }

    private async Task<List<T>> setDisplayLists<T>()
    {
        await setConnectionInfos();
        List<T> toAdd = new();
        foreach (var ele in connectionInfos)
        {
            if (typeof(T) == typeof(ClientUpdateServiceInfo))
            {
                List<ClientUpdateServiceInfo> list = await grpcService.GetClientUpdateServiceInfo(grpcAddr, ele);
                toAdd.AddRange(list.Cast<T>());
            }
            else if (typeof(T) == typeof(ServerUpdateServiceInfo))
            {
                List<ServerUpdateServiceInfo> list = await grpcService.GetServerUpdateServiceInfo(grpcAddr, ele);
                toAdd.AddRange(list.Cast<T>());
            }
            else if (typeof(T) == typeof(ClientModelUpdateServiceInfo))
            {
                List<ClientModelUpdateServiceInfo> list = await grpcService.GetClientModelUpdateServiceInfo(grpcAddr, ele);
                toAdd.AddRange(list.Cast<T>());
            }
            else if (typeof(T) == typeof(ServerModelUpdateServiceInfo))
            {
                List<ServerModelUpdateServiceInfo> list = await grpcService.GetServerModelUpdateServiceInfo(grpcAddr, ele);
                toAdd.AddRange(list.Cast<T>());
            }
        }
        return toAdd;
    }
}

[linkdotnet]

Hmm okay. Often times grids are implemented as divs as they are more responsive and easier to handle for various screen sizes. table is just a pain in that a** on mobile.

As last resort for you, you could make all your async call synchronous just to check whether or not the table is there at the end.
I am unfortunately no expert on DevExpress components. I am not sure what has to be mocked and setup. Also, it does seem only to live on their NuGet feed instead of nuget.org so I can't even reproduce this at the moment.

[aprax11]

yes that is unfortunately true

[aprax11]

Thanks a lot, i will try that just to check.

[egil]

I would also just consider mocking DxGrid, seeing as it is a 3rd party component that you should not be responsible for testing. Instead, stub/mock it, and just verify that you are passing the right parameters to it. That way, if Syncfusion changes the markup DxGrid produces, your test wont break.

[aprax11]

Thank you. I think that's what we'll end up doing.