[Select] Fix multiple issues #1807
build-core-lib.yml
on: pull_request
Build and Test Core Lib
3m 15s
Build and Deploy Demo site
2m 56s
Close Pull Request Job
0s
Annotations
12 errors and 31 warnings
Microsoft.FluentUI.AspNetCore.Components.Tests.List.FluentAutocompleteTests ► FluentAutocomplete_Keyboard(keyCode: "ArrowDown"):
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1111-826_2024-10-21_13_06_04.trx
Error:
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(0)[aria-checked] was not expected.
2: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(1)[aria-checked] was not expected.
3: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(2)[aria-checked] was not expected.
Actual HTML:
<div class=" fluent-autocomplete-multiselect" style="width: 100%;" >
<fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="2-Vincent Baaij (2 of 3)" >
<fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" >
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" ></fluent-flipper>
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" ></fluent-flipper>
<fluent-badge id="xxx" appearance="neutral" aria-label="1-Denis Voituron" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">1-Denis Voituron<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove 1-Denis Voituron</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
<fluent-badge id="xxx" appearance="neutral" aria-label="2-Vincent Baaij" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">2-Vincent Baaij<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove 2-Vincent Baaij</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
</fluent-horizontal-scroll>
<svg slot="end" style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" tabindex="0" role="button">
<title>Clear</title>
<path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
</svg>
</fluent-text-field>
<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" >
<div ></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" >
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" >
<div id="xxx" role="listbox" style="width: 100%;" tabindex="0" >
<fluent-option id="xxx" value="1-Denis Voituron" selected="" aria-checked="true" aria-selected="true" >1-Denis Voituron</fluent-option>
<fluent-option id="xxx" value="2-Vincent Baaij" selected="" aria-checked="true" aria-selected="true" selectable="" >2-Vincent Baaij</fluent-option>
<fluent-option id="xxx" value="3-Bill Gates" aria-checked="false" aria-selected="false" >3-Bill Gates</fluent-option>
</div>
</div>
</fluent-anchored-region>
</div>
Expected HTML:
<div class=" fluent-autocomplete-multiselect" style="width: 100%;" >
<fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="2-Vincent Baaij (2 of 3)" >
<fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" >
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" ></fluent-flipper>
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" ></fluent-flipper>
<fluent-badge id="xxx" appearance="neutral" aria-label="1-Denis Voituron" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">1-Denis Voituron<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove 1-Denis Voituron</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
<fluent-badge id="xxx" appearance="neutral" aria-label="2-Vincent Baaij" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">2-Vincent Baaij<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove 2-Vincent Baaij</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
</fluent-horizontal-scroll>
<svg slot="end" style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" tabindex="0" role="button">
<title>Clear</title>
<path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
</svg>
</fluent-text-field>
<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" >
<div ></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" >
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" >
<div id="xxx" role="listbox" style="width: 100%;" tabindex="0" >
<fluent-option id="xxx" value="1-Denis Voituron" selected="" aria-selected="true" >1-Denis Voituron</fluent-option>
<fluent-option id="xxx" value="2-Vincent Baaij" selected="" aria-selected="true" selectable="" >2-Vincent Baaij</fluent-option>
<fluent-option id="xxx" value="3-Bill Gates" aria-selected="false" >3-Bill Gates</fluent-option>
</div>
</div>
</fluent-anchored-region>
</div>
|
Microsoft.FluentUI.AspNetCore.Components.Tests.List.FluentAutocompleteTests ► FluentAutocomplete_Keyboard(keyCode: "ArrowUp"):
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1111-826_2024-10-21_13_06_04.trx
Error:
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(0)[aria-checked] was not expected.
2: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(1)[aria-checked] was not expected.
3: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(2)[aria-checked] was not expected.
Actual HTML:
<div class=" fluent-autocomplete-multiselect" style="width: 100%;" >
<fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="1-Denis Voituron (1 of 3)" >
<fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" >
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" ></fluent-flipper>
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" ></fluent-flipper>
<fluent-badge id="xxx" appearance="neutral" aria-label="1-Denis Voituron" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">1-Denis Voituron<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove 1-Denis Voituron</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
<fluent-badge id="xxx" appearance="neutral" aria-label="2-Vincent Baaij" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">2-Vincent Baaij<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove 2-Vincent Baaij</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
</fluent-horizontal-scroll>
<svg slot="end" style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" tabindex="0" role="button">
<title>Clear</title>
<path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
</svg>
</fluent-text-field>
<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" >
<div ></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" >
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" >
<div id="xxx" role="listbox" style="width: 100%;" tabindex="0" >
<fluent-option id="xxx" value="1-Denis Voituron" selected="" aria-checked="true" aria-selected="true" selectable="" >1-Denis Voituron</fluent-option>
<fluent-option id="xxx" value="2-Vincent Baaij" selected="" aria-checked="true" aria-selected="true" >2-Vincent Baaij</fluent-option>
<fluent-option id="xxx" value="3-Bill Gates" aria-checked="false" aria-selected="false" >3-Bill Gates</fluent-option>
</div>
</div>
</fluent-anchored-region>
</div>
Expected HTML:
<div class=" fluent-autocomplete-multiselect" style="width: 100%;" >
<fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="1-Denis Voituron (1 of 3)" >
<fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" >
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" ></fluent-flipper>
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" ></fluent-flipper>
<fluent-badge id="xxx" appearance="neutral" aria-label="1-Denis Voituron" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">1-Denis Voituron<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove 1-Denis Voituron</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
<fluent-badge id="xxx" appearance="neutral" aria-label="2-Vincent Baaij" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">2-Vincent Baaij<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove 2-Vincent Baaij</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
</fluent-horizontal-scroll>
<svg slot="end" style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" tabindex="0" role="button">
<title>Clear</title>
<path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
</svg>
</fluent-text-field>
<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" >
<div ></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" >
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" >
<div id="xxx" role="listbox" style="width: 100%;" tabindex="0" >
<fluent-option id="xxx" value="1-Denis Voituron" selected="" aria-selected="true" selectable="" >1-Denis Voituron</fluent-option>
<fluent-option id="xxx" value="2-Vincent Baaij" selected="" aria-selected="true" >2-Vincent Baaij</fluent-option>
<fluent-option id="xxx" value="3-Bill Gates" aria-selected="false" >3-Bill Gates</fluent-option>
</div>
</div>
</fluent-anchored-region>
</div>
|
Microsoft.FluentUI.AspNetCore.Components.Tests.List.FluentAutocompleteTests ► FluentAutocomplete_Keyboard(keyCode: "Backspace"):
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1111-826_2024-10-21_13_06_04.trx
Error:
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(0)[aria-checked] was not expected.
2: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(1)[aria-checked] was not expected.
3: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(2)[aria-checked] was not expected.
Actual HTML:
<div class=" fluent-autocomplete-multiselect" style="width: 100%;" >
<fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="1-Denis Voituron (1 of 3)" >
<fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" >
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" ></fluent-flipper>
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" ></fluent-flipper>
<fluent-badge id="xxx" appearance="neutral" aria-label="1-Denis Voituron" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">1-Denis Voituron<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove 1-Denis Voituron</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
<fluent-badge id="xxx" appearance="neutral" aria-label="2-Vincent Baaij" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">2-Vincent Baaij<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove 2-Vincent Baaij</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
</fluent-horizontal-scroll>
<svg slot="end" style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" tabindex="0" role="button">
<title>Clear</title>
<path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
</svg>
</fluent-text-field>
<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" >
<div ></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" >
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" >
<div id="xxx" role="listbox" style="width: 100%;" tabindex="0" >
<fluent-option id="xxx" value="1-Denis Voituron" selected="" aria-checked="true" aria-selected="true" selectable="" >1-Denis Voituron</fluent-option>
<fluent-option id="xxx" value="2-Vincent Baaij" aria-checked="false" aria-selected="false" >2-Vincent Baaij</fluent-option>
<fluent-option id="xxx" value="3-Bill Gates" aria-checked="false" aria-selected="false" >3-Bill Gates</fluent-option>
</div>
</div>
</fluent-anchored-region>
</div>
Expected HTML:
<div class=" fluent-autocomplete-multiselect" style="width: 100%;" >
<fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="1-Denis Voituron (1 of 3)" >
<fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" >
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" ></fluent-flipper>
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" ></fluent-flipper>
<fluent-badge id="xxx" appearance="neutral" aria-label="1-Denis Voituron" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">1-Denis Voituron<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove 1-Denis Voituron</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
<fluent-badge id="xxx" appearance="neutral" aria-label="2-Vincent Baaij" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">2-Vincent Baaij<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove 2-Vincent Baaij</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
</fluent-horizontal-scroll>
<svg slot="end" style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" tabindex="0" role="button">
<title>Clear</title>
<path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
</svg>
</fluent-text-field>
<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" >
<div ></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" >
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" >
<div id="xxx" role="listbox" style="width: 100%;" tabindex="0" >
<fluent-option id="xxx" value="1-Denis Voituron" selected="" aria-selected="true" selectable="" >1-Denis Voituron</fluent-option>
<fluent-option id="xxx" value="2-Vincent Baaij" aria-selected="false" >2-Vincent Baaij</fluent-option>
<fluent-option id="xxx" value="3-Bill Gates" aria-selected="false" >3-Bill Gates</fluent-option>
</div>
</div>
</fluent-anchored-region>
</div>
|
Microsoft.FluentUI.AspNetCore.Components.Tests.List.FluentAutocompleteTests ► FluentAutocomplete_Opened:
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1111-826_2024-10-21_13_06_04.trx
Error:
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(0)[aria-checked] was not expected.
2: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(1)[aria-checked] was not expected.
3: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(2)[aria-checked] was not expected.
Actual HTML:
<div class=" fluent-autocomplete-multiselect" style="width: 100%;" >
<fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="1-Denis Voituron (1 of 3)" >
<svg slot="end" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" tabindex="0" role="button">
<title>Search</title>
<path d="M9.1 10.17a4.5 4.5 0 1 1 1.06-1.06l3.62 3.61a.75.75 0 1 1-1.06 1.06l-3.61-3.61Zm.4-3.67a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"></path>
</svg>
</fluent-text-field>
<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" >
<div ></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" >
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" >
<div id="xxx" role="listbox" style="width: 100%;" tabindex="0" >
<fluent-option id="xxx" value="1-Denis Voituron" aria-checked="false" aria-selected="true" selectable="" >1-Denis Voituron</fluent-option>
<fluent-option id="xxx" value="2-Vincent Baaij" aria-checked="false" aria-selected="false" >2-Vincent Baaij</fluent-option>
<fluent-option id="xxx" value="3-Bill Gates" aria-checked="false" aria-selected="false" >3-Bill Gates</fluent-option>
</div>
</div>
</fluent-anchored-region>
</div>
Expected HTML:
<div class=" fluent-autocomplete-multiselect" style="width: 100%;" >
<fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="1-Denis Voituron (1 of 3)" >
<svg slot="end" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" tabindex="0" role="button">
<title>Search</title>
<path d="M9.1 10.17a4.5 4.5 0 1 1 1.06-1.06l3.62 3.61a.75.75 0 1 1-1.06 1.06l-3.61-3.61Zm.4-3.67a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"></path>
</svg>
</fluent-text-field>
<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" >
<div ></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" >
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" >
<div id="xxx" role="listbox" style="width: 100%;" tabindex="0" >
<fluent-option id="xxx" value="1-Denis Voituron" aria-selected="true" selectable="" >1-Denis Voituron</fluent-option>
<fluent-option id="xxx" value="2-Vincent Baaij" aria-selected="false" >2-Vincent Baaij</fluent-option>
<fluent-option id="xxx" value="3-Bill Gates" aria-selected="false" >3-Bill Gates</fluent-option>
</div>
</div>
</fluent-anchored-region>
</div>
|
Microsoft.FluentUI.AspNetCore.Components.Tests.List.FluentAutocompleteTests ► FluentAutocomplete_SelectedOptions:
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1111-826_2024-10-21_13_06_04.trx
Error:
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(0)[aria-checked] was not expected.
2: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(1)[aria-checked] was not expected.
3: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(2)[aria-checked] was not expected.
Actual HTML:
<div class=" fluent-autocomplete-multiselect" style="width: 100%;" >
<fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="Denis Voituron (1 of 3)" >
<fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" >
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" ></fluent-flipper>
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" ></fluent-flipper>
<fluent-badge id="xxx" appearance="neutral" aria-label="Denis Voituron" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">Denis Voituron<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove Denis Voituron</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
<fluent-badge id="xxx" appearance="neutral" aria-label="Vincent Baaij" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">Vincent Baaij<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove Vincent Baaij</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
</fluent-horizontal-scroll>
<svg slot="end" style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" tabindex="0" role="button">
<title>Clear</title>
<path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
</svg>
</fluent-text-field>
<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" >
<div ></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" >
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" >
<div id="xxx" role="listbox" style="width: 100%;" tabindex="0" >
<fluent-option id="xxx" value="1" selected="" aria-checked="true" aria-selected="true" selectable="" >Denis Voituron</fluent-option>
<fluent-option id="xxx" value="2" selected="" aria-checked="true" aria-selected="true" >Vincent Baaij</fluent-option>
<fluent-option id="xxx" value="3" aria-checked="false" aria-selected="false" >Bill Gates</fluent-option>
</div>
</div>
</fluent-anchored-region>
</div>
Expected HTML:
<div class=" fluent-autocomplete-multiselect" style="width: 100%;" >
<fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="Denis Voituron (1 of 3)" >
<fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" >
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" ></fluent-flipper>
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" ></fluent-flipper>
<fluent-badge id="xxx" appearance="neutral" aria-label="Denis Voituron" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">Denis Voituron<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove Denis Voituron</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
<fluent-badge id="xxx" appearance="neutral" aria-label="Vincent Baaij" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">Vincent Baaij<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove Vincent Baaij</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
</fluent-horizontal-scroll>
<svg slot="end" style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" tabindex="0" role="button">
<title>Clear</title>
<path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
</svg>
</fluent-text-field>
<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" >
<div ></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" >
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" >
<div id="xxx" role="listbox" style="width: 100%;" tabindex="0" >
<fluent-option id="xxx" value="1" selected="" aria-selected="true" selectable="" >Denis Voituron</fluent-option>
<fluent-option id="xxx" value="2" selected="" aria-selected="true" >Vincent Baaij</fluent-option>
<fluent-option id="xxx" value="3" aria-selected="false" >Bill Gates</fluent-option>
</div>
</div>
</fluent-anchored-region>
</div>
|
Microsoft.FluentUI.AspNetCore.Components.Tests.List.FluentAutocompleteTests ► FluentAutocomplete_SelectedOptions_OnDismissClick:
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1111-826_2024-10-21_13_06_04.trx
Error:
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(0)[aria-checked] was not expected.
2: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(1)[aria-checked] was not expected.
3: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(2)[aria-checked] was not expected.
Actual HTML:
<div class=" fluent-autocomplete-multiselect" style="width: 100%;" >
<fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="Denis Voituron (1 of 3)" >
<fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" >
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" ></fluent-flipper>
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" ></fluent-flipper>
<fluent-badge id="xxx" appearance="neutral" aria-label="Denis Voituron" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">Denis Voituron<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove Denis Voituron</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
<fluent-badge id="xxx" appearance="neutral" aria-label="Vincent Baaij" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">Vincent Baaij<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove Vincent Baaij</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
</fluent-horizontal-scroll>
<svg slot="end" style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" tabindex="0" role="button">
<title>Clear</title>
<path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
</svg>
</fluent-text-field>
<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" >
<div ></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" >
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" >
<div id="xxx" role="listbox" style="width: 100%;" tabindex="0" >
<fluent-option id="xxx" value="1" aria-checked="false" aria-selected="true" selectable="" >Denis Voituron</fluent-option>
<fluent-option id="xxx" value="2" selected="" aria-checked="true" aria-selected="true" >Vincent Baaij</fluent-option>
<fluent-option id="xxx" value="3" aria-checked="false" aria-selected="false" >Bill Gates</fluent-option>
</div>
</div>
</fluent-anchored-region>
</div>
Expected HTML:
<div class=" fluent-autocomplete-multiselect" style="width: 100%;" >
<fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="Denis Voituron (1 of 3)" >
<fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" >
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" ></fluent-flipper>
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" ></fluent-flipper>
<fluent-badge id="xxx" appearance="neutral" aria-label="Denis Voituron" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">Denis Voituron<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove Denis Voituron</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
<fluent-badge id="xxx" appearance="neutral" aria-label="Vincent Baaij" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">Vincent Baaij<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove Vincent Baaij</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
</fluent-horizontal-scroll>
<svg slot="end" style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" tabindex="0" role="button">
<title>Clear</title>
<path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
</svg>
</fluent-text-field>
<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" >
<div ></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" >
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" >
<div id="xxx" role="listbox" style="width: 100%;" tabindex="0" >
<fluent-option id="xxx" value="1" aria-selected="true" selectable="" >Denis Voituron</fluent-option>
<fluent-option id="xxx" value="2" selected="" aria-selected="true" >Vincent Baaij</fluent-option>
<fluent-option id="xxx" value="3" aria-selected="false" >Bill Gates</fluent-option>
</div>
</div>
</fluent-anchored-region>
</div>
|
Microsoft.FluentUI.AspNetCore.Components.Tests.List.FluentAutocompleteTests ► FluentAutocomplete_SelectedOptions_Template:
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1111-826_2024-10-21_13_06_04.trx
Error:
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(0)[aria-checked] was not expected.
2: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(1)[aria-checked] was not expected.
3: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(0) > fluent-option(2)[aria-checked] was not expected.
Actual HTML:
<div class=" fluent-autocomplete-multiselect" style="width: 100%;" >
<fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="Denis Voituron (1 of 3)" >
<fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" >
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" ></fluent-flipper>
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" ></fluent-flipper>
<fluent-badge id="xxx" appearance="neutral" aria-label="Denis Voituron" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">Denis Voituron<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove Denis Voituron</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
<fluent-badge id="xxx" appearance="neutral" aria-label="Vincent Baaij" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">Vincent Baaij<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove Vincent Baaij</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
</fluent-horizontal-scroll>
<svg slot="end" style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" tabindex="0" role="button">
<title>Clear</title>
<path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
</svg>
</fluent-text-field>
<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" >
<div ></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" >
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" >
<div id="xxx" role="listbox" style="width: 100%;" tabindex="0" >
<fluent-option id="xxx" value="1" selected="" aria-checked="true" aria-selected="true" selectable="" >
<div>1 Denis Voituron</div>
</fluent-option>
<fluent-option id="xxx" value="2" selected="" aria-checked="true" aria-selected="true" >
<div>2 Vincent Baaij</div>
</fluent-option>
<fluent-option id="xxx" value="3" aria-checked="false" aria-selected="false" >
<div>3 Bill Gates</div>
</fluent-option>
</div>
</div>
</fluent-anchored-region>
</div>
Expected HTML:
<div class=" fluent-autocomplete-multiselect" style="width: 100%;" >
<fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="Denis Voituron (1 of 3)" >
<fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" >
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" ></fluent-flipper>
<fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" ></fluent-flipper>
<fluent-badge id="xxx" appearance="neutral" aria-label="Denis Voituron" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">Denis Voituron<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove Denis Voituron</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
<fluent-badge id="xxx" appearance="neutral" aria-label="Vincent Baaij" >
<span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">Vincent Baaij<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" >
<title>Remove Vincent Baaij</title>
<path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
</svg>
</span>
</fluent-badge>
</fluent-horizontal-scroll>
<svg slot="end" style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" tabindex="0" role="button">
<title>Clear</title>
<path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
</svg>
</fluent-text-field>
<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" >
<div ></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" >
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" >
<div id="xxx" role="listbox" style="width: 100%;" tabindex="0" >
<fluent-option id="xxx" value="1" selected="" aria-selected="true" selectable="" >
<div>1 Denis Voituron</div>
</fluent-option>
<fluent-option id="xxx" value="2" selected="" aria-selected="true" >
<div>2 Vincent Baaij</div>
</fluent-option>
<fluent-option id="xxx" value="3" aria-selected="false" >
<div>3 Bill Gates</div>
</fluent-option>
</div>
</div>
</fluent-anchored-region>
</div>
|
Microsoft.FluentUI.AspNetCore.Components.Tests.List.FluentAutocompleteTests ► FluentAutocomplete_Templates:
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1111-826_2024-10-21_13_06_04.trx
Error:
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(1) > fluent-option(0)[aria-checked] was not expected.
2: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(1) > fluent-option(1)[aria-checked] was not expected.
3: The attribute at div(0) > fluent-anchored-region(4) > div(0) > div(1) > fluent-option(2)[aria-checked] was not expected.
Actual HTML:
<div class=" fluent-autocomplete-multiselect" style="width: 100%;" >
<fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="1-Denis Voituron (1 of 3)" >
<svg slot="end" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" tabindex="0" role="button">
<title>Search</title>
<path d="M9.1 10.17a4.5 4.5 0 1 1 1.06-1.06l3.62 3.61a.75.75 0 1 1-1.06 1.06l-3.61-3.61Zm.4-3.67a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"></path>
</svg>
</fluent-text-field>
<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" >
<div ></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" >
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" >
<header>Please, select an item</header>
<div id="xxx" role="listbox" style="width: 100%;" tabindex="0" >
<fluent-option id="xxx" value="1" aria-checked="false" aria-selected="true" selectable="" >
<div>1 Denis Voituron</div>
</fluent-option>
<fluent-option id="xxx" value="2" aria-checked="false" aria-selected="false" >
<div>2 Vincent Baaij</div>
</fluent-option>
<fluent-option id="xxx" value="3" aria-checked="false" aria-selected="false" >
<div>3 Bill Gates</div>
</fluent-option>
</div>
<footer>3 items found</footer>
</div>
</fluent-anchored-region>
</div>
Expected HTML:
<div class=" fluent-autocomplete-multiselect" style="width: 100%;" >
<fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="1-Denis Voituron (1 of 3)" >
<svg slot="end" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" tabindex="0" role="button">
<title>Search</title>
<path d="M9.1 10.17a4.5 4.5 0 1 1 1.06-1.06l3.62 3.61a.75.75 0 1 1-1.06 1.06l-3.61-3.61Zm.4-3.67a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"></path>
</svg>
</fluent-text-field>
<div class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" >
<div ></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" >
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" >
<header>Please, select an item</header>
<div id="xxx" role="listbox" style="width: 100%;" tabindex="0" >
<fluent-option id="xxx" value="1" aria-selected="true" selectable="" >
<div>1 Denis Voituron</div>
</fluent-option>
<fluent-option id="xxx" value="2" aria-selected="false" >
<div>2 Vincent Baaij</div>
</fluent-option>
<fluent-option id="xxx" value="3" aria-selected="false" >
<div>3 Bill Gates</div>
</fluent-option>
</div>
<footer>3 items found</footer>
</div>
</fluent-anchored-region>
</div>
|
Microsoft.FluentUI.AspNetCore.Components.Tests.List.FluentComboboxTests ► FluentCombobox_ClearSelection:
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1111-826_2024-10-21_13_06_04.trx
Error:
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The attribute at fluent-combobox(2) > fluent-option(0)[aria-checked] was not expected.
Actual HTML:
<style>#myComponent::part(listbox) { z-index: 9995 }</style>
<fluent-combobox id="xxx" current-value="" position="below" >
<fluent-option id="xxx" value="Contoso" aria-checked="false" aria-selected="false" >Contoso</fluent-option>
</fluent-combobox>
Expected HTML:
<style>#myComponent::part(listbox) { z-index: 9995 }</style>
<fluent-combobox id="xxx" current-value="" position="below" >
<fluent-option id="xxx" value="Contoso" aria-selected="false" >Contoso</fluent-option>
</fluent-combobox>
|
Microsoft.FluentUI.AspNetCore.Components.Tests.List.FluentListboxTests ► FluentListbox_NameAttribute:
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1111-826_2024-10-21_13_06_04.trx
Error:
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The attribute at div(0) > fluent-listbox(1) > fluent-option(0)[aria-checked] was not expected.
2: The attribute at div(0) > fluent-listbox(1) > fluent-option(1)[aria-checked] was not expected.
3: The attribute at div(0) > fluent-listbox(1) > fluent-option(2)[aria-checked] was not expected.
Actual HTML:
<div style="overflow-y: auto; border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest); border-radius: calc(var(--control-corner-radius) * 1px);">
<fluent-listbox id="xxx" style=" border: none; width: 100%;" size="0" name="xxx" >
<fluent-option id="xxx" value="1-Denis Voituron" aria-checked="false" aria-selected="false" >1-Denis Voituron</fluent-option>
<fluent-option id="xxx" value="2-Vincent Baaij" aria-checked="false" aria-selected="false" >2-Vincent Baaij</fluent-option>
<fluent-option id="xxx" value="3-Bill Gates" aria-checked="false" aria-selected="false" >3-Bill Gates</fluent-option>
</fluent-listbox>
</div>
Expected HTML:
<div style="overflow-y: auto; border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest); border-radius: calc(var(--control-corner-radius) * 1px);">
<fluent-listbox id="xxx" style=" border: none; width: 100%;" size="0" name="xxx" >
<fluent-option id="xxx" value="1-Denis Voituron" aria-selected="false" >1-Denis Voituron</fluent-option>
<fluent-option id="xxx" value="2-Vincent Baaij" aria-selected="false" >2-Vincent Baaij</fluent-option>
<fluent-option id="xxx" value="3-Bill Gates" aria-selected="false" >3-Bill Gates</fluent-option>
</fluent-listbox>
</div>
|
Microsoft.FluentUI.AspNetCore.Components.Tests.List.FluentListboxTests ► FluentListbox_OptionTemplate:
tests/Core/FluentAssert.cs#L113
Failed test found in:
TestResults/runneradmin_fv-az1111-826_2024-10-21_13_06_04.trx
Error:
Bunit.HtmlEqualException : HTML comparison failed.
The following errors were found:
1: The attribute at div(0) > fluent-listbox(1) > fluent-option(0)[aria-checked] was not expected.
2: The attribute at div(0) > fluent-listbox(1) > fluent-option(1)[aria-checked] was not expected.
3: The attribute at div(0) > fluent-listbox(1) > fluent-option(2)[aria-checked] was not expected.
Actual HTML:
<div style="overflow-y: auto; border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest); border-radius: calc(var(--control-corner-radius) * 1px);">
<fluent-listbox id="xxx" style=" border: none; width: 100%;" size="0" >
<fluent-option id="xxx" value="1" aria-checked="false" aria-selected="false" >
<div slot="end" style="width: 20px; fill: #F97316; display: inline-block;" >
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
<circle cx="160" cy="160" r="140"></circle>
</svg>
</div>
Denis Voituron</fluent-option>
<fluent-option id="xxx" value="2" aria-checked="false" aria-selected="false" >
<div slot="end" style="width: 20px; fill: #F97316; display: inline-block;" >
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
<circle cx="160" cy="160" r="140"></circle>
</svg>
</div>
Vincent Baaij</fluent-option>
<fluent-option id="xxx" value="3" aria-checked="false" aria-selected="false" >
<div slot="end" style="width: 20px; fill: #F97316; display: inline-block;" >
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
<circle cx="160" cy="160" r="140"></circle>
</svg>
</div>
Bill Gates</fluent-option>
</fluent-listbox>
</div>
Expected HTML:
<div style="overflow-y: auto; border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest); border-radius: calc(var(--control-corner-radius) * 1px);">
<fluent-listbox id="xxx" style=" border: none; width: 100%;" size="0" >
<fluent-option id="xxx" value="1" aria-selected="false" >
<div slot="end" style="width: 20px; fill: #F97316; display: inline-block;" >
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
<circle cx="160" cy="160" r="140"></circle>
</svg>
</div>
Denis Voituron</fluent-option>
<fluent-option id="xxx" value="2" aria-selected="false" >
<div slot="end" style="width: 20px; fill: #F97316; display: inline-block;" >
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
<circle cx="160" cy="160" r="140"></circle>
</svg>
</div>
Vincent Baaij</fluent-option>
<fluent-option id="xxx" value="3" aria-selected="false" >
<div slot="end" style="width: 20px; fill: #F97316; display: inline-block;" >
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
<circle cx="160" cy="160" r="140"></circle>
</svg>
</div>
Bill Gates</fluent-option>
</fluent-listbox>
</div>
|
Build and Test Core Lib
Process completed with exit code 1.
|
Build and Deploy Demo site:
src/Core/Components/DataGrid/FluentDataGrid.razor.cs#L251
This call will always result in an empty sequence because type 'Microsoft.FluentUI.AspNetCore.Components.ColumnBase<TGridItem>' is incompatible with type 'Microsoft.FluentUI.AspNetCore.Components.SelectColumn<TGridItem>' (https://learn.microsoft.com/dotnet/fundamentals/code-analysis/quality-rules/ca2021)
|
Build and Deploy Demo site
'FluentCounterBadge.ShowZero' is obsolete: 'This parameter will be removed in a future version. Use ShowWhen with a lambda expression instead'
|
Build and Deploy Demo site:
examples/Demo/Shared/Pages/NavMenuTree/NavMenuTreePage.razor#L75
'FluentNavMenuTree' is obsolete: 'This component has been replaced with the FluentNavMenu and will be removed in a future version.'
|
Build and Deploy Demo site:
examples/Demo/Shared/Pages/NavMenuTree/NavMenuTreePage.razor#L77
'FluentNavMenuGroup' is obsolete: 'This component has been replaced with the FluentNavGroup and will be removed in a future version.'
|
Build and Deploy Demo site:
examples/Demo/Shared/Pages/NavMenuTree/NavMenuTreePage.razor#L79
'FluentNavMenuLink' is obsolete: 'This component has been replaced with the FluentNavLink and will be removed in a future version.'
|
Build and Deploy Demo site
'FluentNavMenuTree' is obsolete: 'This component has been replaced with the FluentNavMenu and will be removed in a future version.'
|
Build and Deploy Demo site
'FluentNavMenuTree' is obsolete: 'This component has been replaced with the FluentNavMenu and will be removed in a future version.'
|
Build and Deploy Demo site
'FluentNavMenuTree' is obsolete: 'This component has been replaced with the FluentNavMenu and will be removed in a future version.'
|
Build and Deploy Demo site
'FluentNavMenuLink' is obsolete: 'This component has been replaced with the FluentNavLink and will be removed in a future version.'
|
Build and Deploy Demo site
'FluentNavMenuLink' is obsolete: 'This component has been replaced with the FluentNavLink and will be removed in a future version.'
|
Build and Deploy Demo site
'FluentCounterBadge.ShowZero' is obsolete: 'This parameter will be removed in a future version. Use ShowWhen with a lambda expression instead'
|
Build and Deploy Demo site:
examples/Demo/Shared/Pages/NavMenuTree/NavMenuTreePage.razor#L75
'FluentNavMenuTree' is obsolete: 'This component has been replaced with the FluentNavMenu and will be removed in a future version.'
|
Build and Deploy Demo site:
examples/Demo/Shared/Pages/NavMenuTree/NavMenuTreePage.razor#L77
'FluentNavMenuGroup' is obsolete: 'This component has been replaced with the FluentNavGroup and will be removed in a future version.'
|
Build and Deploy Demo site:
examples/Demo/Shared/Pages/NavMenuTree/NavMenuTreePage.razor#L79
'FluentNavMenuLink' is obsolete: 'This component has been replaced with the FluentNavLink and will be removed in a future version.'
|
Build and Deploy Demo site
'FluentNavMenuTree' is obsolete: 'This component has been replaced with the FluentNavMenu and will be removed in a future version.'
|
Build and Deploy Demo site
'FluentNavMenuTree' is obsolete: 'This component has been replaced with the FluentNavMenu and will be removed in a future version.'
|
Build and Deploy Demo site
'FluentNavMenuTree' is obsolete: 'This component has been replaced with the FluentNavMenu and will be removed in a future version.'
|
Build and Deploy Demo site
'FluentNavMenuLink' is obsolete: 'This component has been replaced with the FluentNavLink and will be removed in a future version.'
|
Build and Deploy Demo site
'FluentNavMenuLink' is obsolete: 'This component has been replaced with the FluentNavLink and will be removed in a future version.'
|
Build and Deploy Demo site
'FluentNavMenuLink' is obsolete: 'This component has been replaced with the FluentNavLink and will be removed in a future version.'
|
Build and Test Core Lib
Test report summary exceeded limit of 65535 bytes and will be trimmed
|
Build and Test Core Lib:
src/Core/Components/DataGrid/FluentDataGrid.razor.cs#L251
This call will always result in an empty sequence because type 'Microsoft.FluentUI.AspNetCore.Components.ColumnBase<TGridItem>' is incompatible with type 'Microsoft.FluentUI.AspNetCore.Components.SelectColumn<TGridItem>' (https://learn.microsoft.com/dotnet/fundamentals/code-analysis/quality-rules/ca2021)
|
Build and Test Core Lib:
src/Core/Components/DataGrid/FluentDataGrid.razor.cs#L251
This call will always result in an empty sequence because type 'Microsoft.FluentUI.AspNetCore.Components.ColumnBase<TGridItem>' is incompatible with type 'Microsoft.FluentUI.AspNetCore.Components.SelectColumn<TGridItem>' (https://learn.microsoft.com/dotnet/fundamentals/code-analysis/quality-rules/ca2021)
|
Build and Test Core Lib
A stable release of a package should not have a prerelease dependency. Either modify the version spec of dependency "Microsoft.AspNetCore.Components.Web
|
Build and Test Core Lib
A stable release of a package should not have a prerelease dependency. Either modify the version spec of dependency "Microsoft.Extensions.Configuration.Abstractions
|
Build and Test Core Lib
A stable release of a package should not have a prerelease dependency. Either modify the version spec of dependency "Microsoft.Extensions.Hosting.Abstractions
|
Build and Test Core Lib
A stable release of a package should not have a prerelease dependency. Either modify the version spec of dependency "Microsoft.Extensions.Http
|
Build and Test Core Lib:
src/Core/Components/DataGrid/FluentDataGrid.razor.cs#L251
This call will always result in an empty sequence because type 'Microsoft.FluentUI.AspNetCore.Components.ColumnBase<TGridItem>' is incompatible with type 'Microsoft.FluentUI.AspNetCore.Components.SelectColumn<TGridItem>' (https://learn.microsoft.com/dotnet/fundamentals/code-analysis/quality-rules/ca2021)
|
Build and Test Core Lib:
src/Core/Components/DataGrid/FluentDataGrid.razor.cs#L251
This call will always result in an empty sequence because type 'Microsoft.FluentUI.AspNetCore.Components.ColumnBase<TGridItem>' is incompatible with type 'Microsoft.FluentUI.AspNetCore.Components.SelectColumn<TGridItem>' (https://learn.microsoft.com/dotnet/fundamentals/code-analysis/quality-rules/ca2021)
|
Build and Test Core Lib
A stable release of a package should not have a prerelease dependency. Either modify the version spec of dependency "Microsoft.AspNetCore.Components.Web
|
Build and Test Core Lib
A stable release of a package should not have a prerelease dependency. Either modify the version spec of dependency "Microsoft.Extensions.Configuration.Abstractions
|