Skip to content

[Select] Fix multiple issues #1807

[Select] Fix multiple issues

[Select] Fix multiple issues #1807

Triggered via pull request October 21, 2024 13:02
Status Failure
Total duration 3m 29s
Artifacts

build-core-lib.yml

on: pull_request
Build and Test Core Lib
3m 15s
Build and Test Core Lib
Build and Deploy Demo site
2m 56s
Build and Deploy Demo site
Close Pull Request Job
0s
Close Pull Request Job
Fit to window
Zoom out
Zoom in

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