-
Notifications
You must be signed in to change notification settings - Fork 380
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[DataGrid] Respecting control state of Loading parameter (#3064)
* Add some basic FluentDataGrid tests to isolate bad behavior * Add EffectiveLoadingValue, default Loading to null, refresh data if Loading is set back to null. * Remove newly-incorrect loading param from data grid example * Fix example, needs explicit loading state change to false * Remove redundant initializer --------- Co-authored-by: Adam Ratzman <[email protected]> Co-authored-by: Vincent Baaij <[email protected]>
- Loading branch information
3 people
authored
Dec 19, 2024
1 parent
94a6757
commit 5d92bcf
Showing
9 changed files
with
217 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -73,5 +73,6 @@ | |
| await Task.Delay(1500); | ||
|
|
||
| items = GenerateSampleGridData(5000); | ||
| grid?.SetLoadingState(false); | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -39,7 +39,7 @@ | |
| </thead> | ||
| } | ||
| <tbody> | ||
| @if (Loading) | ||
| @if (EffectiveLoadingValue) | ||
| { | ||
| @_renderLoadingContent | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
|
|
||
| <table id="xxx" class="fluent-data-grid" style="grid-template-columns: 1fr;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference=""> | ||
| <thead b-ppmhrkw1mj=""> | ||
| <tr data-row-index="0" role="row" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" row-type="header" b-upi3f9mbnn=""> | ||
| <th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="18" blazor:onclick="19" scope="col" aria-sort="none" b-w6qdxfylwy=""> | ||
| <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd=""> | ||
| <div class="col-title-text" b-pxhtqoo8qd="">Name</div> | ||
| </div> | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody b-ppmhrkw1mj=""> | ||
| <tr data-row-index="2" role="row" blazor:onkeydown="9" blazor:onclick="10" blazor:ondblclick="11" aria-rowindex="2" b-upi3f9mbnn=""> | ||
| <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="20" blazor:onclick="21" b-w6qdxfylwy="">Denis Voituron</td> | ||
| </tr> | ||
| <tr data-row-index="3" role="row" blazor:onkeydown="12" blazor:onclick="13" blazor:ondblclick="14" aria-rowindex="3" b-upi3f9mbnn=""> | ||
| <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="22" blazor:onclick="23" b-w6qdxfylwy="">Vincent Baaij</td> | ||
| </tr> | ||
| <tr data-row-index="4" role="row" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" aria-rowindex="4" b-upi3f9mbnn=""> | ||
| <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="24" blazor:onclick="25" b-w6qdxfylwy="">Bill Gates</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,156 @@ | ||
| @using FluentAssertions | ||
| @using Xunit | ||
| @inherits TestContext | ||
|
|
||
| @code { | ||
| public FluentDataGridTests() | ||
| { | ||
| var dataGridModule = JSInterop.SetupModule("./_content/Microsoft.FluentUI.AspNetCore.Components/Components/DataGrid/FluentDataGrid.razor.js"); | ||
| dataGridModule.SetupModule("init", _ => true); | ||
|
|
||
| // Register services | ||
| Services.AddSingleton(LibraryConfiguration.ForUnitTests); | ||
| Services.AddScoped<IKeyCodeService>(factory => new KeyCodeService()); | ||
| } | ||
|
|
||
| [Fact] | ||
| public void FluentDataGrid_Default() | ||
| { | ||
| // Arrange && Act | ||
| var cut = Render<FluentDataGrid<Customer>>( | ||
| @<FluentDataGrid Items="@GetCustomers().AsQueryable()"> | ||
| <ChildContent> | ||
| <PropertyColumn Property="@(x => x.Name)" /> | ||
| </ChildContent> | ||
| <EmptyContent><p>empty content</p></EmptyContent> | ||
| </FluentDataGrid>); | ||
|
|
||
| // Assert | ||
| cut.Verify(); | ||
| } | ||
|
|
||
| [Fact] | ||
| public void FluentDataGrid_With_Empty_Items_Stays_Loading_Until_Changed() | ||
| { | ||
| // Arrange && Act | ||
| var cut = Render<FluentDataGrid<Customer>>( | ||
| @<FluentDataGrid Items="@(Array.Empty<Customer>().AsQueryable())" Loading="true"> | ||
| <EmptyContent><p id="empty-content">empty content</p></EmptyContent> | ||
| <LoadingContent><p id="loading-content">loading content</p></LoadingContent> | ||
| <ChildContent> | ||
| <PropertyColumn Property="@(i => i.Name)" /> | ||
| </ChildContent> | ||
| </FluentDataGrid>); | ||
|
|
||
| // Assert | ||
| cut.Find("#loading-content").Should().NotBeNull(); | ||
| Assert.Throws<ElementNotFoundException>(() => cut.Find("#empty-content")); | ||
|
|
||
| cut.SetParametersAndRender(parameters => parameters | ||
| .Add(p => p.Loading, false)); | ||
|
|
||
| Assert.Throws<ElementNotFoundException>(() => cut.Find("#loading-content")); | ||
| cut.Find("#empty-content").Should().NotBeNull(); | ||
| } | ||
|
|
||
| [Fact] | ||
| public async Task FluentDataGrid_With_ItemProvider_Stays_Loading_Until_ChangedAsync() | ||
| { | ||
| ValueTask<GridItemsProviderResult<Customer>> GetItems(GridItemsProviderRequest<Customer> request) | ||
| { | ||
| return ValueTask.FromResult(GridItemsProviderResult.From( | ||
| Array.Empty<Customer>(), | ||
| 0)); | ||
| } | ||
|
|
||
| var cut = Render<FluentDataGrid<Customer>>( | ||
| @<FluentDataGrid TGridItem="Customer" ItemsProvider="@GetItems" Loading="true"> | ||
| <EmptyContent><p id="empty-content">empty content</p></EmptyContent> | ||
| <LoadingContent><p id="loading-content">loading content</p></LoadingContent> | ||
| <ChildContent> | ||
| <TemplateColumn Title="Name"> | ||
| <p class="customer-name">@context.Name</p> | ||
| </TemplateColumn> | ||
| </ChildContent> | ||
| </FluentDataGrid>); | ||
|
|
||
| // Assert | ||
| var dataGrid = cut.Instance; | ||
| cut.Find("#loading-content").Should().NotBeNull(); | ||
|
|
||
| // should stay loading even after data refresh | ||
| await cut.InvokeAsync(() => dataGrid.RefreshDataAsync()); | ||
| cut.Find("#loading-content").Should().NotBeNull(); | ||
|
|
||
| // now not loading but still with 0 items, should render empty content | ||
| cut.SetParametersAndRender(parameters => parameters | ||
| .Add(p => p.Loading, false)); | ||
|
|
||
| cut.Find("#empty-content").Should().NotBeNull(); | ||
| } | ||
|
|
||
| [Fact] | ||
| public async Task FluentDataGrid_With_ItemProvider_And_Uncontrolled_Loading_Starts_Loading() | ||
| { | ||
| var tcs = new TaskCompletionSource(); | ||
| async ValueTask<GridItemsProviderResult<Customer>> GetItems(GridItemsProviderRequest<Customer> request) | ||
| { | ||
| await tcs.Task; | ||
| var numberOfItems = 1; | ||
| return GridItemsProviderResult.From( | ||
| GetCustomers().Take(numberOfItems).ToArray(), | ||
| numberOfItems); | ||
| } | ||
|
|
||
| var cut = Render<FluentDataGrid<Customer>>( | ||
| @<FluentDataGrid TGridItem="Customer" ItemsProvider="@GetItems"> | ||
| <EmptyContent><p id="empty-content">empty content</p></EmptyContent> | ||
| <LoadingContent><p id="loading-content">loading content</p></LoadingContent> | ||
| <ChildContent> | ||
| <TemplateColumn Title="Name"> | ||
| <p class="customer-name">@context.Name</p> | ||
| </TemplateColumn> | ||
| </ChildContent> | ||
| </FluentDataGrid>); | ||
|
|
||
| // Assert | ||
| var dataGrid = cut.Instance; | ||
|
|
||
| // Data is still loading, so loading content should be displayed | ||
| cut.Find("#loading-content").Should().NotBeNull(); | ||
|
|
||
| tcs.SetResult(); | ||
|
|
||
| // Data is no longer loading, so loading content should not be displayed after re-render | ||
| // wait for re-render here | ||
| cut.WaitForState(() => cut.Find("p").TextContent == GetCustomers().First().Name); | ||
|
|
||
| Assert.Throws<ElementNotFoundException>(() => cut.Find("#loading-content")); | ||
|
|
||
| // should stay not loading even after data refresh | ||
| await cut.InvokeAsync(() => dataGrid.RefreshDataAsync()); | ||
| Assert.Throws<ElementNotFoundException>(() => cut.Find("#loading-content")); | ||
|
|
||
| // if we explicitly set Loading back to null, we should see the same behaviors because data should | ||
| // be refreshed | ||
| tcs = new TaskCompletionSource(); | ||
| cut.SetParametersAndRender(parameters => parameters | ||
| .Add(p => p.Loading, null)); | ||
| cut.Find("#loading-content").Should().NotBeNull(); | ||
|
|
||
| tcs.SetResult(); | ||
|
|
||
| cut.WaitForState(() => cut.Find("p").TextContent == GetCustomers().First().Name); | ||
| Assert.Throws<ElementNotFoundException>(() => cut.Find("#loading-content")); | ||
| } | ||
|
|
||
| // Sample data... | ||
| private IEnumerable<Customer> GetCustomers() | ||
| { | ||
| yield return new Customer(1, "Denis Voituron"); | ||
| yield return new Customer(2, "Vincent Baaij"); | ||
| yield return new Customer(3, "Bill Gates"); | ||
| } | ||
|
|
||
| private record Customer(int Id, string Name); | ||
| } |
Oops, something went wrong.