@multiplatform.one/forms 7.11.0 → 7.16.0

package/src/fields/Combobox/Combobox.spec.tsx

@@ -1,9 +1,20 @@
-import { act, fireEvent } from "@testing-library/react";
+import { act, fireEvent, within } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
 import { Combobox } from "./index";
 
+/** Web panels portal out to the page (MPO-335, LC-90), so panel text is read from the page. */
+function findInPage(text: string): Element | undefined {
+  try {
+    return within(document.body).queryByText(text, { exact: false }) ?? undefined;
+  } catch {
+    return Array.from(document.body.querySelectorAll("*")).find((el) =>
+      el.textContent?.includes(text),
+    );
+  }
+}
+
 const options = [
   { value: "apple", label: "Apple" },
   { value: "banana", label: "Banana" },
@@ -27,7 +38,7 @@ describe("Combobox", () => {
             trigger={() => <span>Country</span>}
           />,
         );
-        const trigger = result.container.querySelector('[role="combobox"]');
+        const trigger = result.baseElement.querySelector('[role="combobox"]');
         expect(trigger?.getAttribute("aria-label")).toBe("Country code");
         expect(trigger?.getAttribute("tabindex")).toBe("0");
         expect(trigger?.getAttribute("aria-expanded")).toBe("false");
@@ -48,7 +59,7 @@ describe("Combobox", () => {
               trigger={() => <span>Country</span>}
             />,
           );
-          const trigger = result.container.querySelector<HTMLElement>(
+          const trigger = result.baseElement.querySelector<HTMLElement>(
             '[data-testid="combobox-trigger"]',
           );
           expect(trigger?.style.width).toBe(triggerSizing === "content" ? "auto" : "100%");
@@ -60,23 +71,23 @@ describe("Combobox", () => {
 
   describe("without form context", () => {
     it("renders with label", () => {
-      const result = renderWithProviders(<Combobox label="Fruit" name="fruit" options={options} />);
-      expect(result.findTextElement("Fruit")).toBeDefined();
+      renderWithProviders(<Combobox label="Fruit" name="fruit" options={options} />);
+      expect(findInPage("Fruit")).toBeDefined();
     });
 
     it("renders required label with asterisk", () => {
       const result = renderWithProviders(
         <Combobox label="Required" name="req" options={options} required />,
       );
-      const label = result.container.querySelector("label");
+      const label = result.baseElement.querySelector("label");
       expect(label?.textContent).toContain("*");
     });
 
     it("renders with helper text", () => {
-      const result = renderWithProviders(
+      renderWithProviders(
         <Combobox label="Fruit" name="fruit" options={options} helperText="Pick a fruit" />,
       );
-      expect(result.findTextElement("Pick a fruit")).toBeDefined();
+      expect(findInPage("Pick a fruit")).toBeDefined();
     });
 
     it("renders skeleton placeholder", () => {
@@ -84,22 +95,18 @@ describe("Combobox", () => {
         <Combobox label="Loading" name="l" options={options} skeleton />,
       );
       // No interactive trigger rendered in skeleton mode
-      const buttons = result.container.querySelectorAll("button");
+      const buttons = result.baseElement.querySelectorAll("button");
       expect(buttons.length).toBe(0);
     });
 
     it("renders with pre-selected value", () => {
-      const result = renderWithProviders(
-        <Combobox label="Fruit" name="fruit" options={options} value="apple" />,
-      );
-      expect(result.findTextElement("Apple")).toBeDefined();
+      renderWithProviders(<Combobox label="Fruit" name="fruit" options={options} value="apple" />);
+      expect(findInPage("Apple")).toBeDefined();
     });
 
     it("renders disabled state", () => {
-      const result = renderWithProviders(
-        <Combobox label="Disabled" name="d" options={options} disabled />,
-      );
-      expect(result.findTextElement("Disabled")).toBeDefined();
+      renderWithProviders(<Combobox label="Disabled" name="d" options={options} disabled />);
+      expect(findInPage("Disabled")).toBeDefined();
     });
 
     it("fires canonical onChange and the deprecated onValueChange alias once when dismissing a chip", async () => {
@@ -118,7 +125,7 @@ describe("Combobox", () => {
         />,
       );
       // Labels are differentiated per chip now — "Remove {label}".
-      const dismiss = result.container.querySelector('[aria-label^="Remove"]');
+      const dismiss = result.baseElement.querySelector('[aria-label^="Remove"]');
       expect(dismiss).toBeTruthy();
       await act(async () => {
         if (dismiss) fireEvent.click(dismiss);
@@ -143,7 +150,7 @@ describe("Combobox", () => {
         />,
       );
       await act(async () => {});
-      const optionEls = result.container.querySelectorAll('[role="option"]');
+      const optionEls = result.baseElement.querySelectorAll('[role="option"]');
       expect(optionEls[2]?.textContent).toContain("Cherry");
       expect(optionEls[0]?.textContent).toContain("Apple");
     });
@@ -151,35 +158,35 @@ describe("Combobox", () => {
 
   describe("with form context", () => {
     it("renders inside form", () => {
-      const result = renderWithProviders(
+      renderWithProviders(
         <Form formOptions={{ defaultValues: { fruit: "" } }} submitText="Submit">
           <Combobox name="fruit" label="Fruit" options={options} />
         </Form>,
       );
-      expect(result.findTextElement("Fruit")).toBeDefined();
+      expect(findInPage("Fruit")).toBeDefined();
     });
   });
 
   describe("async contract additions (valueLabel / clearable / searchError / description)", () => {
     it("shows valueLabel in the trigger when the value is not in options", () => {
-      const result = renderWithProviders(
+      renderWithProviders(
         <Combobox label="User" options={[]} value="user-001" valueLabel="Jane Doe" />,
       );
-      expect(result.findTextElement("Jane Doe")).toBeDefined();
+      expect(findInPage("Jane Doe")).toBeDefined();
     });
 
     it("still shows the placeholder for an unknown value without valueLabel", () => {
-      const result = renderWithProviders(
+      renderWithProviders(
         <Combobox label="User" options={[]} value="user-001" placeholder="Pick user" />,
       );
-      expect(result.findTextElement("Pick user")).toBeDefined();
+      expect(findInPage("Pick user")).toBeDefined();
     });
 
     it("readOnly renders valueLabel for a value missing from options", () => {
-      const result = renderWithProviders(
+      renderWithProviders(
         <Combobox label="User" options={[]} value="user-001" valueLabel="Jane Doe" readOnly />,
       );
-      expect(result.findTextElement("Jane Doe")).toBeDefined();
+      expect(findInPage("Jane Doe")).toBeDefined();
     });
 
     it("clearable trigger clears the value through canonical onChange", async () => {
@@ -187,7 +194,7 @@ describe("Combobox", () => {
       const result = renderWithProviders(
         <Combobox label="Fruit" options={options} value="apple" clearable onChange={onChange} />,
       );
-      const clear = result.container.querySelector('[aria-label="Clear"]');
+      const clear = result.baseElement.querySelector('[aria-label="Clear"]');
       expect(clear).toBeTruthy();
       await act(async () => {
         if (clear) fireEvent.click(clear);
@@ -198,15 +205,15 @@ describe("Combobox", () => {
 
     it("renders option descriptions in the open dropdown", async () => {
       const withDescriptions = [{ value: "u1", label: "user1@x.com", description: "User One" }];
-      const result = renderWithProviders(
+      renderWithProviders(
         <Combobox label="User" options={withDescriptions} open onSearch={() => {}} />,
       );
       await act(async () => {});
-      expect(result.findTextElement("User One")).toBeDefined();
+      expect(findInPage("User One")).toBeDefined();
     });
 
     it("shows searchError instead of the empty state in the open dropdown", async () => {
-      const result = renderWithProviders(
+      renderWithProviders(
         <Combobox
           label="User"
           options={[]}
@@ -216,7 +223,7 @@ describe("Combobox", () => {
         />,
       );
       await act(async () => {});
-      expect(result.findTextElement("You don't have permission to search User")).toBeDefined();
+      expect(findInPage("You don't have permission to search User")).toBeDefined();
     });
   });
 
@@ -226,12 +233,12 @@ describe("Combobox", () => {
         <Combobox label="Fruit" name="fruit" options={options} open />,
       );
       await act(async () => {});
-      const first = result.container.querySelector('[role="option"]');
+      const first = result.baseElement.querySelector('[role="option"]');
       expect(first?.id).toMatch(/-opt-0$/);
-      const search = result.container.querySelector("input");
+      const search = result.baseElement.querySelector("input");
       expect(search?.getAttribute("aria-autocomplete")).toBe("list");
       expect(search?.getAttribute("aria-activedescendant")).toBe(first?.id);
-      const listbox = result.container.querySelector('[role="listbox"]');
+      const listbox = result.baseElement.querySelector('[role="listbox"]');
       expect(listbox).toBeTruthy();
       expect(search?.getAttribute("aria-controls")).toBe(listbox?.id);
     });
@@ -241,13 +248,13 @@ describe("Combobox", () => {
         <Combobox label="Fruit" name="fruit" options={options} open />,
       );
       await act(async () => {});
-      const search = result.container.querySelector("input");
+      const search = result.baseElement.querySelector("input");
       expect(search).toBeTruthy();
       await act(async () => {
         fireEvent.change(search!, { target: { value: "  Apple" } });
       });
-      expect(result.findTextElement("Apple")).toBeDefined();
-      expect(result.container.textContent).not.toContain("Banana");
+      expect(findInPage("Apple")).toBeDefined();
+      expect(result.baseElement.textContent).not.toContain("Banana");
     });
 
     it("ArrowDown moves activedescendant through ungrouped options", async () => {
@@ -255,14 +262,14 @@ describe("Combobox", () => {
         <Combobox label="Fruit" name="fruit" options={options} open />,
       );
       await act(async () => {});
-      const search = result.container.querySelector("input");
+      const search = result.baseElement.querySelector("input");
       expect(search).toBeTruthy();
-      const first = result.container.querySelector('[role="option"]');
+      const first = result.baseElement.querySelector('[role="option"]');
       expect(search?.getAttribute("aria-activedescendant")).toBe(first?.id);
       await act(async () => {
         fireEvent.keyDown(search!, { key: "ArrowDown" });
       });
-      const optionsInDom = result.container.querySelectorAll('[role="option"]');
+      const optionsInDom = result.baseElement.querySelectorAll('[role="option"]');
       expect(search?.getAttribute("aria-activedescendant")).toBe(optionsInDom[1]?.id);
       expect(optionsInDom[1]?.textContent).toContain("Banana");
     });
@@ -296,10 +303,10 @@ describe("Combobox", () => {
         <Combobox label="Produce" name="produce" options={groupedOptions} multiple open />,
       );
       await act(async () => {});
-      const headers = result.container.querySelectorAll("[data-combobox-group-header]");
+      const headers = result.baseElement.querySelectorAll("[data-combobox-group-header]");
       expect(headers.length).toBeGreaterThan(0);
-      expect(result.findTextElement("Fruit")).toBeDefined();
-      expect(result.findTextElement("Vegetable")).toBeDefined();
+      expect(findInPage("Fruit")).toBeDefined();
+      expect(findInPage("Vegetable")).toBeDefined();
     });
 
     it("ArrowDown/ArrowUp traverse only selectable rows and skip headers", async () => {
@@ -316,24 +323,24 @@ describe("Combobox", () => {
       );
       await act(async () => {});
 
-      const search = result.container.querySelector("input");
+      const search = result.baseElement.querySelector("input");
       expect(search).toBeTruthy();
-      const optionLabels = [...result.container.querySelectorAll('[role="option"]')].map(
+      const optionLabels = [...result.baseElement.querySelectorAll('[role="option"]')].map(
         (el) => el.textContent,
       );
       expect(optionLabels[0]).toContain("Apple");
       expect(optionLabels[1]).toContain("Banana");
       expect(optionLabels[2]).toContain("Carrot");
 
-      expect(activeOption(result.container)?.textContent).toContain("Apple");
-      expect(activeOption(result.container)?.getAttribute("role")).toBe("option");
+      expect(activeOption(result.baseElement)?.textContent).toContain("Apple");
+      expect(activeOption(result.baseElement)?.getAttribute("role")).toBe("option");
 
       await act(async () => {
         fireEvent.keyDown(search!, { key: "ArrowDown" });
       });
-      expect(activeOption(result.container)?.textContent).toContain("Banana");
-      expect(activeOption(result.container)?.getAttribute("role")).toBe("option");
-      for (const header of result.container.querySelectorAll("[data-combobox-group-header]")) {
+      expect(activeOption(result.baseElement)?.textContent).toContain("Banana");
+      expect(activeOption(result.baseElement)?.getAttribute("role")).toBe("option");
+      for (const header of result.baseElement.querySelectorAll("[data-combobox-group-header]")) {
         expect(header.getAttribute("data-active")).not.toBe("true");
       }
 
@@ -346,19 +353,19 @@ describe("Combobox", () => {
       await act(async () => {
         fireEvent.keyDown(search!, { key: "ArrowDown" });
       });
-      expect(activeOption(result.container)?.textContent).toContain("Carrot");
+      expect(activeOption(result.baseElement)?.textContent).toContain("Carrot");
 
       await act(async () => {
         fireEvent.keyDown(search!, { key: "ArrowUp" });
       });
-      expect(activeOption(result.container)?.textContent).toContain("Banana");
+      expect(activeOption(result.baseElement)?.textContent).toContain("Banana");
 
       await act(async () => {
         fireEvent.keyDown(search!, { key: "Home" });
         fireEvent.keyDown(search!, { key: "ArrowUp" });
       });
-      expect(activeOption(result.container)?.textContent).toContain("Carrot");
-      expect(activeOption(result.container)?.getAttribute("role")).toBe("option");
+      expect(activeOption(result.baseElement)?.textContent).toContain("Carrot");
+      expect(activeOption(result.baseElement)?.getAttribute("role")).toBe("option");
     });
 
     // The sheet core (<= OVERLAY_BREAKPOINT, and every native render) used to
@@ -423,5 +430,28 @@ describe("Combobox", () => {
       expect(active?.textContent).toContain("Banana");
       expect(active?.getAttribute("data-combobox-index")).toBe("1");
     });
+
+    // MPO-263: the sheet focused its list on open, over the search's
+    // autoFocus, so typing went nowhere. Only a sheet with no search field
+    // gives its list the focus.
+    it("the sheet opens with focus in its search, or on its list when the search is hidden", async () => {
+      window.innerWidth = 500;
+      const withSearch = renderWithProviders(
+        <Combobox label="Produce" name="produce" options={groupedOptions} open />,
+      );
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      });
+      expect(document.activeElement?.tagName).toBe("INPUT");
+      withSearch.unmount();
+
+      renderWithProviders(
+        <Combobox label="Produce" name="produce" options={groupedOptions} open hideSearch />,
+      );
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      });
+      expect(document.activeElement?.getAttribute("role")).toBe("listbox");
+    });
   });
 });