test(select): add unit tests (#2109)

tests/Select.test.svelte

@@ -1,64 +0,0 @@
-<script lang="ts">
-  import {
-    Select,
-    SelectItem,
-    SelectItemGroup,
-    SelectSkeleton,
-  } from "carbon-components-svelte";
-</script>
-
-<Select labelText="Carbon theme" selected="g10">
-  <SelectItem value="white" text="White" class="" style="" />
-  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g90" text="Gray 90" />
-  <SelectItem value="g100" text="Gray 100" />
-</Select>
-
-<Select labelText="Carbon theme" selected={0}>
-  <SelectItem value={0} text="Select a theme" disabled hidden />
-  <SelectItemGroup label="Light theme">
-    <SelectItem value="white" text="White" />
-    <SelectItem value="g10" text="Gray 10" />
-  </SelectItemGroup>
-  <SelectItemGroup label="Dark theme">
-    <SelectItem value="g90" text="Gray 90" />
-    <SelectItem value="g100" text="Gray 100" />
-  </SelectItemGroup>
-</Select>
-
-<Select light labelText="Carbon theme" selected="g10">
-  <SelectItem value="white" text="White" />
-  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g90" text="Gray 90" />
-  <SelectItem value="g100" text="Gray 100" />
-</Select>
-
-<Select inline labelText="Carbon theme" selected="g10">
-  <SelectItem value="white" text="White" />
-  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g90" text="Gray 90" />
-  <SelectItem value="g100" text="Gray 100" />
-</Select>
-
-<Select size="xl" labelText="Carbon theme" selected="g10">
-  <SelectItem value="white" text="White" />
-  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g90" text="Gray 90" />
-  <SelectItem value="g100" text="Gray 100" />
-</Select>
-
-<Select size="sm" labelText="Carbon theme" selected="g10">
-  <SelectItem value="white" text="White" />
-  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g90" text="Gray 90" />
-  <SelectItem value="g100" text="Gray 100" />
-</Select>
-
-<Select disabled labelText="Carbon theme" selected="g10">
-  <SelectItem value="white" text="White" />
-  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g90" text="Gray 90" />
-  <SelectItem value="g100" text="Gray 100" />
-</Select>
-
-<SelectSkeleton />

tests/Select/Select.group.test.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import {
+    Select,
+    SelectItem,
+    SelectItemGroup,
+  } from "carbon-components-svelte";
+
+  export let selected: string | number | undefined = undefined;
+</script>
+
+<Select bind:selected data-testid="select-group">
+  <SelectItem value="default" text="Choose an option" disabled hidden />
+  <SelectItemGroup label="Category 1" data-testid="group-1">
+    <SelectItem value="option-1" text="Option 1" />
+    <SelectItem value="option-2" text="Option 2" />
+  </SelectItemGroup>
+  <SelectItemGroup label="Category 2" data-testid="group-2">
+    <SelectItem value="option-3" text="Option 3" />
+    <SelectItem value="option-4" text="Option 4" />
+  </SelectItemGroup>
+</Select>

tests/Select/Select.skeleton.test.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { SelectSkeleton } from "carbon-components-svelte";
+</script>
+
+<SelectSkeleton data-testid="select-skeleton" />

tests/Select/Select.test.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { Select, SelectItem } from "carbon-components-svelte";
+
+  export let selected: string | number | undefined = undefined;
+  export let disabled = false;
+  export let invalid = false;
+  export let invalidText = "";
+  export let warn = false;
+  export let warnText = "";
+  export let helperText = "";
+  export let hideLabel = false;
+  export let labelText = "Select label";
+  export let size: "sm" | "xl" | undefined = undefined;
+  export let inline = false;
+  export let light = false;
+</script>
+
+<Select
+  bind:selected
+  {disabled}
+  {invalid}
+  {invalidText}
+  {warn}
+  {warnText}
+  {helperText}
+  {hideLabel}
+  {labelText}
+  {size}
+  {inline}
+  {light}
+  data-testid="select"
+  on:change={() => console.log("change")}
+  on:input={() => console.log("input")}
+  on:update={(e) => console.log("update", e.detail)}
+>
+  <SelectItem value="option-1" text="Option 1" />
+  <SelectItem value="option-2" text="Option 2" />
+  <SelectItem value="option-3" text="Option 3" />
+</Select>

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");
+  });
+});