I'm trying to create a test case for my application.My app contains a search box,a button,and a table.I want to test my app programmatically with these steps
- enter a value in the searchbox
- press enter / press the search button
- the table gets updated and re-rendered
here's I've tried so far.
Employee.razor
<div class="input-group input-group-sm d-flex justify-content-end"><RadzenTextBox id="txtSearchText" @bind-Value="@SearchAll" Placeholder="@(Lcz["FirstName"]+'/'+ Lcz["LastName"])" Style="" @onkeydown="(e=>SearchInputKeyDown(e))" MouseEnter="@(args => ShowTooltipWithHtml(args, new TooltipOptions(){ Position = TooltipPosition.Top , Style = "background: var(--rz-info-lighter); color: var(--rz-text-color)", Duration = 3000 }))" /><RadzenButton ButtonStyle="ButtonStyle.Primary" class="btn" Click="SearchEmployee" Icon="search" Style=""></RadzenButton></div>...<RadzenDataGrid @ref="employeeTable" IsLoading=@isLoading Count="@totalListTable" Data="@employeeData" LoadData="@LoadData" AllowFiltering="true" AllowColumnResize="true" AllowAlternatingRows="false" FilterMode="FilterMode.Advanced" AllowSorting="true" PageSize="10" AllowPaging="true" PageSizeOptions="@pageSizeOptions" PagerHorizontalAlign="HorizontalAlign.Center" ShowPagingSummary="true" ColumnWidth="200px" Style="height:500px" LogicalFilterOperator="LogicalFilterOperator.Or" SelectionMode="DataGridSelectionMode.Single" TItem="EmployeeTable">.....</RadzenDataGrid>@code {...private string SearchAll { get; set; } = "";private RadzenDataGrid<EmployeeTable> employeeTable { get; set; } = new();...private async Task SearchEmployee() { employeeTable?.Reset(true); employeeTable?.FirstPage(true); await Task.CompletedTask; } protected async Task SearchInputKeyDown(KeyboardEventArgs args) { if (args.Key == "Enter") { var val = await JsRuntime.InvokeAsync<string>("eval", $@"document.getElementById(""txtSearchText"").value"); SearchAll = val; await employeeTable!.Reload(); } else if (args.Key == "Escape") { SearchAll = ""; await JsRuntime.InvokeAsync<string>("eval", $@"document.getElementById(""txtSearchText"").value = ''"); await employeeTable!.Reload(); }}EmployeeTest.cs
var ctx = new TestContext();......var cut = ctx.RenderComponent<Employee>();var searchBox = cut.FindComponent<RadzenTextBox>();var value = "John"searchBox.Find("#txtSearchText").Change(value);searchBox.Find("#txtSearchText").KeyDown(new KeyboardEventArgs { Key = "Enter" });var table = cut.FindComponent<RadzenDataGrid<EmployeeTable>>();int total = table.Instance.Count;Assert.True(total > 0, "not found " + total);the test executed successfully but the result was not correct.the initial total is 200 but when filtered by search term the total should be 30 (I manually tested it on browser).The search box should be triggered to reload the datagrid again but it didn't.the number of rows was the same to initial render (200 rows). What's wrong here ?