diff --git a/tests/Loading.test.svelte b/tests/Loading.test.svelte
deleted file mode 100644
index 2095cd4e..00000000
--- a/tests/Loading.test.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
-
-
diff --git a/tests/Loading/Loading.test.svelte b/tests/Loading/Loading.test.svelte
new file mode 100644
index 00000000..aa152744
--- /dev/null
+++ b/tests/Loading/Loading.test.svelte
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/Loading/Loading.test.ts b/tests/Loading/Loading.test.ts
new file mode 100644
index 00000000..68d4f561
--- /dev/null
+++ b/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");
+ });
+});