[DataGrid] Move down column action popup #2578
vnbaaijbuild-core-lib.yml
on: pull_request
Build and Test Core Lib
3m 39s
Build and Deploy Demo site
3m 8s
Close Pull Request Job
0s
Annotations
11 errors and 4 warnings
|
Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests ► DataGridSortByTests_SortByColumnIndex_Ascending:
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1435-434_2025-02-09_12_48_23.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)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0)[style] are different.
2: The value of the attribute table(1) > thead(1) > tr(1) > th(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(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" >
<span class="keycapture" >
<fluent-button class="col-sort-button" style="width: calc(100% - 20px);" 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>
</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 class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Item2</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: 2;" scope="col" aria-sort="ascending" >
<span class="keycapture" >
<fluent-button class="col-sort-button" style="width: calc(100% - 20px);" 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>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 1;" scope="col" aria-sort="none" >
<div class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Item2</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>
|
|
Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests ► DataGridSortByTests_SortByColumnIndex_Descending:
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1435-434_2025-02-09_12_48_23.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)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0)[style] are different.
2: The value of the attribute table(1) > thead(1) > tr(1) > th(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(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" >
<span class="keycapture" >
<fluent-button class="col-sort-button" style="width: calc(100% - 20px);" 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>
</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 class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Item2</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: 2;" scope="col" aria-sort="descending" >
<span class="keycapture" >
<fluent-button class="col-sort-button" style="width: calc(100% - 20px);" 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>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 1;" scope="col" aria-sort="none" >
<div class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Item2</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>
|
|
Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests ► DataGridSortByTests_SortByColumnTitle_Ascending:
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1435-434_2025-02-09_12_48_23.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)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0)[style] are different.
2: The value of the attribute table(1) > thead(1) > tr(1) > th(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(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" >
<span class="keycapture" >
<fluent-button class="col-sort-button" style="width: calc(100% - 20px);" 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>
</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 class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Item2</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: 2;" scope="col" aria-sort="ascending" >
<span class="keycapture" >
<fluent-button class="col-sort-button" style="width: calc(100% - 20px);" 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>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 1;" scope="col" aria-sort="none" >
<div class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Item2</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>
|
|
Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.DataGridSortByTests ► DataGridSortByTests_SortByColumnTitle_Descending:
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1435-434_2025-02-09_12_48_23.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)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0)[style] are different.
2: The value of the attribute table(1) > thead(1) > tr(1) > th(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(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" >
<span class="keycapture" >
<fluent-button class="col-sort-button" style="width: calc(100% - 20px);" 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>
</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 class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Item2</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: 2;" scope="col" aria-sort="descending" >
<span class="keycapture" >
<fluent-button class="col-sort-button" style="width: calc(100% - 20px);" 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>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 1;" scope="col" aria-sort="none" >
<div class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Item2</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>
|
|
Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.FluentDataGridColumSelectTests ► FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering:
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1435-434_2025-02-09_12_48_23.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)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0)[style] are different.
2: The value of the attribute table(1) > thead(1) > tr(1) > th(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(1)[style] are different.
Actual HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div style="cursor: pointer; margin-left: 12px;" >➖</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 class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Name</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Jean Martin</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >✅</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Kenji Sato</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >✅</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Julie Smith</td>
</tr>
</tbody>
</table>
Expected HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 2;" scope="col" aria-sort="none" >
<div style="cursor: pointer; margin-left: 12px;" >➖</div>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 1;" scope="col" aria-sort="none" >
<div class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Name</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Jean Martin</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >✅</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Kenji Sato</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >✅</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Julie Smith</td>
</tr>
</tbody>
</table>
|
|
Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.FluentDataGridColumSelectTests ► FluentDataGrid_ColumSelect_MultiSelect_Rendering:
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1435-434_2025-02-09_12_48_23.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)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0)[style] are different.
2: The value of the attribute table(1) > thead(1) > tr(1) > th(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(1)[style] are different.
Actual HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<svg style="width: 20px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<title>Some rows are selected.</title>
<path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4.5 6c0-.83.67-1.5 1.5-1.5h8c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H6A1.5 1.5 0 0 1 4.5 14V6ZM7 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Z"></path>
<path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4.5 6c0-.83.67-1.5 1.5-1.5h8c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H6A1.5 1.5 0 0 1 4.5 14V6ZM7 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Z"></path>
</svg>
</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 class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Name</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--neutral-fill-inverse-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<title>Row unselected</title>
<path d="M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm3-2a2 2 0 0 0-2 2v8c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H6Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Jean Martin</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" row-selected="">
<title>Row selected.</title>
<path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Zm7.85 4.85-5 5a.5.5 0 0 1-.7 0l-2-2a.5.5 0 0 1 .7-.7l1.65 1.64 4.65-4.64a.5.5 0 0 1 .7.7Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Kenji Sato</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" row-selected="">
<title>Row selected.</title>
<path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Zm7.85 4.85-5 5a.5.5 0 0 1-.7 0l-2-2a.5.5 0 0 1 .7-.7l1.65 1.64 4.65-4.64a.5.5 0 0 1 .7.7Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Julie Smith</td>
</tr>
</tbody>
</table>
Expected HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 2;" scope="col" aria-sort="none" >
<svg style="width: 20px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<title>Some rows are selected.</title>
<path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4.5 6c0-.83.67-1.5 1.5-1.5h8c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H6A1.5 1.5 0 0 1 4.5 14V6ZM7 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Z"></path>
<path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4.5 6c0-.83.67-1.5 1.5-1.5h8c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H6A1.5 1.5 0 0 1 4.5 14V6ZM7 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Z"></path>
</svg>
</th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 1;" scope="col" aria-sort="none" >
<div class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Name</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--neutral-fill-inverse-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<title>Row unselected</title>
<path d="M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm3-2a2 2 0 0 0-2 2v8c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H6Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Jean Martin</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" row-selected="">
<title>Row selected.</title>
<path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Zm7.85 4.85-5 5a.5.5 0 0 1-.7 0l-2-2a.5.5 0 0 1 .7-.7l1.65 1.64 4.65-4.64a.5.5 0 0 1 .7.7Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Kenji Sato</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" row-selected="">
<title>Row selected.</title>
<path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Zm7.85 4.85-5 5a.5.5 0 0 1-.7 0l-2-2a.5.5 0 0 1 .7-.7l1.65 1.64 4.65-4.64a.5.5 0 0 1 .7.7Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Julie Smith</td>
</tr>
</tbody>
</table>
|
|
Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.FluentDataGridColumSelectTests ► FluentDataGrid_ColumSelect_SingleSelect_Rendering:
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1435-434_2025-02-09_12_48_23.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)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0)[style] are different.
2: The value of the attribute table(1) > thead(1) > tr(1) > th(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(1)[style] are different.
Actual HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" ></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 class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Name</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--neutral-fill-inverse-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<title>Row unselected</title>
<path d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm-8 7a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Jean Martin</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" row-selected="">
<title>Row selected.</title>
<path d="M10 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0-13a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-7 8a7 7 0 1 1 14 0 7 7 0 0 1-14 0Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Kenji Sato</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--neutral-fill-inverse-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<title>Row unselected</title>
<path d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm-8 7a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Julie Smith</td>
</tr>
</tbody>
</table>
Expected HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 2;" scope="col" aria-sort="none" ></th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 1;" scope="col" aria-sort="none" >
<div class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Name</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--neutral-fill-inverse-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<title>Row unselected</title>
<path d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm-8 7a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Jean Martin</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" row-selected="">
<title>Row selected.</title>
<path d="M10 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0-13a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-7 8a7 7 0 1 1 14 0 7 7 0 0 1-14 0Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Kenji Sato</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--neutral-fill-inverse-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<title>Row unselected</title>
<path d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm-8 7a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Julie Smith</td>
</tr>
</tbody>
</table>
|
|
Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.FluentDataGridColumSelectTests ► FluentDataGrid_ColumSelect_SingleStickySelect_Rendering:
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1435-434_2025-02-09_12_48_23.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)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0)[style] are different.
2: The value of the attribute table(1) > thead(1) > tr(1) > th(3)[style] and actual attribute table(1) > thead(0) > tr(0) > th(1)[style] are different.
Actual HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" ></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 class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Name</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--neutral-fill-inverse-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<title>Row unselected</title>
<path d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm-8 7a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Jean Martin</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" row-selected="">
<title>Row selected.</title>
<path d="M10 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0-13a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-7 8a7 7 0 1 1 14 0 7 7 0 0 1-14 0Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Kenji Sato</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--neutral-fill-inverse-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<title>Row unselected</title>
<path d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm-8 7a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Julie Smith</td>
</tr>
</tbody>
</table>
Expected HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" >
<thead >
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" >
<th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 2;" scope="col" aria-sort="none" ></th>
<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 1;" scope="col" aria-sort="none" >
<div class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Name</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--neutral-fill-inverse-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<title>Row unselected</title>
<path d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm-8 7a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Jean Martin</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" row-selected="">
<title>Row selected.</title>
<path d="M10 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0-13a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-7 8a7 7 0 1 1 14 0 7 7 0 0 1-14 0Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Kenji Sato</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" >
<svg style="width: 20px; fill: var(--neutral-fill-inverse-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" >
<title>Row unselected</title>
<path d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm-8 7a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z"></path>
</svg>
</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" >Julie Smith</td>
</tr>
</tbody>
</table>
|
|
Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.FluentDataGridTests ► FluentDataGrid_Default:
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1435-434_2025-02-09_12_48_23.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)[style] and actual attribute table(1) > thead(0) > tr(0) > th(0)[style] are different.
Actual HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" >
<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" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" scope="col" aria-sort="none" >
<div class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Name</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >Denis Voituron</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >Vincent Baaij</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >Bill Gates</td>
</tr>
</tbody>
</table>
Expected HTML:
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" >
<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" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 1;" scope="col" aria-sort="none" >
<div class="col-title" style="width: calc(100% - 20px);" >
<div class="col-title-text" >Name</div>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="fluent-data-grid-row" data-row-index="2" role="row" aria-rowindex="2" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >Denis Voituron</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" aria-rowindex="3" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >Vincent Baaij</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" aria-rowindex="4" >
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" >Bill Gates</td>
</tr>
</tbody>
</table>
|
|
Microsoft.FluentUI.AspNetCore.Components.Tests.DataGrid.FluentDataGridTests ► FluentDataGrid_With_ItemProvider_And_Uncontrolled_Loading_Starts_Loading:
tests/Core/DataGrid/FluentDataGridTests.razor#L126
Failed test found in:
TestResults/runneradmin_fv-az1435-434_2025-02-09_12_48_23.trx
Error:
Bunit.Extensions.WaitForHelpers.WaitForFailedException : The state predicate did not pass before the timeout period passed.
If this test does not fail consistently, the reason may be that
the wait timeout is too short, and the runtime did not have enough
time to complete the necessary number of renders of the component under test.
This can happen on highly utilized or slower hardware, for example.
To determine if this is the cause, compare the check and render count(s) below
and see if they match what is expected. If they do not,
consider increasing the timeout, either at the individual
method call level, e.g. WaitForElement("div", TimeSpan.FromSeconds(15)),
or via the static TestContext.DefaultWaitTimeout property.
Check count: 0.
Component render count: 1.
Total render count across all components: 1.
|
|
Build and Test Core Lib
Process completed with exit code 1.
|
|
Build and Deploy Demo site:
examples/Demo/Shared/Pages/DataGrid/Examples/DataGridAutoItemsPerPage.razor#L7
Possible null reference argument for parameter 'source' in 'IQueryable<Country> Queryable.AsQueryable<Country>(IEnumerable<Country> source)'.
|
|
Build and Deploy Demo site:
examples/Demo/Shared/Pages/DataGrid/Examples/DataGridAutoItemsPerPage.razor#L7
Possible null reference argument for parameter 'source' in 'IQueryable<Country> Queryable.AsQueryable<Country>(IEnumerable<Country> source)'.
|
|
Build and Deploy Demo site:
examples/Demo/Shared/Pages/DataGrid/Examples/DataGridAutoItemsPerPage.razor#L7
Possible null reference argument for parameter 'source' in 'IQueryable<Country> Queryable.AsQueryable<Country>(IEnumerable<Country> source)'.
|
|
Build and Test Core Lib
Test report summary exceeded limit of 65535 bytes and will be trimmed
|