test(loading): add unit tests

tests/Loading.test.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-  import { Loading } from "carbon-components-svelte";
-</script>
-
-<Loading withOverlay={false} />
-
-<Loading withOverlay={false} small />

tests/Loading/Loading.test.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { Loading } from "carbon-components-svelte";
+</script>
+
+<!-- Default loading (with overlay) -->
+<div data-testid="default-loader">
+  <Loading />
+</div>
+
+<!-- Loading without overlay -->
+<div data-testid="loader-no-overlay">
+  <Loading withOverlay={false} />
+</div>
+
+<!-- Small loading -->
+<div data-testid="loader-small">
+  <Loading withOverlay={false} small />
+</div>
+
+<!-- Inactive loading -->
+<div data-testid="loader-inactive">
+  <Loading active={false} />
+</div>
+
+<!-- Custom description -->
+<div data-testid="loader-description">
+  <Loading description="Processing data..." />
+</div>

tests/Loading/Loading.test.ts

@@ -0,0 +1,93 @@
+import { render, screen } from "@testing-library/svelte";
+import Loading from "./Loading.test.svelte";
+
+describe("Loading", () => {
+  it("renders with default props", () => {
+    render(Loading);
+    const wrapper = screen.getByTestId("default-loader");
+
+    // Should have overlay by default
+    expect(wrapper.querySelector(".bx--loading-overlay")).toBeInTheDocument();
+
+    // Should be active by default
+    const loader = wrapper.querySelector(".bx--loading");
+    expect(loader).toBeInTheDocument();
+    expect(loader).not.toHaveClass("bx--loading--stop");
+
+    // Should have correct ARIA attributes
+    expect(loader).toHaveAttribute("aria-atomic", "true");
+    expect(loader).toHaveAttribute("aria-live", "assertive");
+
+    // Should have default description
+    const title = wrapper.querySelector("title");
+    expect(title).toHaveTextContent("loading");
+  });
+
+  it("renders without overlay", () => {
+    render(Loading);
+    const wrapper = screen.getByTestId("loader-no-overlay");
+
+    // Should not have overlay
+    expect(
+      wrapper.querySelector(".bx--loading-overlay"),
+    ).not.toBeInTheDocument();
+
+    // Should still have loader
+    expect(wrapper.querySelector(".bx--loading")).toBeInTheDocument();
+  });
+
+  it("supports small variant", () => {
+    render(Loading);
+    const wrapper = screen.getByTestId("loader-small");
+
+    const loader = wrapper.querySelector(".bx--loading");
+    expect(loader).toHaveClass("bx--loading--small");
+
+    // Small variant should have background circle
+    const backgroundCircle = wrapper.querySelector(".bx--loading__background");
+    expect(backgroundCircle).toBeInTheDocument();
+    expect(backgroundCircle).toHaveAttribute("r", "42");
+
+    // Should have stroke circle with correct radius
+    const strokeCircle = wrapper.querySelector(".bx--loading__stroke");
+    expect(strokeCircle).toHaveAttribute("r", "42");
+  });
+
+  it("supports inactive state", () => {
+    render(Loading);
+    const wrapper = screen.getByTestId("loader-inactive");
+
+    // Overlay should have stop class
+    const overlay = wrapper.querySelector(".bx--loading-overlay");
+    expect(overlay).toHaveClass("bx--loading-overlay--stop");
+
+    // Loader should have stop class
+    const loader = wrapper.querySelector(".bx--loading");
+    expect(loader).toHaveClass("bx--loading--stop");
+
+    // ARIA live should be off when inactive
+    expect(loader).toHaveAttribute("aria-live", "off");
+  });
+
+  it("supports custom description", () => {
+    render(Loading);
+    const wrapper = screen.getByTestId("loader-description");
+
+    const title = wrapper.querySelector("title");
+    expect(title).toHaveTextContent("Processing data...");
+  });
+
+  it("renders with correct spinner radius", () => {
+    render(Loading);
+
+    // Default (large) spinner
+    const defaultWrapper = screen.getByTestId("default-loader");
+    const defaultStroke = defaultWrapper.querySelector(".bx--loading__stroke");
+    expect(defaultStroke).toHaveAttribute("r", "44");
+
+    // Small spinner
+    const smallWrapper = screen.getByTestId("loader-small");
+    const smallStroke = smallWrapper.querySelector(".bx--loading__stroke");
+    expect(smallStroke).toHaveAttribute("r", "42");
+  });
+});