@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/recipes/inputs/MultiSelect.spec.js

@@ -1,257 +1,258 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import MultiSelect from "./MultiSelect.svelte";
-
-const sampleItems = [
-  { name: "Option 1", value: "opt1" },
-  { name: "Option 2", value: "opt2" },
-  { name: "Option 3", value: "opt3" },
-  { name: "Option 4", value: "opt4" },
-];
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component } = render(MultiSelect, {
-    props: {
-      items: sampleItems,
-      ...args,
-    },
-  });
-  return { user, component };
-}
-
-describe("MultiSelect Component Tests", () => {
-  test("Renders multiselect with label", () => {
-    setupTest({
-      label: "Test Label",
-      id: "test-multiselect",
-    });
-    expect(screen.getByText("Test Label")).toBeInTheDocument();
-  });
-
-  test("Shows placeholder when no value selected", () => {
-    setupTest({
-      placeholder: "Select options",
-    });
-    expect(screen.getByText("Select options")).toBeInTheDocument();
-  });
-
-  test("Opens dropdown on click", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button", { name: /select options/i });
-
-    await user.click(trigger);
-
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-    expect(screen.getByText("Option 1")).toBeInTheDocument();
-    expect(screen.getByText("Option 2")).toBeInTheDocument();
-  });
-
-  test("Selects multiple items", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button", { name: /select options/i });
-
-    await user.click(trigger);
-    // Click on options in dropdown
-    const options = screen.getAllByRole("option");
-    await user.click(options[0]); // Option 1
-    await user.click(options[2]); // Option 3
-
-    // Both tags should be visible (may have duplicates due to dropdown still open)
-    expect(screen.getAllByText("Option 1").length).toBeGreaterThanOrEqual(1);
-    expect(screen.getAllByText("Option 3").length).toBeGreaterThanOrEqual(1);
-  });
-
-  test("Dropdown stays open after selection", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button", { name: /select options/i });
-
-    await user.click(trigger);
-    await user.click(screen.getByText("Option 1"));
-
-    // Dropdown should still be open for multi-select
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-  });
-
-  test("Shows selected values as tags", () => {
-    setupTest({
-      value: ["opt1", "opt2"],
-    });
-    expect(screen.getByText("Option 1")).toBeInTheDocument();
-    expect(screen.getByText("Option 2")).toBeInTheDocument();
-  });
-
-  test("Removes item when clicking tag remove button", async () => {
-    const { user } = setupTest({
-      value: ["opt1", "opt2"],
-    });
-
-    // Find the remove button for Option 1
-    const removeButtons = screen.getAllByRole("button", { name: /remove/i });
-    await user.click(removeButtons[0]);
-
-    // Option 1 should be removed, Option 2 should remain
-    expect(screen.queryByText("Option 1")).not.toBeInTheDocument();
-    expect(screen.getByText("Option 2")).toBeInTheDocument();
-  });
-
-  test("Clears all selections when clicking clear button", async () => {
-    const { user } = setupTest({
-      value: ["opt1", "opt2", "opt3"],
-    });
-
-    const clearButton = screen.getByRole("button", { name: /clear all/i });
-    await user.click(clearButton);
-
-    expect(screen.getByText("Select options")).toBeInTheDocument();
-    expect(screen.queryByText("Option 1")).not.toBeInTheDocument();
-  });
-
-  test("Hides clear button when hideClear is true", () => {
-    setupTest({
-      value: ["opt1"],
-      hideClear: true,
-    });
-    expect(screen.queryByRole("button", { name: /clear all/i })).not.toBeInTheDocument();
-  });
-
-  test("Dispatches change event on selection", async () => {
-    const { user, component } = setupTest();
-    const changeSpy = vi.fn();
-    component.$on("change", changeSpy);
-
-    const trigger = screen.getByRole("button", { name: /select options/i });
-    await user.click(trigger);
-    await user.click(screen.getByText("Option 2"));
-
-    expect(changeSpy).toHaveBeenCalled();
-    expect(changeSpy.mock.calls[0][0].detail.value).toContain("opt2");
-  });
-
-  test("Shows required indicator when required", () => {
-    setupTest({
-      label: "Required Field",
-      required: true,
-    });
-    expect(screen.getByText("*")).toBeInTheDocument();
-  });
-
-  test("Displays error state", () => {
-    setupTest({
-      error: "Please select at least one option",
-    });
-    expect(screen.getByText("Please select at least one option")).toBeInTheDocument();
-  });
-
-  test("Disables multiselect when disabled prop is true", async () => {
-    const { user } = setupTest({
-      disabled: true,
-    });
-    const trigger = screen.getByRole("button");
-
-    expect(trigger).toBeDisabled();
-    await user.click(trigger);
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Navigates options with keyboard", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button", { name: /select options/i });
-
-    await user.click(trigger);
-    await user.keyboard("{ArrowDown}");
-    await user.keyboard("{Enter}");
-
-    // First option should be selected
-    expect(screen.getByText("Option 1")).toBeInTheDocument();
-  });
-
-  test("Closes dropdown on Escape key", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button", { name: /select options/i });
-
-    await user.click(trigger);
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-
-    await user.keyboard("{Escape}");
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Toggles item off when clicking selected item", async () => {
-    const { user } = setupTest({
-      value: ["opt1"],
-    });
-    // Get the main trigger button (not remove buttons)
-    const triggers = screen.getAllByRole("button");
-    const trigger = triggers.find(b => b.getAttribute("aria-haspopup") === "listbox");
-
-    await user.click(trigger);
-
-    // Click Option 1 to deselect it
-    const option1 = screen.getByRole("option", { name: /option 1/i });
-    await user.click(option1);
-
-    // Should show placeholder now
-    expect(screen.getByText("Select options")).toBeInTheDocument();
-  });
-
-  test("Applies animate focus class by default", () => {
-    setupTest();
-    const trigger = screen.getByRole("button");
-    expect(trigger).toHaveClass("multiselect-animate-focus");
-  });
-
-  test("Does not apply animate focus when disabled", () => {
-    setupTest({
-      animateFocus: false,
-    });
-    const trigger = screen.getByRole("button");
-    expect(trigger).not.toHaveClass("multiselect-animate-focus");
-  });
-
-  test("Shows checkbox for each option", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button", { name: /select options/i });
-
-    await user.click(trigger);
-
-    // Each option should have a checkbox element
-    const options = screen.getAllByRole("option");
-    options.forEach(option => {
-      expect(option.querySelector(".multiselect-checkbox")).toBeInTheDocument();
-    });
-  });
-
-  test("Shows checked checkbox for selected items", async () => {
-    const { user } = setupTest({
-      value: ["opt1"],
-    });
-    // Get the main trigger button (not remove buttons)
-    const triggers = screen.getAllByRole("button");
-    const trigger = triggers.find(b => b.getAttribute("aria-haspopup") === "listbox");
-
-    await user.click(trigger);
-
-    const selectedOption = screen.getByRole("option", { name: /option 1/i });
-    expect(selectedOption.querySelector(".multiselect-checkbox-checked")).toBeInTheDocument();
-  });
-
-  test("Sets aria-multiselectable on listbox", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button", { name: /select options/i });
-
-    await user.click(trigger);
-
-    const listbox = screen.getByRole("listbox");
-    expect(listbox).toHaveAttribute("aria-multiselectable", "true");
-  });
-
-  test("Initializes empty value as array", () => {
-    setupTest({
-      value: null,
-    });
-    // Should not crash and show placeholder
-    expect(screen.getByText("Select options")).toBeInTheDocument();
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import MultiSelect from "./MultiSelect.svelte";
+
+const sampleItems = [
+  { name: "Option 1", value: "opt1" },
+  { name: "Option 2", value: "opt2" },
+  { name: "Option 3", value: "opt3" },
+  { name: "Option 4", value: "opt4" },
+];
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component } = render(MultiSelect, {
+    props: {
+      items: sampleItems,
+      ...args,
+    },
+  });
+  return { user, component };
+}
+
+describe("MultiSelect Component Tests", () => {
+  test("Renders multiselect with label", () => {
+    setupTest({
+      label: "Test Label",
+      id: "test-multiselect",
+    });
+    expect(screen.getByText("Test Label")).toBeInTheDocument();
+  });
+
+  test("Shows placeholder when no value selected", () => {
+    setupTest({
+      placeholder: "Select options",
+    });
+    expect(screen.getByText("Select options")).toBeInTheDocument();
+  });
+
+  test("Opens dropdown on click", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button", { name: /select options/i });
+
+    await user.click(trigger);
+
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+    expect(screen.getByText("Option 1")).toBeInTheDocument();
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
+  });
+
+  test("Selects multiple items", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button", { name: /select options/i });
+
+    await user.click(trigger);
+    // Click on options in dropdown
+    const options = screen.getAllByRole("option");
+    await user.click(options[0]); // Option 1
+    await user.click(options[2]); // Option 3
+
+    // Both tags should be visible (may have duplicates due to dropdown still open)
+    expect(screen.getAllByText("Option 1").length).toBeGreaterThanOrEqual(1);
+    expect(screen.getAllByText("Option 3").length).toBeGreaterThanOrEqual(1);
+  });
+
+  test("Dropdown stays open after selection", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button", { name: /select options/i });
+
+    await user.click(trigger);
+    await user.click(screen.getByText("Option 1"));
+
+    // Dropdown should still be open for multi-select
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  test("Shows selected values as tags", () => {
+    setupTest({
+      value: ["opt1", "opt2"],
+    });
+    expect(screen.getByText("Option 1")).toBeInTheDocument();
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
+  });
+
+  test("Removes item when clicking tag remove button", async () => {
+    const { user } = setupTest({
+      value: ["opt1", "opt2"],
+    });
+
+    // Find the remove button for Option 1
+    const removeButtons = screen.getAllByRole("button", { name: /remove/i });
+    await user.click(removeButtons[0]);
+
+    // Option 1 should be removed, Option 2 should remain
+    expect(screen.queryByText("Option 1")).not.toBeInTheDocument();
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
+  });
+
+  test("Clears all selections when clicking clear button", async () => {
+    const { user } = setupTest({
+      value: ["opt1", "opt2", "opt3"],
+    });
+
+    const clearButton = screen.getByRole("button", { name: /clear all/i });
+    await user.click(clearButton);
+
+    expect(screen.getByText("Select options")).toBeInTheDocument();
+    expect(screen.queryByText("Option 1")).not.toBeInTheDocument();
+  });
+
+  test("Hides clear button when hideClear is true", () => {
+    setupTest({
+      value: ["opt1"],
+      hideClear: true,
+    });
+    expect(screen.queryByRole("button", { name: /clear all/i })).not.toBeInTheDocument();
+  });
+
+  test("Dispatches change event on selection", async () => {
+    const changeSpy = vi.fn();
+    const { user } = setupTest({
+      onchange: changeSpy,
+    });
+
+    const trigger = screen.getByRole("button", { name: /select options/i });
+    await user.click(trigger);
+    await user.click(screen.getByText("Option 2"));
+
+    expect(changeSpy).toHaveBeenCalled();
+    expect(changeSpy.mock.calls[0][0].value).toContain("opt2");
+  });
+
+  test("Shows required indicator when required", () => {
+    setupTest({
+      label: "Required Field",
+      required: true,
+    });
+    expect(screen.getByText("*")).toBeInTheDocument();
+  });
+
+  test("Displays error state", () => {
+    setupTest({
+      error: "Please select at least one option",
+    });
+    expect(screen.getByText("Please select at least one option")).toBeInTheDocument();
+  });
+
+  test("Disables multiselect when disabled prop is true", async () => {
+    const { user } = setupTest({
+      disabled: true,
+    });
+    const trigger = screen.getByRole("button");
+
+    expect(trigger).toBeDisabled();
+    await user.click(trigger);
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Navigates options with keyboard", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button", { name: /select options/i });
+
+    await user.click(trigger);
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{Enter}");
+
+    // First option should be selected
+    expect(screen.getByText("Option 1")).toBeInTheDocument();
+  });
+
+  test("Closes dropdown on Escape key", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button", { name: /select options/i });
+
+    await user.click(trigger);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    await user.keyboard("{Escape}");
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Toggles item off when clicking selected item", async () => {
+    const { user } = setupTest({
+      value: ["opt1"],
+    });
+    // Get the main trigger button (not remove buttons)
+    const triggers = screen.getAllByRole("button");
+    const trigger = triggers.find(b => b.getAttribute("aria-haspopup") === "listbox");
+
+    await user.click(trigger);
+
+    // Click Option 1 to deselect it
+    const option1 = screen.getByRole("option", { name: /option 1/i });
+    await user.click(option1);
+
+    // Should show placeholder now
+    expect(screen.getByText("Select options")).toBeInTheDocument();
+  });
+
+  test("Applies animate focus class by default", () => {
+    setupTest();
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("multiselect-animate-focus");
+  });
+
+  test("Does not apply animate focus when disabled", () => {
+    setupTest({
+      animateFocus: false,
+    });
+    const trigger = screen.getByRole("button");
+    expect(trigger).not.toHaveClass("multiselect-animate-focus");
+  });
+
+  test("Shows checkbox for each option", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button", { name: /select options/i });
+
+    await user.click(trigger);
+
+    // Each option should have a checkbox element
+    const options = screen.getAllByRole("option");
+    options.forEach(option => {
+      expect(option.querySelector(".multiselect-checkbox")).toBeInTheDocument();
+    });
+  });
+
+  test("Shows checked checkbox for selected items", async () => {
+    const { user } = setupTest({
+      value: ["opt1"],
+    });
+    // Get the main trigger button (not remove buttons)
+    const triggers = screen.getAllByRole("button");
+    const trigger = triggers.find(b => b.getAttribute("aria-haspopup") === "listbox");
+
+    await user.click(trigger);
+
+    const selectedOption = screen.getByRole("option", { name: /option 1/i });
+    expect(selectedOption.querySelector(".multiselect-checkbox-checked")).toBeInTheDocument();
+  });
+
+  test("Sets aria-multiselectable on listbox", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button", { name: /select options/i });
+
+    await user.click(trigger);
+
+    const listbox = screen.getByRole("listbox");
+    expect(listbox).toHaveAttribute("aria-multiselectable", "true");
+  });
+
+  test("Initializes empty value as array", () => {
+    setupTest({
+      value: null,
+    });
+    // Should not crash and show placeholder
+    expect(screen.getByText("Select options")).toBeInTheDocument();
+  });
+});