@simplybusiness/mobius 5.5.0 → 5.6.1

package/src/components/Combobox/Combobox.test.tsx

@@ -1,25 +1,26 @@
-import { render, screen } from "@testing-library/react";
+import { act, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Combobox } from "./Combobox";
-import { FRUITS, FRUITS_OBJECTS } from "./fixtures";
+import { FRUITS, FRUITS_OBJECTS, FRUITS_GROUPS } from "./fixtures";
 
 describe("Combobox with string options", () => {
+  // Basic rendering and setup
   it("should render without crashing", () => {
     render(<Combobox options={FRUITS} />);
   });
 
-  it("should use the default value provided", () => {
-    render(<Combobox options={FRUITS} defaultValue="Apple" />);
-    const input = screen.getByRole("combobox") as HTMLInputElement;
-    expect(input.value).toBe("Apple");
-  });
-
   it("should render a combobox", () => {
     render(<Combobox options={FRUITS} />);
     const input = screen.getByRole("combobox");
     expect(input).toBeInTheDocument();
   });
 
+  it("should use the default value provided", () => {
+    render(<Combobox options={FRUITS} defaultValue="Apple" />);
+    const input = screen.getByRole("combobox") as HTMLInputElement;
+    expect(input.value).toBe("Apple");
+  });
+
   it("should accept a ref and forward it to the input", () => {
     const ref = { current: null };
     render(<Combobox options={FRUITS} ref={ref} />);
@@ -32,169 +33,260 @@ describe("Combobox with string options", () => {
     expect(listbox).not.toBeInTheDocument();
   });
 
-  it("should render a listbox when the input is focused", async () => {
-    render(<Combobox options={FRUITS} />);
+  it("should set placeholder in input if provided", async () => {
+    render(<Combobox options={FRUITS} placeholder="Please pick a fruit" />);
     const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    const listbox = screen.getByRole("listbox");
-    expect(listbox).toBeInTheDocument();
+    expect(input).toHaveAttribute("placeholder", "Please pick a fruit");
   });
 
-  it("should render all of the options in the listbox", async () => {
-    render(<Combobox options={FRUITS} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    const options = screen.getAllByRole("option");
-    expect(options).toHaveLength(FRUITS.length);
-  });
+  describe("mouse interactions", () => {
+    it("should render a listbox when the input is focused", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const listbox = screen.getByRole("listbox");
+      expect(listbox).toBeInTheDocument();
+    });
 
-  it("should call the onSelected callback when an option is selected", async () => {
-    const onSelected = jest.fn();
-    render(<Combobox options={FRUITS} onSelected={onSelected} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    const options = screen.getAllByRole("option");
-    await userEvent.click(options[0]);
-    expect(onSelected).toHaveBeenCalledWith(FRUITS[0]);
-  });
+    it("should call the onSelected callback when an option is selected", async () => {
+      const onSelected = jest.fn();
+      render(<Combobox options={FRUITS} onSelected={onSelected} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const options = screen.getAllByRole("option");
+      await userEvent.click(options[0]);
+      expect(onSelected).toHaveBeenCalledWith(FRUITS[0]);
+    });
 
-  it("should update the input value when an option is selected", async () => {
-    render(<Combobox options={FRUITS} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    const options = screen.getAllByRole("option");
-    await userEvent.click(options[0]);
-    expect(input).toHaveValue(FRUITS[0]);
-  });
+    it("should update the input value when an option is selected", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const options = screen.getAllByRole("option");
+      await userEvent.click(options[0]);
+      expect(input).toHaveValue(FRUITS[0]);
+    });
 
-  it("should close the listbox when the input is blurred", async () => {
-    render(<Combobox options={FRUITS} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    await userEvent.tab();
-    const listbox = screen.queryByRole("listbox");
-    expect(listbox).not.toBeInTheDocument();
-  });
+    it("should close the listbox when the input is blurred", async () => {
+      jest.useFakeTimers({
+        advanceTimers: true,
+        timerLimit: 1000,
+      });
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      await act(async () => {
+        await userEvent.tab();
+        jest.advanceTimersByTime(200);
+      });
+      const listbox = screen.queryByRole("listbox");
+      expect(listbox).not.toBeInTheDocument();
+    });
 
-  it("should close the listbox when an option is selected", async () => {
-    render(<Combobox options={FRUITS} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    const options = screen.getAllByRole("option");
-    await userEvent.click(options[0]);
-    const listbox = screen.queryByRole("listbox");
-    expect(listbox).not.toBeInTheDocument();
-  });
+    it("should close the listbox when an option is selected", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const options = screen.getAllByRole("option");
+      await userEvent.click(options[0]);
+      const listbox = screen.queryByRole("listbox");
+      expect(listbox).not.toBeInTheDocument();
+    });
 
-  it("should filter the options based on the input value", async () => {
-    render(<Combobox options={FRUITS} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.type(input, "Ap");
-    const options = screen.getAllByRole("option");
-    expect(options).toHaveLength(6);
-  });
+    it("should close the listbox when clicking outside", async () => {
+      jest.useFakeTimers({
+        advanceTimers: true,
+        timerLimit: 1000,
+      });
+      render(
+        <div>
+          <Combobox options={FRUITS} />
+          <button type="button">Outside</button>
+        </div>,
+      );
+      const input = screen.getByRole("combobox");
+      const outside = screen.getByRole("button");
+      await userEvent.click(input);
+      await userEvent.click(outside);
+      await act(async () => {
+        await userEvent.tab();
+        jest.advanceTimersByTime(200);
+      });
+      const listbox = screen.queryByRole("listbox");
+      expect(listbox).not.toBeInTheDocument();
+    });
 
-  it("should ignore case when filtering options", async () => {
-    render(<Combobox options={FRUITS} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.type(input, "AP");
-    const options = screen.getAllByRole("option");
-    expect(options).toHaveLength(6);
+    it("should not close the listbox on right click", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      await userEvent.pointer({ target: input, keys: "[MouseRight]" });
+      const listbox = screen.getByRole("listbox");
+      expect(listbox).toBeInTheDocument();
+    });
   });
 
-  it("should select the top option when pressing Enter", async () => {
-    const onSelected = jest.fn();
-    render(<Combobox options={FRUITS} onSelected={onSelected} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.type(input, "Ap");
-    await userEvent.type(input, "{enter}");
-    expect(onSelected).toHaveBeenCalledWith("Apple");
-  });
+  describe("keyboard interactions", () => {
+    it("should select the top option when pressing Enter", async () => {
+      const onSelected = jest.fn();
+      render(<Combobox options={FRUITS} onSelected={onSelected} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.type(input, "Ap");
+      await userEvent.type(input, "{enter}");
+      expect(onSelected).toHaveBeenCalledWith("Apple");
+    });
 
-  it("should not select an option when pressing Enter with no options", async () => {
-    const onSelected = jest.fn();
-    render(<Combobox options={FRUITS} onSelected={onSelected} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.type(input, "Zz");
-    await userEvent.type(input, "{enter}");
-    expect(onSelected).not.toHaveBeenCalled();
-  });
+    it("should not select an option when pressing Enter with no options", async () => {
+      const onSelected = jest.fn();
+      render(<Combobox options={FRUITS} onSelected={onSelected} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.type(input, "Zz");
+      await userEvent.type(input, "{enter}");
+      expect(onSelected).not.toHaveBeenCalled();
+    });
 
-  it("should select the highlighted option when pressing Enter", async () => {
-    const onSelected = jest.fn();
-    render(<Combobox options={FRUITS} onSelected={onSelected} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    await userEvent.keyboard("{arrowdown}");
-    await userEvent.keyboard("{enter}");
-    expect(onSelected).toHaveBeenCalledWith(FRUITS[0]);
-  });
+    it("should select the highlighted option when pressing Enter", async () => {
+      const onSelected = jest.fn();
+      render(<Combobox options={FRUITS} onSelected={onSelected} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      await userEvent.keyboard("{arrowdown}");
+      await userEvent.keyboard("{enter}");
+      expect(onSelected).toHaveBeenCalledWith(FRUITS[0]);
+    });
 
-  it("should open the listbox when pressing ArrowDown", async () => {
-    render(<Combobox options={FRUITS} />);
-    screen.getByRole("combobox");
-    await userEvent.tab();
-    await userEvent.keyboard("{arrowdown}");
-    const listbox = screen.getByRole("listbox");
-    expect(listbox).toBeInTheDocument();
-  });
+    it("should open the listbox when pressing ArrowDown", async () => {
+      render(<Combobox options={FRUITS} />);
+      screen.getByRole("combobox");
+      await userEvent.tab();
+      await userEvent.keyboard("{arrowdown}");
+      const listbox = screen.getByRole("listbox");
+      expect(listbox).toBeInTheDocument();
+    });
 
-  it("should highlight the first option when pressing ArrowDown", async () => {
-    render(<Combobox options={FRUITS} />);
-    screen.getByRole("combobox");
-    await userEvent.tab();
-    await userEvent.keyboard("{arrowdown}");
-    const options = screen.getAllByRole("option");
-    expect(options[0]).toHaveAttribute("aria-selected", "true");
-  });
+    it("should highlight the first option when pressing ArrowDown", async () => {
+      render(<Combobox options={FRUITS} />);
+      screen.getByRole("combobox");
+      await userEvent.tab();
+      await userEvent.keyboard("{arrowdown}");
+      const options = screen.getAllByRole("option");
+      expect(options[0]).toHaveAttribute("aria-selected", "true");
+    });
 
-  it("should open the listbox when pressing ArrowUp", async () => {
-    render(<Combobox options={FRUITS} />);
-    screen.getByRole("combobox");
-    await userEvent.tab();
-    await userEvent.keyboard("{arrowup}");
-    const listbox = screen.getByRole("listbox");
-    expect(listbox).toBeInTheDocument();
-  });
+    it("should open the listbox when pressing ArrowUp", async () => {
+      render(<Combobox options={FRUITS} />);
+      screen.getByRole("combobox");
+      await userEvent.tab();
+      await userEvent.keyboard("{arrowup}");
+      const listbox = screen.getByRole("listbox");
+      expect(listbox).toBeInTheDocument();
+    });
 
-  it("should highlight the last option when pressing ArrowUp", async () => {
-    render(<Combobox options={FRUITS} />);
-    screen.getByRole("combobox");
-    await userEvent.tab();
-    await userEvent.keyboard("{arrowup}");
-    const options = screen.getAllByRole("option");
-    expect(options[options.length - 1]).toHaveAttribute(
-      "aria-selected",
-      "true",
-    );
-  });
+    it("should close the listbox when pressing Escape", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      await userEvent.keyboard("{escape}");
+      const listbox = screen.queryByRole("listbox");
+      expect(listbox).not.toBeInTheDocument();
+    });
 
-  it("should close the listbox when pressing Escape", async () => {
-    render(<Combobox options={FRUITS} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    await userEvent.keyboard("{escape}");
-    const listbox = screen.queryByRole("listbox");
-    expect(listbox).not.toBeInTheDocument();
-  });
+    it("should not call onSelected when pressing Escape", async () => {
+      const onSelected = jest.fn();
+      render(<Combobox options={FRUITS} onSelected={onSelected} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      await userEvent.keyboard("{escape}");
+      expect(onSelected).not.toHaveBeenCalled();
+    });
 
-  it("should not call onSelected when pressing Escape", async () => {
-    const onSelected = jest.fn();
-    render(<Combobox options={FRUITS} onSelected={onSelected} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    await userEvent.keyboard("{escape}");
-    expect(onSelected).not.toHaveBeenCalled();
+    it("should reset the highlighted index when the input value changes", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      await userEvent.keyboard("{arrowdown}");
+      await userEvent.type(input, "Ap");
+      const options = screen.getAllByRole("option");
+      expect(options[0]).toHaveAttribute("aria-selected", "true");
+    });
+
+    it("should select the first option when pressing Home", async () => {
+      const onSelected = jest.fn();
+      render(<Combobox options={FRUITS} onSelected={onSelected} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      await userEvent.keyboard("{arrowdown}{arrowdown}");
+      await userEvent.keyboard("{home}");
+      const options = screen.getAllByRole("option");
+      expect(options[0]).toHaveAttribute("aria-selected", "true");
+    });
+
+    it("should select the last option when pressing End", async () => {
+      const onSelected = jest.fn();
+      render(<Combobox options={FRUITS} onSelected={onSelected} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      await userEvent.keyboard("{end}");
+      const options = screen.getAllByRole("option");
+      expect(options[options.length - 1]).toHaveAttribute(
+        "aria-selected",
+        "true",
+      );
+    });
+
+    describe("Home/End with grouped options", () => {
+      it("should select the first option of first group when pressing Home", async () => {
+        render(<Combobox options={FRUITS_GROUPS} />);
+        const input = screen.getByRole("combobox");
+        await userEvent.click(input);
+        await userEvent.keyboard("{arrowdown}{arrowdown}");
+        await userEvent.keyboard("{home}");
+        const firstGroup = screen.getAllByRole("group")[0];
+        const firstOption = within(firstGroup).getAllByRole("option")[0];
+        expect(firstOption).toHaveAttribute("aria-selected", "true");
+      });
+
+      it("should select the last option of last group when pressing End", async () => {
+        render(<Combobox options={FRUITS_GROUPS} />);
+        const input = screen.getByRole("combobox");
+        await userEvent.click(input);
+        await userEvent.keyboard("{end}");
+        const lastGroup =
+          screen.getAllByRole("group")[FRUITS_GROUPS.length - 1];
+        const options = within(lastGroup).getAllByRole("option");
+        const lastOption = options[options.length - 1];
+        expect(lastOption).toHaveAttribute("aria-selected", "true");
+      });
+    });
+
+    it.todo("should select the first option when pressing Home");
+    it.todo("should select the last option when pressing End");
   });
 
-  it("should reset the highlighted index when the input value changes", async () => {
-    render(<Combobox options={FRUITS} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    await userEvent.keyboard("{arrowdown}");
-    await userEvent.type(input, "Ap");
-    const options = screen.getAllByRole("option");
-    expect(options[0]).not.toHaveAttribute("aria-selected", "true");
+  describe("filtering", () => {
+    it("should render all of the options in the listbox", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const options = screen.getAllByRole("option");
+      expect(options).toHaveLength(FRUITS.length);
+    });
+
+    it("should filter the options based on the input value", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.type(input, "Ap");
+      const options = screen.getAllByRole("option");
+      expect(options).toHaveLength(6);
+    });
+
+    it("should ignore case when filtering options", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.type(input, "AP");
+      const options = screen.getAllByRole("option");
+      expect(options).toHaveLength(6);
+    });
   });
 
   describe("classnames", () => {
@@ -235,6 +327,15 @@ describe("Combobox with string options", () => {
       const options = screen.getAllByRole("option");
       expect(options[0]).toHaveClass("mobius-combobox__option--is-highlighted");
     });
+
+    it("should support custom class names", async () => {
+      const customClassName = "my-class";
+      const { container } = render(
+        <Combobox options={FRUITS} className={customClassName} />,
+      );
+
+      expect(container.firstChild).toHaveClass(customClassName);
+    });
   });
 
   describe("ARIA", () => {
@@ -271,7 +372,7 @@ describe("Combobox with string options", () => {
       expect(input).toHaveAttribute("aria-expanded", "true");
     });
 
-    it("should set aria-selected to false for all options", async () => {
+    it("should set aria-selected to false for all options except first option", async () => {
       render(<Combobox options={FRUITS} />);
       const input = screen.getByRole("combobox");
       await userEvent.click(input);
@@ -286,17 +387,11 @@ describe("Combobox with string options", () => {
       const input = screen.getByRole("combobox");
       await userEvent.click(input);
       const options = screen.getAllByRole("option");
-      await userEvent.keyboard("{arrowdown}{arrowdown}");
-      expect(options[1]).toHaveAttribute("aria-selected", "true");
-    });
-
-    it("should set aria-activedescendant to undefined by default", () => {
-      render(<Combobox options={FRUITS} />);
-      const input = screen.getByRole("combobox");
-      expect(input).not.toHaveAttribute("aria-activedescendant");
+      await userEvent.keyboard("{arrowdown}");
+      expect(options[0]).toHaveAttribute("aria-selected", "true");
     });
 
-    it("should set aria-activedescendant based on the highlightedIndex", async () => {
+    it("should set aria-activedescendant based on the highlightedIndex and highlightedGroupIndex", async () => {
       render(<Combobox options={FRUITS} />);
       const input = screen.getByRole("combobox");
       await userEvent.tab();
@@ -311,22 +406,23 @@ describe("Combobox with string options", () => {
 });
 
 describe("Combobox with object options", () => {
+  // Basic rendering and setup
   it("should render without crashing", () => {
     render(<Combobox options={FRUITS_OBJECTS} />);
   });
 
-  it("should use the default value provided", () => {
-    render(<Combobox options={FRUITS_OBJECTS} defaultValue="apple" />);
-    const input = screen.getByRole("combobox") as HTMLInputElement;
-    expect(input.value).toBe("apple");
-  });
-
   it("should render a combobox", () => {
     render(<Combobox options={FRUITS_OBJECTS} />);
     const input = screen.getByRole("combobox");
     expect(input).toBeInTheDocument();
   });
 
+  it("should use the default value provided", () => {
+    render(<Combobox options={FRUITS_OBJECTS} defaultValue="apple" />);
+    const input = screen.getByRole("combobox") as HTMLInputElement;
+    expect(input.value).toBe("apple");
+  });
+
   it("should accept a ref and forward it to the input", () => {
     const ref = { current: null };
     render(<Combobox options={FRUITS_OBJECTS} ref={ref} />);
@@ -339,169 +435,220 @@ describe("Combobox with object options", () => {
     expect(listbox).not.toBeInTheDocument();
   });
 
-  it("should render a listbox when the input is focused", async () => {
-    render(<Combobox options={FRUITS_OBJECTS} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    const listbox = screen.getByRole("listbox");
-    expect(listbox).toBeInTheDocument();
-  });
+  describe("mouse interactions", () => {
+    it("should render a listbox when the input is focused", async () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const listbox = screen.getByRole("listbox");
+      expect(listbox).toBeInTheDocument();
+    });
 
-  it("should render all of the options in the listbox", async () => {
-    render(<Combobox options={FRUITS_OBJECTS} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    const options = screen.getAllByRole("option");
-    expect(options).toHaveLength(FRUITS_OBJECTS.length);
-  });
+    it("should call the onSelected callback when an option is selected", async () => {
+      const onSelected = jest.fn();
+      render(<Combobox options={FRUITS_OBJECTS} onSelected={onSelected} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const options = screen.getAllByRole("option");
+      await userEvent.click(options[0]);
+      expect(onSelected).toHaveBeenCalledWith(FRUITS_OBJECTS[0].value);
+    });
 
-  it("should call the onSelected callback when an option is selected", async () => {
-    const onSelected = jest.fn();
-    render(<Combobox options={FRUITS_OBJECTS} onSelected={onSelected} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    const options = screen.getAllByRole("option");
-    await userEvent.click(options[0]);
-    expect(onSelected).toHaveBeenCalledWith(FRUITS_OBJECTS[0].value);
-  });
+    it("should update the input value when an option is selected", async () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const options = screen.getAllByRole("option");
+      await userEvent.click(options[0]);
+      expect(input).toHaveValue(FRUITS_OBJECTS[0].value);
+    });
 
-  it("should update the input value when an option is selected", async () => {
-    render(<Combobox options={FRUITS_OBJECTS} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    const options = screen.getAllByRole("option");
-    await userEvent.click(options[0]);
-    expect(input).toHaveValue(FRUITS_OBJECTS[0].value);
-  });
+    it("should close the listbox when the input is blurred", async () => {
+      jest.useFakeTimers({
+        advanceTimers: true,
+        timerLimit: 1000,
+      });
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      await act(async () => {
+        await userEvent.tab();
+        jest.advanceTimersByTime(200);
+      });
+      const listbox = screen.queryByRole("listbox");
+      expect(listbox).not.toBeInTheDocument();
+    });
 
-  it("should close the listbox when the input is blurred", async () => {
-    render(<Combobox options={FRUITS_OBJECTS} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    await userEvent.tab();
-    const listbox = screen.queryByRole("listbox");
-    expect(listbox).not.toBeInTheDocument();
-  });
+    it("should close the listbox when an option is selected", async () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const options = screen.getAllByRole("option");
+      await userEvent.click(options[0]);
+      const listbox = screen.queryByRole("listbox");
+      expect(listbox).not.toBeInTheDocument();
+    });
 
-  it("should close the listbox when an option is selected", async () => {
-    render(<Combobox options={FRUITS_OBJECTS} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    const options = screen.getAllByRole("option");
-    await userEvent.click(options[0]);
-    const listbox = screen.queryByRole("listbox");
-    expect(listbox).not.toBeInTheDocument();
+    it("should close the listbox when clicking outside", async () => {
+      jest.useFakeTimers({
+        advanceTimers: true,
+        timerLimit: 1000,
+      });
+      render(
+        <div>
+          <Combobox options={FRUITS_OBJECTS} />
+          <button type="button">Outside</button>
+        </div>,
+      );
+      const input = screen.getByRole("combobox");
+      const outside = screen.getByRole("button");
+      await userEvent.click(input);
+      await userEvent.click(outside);
+      await act(async () => {
+        await userEvent.tab();
+        jest.advanceTimersByTime(200);
+      });
+      const listbox = screen.queryByRole("listbox");
+      expect(listbox).not.toBeInTheDocument();
+    });
   });
 
-  it("should filter the options based on the input value", async () => {
-    render(<Combobox options={FRUITS_OBJECTS} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.type(input, "Ap");
-    const options = screen.getAllByRole("option");
-    expect(options).toHaveLength(6);
-  });
+  describe("keyboard interactions", () => {
+    it("should select the top option when pressing Enter", async () => {
+      const onSelected = jest.fn();
+      render(<Combobox options={FRUITS_OBJECTS} onSelected={onSelected} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.type(input, "Ap");
+      await userEvent.type(input, "{enter}");
+      expect(onSelected).toHaveBeenCalledWith(FRUITS_OBJECTS[0].value);
+    });
 
-  it("should ignore case when filtering options", async () => {
-    render(<Combobox options={FRUITS_OBJECTS} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.type(input, "AP");
-    const options = screen.getAllByRole("option");
-    expect(options).toHaveLength(6);
-  });
+    it("should not select an option when pressing Enter with no options", async () => {
+      const onSelected = jest.fn();
+      render(<Combobox options={FRUITS_OBJECTS} onSelected={onSelected} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.type(input, "Zz");
+      await userEvent.type(input, "{enter}");
+      expect(onSelected).not.toHaveBeenCalled();
+    });
 
-  it("should select the top option when pressing Enter", async () => {
-    const onSelected = jest.fn();
-    render(<Combobox options={FRUITS_OBJECTS} onSelected={onSelected} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.type(input, "Ap");
-    await userEvent.type(input, "{enter}");
-    expect(onSelected).toHaveBeenCalledWith(FRUITS_OBJECTS[0].value);
-  });
+    it("should select the highlighted option when pressing Enter", async () => {
+      const onSelected = jest.fn();
+      render(<Combobox options={FRUITS_OBJECTS} onSelected={onSelected} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      await userEvent.keyboard("{arrowdown}");
+      await userEvent.keyboard("{enter}");
+      expect(onSelected).toHaveBeenCalledWith(FRUITS_OBJECTS[0].value);
+    });
 
-  it("should not select an option when pressing Enter with no options", async () => {
-    const onSelected = jest.fn();
-    render(<Combobox options={FRUITS_OBJECTS} onSelected={onSelected} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.type(input, "Zz");
-    await userEvent.type(input, "{enter}");
-    expect(onSelected).not.toHaveBeenCalled();
-  });
+    it("should open the listbox when pressing ArrowDown", async () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      screen.getByRole("combobox");
+      await userEvent.tab();
+      await userEvent.keyboard("{arrowdown}");
+      const listbox = screen.getByRole("listbox");
+      expect(listbox).toBeInTheDocument();
+    });
 
-  it("should select the highlighted option when pressing Enter", async () => {
-    const onSelected = jest.fn();
-    render(<Combobox options={FRUITS_OBJECTS} onSelected={onSelected} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    await userEvent.keyboard("{arrowdown}");
-    await userEvent.keyboard("{enter}");
-    expect(onSelected).toHaveBeenCalledWith(FRUITS_OBJECTS[0].value);
-  });
+    it("should highlight the second option when pressing ArrowDown", async () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      screen.getByRole("combobox");
+      await userEvent.tab();
+      await userEvent.keyboard("{arrowdown}");
+      const options = screen.getAllByRole("option");
+      expect(options[0]).toHaveAttribute("aria-selected", "true");
+    });
 
-  it("should open the listbox when pressing ArrowDown", async () => {
-    render(<Combobox options={FRUITS_OBJECTS} />);
-    screen.getByRole("combobox");
-    await userEvent.tab();
-    await userEvent.keyboard("{arrowdown}");
-    const listbox = screen.getByRole("listbox");
-    expect(listbox).toBeInTheDocument();
-  });
+    it("should open the listbox when pressing ArrowUp", async () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      screen.getByRole("combobox");
+      await userEvent.tab();
+      await userEvent.keyboard("{arrowup}");
+      const listbox = screen.getByRole("listbox");
+      expect(listbox).toBeInTheDocument();
+    });
 
-  it("should highlight the first option when pressing ArrowDown", async () => {
-    render(<Combobox options={FRUITS_OBJECTS} />);
-    screen.getByRole("combobox");
-    await userEvent.tab();
-    await userEvent.keyboard("{arrowdown}");
-    const options = screen.getAllByRole("option");
-    expect(options[0]).toHaveAttribute("aria-selected", "true");
-  });
+    it("should select the first option when pressing Home", async () => {
+      const onSelected = jest.fn();
+      render(<Combobox options={FRUITS} onSelected={onSelected} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      await userEvent.keyboard("{arrowdown}{arrowdown}");
+      await userEvent.keyboard("{home}");
+      const options = screen.getAllByRole("option");
+      expect(options[0]).toHaveAttribute("aria-selected", "true");
+    });
 
-  it("should open the listbox when pressing ArrowUp", async () => {
-    render(<Combobox options={FRUITS_OBJECTS} />);
-    screen.getByRole("combobox");
-    await userEvent.tab();
-    await userEvent.keyboard("{arrowup}");
-    const listbox = screen.getByRole("listbox");
-    expect(listbox).toBeInTheDocument();
-  });
+    it("should select the last option when pressing End", async () => {
+      const onSelected = jest.fn();
+      render(<Combobox options={FRUITS} onSelected={onSelected} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      await userEvent.keyboard("{end}");
+      const options = screen.getAllByRole("option");
+      expect(options[options.length - 1]).toHaveAttribute(
+        "aria-selected",
+        "true",
+      );
+    });
 
-  it("should highlight the last option when pressing ArrowUp", async () => {
-    render(<Combobox options={FRUITS_OBJECTS} />);
-    screen.getByRole("combobox");
-    await userEvent.tab();
-    await userEvent.keyboard("{arrowup}");
-    const options = screen.getAllByRole("option");
-    expect(options[options.length - 1]).toHaveAttribute(
-      "aria-selected",
-      "true",
-    );
-  });
+    it.todo("should select the first option when pressing Home");
+    it.todo("should select the last option when pressing End");
 
-  it("should close the listbox when pressing Escape", async () => {
-    render(<Combobox options={FRUITS_OBJECTS} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    await userEvent.keyboard("{escape}");
-    const listbox = screen.queryByRole("listbox");
-    expect(listbox).not.toBeInTheDocument();
-  });
+    it("should close the listbox when pressing Escape", async () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      await userEvent.keyboard("{escape}");
+      const listbox = screen.queryByRole("listbox");
+      expect(listbox).not.toBeInTheDocument();
+    });
 
-  it("should not call onSelected when pressing Escape", async () => {
-    const onSelected = jest.fn();
-    render(<Combobox options={FRUITS_OBJECTS} onSelected={onSelected} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    await userEvent.keyboard("{escape}");
-    expect(onSelected).not.toHaveBeenCalled();
+    it("should not call onSelected when pressing Escape", async () => {
+      const onSelected = jest.fn();
+      render(<Combobox options={FRUITS_OBJECTS} onSelected={onSelected} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      await userEvent.keyboard("{escape}");
+      expect(onSelected).not.toHaveBeenCalled();
+    });
+
+    it("should reset the highlighted index when the input value changes", async () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      await userEvent.keyboard("{arrowdown}");
+      await userEvent.type(input, "Ap");
+      const options = screen.getAllByRole("option");
+      expect(options[0]).toHaveAttribute("aria-selected", "true");
+    });
   });
 
-  it("should reset the highlighted index when the input value changes", async () => {
-    render(<Combobox options={FRUITS_OBJECTS} />);
-    const input = screen.getByRole("combobox");
-    await userEvent.click(input);
-    await userEvent.keyboard("{arrowdown}");
-    await userEvent.type(input, "Ap");
-    const options = screen.getAllByRole("option");
-    expect(options[0]).not.toHaveAttribute("aria-selected", "true");
+  describe("filtering", () => {
+    it("should render all of the options in the listbox", async () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const options = screen.getAllByRole("option");
+      expect(options).toHaveLength(FRUITS_OBJECTS.length);
+    });
+
+    it("should filter the options based on the input value", async () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.type(input, "Ap");
+      const options = screen.getAllByRole("option");
+      expect(options).toHaveLength(6);
+    });
+
+    it("should ignore case when filtering options", async () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.type(input, "AP");
+      const options = screen.getAllByRole("option");
+      expect(options).toHaveLength(6);
+    });
   });
 
   describe("ARIA", () => {
@@ -557,12 +704,6 @@ describe("Combobox with object options", () => {
       expect(options[1]).toHaveAttribute("aria-selected", "true");
     });
 
-    it("should set aria-activedescendant to undefined by default", () => {
-      render(<Combobox options={FRUITS_OBJECTS} />);
-      const input = screen.getByRole("combobox");
-      expect(input).not.toHaveAttribute("aria-activedescendant");
-    });
-
     it("should set aria-activedescendant based on the highlightedIndex", async () => {
       render(<Combobox options={FRUITS_OBJECTS} />);
       const input = screen.getByRole("combobox");
@@ -576,3 +717,81 @@ describe("Combobox with object options", () => {
     });
   });
 });
+
+describe("Combobox with grouped options", () => {
+  // Basic rendering and setup
+  it("should render without crashing", () => {
+    render(<Combobox options={FRUITS_GROUPS} />);
+  });
+
+  describe("rendering", () => {
+    it("should render a listbox when the input is focused", async () => {
+      render(<Combobox options={FRUITS_GROUPS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const listbox = screen.getByRole("listbox");
+      expect(listbox).toBeInTheDocument();
+    });
+
+    it("should render all of the groups in the listbox", async () => {
+      render(<Combobox options={FRUITS_GROUPS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const groups = screen.getAllByRole("group");
+      expect(groups).toHaveLength(FRUITS_GROUPS.length);
+    });
+
+    it("should render all of the options in each group", async () => {
+      render(<Combobox options={FRUITS_GROUPS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      FRUITS_GROUPS.forEach(group => {
+        const groupElement = screen.getByRole("group", { name: group.heading });
+        const options = within(groupElement).queryAllByRole("option");
+        expect(options).toHaveLength(group.options.length);
+      });
+    });
+  });
+
+  describe("filtering", () => {
+    it("should filter the options based on the input value", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.type(input, "Ap");
+      const options = screen.getAllByRole("option");
+      expect(options).toHaveLength(6);
+    });
+
+    it("should ignore case when filtering options", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.type(input, "AP");
+      const options = screen.getAllByRole("option");
+      expect(options).toHaveLength(6);
+    });
+  });
+
+  describe("classnames", () => {
+    it("should have the correct classnames for the groups", async () => {
+      render(<Combobox options={FRUITS_GROUPS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const groups = screen.getAllByRole("group");
+      groups.forEach(group => {
+        expect(group).toHaveClass("mobius-combobox__group");
+      });
+    });
+
+    it("should have the correct classnames for the group labels", async () => {
+      render(<Combobox options={FRUITS_GROUPS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const groupLabels = screen
+        .getAllByRole("group")
+        .map(group => group.firstChild);
+      groupLabels.forEach(label => {
+        expect(label).toHaveClass("mobius-combobox__group-label");
+      });
+    });
+  });
+});