@simplybusiness/mobius 5.4.0 → 5.5.0

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

@@ -0,0 +1,578 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Combobox } from "./Combobox";
+import { FRUITS, FRUITS_OBJECTS } from "./fixtures";
+
+describe("Combobox with string options", () => {
+  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 accept a ref and forward it to the input", () => {
+    const ref = { current: null };
+    render(<Combobox options={FRUITS} ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+
+  it("should not render a listbox by default", () => {
+    render(<Combobox options={FRUITS} />);
+    const listbox = screen.queryByRole("listbox");
+    expect(listbox).not.toBeInTheDocument();
+  });
+
+  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 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 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 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 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 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 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 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 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 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 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]).not.toHaveAttribute("aria-selected", "true");
+  });
+
+  describe("classnames", () => {
+    it("should have the correct classnames for the combobox", () => {
+      const { container } = render(<Combobox options={FRUITS} />);
+      expect(container.firstChild).toHaveClass("mobius mobius-combobox");
+    });
+
+    it("should have the correct classnames for the input", () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      expect(input).toHaveClass("mobius-combobox__input");
+    });
+
+    it("should have the correct classnames for the listbox", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const listbox = screen.getByRole("listbox");
+      expect(listbox).toHaveClass("mobius-combobox__list");
+    });
+
+    it("should have the correct classnames for the options", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const options = screen.getAllByRole("option");
+      options.forEach(option => {
+        expect(option).toHaveClass("mobius-combobox__option");
+      });
+    });
+
+    it("should apply the highlighted class to the highlighted option", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      await userEvent.keyboard("{arrowdown}");
+      const options = screen.getAllByRole("option");
+      expect(options[0]).toHaveClass("mobius-combobox__option--is-highlighted");
+    });
+  });
+
+  describe("ARIA", () => {
+    it("should set aria-autocomplete to list", () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      expect(input).toHaveAttribute("aria-autocomplete", "list");
+    });
+
+    it("should set aria-haspopup to listbox", () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      expect(input).toHaveAttribute("aria-haspopup", "listbox");
+    });
+
+    it("should set aria-controls to the listbox id", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const listbox = screen.getByRole("listbox");
+      expect(input).toHaveAttribute("aria-controls", listbox.id);
+    });
+
+    it("should set aria-expanded to false by default", () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      expect(input).toHaveAttribute("aria-expanded", "false");
+    });
+
+    it("should set aria-expanded to true when the listbox is open", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      expect(input).toHaveAttribute("aria-expanded", "true");
+    });
+
+    it("should set aria-selected to false for all options", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const options = screen.getAllByRole("option");
+      options.forEach(option => {
+        expect(option).toHaveAttribute("aria-selected", "false");
+      });
+    });
+
+    it("should set aria-selected to true for the highlighted option", async () => {
+      render(<Combobox options={FRUITS} />);
+      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");
+    });
+
+    it("should set aria-activedescendant based on the highlightedIndex", async () => {
+      render(<Combobox options={FRUITS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.tab();
+      const options = screen.getAllByRole("option");
+      await userEvent.keyboard("{arrowdown}");
+      expect(input).toHaveAttribute(
+        "aria-activedescendant",
+        `${options[0].id}`,
+      );
+    });
+  });
+});
+
+describe("Combobox with object options", () => {
+  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 accept a ref and forward it to the input", () => {
+    const ref = { current: null };
+    render(<Combobox options={FRUITS_OBJECTS} ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+
+  it("should not render a listbox by default", () => {
+    render(<Combobox options={FRUITS_OBJECTS} />);
+    const listbox = screen.queryByRole("listbox");
+    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();
+  });
+
+  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 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 () => {
+    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 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);
+  });
+
+  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 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 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 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 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 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 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("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 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("ARIA", () => {
+    it("should set aria-autocomplete to list", () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      const input = screen.getByRole("combobox");
+      expect(input).toHaveAttribute("aria-autocomplete", "list");
+    });
+
+    it("should set aria-haspopup to listbox", () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      const input = screen.getByRole("combobox");
+      expect(input).toHaveAttribute("aria-haspopup", "listbox");
+    });
+
+    it("should set aria-controls to the listbox id", async () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const listbox = screen.getByRole("listbox");
+      expect(input).toHaveAttribute("aria-controls", listbox.id);
+    });
+
+    it("should set aria-expanded to false by default", () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      const input = screen.getByRole("combobox");
+      expect(input).toHaveAttribute("aria-expanded", "false");
+    });
+
+    it("should set aria-expanded to true when the listbox is open", async () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      expect(input).toHaveAttribute("aria-expanded", "true");
+    });
+
+    it("should set aria-selected to false for all options", async () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      const options = screen.getAllByRole("option");
+      options.forEach(option => {
+        expect(option).toHaveAttribute("aria-selected", "false");
+      });
+    });
+
+    it("should set aria-selected to true for the highlighted option", async () => {
+      render(<Combobox options={FRUITS_OBJECTS} />);
+      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_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");
+      await userEvent.tab();
+      const options = screen.getAllByRole("option");
+      await userEvent.keyboard("{arrowdown}");
+      expect(input).toHaveAttribute(
+        "aria-activedescendant",
+        `${options[0].id}`,
+      );
+    });
+  });
+});