diff --git a/tests/Select.test.svelte b/tests/Select.test.svelte deleted file mode 100644 index 181c7643..00000000 --- a/tests/Select.test.svelte +++ /dev/null @@ -1,64 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/tests/Select/Select.group.test.svelte b/tests/Select/Select.group.test.svelte new file mode 100644 index 00000000..f9bcab0a --- /dev/null +++ b/tests/Select/Select.group.test.svelte @@ -0,0 +1,21 @@ + + + diff --git a/tests/Select/Select.skeleton.test.svelte b/tests/Select/Select.skeleton.test.svelte new file mode 100644 index 00000000..8020f35a --- /dev/null +++ b/tests/Select/Select.skeleton.test.svelte @@ -0,0 +1,5 @@ + + + diff --git a/tests/Select/Select.test.svelte b/tests/Select/Select.test.svelte new file mode 100644 index 00000000..4af1594d --- /dev/null +++ b/tests/Select/Select.test.svelte @@ -0,0 +1,39 @@ + + + diff --git a/tests/Select/Select.test.ts b/tests/Select/Select.test.ts new file mode 100644 index 00000000..5e442323 --- /dev/null +++ b/tests/Select/Select.test.ts @@ -0,0 +1,241 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import Select from "./Select.test.svelte"; +import SelectGroup from "./Select.group.test.svelte"; +import SelectSkeleton from "./Select.skeleton.test.svelte"; + +describe("Select", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("renders with default props", () => { + render(Select); + + const select = screen.getByTestId("select"); + expect(select).toBeInTheDocument(); + + const label = select.querySelector("label"); + expect(label).toHaveTextContent("Select label"); + expect(label).not.toHaveClass("bx--visually-hidden"); + + const selectElement = select.querySelector("select") as HTMLSelectElement; + expect(selectElement).not.toBeDisabled(); + expect(selectElement).not.toHaveAttribute("aria-invalid"); + + const options = selectElement.querySelectorAll("option"); + expect(options).toHaveLength(3); + expect(options[0]).toHaveValue("option-1"); + expect(options[0]).toHaveTextContent("Option 1"); + }); + + it("renders with selected value", () => { + render(Select, { selected: "option-2" }); + + const selectElement = screen + .getByTestId("select") + .querySelector("select") as HTMLSelectElement; + expect(selectElement).toHaveValue("option-2"); + }); + + it("emits events", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Select); + + const selectElement = screen + .getByTestId("select") + .querySelector("select") as HTMLSelectElement; + await user.selectOptions(selectElement, "option-2"); + + expect(consoleLog).toHaveBeenCalledWith("change"); + expect(consoleLog).toHaveBeenCalledWith("input"); + expect(consoleLog).toHaveBeenCalledWith("update", "option-2"); + expect(consoleLog).toHaveBeenCalledTimes(3); + }); + + it("renders default size", () => { + render(Select); + const selectElement = screen + .getByTestId("select") + .querySelector("select") as HTMLSelectElement; + expect(selectElement).not.toHaveClass("bx--select-input--sm"); + expect(selectElement).not.toHaveClass("bx--select-input--xl"); + }); + + it("renders small size variant", () => { + render(Select, { size: "sm" }); + const selectElement = screen + .getByTestId("select") + .querySelector("select") as HTMLSelectElement; + expect(selectElement).toHaveClass("bx--select-input--sm"); + expect(selectElement).not.toHaveClass("bx--select-input--xl"); + }); + + it("renders extra large size variant", () => { + render(Select, { size: "xl" }); + const selectElement = screen + .getByTestId("select") + .querySelector("select") as HTMLSelectElement; + expect(selectElement).not.toHaveClass("bx--select-input--sm"); + expect(selectElement).toHaveClass("bx--select-input--xl"); + }); + + it("renders default variant", () => { + render(Select); + const selectWrapper = screen + .getByTestId("select") + .querySelector(".bx--select") as HTMLElement; + expect(selectWrapper).not.toHaveClass("bx--select--inline"); + }); + + it("renders inline variant", () => { + render(Select, { inline: true }); + const selectWrapper = screen + .getByTestId("select") + .querySelector(".bx--select") as HTMLElement; + expect(selectWrapper).toHaveClass("bx--select--inline"); + }); + + it("renders default theme", () => { + render(Select); + const selectWrapper = screen + .getByTestId("select") + .querySelector(".bx--select") as HTMLElement; + expect(selectWrapper).not.toHaveClass("bx--select--light"); + }); + + it("renders light theme", () => { + render(Select, { light: true }); + const selectWrapper = screen + .getByTestId("select") + .querySelector(".bx--select") as HTMLElement; + expect(selectWrapper).toHaveClass("bx--select--light"); + }); + + it("renders enabled by default", () => { + render(Select); + const selectElement = screen + .getByTestId("select") + .querySelector("select") as HTMLSelectElement; + expect(selectElement).not.toBeDisabled(); + }); + + it("renders disabled state", () => { + render(Select, { disabled: true }); + const selectElement = screen + .getByTestId("select") + .querySelector("select") as HTMLSelectElement; + expect(selectElement).toBeDisabled(); + }); + + it("renders valid by default", () => { + render(Select); + const wrapper = screen.getByTestId("select"); + const selectElement = wrapper.querySelector("select") as HTMLSelectElement; + const selectWrapper = wrapper.querySelector(".bx--select") as HTMLElement; + + expect(selectWrapper).not.toHaveClass("bx--select--invalid"); + expect(selectElement).not.toHaveAttribute("aria-invalid"); + expect( + wrapper.querySelector(".bx--form-requirement"), + ).not.toBeInTheDocument(); + }); + + it("renders invalid state", () => { + render(Select, { + invalid: true, + invalidText: "Invalid selection", + }); + + const wrapper = screen.getByTestId("select"); + const selectElement = wrapper.querySelector("select") as HTMLSelectElement; + const selectWrapper = wrapper.querySelector(".bx--select") as HTMLElement; + + expect(selectWrapper).toHaveClass("bx--select--invalid"); + expect(selectElement).toHaveAttribute("aria-invalid", "true"); + expect(wrapper.querySelector(".bx--form-requirement")).toHaveTextContent( + "Invalid selection", + ); + }); + + it("renders without warning by default", () => { + render(Select); + const wrapper = screen.getByTestId("select"); + const selectWrapper = wrapper.querySelector(".bx--select") as HTMLElement; + + expect(selectWrapper).not.toHaveClass("bx--select--warning"); + expect( + wrapper.querySelector(".bx--form-requirement"), + ).not.toBeInTheDocument(); + }); + + it("renders warning state", () => { + render(Select, { + warn: true, + warnText: "Warning message", + }); + + const wrapper = screen.getByTestId("select"); + const selectWrapper = wrapper.querySelector(".bx--select") as HTMLElement; + expect(selectWrapper).toHaveClass("bx--select--warning"); + expect(wrapper.querySelector(".bx--form-requirement")).toHaveTextContent( + "Warning message", + ); + }); + + it("renders without helper text by default", () => { + render(Select); + expect( + screen.getByTestId("select").querySelector(".bx--form__helper-text"), + ).not.toBeInTheDocument(); + }); + + it("renders helper text when provided", () => { + render(Select, { helperText: "Helper text" }); + const helperElement = screen + .getByTestId("select") + .querySelector(".bx--form__helper-text") as HTMLElement; + expect(helperElement).toHaveTextContent("Helper text"); + }); + + it("renders visible label by default", () => { + render(Select); + const label = screen + .getByTestId("select") + .querySelector("label") as HTMLElement; + expect(label).not.toHaveClass("bx--visually-hidden"); + }); + + it("renders with hidden label", () => { + render(Select, { hideLabel: true }); + const label = screen + .getByTestId("select") + .querySelector("label") as HTMLElement; + expect(label).toHaveClass("bx--visually-hidden"); + }); + + it("renders with SelectItemGroup", () => { + render(SelectGroup); + + const select = screen.getByTestId("select-group"); + const selectElement = select.querySelector("select") as HTMLSelectElement; + const optgroups = selectElement.querySelectorAll("optgroup"); + + expect(optgroups).toHaveLength(2); + expect(optgroups[0]).toHaveAttribute("label", "Category 1"); + expect(optgroups[1]).toHaveAttribute("label", "Category 2"); + + const options = selectElement.querySelectorAll("option"); + expect(options).toHaveLength(5); + expect(options[0]).toHaveAttribute("disabled"); + expect(options[0]).toHaveAttribute("hidden"); + }); + + it("renders skeleton state", () => { + render(SelectSkeleton); + + const skeleton = screen.getByTestId("select-skeleton"); + expect(skeleton).toBeInTheDocument(); + expect(skeleton.children[0]).toHaveClass("bx--skeleton"); + }); +});