Skip to content

Commit 589eda9

Browse files
GomezIvannGomezIvann
committed
Testing updates Select
1 parent 05a72ed commit 589eda9

File tree

2 files changed

+18
-19
lines changed

2 files changed

+18
-19
lines changed

‎packages/lib/src/select/Listbox.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ const ListboxContainer = styled.ul`
1515
background-color: var(--color-absolutes-white);
1616
border: var(--border-width-s) var(--border-style-default) var(--border-color-neutral-medium);
1717
border-radius: var(--border-radius-s);
18-
1918
box-shadow: var(--shadow-mid-x-position, 0px) var(--shadow-mid-y-position, 12px) var(--shadow-mid-blur, 12px)
2019
var(--shadow-mid-spread, 0px) var(--shadow-light, rgba(209, 209, 209, 0.3));
2120
color: var(--color-fg-neutral-dark);
@@ -133,6 +132,7 @@ const Listbox = ({
133132

134133
return (
135134
<ListboxContainer
135+
aria-multiselectable={multiple}
136136
id={id}
137137
onClick={(event) => {
138138
event.stopPropagation();
@@ -141,9 +141,8 @@ const Listbox = ({
141141
event.preventDefault();
142142
}}
143143
ref={listboxRef}
144-
aria-multiselectable={multiple}
145-
style={styles}
146144
role="listbox"
145+
style={styles}
147146
>
148147
{searchable && (options.length === 0 || !groupsHaveOptions(options)) ? (
149148
<OptionsSystemMessage>

‎packages/lib/src/select/Select.test.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -667,7 +667,7 @@ describe("Select component tests", () => {
667667
);
668668
const select = getByRole("combobox");
669669
await userEvent.click(select);
670-
const listbox = getByRole("list");
670+
const listbox = getByRole("listbox");
671671
expect(listbox).toBeTruthy();
672672
expect(select.getAttribute("aria-expanded")).toBe("true");
673673
expect(getByText("Colores")).toBeTruthy();
@@ -683,7 +683,7 @@ describe("Select component tests", () => {
683683
expect(groups[2]?.getAttribute("aria-labelledby")).toBe(groupLabels[2]?.id);
684684
expect(getAllByRole("option").length).toBe(18);
685685
await userEvent.click(select);
686-
expect(queryByRole("list")).toBeFalsy();
686+
expect(queryByRole("listbox")).toBeFalsy();
687687
expect(select.getAttribute("aria-expanded")).toBe("false");
688688
});
689689
test("Grouped Options - If an empty list of options in a group is passed, the select is rendered but doesn't open the listbox", async () => {
@@ -700,7 +700,7 @@ describe("Select component tests", () => {
700700
);
701701
const select = getByRole("combobox");
702702
await userEvent.click(select);
703-
expect(queryByRole("list")).toBeFalsy();
703+
expect(queryByRole("listbox")).toBeFalsy();
704704
expect(select.getAttribute("aria-expanded")).toBe("false");
705705
});
706706
test("Grouped Options - Click in an option selects it and closes the listbox", async () => {
@@ -714,7 +714,7 @@ describe("Select component tests", () => {
714714
let options = getAllByRole("option");
715715
options[8] && (await userEvent.click(options[8]));
716716
expect(onChange).toHaveBeenCalledWith({ value: "oviedo" });
717-
expect(queryByRole("list")).toBeFalsy();
717+
expect(queryByRole("listbox")).toBeFalsy();
718718
expect(getByText("Oviedo")).toBeTruthy();
719719
await userEvent.click(select);
720720
options = getAllByRole("option");
@@ -772,30 +772,30 @@ describe("Select component tests", () => {
772772
const { getByRole, queryByRole } = render(<DxcSelect label="test-select-label" options={groupOptions} />);
773773
const select = getByRole("combobox");
774774
fireEvent.keyDown(select, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
775-
expect(queryByRole("list")).toBeTruthy();
775+
expect(queryByRole("listbox")).toBeTruthy();
776776
expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
777777
});
778778
test("Grouped Options: Arrow up key - Puts the focus in last option when the first one is visually focused", () => {
779779
const { getByRole, queryByRole } = render(<DxcSelect label="test-select-label" options={groupOptions} />);
780780
const select = getByRole("combobox");
781781
fireEvent.keyDown(select, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 });
782782
fireEvent.keyDown(select, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
783-
expect(queryByRole("list")).toBeTruthy();
783+
expect(queryByRole("listbox")).toBeTruthy();
784784
expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
785785
});
786786
test("Grouped Options: Arrow down key - Opens the listbox and visually focus the first option", () => {
787787
const { getByRole, queryByRole } = render(<DxcSelect label="test-select-label" options={groupOptions} />);
788788
const select = getByRole("combobox");
789789
fireEvent.keyDown(select, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 });
790-
expect(queryByRole("list")).toBeTruthy();
790+
expect(queryByRole("listbox")).toBeTruthy();
791791
expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
792792
});
793793
test("Grouped Options: Arrow down key - Puts the focus in the first option when the last one is visually focused", () => {
794794
const { getByRole, queryByRole } = render(<DxcSelect label="test-select-label" options={groupOptions} />);
795795
const select = getByRole("combobox");
796796
fireEvent.keyDown(select, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
797797
fireEvent.keyDown(select, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 });
798-
expect(queryByRole("list")).toBeTruthy();
798+
expect(queryByRole("listbox")).toBeTruthy();
799799
expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
800800
});
801801
test("Grouped Options: Enter key - Selects the visually focused option and closes the listbox", async () => {
@@ -810,7 +810,7 @@ describe("Select component tests", () => {
810810
fireEvent.keyDown(select, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 });
811811
fireEvent.keyDown(select, { key: "Enter", code: "Enter", keyCode: 13, charCode: 13 });
812812
expect(onChange).toHaveBeenCalledWith({ value: "ebro" });
813-
expect(queryByRole("list")).toBeFalsy();
813+
expect(queryByRole("listbox")).toBeFalsy();
814814
expect(getByText("Ebro")).toBeTruthy();
815815
await userEvent.click(select);
816816
const options = getAllByRole("option");
@@ -824,7 +824,7 @@ describe("Select component tests", () => {
824824
const select = getByRole("combobox");
825825
const searchInput = container.querySelectorAll("input")[1];
826826
await userEvent.click(select);
827-
expect(getByRole("list")).toBeTruthy();
827+
expect(getByRole("listbox")).toBeTruthy();
828828
searchInput && (await userEvent.type(searchInput, "ro"));
829829
expect(getAllByRole("presentation").length).toBe(2);
830830
expect(getAllByRole("option").length).toBe(5);
@@ -833,7 +833,7 @@ describe("Select component tests", () => {
833833
let options = getAllByRole("option");
834834
options[4] && (await userEvent.click(options[4]));
835835
expect(onChange).toHaveBeenCalledWith({ value: "ebro" });
836-
expect(queryByRole("list")).toBeFalsy();
836+
expect(queryByRole("listbox")).toBeFalsy();
837837
expect(getByText("Ebro")).toBeTruthy();
838838
expect(searchInput?.value).toBe("");
839839
await userEvent.click(select);
@@ -848,7 +848,7 @@ describe("Select component tests", () => {
848848
const select = getByRole("combobox");
849849
const searchInput = container.querySelectorAll("input")[1];
850850
await userEvent.click(select);
851-
expect(getByRole("list")).toBeTruthy();
851+
expect(getByRole("listbox")).toBeTruthy();
852852
searchInput && (await userEvent.type(searchInput, "very long string"));
853853
expect(getByText("No matches found")).toBeTruthy();
854854
});
@@ -863,13 +863,13 @@ describe("Select component tests", () => {
863863
const options = getAllByRole("option");
864864
options[10] && (await userEvent.click(options[10]));
865865
expect(onChange).toHaveBeenCalledWith({ value: ["bilbao"] });
866-
expect(queryByRole("list")).toBeTruthy();
866+
expect(queryByRole("listbox")).toBeTruthy();
867867
expect(getAllByText("Bilbao").length).toBe(2);
868868
fireEvent.keyDown(select, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
869869
fireEvent.keyDown(select, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
870870
fireEvent.keyDown(select, { key: "Enter", code: "Enter", keyCode: 13, charCode: 13 });
871871
expect(onChange).toHaveBeenCalledWith({ value: ["bilbao", "guadalquivir"] });
872-
expect(queryByRole("list")).toBeTruthy();
872+
expect(queryByRole("listbox")).toBeTruthy();
873873
expect(getByText("Bilbao, Guadalquivir")).toBeTruthy();
874874
expect(submitInput?.value).toBe("bilbao,guadalquivir");
875875
});
@@ -886,13 +886,13 @@ describe("Select component tests", () => {
886886
options[13] && (await userEvent.click(options[13]));
887887
options[17] && (await userEvent.click(options[17]));
888888
expect(onChange).toHaveBeenCalledWith({ value: ["blanco", "oviedo", "duero", "ebro"] });
889-
expect(queryByRole("list")).toBeTruthy();
889+
expect(queryByRole("listbox")).toBeTruthy();
890890
expect(getByText("Blanco, Oviedo, Duero, Ebro")).toBeTruthy();
891891
expect(getByText("4", { exact: true })).toBeTruthy();
892892
const clearSelectionButton = getByRole("button");
893893
expect(clearSelectionButton.getAttribute("aria-label")).toBe("Clear selection");
894894
await userEvent.click(clearSelectionButton);
895-
expect(queryByRole("list")).toBeTruthy();
895+
expect(queryByRole("listbox")).toBeTruthy();
896896
expect(queryByText("Blanco, Oviedo, Duero, Ebro")).toBeFalsy();
897897
expect(queryByText("4")).toBeFalsy();
898898
expect(queryByRole("button")).toBeFalsy();

0 commit comments

Comments
 (0)