[DataGrid] Tweak new resize behavior #3523
GitHub Actions / Core Tests
succeeded
May 15, 2025 in 0s
950 passed, 4 failed and 29 skipped
❌ TestResults/runneradmin_fv-az1347-943_2025-05-15_12_24_03.trx
983 tests were completed in 4s with 950 passed, 4 failed and 29 skipped.
| Test suite | Passed | Failed | Skipped | Time |
|---|---|---|---|---|
| Microsoft.FluentUI.AspNetCore.Components.Tests._ToDo.Stack.FluentSlackTests | 1✅ | 3ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Accordion.FluentAccordionItemTests | 13✅ | 35ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Accordion.FluentAccordionTests | 9✅ | 23ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Anchor.FluentAnchorTests | 34✅ | 68ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.AnchoredRegion.FluentAnchoredRegionTests | 36✅ | 112ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.AppBar.FluentAppBarItemTests | 6✅ | 55ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.AppBar.FluentAppBarTests | 4✅ | 89ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Badge.FluentBadgeTests | 17✅ | 40ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.BodyContent.FluentBodyContentTests | 2✅ | 4ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Breadcrumb.FluentBreadcrumbItemTests | 29✅ | 74ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Breadcrumb.FluentBreadcrumbTests | 5✅ | 14ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Button.FluentButtonTests | 64✅ | 183ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Card.FluentCardTests | 13✅ | 43ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Checkbox.FluentCheckboxTests | 18✅ | 53ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Checkbox.FluentCheckboxThreeStatesTests | 8✅ | 44ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.CollapsibleRegion.FluentCollapsibleRegionTests | 4✅ | 10ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.CounterBadge.FluentCounterBadgeTests | 31✅ | 105ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests | 4❌ | 173ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.FluentDataGridColumSelectTests | 23✅ | 481ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.FluentDataGridTests | 4✅ | 721ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.GridSortTests | 10✅ | 29ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.DateTime.CalendarExtendedTests | 1✅ | 0ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.DateTime.FluentCalendarSelectionTests | 7✅ | 189ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.DateTime.FluentCalendarTests | 49✅ | 757ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.DateTime.FluentDatePickerTests | 12✅ | 82ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.DateTime.FluentTimePickerTests | 6✅ | 10ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.DateTime.RangeOfTests | 7✅ | 3ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.DateTime.ToDateTimeExtensionsTests | 25✅ | 5ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.DateTime.ToTimeAgoTests | 31✅ | 5ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.DesignSystemProvider.FluentDesignSystemProviderTests | 1✅ | 16ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Dialog.FluentDialogServiceTests | 5✅ | 158ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Dialog.FluentDialogTests | 3✅ | 33ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Divider.FluentDividerTests | 6✅ | 17ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Drag.FluentDragTests | 1✅ | 9ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Emojis.FluentEmojiTests | 1⚪ | 1ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Extensions.AdditionalAttributesExtensionsShould | 24✅ | 1ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Flipper.FluentFlipperTests | 2✅ | 22ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Footer.FluentFooterTests | 1✅ | 3ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Forms.FluentValidationSummaryTests | 1⚪ | 1ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Grid.FluentGridTests | 23✅ | 58ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Header.FluentHeaderTests | 3✅ | 12ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Highlighter.FluentHighlighterTests | 1✅ | 5ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.HorizontalScroll.FluentHorizontalScrollTests | 1✅ | 8ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Icons.FluentIconTests | 22✅ | 55ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.InputFile.FluentInputFileTests | 11✅ | 143ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.KeyCodeProvider.FluentKeyCodeTests | 13✅ | 60ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Label.FluentInputLabelTests | 5✅ | 11ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Label.FluentLabelTests | 20✅ | 61ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Layout.FluentLayoutTests | 4✅ | 18ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.List.FluentAutocompleteTests | 24✅ | 336ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.List.FluentComboboxTests | 3✅ | 57ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.List.FluentListboxTests | 6✅ | 44ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.List.FluentPersonaTests | 7✅ | 46ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.List.FluentSelectTests | 13✅ | 86ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Main.FluentMainTests | 1✅ | 3ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.MainLayout.FluentMainLayoutTests | 1✅ | 19ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Menu.FluentMenuItemTests | 1⚪ | 1ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Menu.FluentMenuTests | 1✅ | 11ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.MenuButton.FluentMenuButtonTests | 2✅ | 38ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.MessageBar.FluentMessageBarTests | 4✅ | 488ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.MessageBar.MessageServiceTests | 4✅ | 343ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.NavMenu.FluentNavGroupTests | 9✅ | 54ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.NavMenu.FluentNavLinkTests | 11✅ | 49ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.NavMenu.FluentNavMenuTests | 8✅ | 43ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.NumberField.FluentNumberFieldTests | 38✅ | 182ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Overflow.FluentOverflowItemTests | 1⚪ | 1ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Overflow.FluentOverflowTests | 1⚪ | 1ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Overlay.FluentOverlayTests | 1✅ | 7ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Pagination.FluentPaginatorTests | 1⚪ | 1ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Popover.FluentPopoverTests | 1✅ | 3ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.PresenceBadge.FluentPresenceBadgeTests | 1⚪ | 1ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.ProfileMenu.FluentProfileMenuTests | 5✅ | 111ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Progress.FluentProgressRingTests | 8✅ | 26ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Progress.FluentProgressTests | 7✅ | 40ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.PullToRefresh.FluentPullToRefreshTests | 20✅ | 79ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Radio.FluentRadioGroupTests | 1✅ | 9ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Radio.FluentRadioTests | 1⚪ | 1ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Rating.FluentRatingTests | 13✅ | 107ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Search.FluentSearchTests | 26✅ | 81ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Skeleton.FluentSkeletonTests | 1✅ | 5ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Slider.FluentSliderLabelTests | 1✅ | 7ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Slider.FluentSliderTests | 7✅ | 35ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.SortableList.FluentSortableListTests | 3✅ | 19ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Spacer.FluentSpacerTests | 1✅ | 2ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Splitter.FluentMultiSplitterTests | 9✅ | 54ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Splitter.FluentSplitterTests | 15✅ | 43ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Stack.FluentStackTests | 1✅ | 5ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Switch.FluentSwitchTests | 1✅ | 5ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Tabs.FluentTabsTests | 1⚪ | 1ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Tabs.FluentTabTests | 1⚪ | 1ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.TextArea.FluentTextAreaTests | 1✅ | 7ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.TextField.FluentTextFieldTests | 1✅ | 5ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Toast.FluentToastProviderTests | 1⚪ | 1ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Toast.FluentToastTests | 1⚪ | 1ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Toolbar.FluentToolbarTests | 1✅ | 6ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Tooltip.FluentTooltipTests | 2✅ | 17ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.TreeView.FluentTreeViewItemsTests | 11✅ | 68ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.TreeView.FluentTreeViewTests | 3✅ | 8ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Utilities.CssBuilderTests | 18✅ | 2ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Utilities.DebounceActionTests | 9⚪ | 9ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Utilities.DebounceTaskTests | 8⚪ | 8ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Utilities.InlineStyleBuilderTests | 7✅ | 1ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Utilities.SplitterTests | 3✅ | 4ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Utilities.StyleBuilderTests | 11✅ | 1ms | ||
| Microsoft.FluentUI.AspNetCore.Components.Tests.Wizard.FluentWizardTests | 24✅ | 322ms |
❌ Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests
❌ DataGridSortByTests_SortByColumnIndex_Ascending
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The value of the attribute table(1) > thead(1) > tr(1) > th(1) > div(1) > span(1) > fluent-button(1) > svg(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0) > div(0) > span(0) > fluent-button(0) > svg(1)[style] are different.
Actual HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="ascending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
</tbody>
</table>
Expected HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="ascending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
</tbody>
</table>
❌ DataGridSortByTests_SortByColumnIndex_Descending
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The value of the attribute table(1) > thead(1) > tr(1) > th(1) > div(1) > span(1) > fluent-button(1) > svg(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0) > div(0) > span(0) > fluent-button(0) > svg(1)[style] are different.
Actual HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="descending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
</tbody>
</table>
Expected HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="descending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
</tbody>
</table>
❌ DataGridSortByTests_SortByColumnTitle_Ascending
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The value of the attribute table(1) > thead(1) > tr(1) > th(1) > div(1) > span(1) > fluent-button(1) > svg(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0) > div(0) > span(0) > fluent-button(0) > svg(1)[style] are different.
Actual HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="ascending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
</tbody>
</table>
Expected HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="ascending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
</tbody>
</table>
❌ DataGridSortByTests_SortByColumnTitle_Descending
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The value of the attribute table(1) > thead(1) > tr(1) > th(1) > div(1) > span(1) > fluent-button(1) > svg(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0) > div(0) > span(0) > fluent-button(0) > svg(1)[style] are different.
Actual HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="descending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
</tbody>
</table>
Expected HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="descending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
</tbody>
</table>
Annotations
Check failure on line 113 in tests/Core/FluentAssert.cs
github-actions / Core Tests
Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests ► DataGridSortByTests_SortByColumnIndex_Ascending
Failed test found in:
TestResults/runneradmin_fv-az1347-943_2025-05-15_12_24_03.trx
Error:
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The value of the attribute table(1) > thead(1) > tr(1) > th(1) > div(1) > span(1) > fluent-button(1) > svg(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0) > div(0) > span(0) > fluent-button(0) > svg(1)[style] are different.
Actual HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="ascending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
</tbody>
</table>
Expected HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="ascending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
</tbody>
</table>
Raw output
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The value of the attribute table(1) > thead(1) > tr(1) > th(1) > div(1) > span(1) > fluent-button(1) > svg(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0) > div(0) > span(0) > fluent-button(0) > svg(1)[style] are different.
Actual HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="ascending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
</tbody>
</table>
Expected HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="ascending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
</tbody>
</table>
at Microsoft.FluentUI.AspNetCore.Components.Tests.FluentAssert.Verify(IRenderedFragment actual, Func`2 received, String filename, String memberName, String suffix) in D:\a\fluentui-blazor\fluentui-blazor\tests\Core\FluentAssert.cs:line 113
at Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending() in D:\a\fluentui-blazor\fluentui-blazor\tests\Core\DataGrid\DataGridSortByTests.razor:line 68
at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__128_0(Object state)
Check failure on line 113 in tests/Core/FluentAssert.cs
github-actions / Core Tests
Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests ► DataGridSortByTests_SortByColumnIndex_Descending
Failed test found in:
TestResults/runneradmin_fv-az1347-943_2025-05-15_12_24_03.trx
Error:
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The value of the attribute table(1) > thead(1) > tr(1) > th(1) > div(1) > span(1) > fluent-button(1) > svg(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0) > div(0) > span(0) > fluent-button(0) > svg(1)[style] are different.
Actual HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="descending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
</tbody>
</table>
Expected HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="descending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
</tbody>
</table>
Raw output
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The value of the attribute table(1) > thead(1) > tr(1) > th(1) > div(1) > span(1) > fluent-button(1) > svg(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0) > div(0) > span(0) > fluent-button(0) > svg(1)[style] are different.
Actual HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="descending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
</tbody>
</table>
Expected HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="descending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
</tbody>
</table>
at Microsoft.FluentUI.AspNetCore.Components.Tests.FluentAssert.Verify(IRenderedFragment actual, Func`2 received, String filename, String memberName, String suffix) in D:\a\fluentui-blazor\fluentui-blazor\tests\Core\FluentAssert.cs:line 113
at Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending() in D:\a\fluentui-blazor\fluentui-blazor\tests\Core\DataGrid\DataGridSortByTests.razor:line 85
at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__128_0(Object state)
Check failure on line 113 in tests/Core/FluentAssert.cs
github-actions / Core Tests
Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests ► DataGridSortByTests_SortByColumnTitle_Ascending
Failed test found in:
TestResults/runneradmin_fv-az1347-943_2025-05-15_12_24_03.trx
Error:
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The value of the attribute table(1) > thead(1) > tr(1) > th(1) > div(1) > span(1) > fluent-button(1) > svg(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0) > div(0) > span(0) > fluent-button(0) > svg(1)[style] are different.
Actual HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="ascending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
</tbody>
</table>
Expected HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="ascending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
</tbody>
</table>
Raw output
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The value of the attribute table(1) > thead(1) > tr(1) > th(1) > div(1) > span(1) > fluent-button(1) > svg(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0) > div(0) > span(0) > fluent-button(0) > svg(1)[style] are different.
Actual HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="ascending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
</tbody>
</table>
Expected HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="ascending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="M9 4.71 6.35 7.35a.5.5 0 1 1-.7-.7L9.1 3.18a.5.5 0 0 1 .74-.03h.01l3.5 3.5a.5.5 0 1 1-.71.7L10 4.71V16.5a.5.5 0 0 1-1 0V4.71Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
</tbody>
</table>
at Microsoft.FluentUI.AspNetCore.Components.Tests.FluentAssert.Verify(IRenderedFragment actual, Func`2 received, String filename, String memberName, String suffix) in D:\a\fluentui-blazor\fluentui-blazor\tests\Core\FluentAssert.cs:line 113
at Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending() in D:\a\fluentui-blazor\fluentui-blazor\tests\Core\DataGrid\DataGridSortByTests.razor:line 34
--- End of stack trace from previous location ---
Check failure on line 113 in tests/Core/FluentAssert.cs
github-actions / Core Tests
Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests ► DataGridSortByTests_SortByColumnTitle_Descending
Failed test found in:
TestResults/runneradmin_fv-az1347-943_2025-05-15_12_24_03.trx
Error:
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The value of the attribute table(1) > thead(1) > tr(1) > th(1) > div(1) > span(1) > fluent-button(1) > svg(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0) > div(0) > span(0) > fluent-button(0) > svg(1)[style] are different.
Actual HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="descending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
</tbody>
</table>
Expected HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="descending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
</tbody>
</table>
Raw output
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The value of the attribute table(1) > thead(1) > tr(1) > th(1) > div(1) > span(1) > fluent-button(1) > svg(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0) > div(0) > span(0) > fluent-button(0) > svg(1)[style] are different.
Actual HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="descending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: var(--fluent-data-grid-header-opacity);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
</tbody>
</table>
Expected HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="descending" >
<div style="display: flex; justify-content: flex-start;" >
<span class="keycapture" style="width: 100%;" >
<fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" >
<div class="col-title-text" >Item1</div>
<svg slot="end" style="width: 20px; fill: var(--accent-fill-rest); opacity: 0.5;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<path d="m10 15.29 2.65-2.64a.5.5 0 0 1 .7.7L9.9 16.82a.5.5 0 0 1-.74.03h-.01l-3.5-3.5a.5.5 0 1 1 .71-.7L9 15.29V3.5a.5.5 0 0 1 1 0v11.79Z"></path>
</svg>
</fluent-button>
</span>
</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="display: flex; justify-content: flex-start;" >
<div class="col-title" style="width: calc(100% - 10px);" >
<div class="col-title-text" >Item2</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >A</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="5" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >D</td>
</tr>
</tbody>
</table>
at Microsoft.FluentUI.AspNetCore.Components.Tests.FluentAssert.Verify(IRenderedFragment actual, Func`2 received, String filename, String memberName, String suffix) in D:\a\fluentui-blazor\fluentui-blazor\tests\Core\FluentAssert.cs:line 113
at Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending() in D:\a\fluentui-blazor\fluentui-blazor\tests\Core\DataGrid\DataGridSortByTests.razor:line 51
--- End of stack trace from previous location ---
Loading