test(inline-loading): add unit tests

tests/InlineLoading.test.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import { InlineLoading } from "carbon-components-svelte";
-</script>
-
-<InlineLoading />
-
-<InlineLoading description="Loading metrics..." />
-
-<InlineLoading status="active" description="Submitting..." />
-
-<InlineLoading status="inactive" description="Cancelling..." />
-
-<InlineLoading status="finished" description="Success" />
-
-<InlineLoading status="error" description="An error occurred" />

tests/InlineLoading/InlineLoading.test.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { InlineLoading } from "carbon-components-svelte";
+</script>
+
+<!-- Default inline loading -->
+<div data-testid="default-loader">
+  <InlineLoading />
+</div>
+
+<!-- Inline loading with description -->
+<div data-testid="loader-with-description">
+  <InlineLoading description="Loading metrics..." />
+</div>
+
+<!-- Inline loading with different states -->
+<div data-testid="loader-active">
+  <InlineLoading status="active" description="Submitting..." />
+</div>
+
+<div data-testid="loader-inactive">
+  <InlineLoading status="inactive" description="Cancelling..." />
+</div>
+
+<div data-testid="loader-finished">
+  <InlineLoading
+    status="finished"
+    description="Success"
+    on:success={() => {
+      console.log("success");
+    }}
+  />
+</div>
+
+<!-- Inline loading with custom success delay -->
+<div data-testid="loader-custom-success-delay">
+  <InlineLoading
+    status="finished"
+    description="Processing..."
+    successDelay={500}
+    on:success={() => {
+      console.log("success custom delay");
+    }}
+  />
+</div>
+
+<div data-testid="loader-error">
+  <InlineLoading status="error" description="An error occurred" />
+</div>
+
+<!-- Inline loading with custom icon description -->
+<div data-testid="loader-custom-icon">
+  <InlineLoading
+    status="finished"
+    description="Complete"
+    iconDescription="Operation completed successfully"
+  />
+</div>

tests/InlineLoading/InlineLoading.test.ts

@@ -0,0 +1,126 @@
+import { render, screen } from "@testing-library/svelte";
+import InlineLoading from "./InlineLoading.test.svelte";
+
+describe("InlineLoading", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it("renders with default props", () => {
+    render(InlineLoading);
+    const wrapper = screen.getByTestId("default-loader");
+
+    expect(wrapper.querySelector(".bx--inline-loading")).toBeInTheDocument();
+    expect(wrapper.querySelector(".bx--loading")).toBeInTheDocument();
+  });
+
+  it("renders with description", () => {
+    render(InlineLoading);
+    const wrapper = screen.getByTestId("loader-with-description");
+
+    const description = wrapper.querySelector(".bx--inline-loading__text");
+    expect(description).toHaveTextContent("Loading metrics...");
+  });
+
+  it("supports active state", () => {
+    render(InlineLoading);
+    const wrapper = screen.getByTestId("loader-active");
+
+    expect(wrapper.querySelector(".bx--loading")).toHaveClass(
+      "bx--loading--small",
+    );
+    expect(wrapper.querySelector(".bx--loading--small")).toBeVisible();
+    expect(
+      wrapper.querySelector(".bx--inline-loading__text"),
+    ).toHaveTextContent("Submitting...");
+  });
+
+  it("supports inactive state", () => {
+    render(InlineLoading);
+    const wrapper = screen.getByTestId("loader-inactive");
+
+    expect(wrapper.querySelector(".bx--loading")).toHaveClass(
+      "bx--loading--small",
+    );
+    expect(wrapper.querySelector(".bx--loading--stop")).toBeInTheDocument();
+    expect(
+      wrapper.querySelector(".bx--inline-loading__text"),
+    ).toHaveTextContent("Cancelling...");
+  });
+
+  it("supports finished state", () => {
+    render(InlineLoading);
+    const wrapper = screen.getByTestId("loader-finished");
+
+    expect(
+      wrapper.querySelector(".bx--inline-loading__checkmark-container"),
+    ).toBeInTheDocument();
+    expect(
+      wrapper.querySelector(".bx--inline-loading__text"),
+    ).toHaveTextContent("Success");
+  });
+
+  it("supports error state", () => {
+    render(InlineLoading);
+    const wrapper = screen.getByTestId("loader-error");
+
+    expect(
+      wrapper.querySelector(".bx--inline-loading--error"),
+    ).toBeInTheDocument();
+    expect(
+      wrapper.querySelector(".bx--inline-loading__text"),
+    ).toHaveTextContent("An error occurred");
+  });
+
+  it("supports custom icon description", () => {
+    render(InlineLoading);
+    const wrapper = screen.getByTestId("loader-custom-icon");
+
+    const icon = wrapper.querySelector(
+      ".bx--inline-loading__checkmark-container",
+    );
+    assert(icon);
+    expect(icon).toHaveTextContent("Operation completed successfully");
+  });
+
+  it("dispatches success event after delay when finished", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(InlineLoading);
+
+    const wrapper = screen.getByTestId("loader-finished");
+    expect(
+      wrapper.querySelector(".bx--inline-loading__checkmark-container"),
+    ).toBeInTheDocument();
+
+    vi.advanceTimersByTime(1500);
+    expect(consoleLog).toHaveBeenCalledWith("success");
+  });
+
+  it("supports custom success delay", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(InlineLoading);
+
+    vi.advanceTimersByTime(400);
+    expect(consoleLog).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(consoleLog).toHaveBeenCalledWith("success custom delay");
+  });
+
+  it("cleans up timeout on unmount", () => {
+    const { unmount } = render(InlineLoading);
+    const wrapper = screen.getByTestId("loader-finished");
+    expect(wrapper).toBeInTheDocument();
+
+    unmount();
+
+    // Advance timers to ensure no lingering timeouts
+    vi.advanceTimersByTime(2000);
+    // If cleanup wasn't working, this would throw an error about setState after unmount
+  });
+});