From 884f5e596619bb5866c01ad390ca76bd894e6808 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 16 Mar 2025 12:06:02 -0700
Subject: [PATCH] test(inline-loading): add unit tests

---
 tests/InlineLoading.test.svelte               |  15 ---
 tests/InlineLoading/InlineLoading.test.svelte |  57 ++++++++
 tests/InlineLoading/InlineLoading.test.ts     | 126 ++++++++++++++++++
 3 files changed, 183 insertions(+), 15 deletions(-)
 delete mode 100644 tests/InlineLoading.test.svelte
 create mode 100644 tests/InlineLoading/InlineLoading.test.svelte
 create mode 100644 tests/InlineLoading/InlineLoading.test.ts

diff --git a/tests/InlineLoading.test.svelte b/tests/InlineLoading.test.svelte
deleted file mode 100644
index 2bdf6daf..00000000
--- a/tests/InlineLoading.test.svelte
+++ /dev/null
@@ -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" />
diff --git a/tests/InlineLoading/InlineLoading.test.svelte b/tests/InlineLoading/InlineLoading.test.svelte
new file mode 100644
index 00000000..fdf2612a
--- /dev/null
+++ b/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>
diff --git a/tests/InlineLoading/InlineLoading.test.ts b/tests/InlineLoading/InlineLoading.test.ts
new file mode 100644
index 00000000..f5755e9f
--- /dev/null
+++ b/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
+  });
+});