@getmicdrop/svelte-components 2.0.4 → 2.0.6

package/dist/components/Input/Select.spec.js

@@ -1,218 +1,218 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import Select from "./Select.svelte";
-
-const sampleItems = [
-  { name: "Option 1", value: "opt1" },
-  { name: "Option 2", value: "opt2" },
-  { name: "Option 3", value: "opt3" },
-];
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component } = render(Select, {
-    props: {
-      items: sampleItems,
-      ...args,
-    },
-  });
-  return { user, component };
-}
-
-describe("Select Component Tests", () => {
-  test("Renders select with label", () => {
-    setupTest({
-      label: "Test Label",
-      id: "test-select",
-    });
-    expect(screen.getByText("Test Label")).toBeInTheDocument();
-  });
-
-  test("Shows placeholder when no value selected", () => {
-    setupTest({
-      placeholder: "Select an option",
-    });
-    expect(screen.getByText("Select an option")).toBeInTheDocument();
-  });
-
-  test("Opens dropdown on click", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-    expect(screen.getByText("Option 1")).toBeInTheDocument();
-    expect(screen.getByText("Option 2")).toBeInTheDocument();
-    expect(screen.getByText("Option 3")).toBeInTheDocument();
-  });
-
-  test("Selects item on click", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    await user.click(screen.getByText("Option 2"));
-
-    expect(screen.getByText("Option 2")).toBeInTheDocument();
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Closes dropdown after selection", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    await user.click(screen.getByText("Option 1"));
-
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Shows selected value", () => {
-    setupTest({
-      value: "opt2",
-    });
-    expect(screen.getByText("Option 2")).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");
-    await user.click(trigger);
-    await user.click(screen.getByText("Option 3"));
-
-    expect(changeSpy).toHaveBeenCalled();
-    expect(changeSpy.mock.calls[0][0].detail).toEqual({
-      value: "opt3",
-      item: { name: "Option 3", value: "opt3" },
-    });
-  });
-
-  test("Shows required indicator when required", () => {
-    setupTest({
-      label: "Required Field",
-      required: true,
-    });
-    expect(screen.getByText("*")).toBeInTheDocument();
-  });
-
-  test("Displays error state", () => {
-    setupTest({
-      error: "This field is required",
-    });
-    expect(screen.getByText("This field is required")).toBeInTheDocument();
-  });
-
-  test("Disables select 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");
-
-    await user.click(trigger);
-    await user.keyboard("{ArrowDown}");
-    await user.keyboard("{ArrowDown}");
-    await user.keyboard("{Enter}");
-
-    // Second option should be selected (started at 0, moved down twice)
-    expect(screen.getByText("Option 2")).toBeInTheDocument();
-  });
-
-  test("Closes dropdown on Escape key", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-
-    await user.keyboard("{Escape}");
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Opens dropdown with Enter key", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    trigger.focus();
-    await user.keyboard("{Enter}");
-
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-  });
-
-  test("Opens dropdown with Space key", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    trigger.focus();
-    await user.keyboard(" ");
-
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-  });
-
-  test("Applies animate focus class by default", () => {
-    setupTest();
-    const trigger = screen.getByRole("button");
-    expect(trigger).toHaveClass("select-animate-focus");
-  });
-
-  test("Does not apply animate focus when disabled", () => {
-    setupTest({
-      animateFocus: false,
-    });
-    const trigger = screen.getByRole("button");
-    expect(trigger).not.toHaveClass("select-animate-focus");
-  });
-
-  test("Closes dropdown when clicking outside", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-
-    // Click outside by clicking on body
-    await user.click(document.body);
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Shows checkmark for selected option", async () => {
-    const { user } = setupTest({
-      value: "opt1",
-    });
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-
-    // The selected option should have a checkmark SVG
-    const options = screen.getAllByRole("option");
-    const selectedOption = options.find(opt => opt.getAttribute("aria-selected") === "true");
-    expect(selectedOption).toBeInTheDocument();
-    expect(selectedOption.querySelector("svg")).toBeInTheDocument();
-  });
-
-  test("Sets aria-expanded correctly", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
-
-    await user.click(trigger);
-    expect(trigger).toHaveAttribute("aria-expanded", "true");
-
-    await user.click(trigger);
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import Select from "./Select.svelte";
+
+const sampleItems = [
+  { name: "Option 1", value: "opt1" },
+  { name: "Option 2", value: "opt2" },
+  { name: "Option 3", value: "opt3" },
+];
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component } = render(Select, {
+    props: {
+      items: sampleItems,
+      ...args,
+    },
+  });
+  return { user, component };
+}
+
+describe("Select Component Tests", () => {
+  test("Renders select with label", () => {
+    setupTest({
+      label: "Test Label",
+      id: "test-select",
+    });
+    expect(screen.getByText("Test Label")).toBeInTheDocument();
+  });
+
+  test("Shows placeholder when no value selected", () => {
+    setupTest({
+      placeholder: "Select an option",
+    });
+    expect(screen.getByText("Select an option")).toBeInTheDocument();
+  });
+
+  test("Opens dropdown on click", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+    expect(screen.getByText("Option 1")).toBeInTheDocument();
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
+    expect(screen.getByText("Option 3")).toBeInTheDocument();
+  });
+
+  test("Selects item on click", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await user.click(screen.getByText("Option 2"));
+
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Closes dropdown after selection", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await user.click(screen.getByText("Option 1"));
+
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Shows selected value", () => {
+    setupTest({
+      value: "opt2",
+    });
+    expect(screen.getByText("Option 2")).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");
+    await user.click(trigger);
+    await user.click(screen.getByText("Option 3"));
+
+    expect(changeSpy).toHaveBeenCalled();
+    expect(changeSpy.mock.calls[0][0].detail).toEqual({
+      value: "opt3",
+      item: { name: "Option 3", value: "opt3" },
+    });
+  });
+
+  test("Shows required indicator when required", () => {
+    setupTest({
+      label: "Required Field",
+      required: true,
+    });
+    expect(screen.getByText("*")).toBeInTheDocument();
+  });
+
+  test("Displays error state", () => {
+    setupTest({
+      error: "This field is required",
+    });
+    expect(screen.getByText("This field is required")).toBeInTheDocument();
+  });
+
+  test("Disables select 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");
+
+    await user.click(trigger);
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{Enter}");
+
+    // Second option should be selected (started at 0, moved down twice)
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
+  });
+
+  test("Closes dropdown on Escape key", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    await user.keyboard("{Escape}");
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Opens dropdown with Enter key", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    trigger.focus();
+    await user.keyboard("{Enter}");
+
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  test("Opens dropdown with Space key", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    trigger.focus();
+    await user.keyboard(" ");
+
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  test("Applies animate focus class by default", () => {
+    setupTest();
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("select-animate-focus");
+  });
+
+  test("Does not apply animate focus when disabled", () => {
+    setupTest({
+      animateFocus: false,
+    });
+    const trigger = screen.getByRole("button");
+    expect(trigger).not.toHaveClass("select-animate-focus");
+  });
+
+  test("Closes dropdown when clicking outside", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    // Click outside by clicking on body
+    await user.click(document.body);
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Shows checkmark for selected option", async () => {
+    const { user } = setupTest({
+      value: "opt1",
+    });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    // The selected option should have a checkmark SVG
+    const options = screen.getAllByRole("option");
+    const selectedOption = options.find(opt => opt.getAttribute("aria-selected") === "true");
+    expect(selectedOption).toBeInTheDocument();
+    expect(selectedOption.querySelector("svg")).toBeInTheDocument();
+  });
+
+  test("Sets aria-expanded correctly", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+});