problems finding rendered fragments #943

aprax11 · 2022-12-16T11:50:46Z

aprax11
Dec 16, 2022

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 · 2022-12-16T16:59:10Z

egil
Dec 16, 2022
Maintainer

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

8 replies

aprax11 Dec 21, 2022
Author

like this?

linkdotnet Dec 21, 2022
Maintainer Sponsor

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

linkdotnet Dec 21, 2022
Maintainer Sponsor

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 Dec 21, 2022
Author

ok :)

aprax11 · 2022-12-21T11:57:09Z

aprax11
Dec 21, 2022
Author

@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;
    }
}

10 replies

linkdotnet Dec 21, 2022
Maintainer Sponsor

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 Dec 21, 2022
Author

yes that is unfortunately true

aprax11 Dec 21, 2022
Author

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

egil Dec 21, 2022
Maintainer

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 Dec 21, 2022
Author

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

problems finding rendered fragments #943

{{title}}

Replies: 2 comments 18 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

problems finding rendered fragments #943

aprax11 Dec 16, 2022

Replies: 2 comments · 18 replies

egil Dec 16, 2022 Maintainer

aprax11 Dec 21, 2022 Author

aprax11 Dec 21, 2022 Author

linkdotnet Dec 21, 2022 Maintainer Sponsor

linkdotnet Dec 21, 2022 Maintainer Sponsor

aprax11 Dec 21, 2022 Author

aprax11 Dec 21, 2022 Author

linkdotnet Dec 21, 2022 Maintainer Sponsor

aprax11 Dec 21, 2022 Author

aprax11 Dec 21, 2022 Author

egil Dec 21, 2022 Maintainer

aprax11 Dec 21, 2022 Author

aprax11
Dec 16, 2022

Replies: 2 comments 18 replies

egil
Dec 16, 2022
Maintainer

aprax11 Dec 21, 2022
Author

aprax11 Dec 21, 2022
Author

linkdotnet Dec 21, 2022
Maintainer Sponsor

linkdotnet Dec 21, 2022
Maintainer Sponsor

aprax11 Dec 21, 2022
Author

aprax11
Dec 21, 2022
Author

linkdotnet Dec 21, 2022
Maintainer Sponsor

aprax11 Dec 21, 2022
Author

aprax11 Dec 21, 2022
Author

egil Dec 21, 2022
Maintainer

aprax11 Dec 21, 2022
Author