test(slider): add unit tests

tests/Slider.test.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-  import { Slider, SliderSkeleton } from "carbon-components-svelte";
-</script>
-
-<Slider />
-
-<Slider
-  labelText="Runtime memory (MB)"
-  min={10}
-  max={990}
-  maxLabel="990 MB"
-  value={100}
-  fullWidth
-  on:change={(e) => {
-    console.log(e.detail); // number
-  }}
-  on:input={(e) => {
-    console.log(e.detail); // number
-  }}
-/>
-
-<Slider
-  labelText="Runtime memory (MB)"
-  min={10}
-  max={990}
-  maxLabel="990 MB"
-  value={100}
-  step={10}
-/>
-
-<Slider
-  light
-  labelText="Runtime memory (MB)"
-  min={10}
-  max={990}
-  maxLabel="990 MB"
-  value={100}
-  step={10}
-/>
-
-<SliderSkeleton />
-
-<SliderSkeleton hideLabel />

tests/Slider/Slider.test.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { Slider } from "carbon-components-svelte";
+
+  let value = 0;
+
+  export let disabled = false;
+  export let invalid = false;
+  export let required = false;
+  export let minLabel = "";
+  export let maxLabel = "";
+  export let hideTextInput = false;
+  export let fullWidth = false;
+  export let min = 0;
+  export let max = 100;
+  export let step = 1;
+</script>
+
+<Slider
+  bind:value
+  labelText="Test Slider"
+  {min}
+  {max}
+  {step}
+  {disabled}
+  {invalid}
+  {required}
+  {minLabel}
+  {maxLabel}
+  {hideTextInput}
+  {fullWidth}
+  on:change={(e) => {
+    console.log("change", e.detail);
+  }}
+  on:input={(e) => {
+    console.log("input", e.detail);
+  }}
+/>

tests/Slider/Slider.test.ts

@@ -0,0 +1,177 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import Slider from "./Slider.test.svelte";
+
+describe("Slider", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render with default props", () => {
+    render(Slider);
+
+    expect(screen.getByText("Test Slider")).toBeInTheDocument();
+    expect(screen.getByRole("slider")).toBeInTheDocument();
+    expect(screen.getByRole("spinbutton")).toHaveValue(0);
+  });
+
+  it("should handle value changes through input", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(Slider);
+
+    const input = screen.getByRole("spinbutton");
+    await user.clear(input);
+    await user.type(input, "50");
+    await user.keyboard("{Tab}");
+
+    expect(consoleLog).toHaveBeenCalledWith("change", 50);
+  });
+
+  it("should handle keyboard navigation", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(Slider);
+
+    const slider = screen.getByRole("slider");
+    await user.tab();
+    expect(slider).toHaveFocus();
+
+    await user.keyboard("{ArrowRight}");
+    expect(consoleLog).toHaveBeenCalledWith("change", 1);
+
+    await user.keyboard("{ArrowLeft}");
+    expect(consoleLog).toHaveBeenCalledWith("change", 0);
+  });
+
+  it("should handle custom range and step", () => {
+    render(Slider, {
+      props: {
+        min: 10,
+        max: 990,
+        minLabel: "10 MB",
+        maxLabel: "990 MB",
+        step: 10,
+      },
+    });
+
+    const slider = screen.getByRole("slider");
+    expect(slider).toHaveAttribute("aria-valuemin", "10");
+    expect(slider).toHaveAttribute("aria-valuemax", "990");
+    expect(screen.getByText("990 MB")).toBeInTheDocument();
+  });
+
+  it("should handle hidden text input", () => {
+    render(Slider, {
+      props: { hideTextInput: true },
+    });
+
+    const spinbutton = screen.getByLabelText("Slider number input");
+    expect(spinbutton).toHaveAttribute("type", "hidden");
+  });
+
+  it("should handle full width", () => {
+    render(Slider, {
+      props: { fullWidth: true },
+    });
+
+    const slider = screen.getByRole("slider").parentElement;
+    expect(slider).toHaveStyle("max-width: none");
+  });
+
+  it("should handle disabled state", () => {
+    render(Slider, {
+      props: { disabled: true },
+    });
+
+    const slider = screen.getByRole("slider");
+    const input = screen.getByRole("spinbutton");
+    const label = screen.getByText("Test Slider");
+
+    expect(slider.parentElement).toHaveClass("bx--slider--disabled");
+    expect(input).toBeDisabled();
+    expect(label).toHaveClass("bx--label--disabled");
+  });
+
+  it("should handle invalid state", () => {
+    render(Slider, {
+      props: { invalid: true },
+    });
+
+    const input = screen.getByRole("spinbutton");
+    expect(input).toHaveClass("bx--text-input--invalid");
+    expect(input).toHaveAttribute("data-invalid", "true");
+    expect(input).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("should handle custom labels", () => {
+    render(Slider, {
+      props: {
+        minLabel: "0 MB",
+        maxLabel: "100 MB",
+      },
+    });
+
+    expect(screen.getByText("0 MB")).toBeInTheDocument();
+    expect(screen.getByText("100 MB")).toBeInTheDocument();
+  });
+
+  it("should handle required state", () => {
+    render(Slider, {
+      props: { required: true },
+    });
+
+    const input = screen.getByRole("spinbutton");
+    expect(input).toBeRequired();
+  });
+
+  it("should handle step multiplier with shift key", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(Slider);
+
+    const slider = screen.getByRole("slider");
+    await user.tab();
+    expect(slider).toHaveFocus();
+
+    await user.keyboard("{Shift>}{ArrowRight}{/Shift}");
+    expect(consoleLog).toHaveBeenCalledWith("change", 25);
+  });
+
+  it("should clamp values to min and max", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(Slider, {
+      props: { min: 10, max: 990 },
+    });
+
+    const input = screen.getByRole("spinbutton");
+    await user.clear(input);
+    await user.type(input, "5");
+    await user.keyboard("{Tab}");
+    expect(consoleLog).toHaveBeenCalledWith("change", 10);
+
+    await user.clear(input);
+    await user.type(input, "1000{Tab}");
+    await user.keyboard("{Tab}");
+    expect(consoleLog).toHaveBeenCalledWith("change", 990);
+  });
+
+  it("should not respond to dragging when disabled", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(Slider, {
+      props: { disabled: true },
+    });
+
+    const slider = screen.getByRole("slider");
+    const container = screen.getByRole("presentation");
+
+    // Simulate mouse down on the slider
+    await user.pointer({ target: slider, keys: "[MouseLeft]" });
+
+    // Simulate mouse move
+    const { left, width } = container.getBoundingClientRect();
+    await user.pointer({ target: container, coords: { x: left + width / 2 } });
+
+    // Simulate mouse up
+    await user.pointer({ target: container, keys: "[/MouseLeft]" });
+
+    expect(consoleLog).not.toHaveBeenCalled();
+  });
+});