add test

easy-ui-react/src/MultiSelect/MultiSelect.test.tsx

@@ -1,5 +1,9 @@
+import { getByRole, screen } from "@testing-library/react";
+import { UserEvent } from "@testing-library/user-event";
+import React, { useCallback, useState } from "react";
 import { vi } from "vitest";
-import { mockGetComputedStyle } from "../utilities/test";
+import { mockGetComputedStyle, render, userClick } from "../utilities/test";
+import { Item, MultiSelect, useFilter, useListData } from "./MultiSelect";
 
 describe("<MultiSelect />", () => {
   let restoreGetComputedStyle: () => void;
@@ -14,7 +18,103 @@ describe("<MultiSelect />", () => {
     restoreGetComputedStyle();
   });
 
-  it("should show on trigger click", async () => {
-    expect(true).toBe(true);
+  it("should render a ComboBox", async () => {
+    render(getMultiSelect());
+    expect(screen.getByRole("combobox")).toBeInTheDocument();
+  });
+
+  it("should open dropdown with arrow button", async () => {
+    const { user } = render(getMultiSelect());
+    await userClick(user, screen.getByText("Open dropdown"));
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  it("should filter dropdown with input interaction", async () => {
+    const { user } = render(getMultiSelect());
+    await user.type(screen.getByRole("combobox"), "ban");
+    expect(screen.getByRole("option", { name: "Banana" })).toBeInTheDocument();
+  });
+
+  it("should select item", async () => {
+    const { user } = render(getMultiSelect());
+    await userClick(user, screen.getByText("Open dropdown"));
+    const options = screen.getAllByRole("option");
+    await userClick(user, options[1]);
+    expect(getSelectedItem("Banana")).toBeInTheDocument();
+  });
+
+  it("should remove selected item", async () => {
+    const { user } = render(
+      getMultiSelect({
+        initialSelectedItems: [fruits[0]],
+      }),
+    );
+    await userClick(user, screen.getByText("Open dropdown"));
+    expect(getSelectedItem("Apple")).toBeInTheDocument();
+    await clearSelectedItem(user, "Apple");
+    expect(screen.queryByText("No selected items")).toBeInTheDocument();
   });
 });
+
+const fruits = [
+  { key: 1, label: "Apple" },
+  { key: 2, label: "Banana" },
+  { key: 3, label: "Cherry" },
+] as const satisfies Item[];
+
+const getMultiSelect = ({
+  initialSelectedItems = [],
+}: {
+  initialSelectedItems?: Item[];
+} = {}) => {
+  function MultiSelectTest() {
+    const [selectedItems, setSelectedItems] =
+      useState<Item[]>(initialSelectedItems);
+    const { contains } = useFilter({ sensitivity: "base" });
+    const filter = useCallback(
+      (item: Item, filterText: string) => contains(item.label, filterText),
+      [contains],
+    );
+    const list = useListData<Item>({
+      initialSelectedKeys: selectedItems.map((i) => i.key),
+      initialItems: fruits,
+      filter,
+    });
+    return (
+      <MultiSelect
+        dropdownItems={list.items}
+        inputValue={list.filterText}
+        onInputChange={list.setFilterText}
+        selectedItems={selectedItems}
+        onSelectionChange={setSelectedItems}
+        placeholder="Select a fruit"
+        maxItemsUntilScroll={10}
+        renderPill={(item) => (
+          <MultiSelect.Pill icon={item.icon} label={item.label} />
+        )}
+      >
+        {(item) => (
+          <MultiSelect.Option textValue={item.label}>
+            <MultiSelect.OptionText>{item.label}</MultiSelect.OptionText>
+          </MultiSelect.Option>
+        )}
+      </MultiSelect>
+    );
+  }
+  return <MultiSelectTest />;
+};
+
+function getSelectedItem(name: string) {
+  const selectedItems = screen.getByLabelText("Selected items");
+  return getByRole(selectedItems, "row", { name, hidden: true });
+}
+
+async function clearSelectedItem(user: UserEvent, name: string) {
+  await userClick(
+    user,
+    getByRole(getSelectedItem(name), "button", {
+      name: /remove/i,
+      hidden: true,
+    }),
+  );
+}

easy-ui-react/src/MultiSelect/MultiSelect.tsx

@@ -15,6 +15,7 @@ import {
 import { useElementWidth } from "./utilities";
 
 import styles from "./MultiSelect.module.scss";
+import { Text } from "../Text";
 
 export type Item = { key: Key } & PillProps;
 
@@ -216,7 +217,7 @@ export function MultiSelect<T extends Item>(props: MultiSelectProps<T>) {
 
   return (
     <div ref={rootRef} className={styles.MultiSelect}>
-      {selectedItems.length > 0 && (
+      {selectedItems.length > 0 ? (
         <PillGroup
           items={selectedItems}
           horizontalStackContainerProps={{ gap: "1" }}
@@ -225,6 +226,10 @@ export function MultiSelect<T extends Item>(props: MultiSelectProps<T>) {
         >
           {renderPill}
         </PillGroup>
+      ) : (
+        <VisuallyHidden>
+          <Text>No selected items</Text>
+        </VisuallyHidden>
       )}
       <div className={styles.comboBoxContainer}>
         <ComboBox
@@ -270,6 +275,7 @@ export function MultiSelect<T extends Item>(props: MultiSelectProps<T>) {
           onClick={() => clearComboBoxButtonRef.current?.click()}
           tabIndex={-1}
         >
+          <Text visuallyHidden>Open dropdown</Text>
           <Icon symbol={KeyboardArrowDownIcon} />
         </button>
       </div>

easy-ui-react/src/MultiSelect/utilities.ts

@@ -1,25 +1,18 @@
-import { RefObject, useEffect, useState } from "react";
+import { useResizeObserver } from "@react-aria/utils";
+import { RefObject, useState } from "react";
 
 export function useElementWidth(elementRef: RefObject<HTMLDivElement>) {
   const [width, setWidth] = useState(0);
 
-  useEffect(() => {
-    const trigger = elementRef.current;
-    if (!trigger) {
-      return;
-    }
-
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        setWidth(entry.target.clientWidth);
+  useResizeObserver({
+    ref: elementRef,
+    onResize() {
+      if (elementRef.current) {
+        const { width } = elementRef.current.getBoundingClientRect();
+        setWidth(width);
       }
-    });
-
-    observer.observe(trigger);
-    return () => {
-      observer.unobserve(trigger);
-    };
-  }, [elementRef]);
+    },
+  });
 
   return width;
 }