test(inline-notification): add unit tests

tests/InlineNotification.test.svelte

@@ -1,49 +0,0 @@
-<script lang="ts">
-  import {
-    InlineNotification,
-    NotificationActionButton,
-  } from "carbon-components-svelte";
-</script>
-
-<InlineNotification on:close />
-
-<InlineNotification
-  hideCloseButton
-  kind="warning"
-  title="Upcoming scheduled maintenance"
-  on:close={(e) => {
-    console.log(e.detail.timeout);
-  }}
-/>
-
-<InlineNotification kind="warning" title="Upcoming scheduled maintenance">
-  <div slot="actions">
-    <NotificationActionButton>Learn more</NotificationActionButton>
-  </div>
-</InlineNotification>
-
-<NotificationActionButton>Learn more</NotificationActionButton>
-
-<InlineNotification kind="error" />
-
-<InlineNotification kind="info" />
-
-<InlineNotification kind="info-square" />
-
-<InlineNotification kind="success" />
-
-<InlineNotification kind="warning" />
-
-<InlineNotification kind="warning-alt" />
-
-<InlineNotification lowContrast kind="error" />
-
-<InlineNotification lowContrast kind="info" />
-
-<InlineNotification lowContrast kind="info-square" />
-
-<InlineNotification lowContrast kind="success" />
-
-<InlineNotification lowContrast kind="warning" />
-
-<InlineNotification lowContrast kind="warning-alt" />

tests/InlineNotification/InlineNotification.close.test.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { InlineNotification } from "carbon-components-svelte";
+</script>
+
+<InlineNotification
+  title="Error"
+  subtitle="An internal server error occurred."
+  on:close={(e) => {
+    e.preventDefault();
+    console.log("close", e.detail);
+  }}
+/>

tests/InlineNotification/InlineNotification.test.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { InlineNotification } from "carbon-components-svelte";
+  import type { ComponentProps } from "svelte";
+
+  export let kind: ComponentProps<InlineNotification>["kind"] = "error";
+  export let lowContrast = false;
+  export let timeout = 0;
+  export let role = "alert";
+  export let title = "Error:";
+  export let subtitle = "An internal server error occurred.";
+  export let hideCloseButton = false;
+  export let statusIconDescription = "";
+  export let closeButtonDescription = "";
+</script>
+
+<InlineNotification
+  {kind}
+  {lowContrast}
+  {timeout}
+  {role}
+  {title}
+  {subtitle}
+  {hideCloseButton}
+  {statusIconDescription}
+  {closeButtonDescription}
+  on:close={(e) => {
+    console.log("close", e.detail);
+  }}
+/>

tests/InlineNotification/InlineNotification.test.ts

@@ -0,0 +1,156 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import InlineNotification from "./InlineNotification.test.svelte";
+import InlineNotificationCustom from "./InlineNotificationCustom.test.svelte";
+import InlineNotificationClose from "./InlineNotification.close.test.svelte";
+
+describe("InlineNotification", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("should render with default props", () => {
+    render(InlineNotification);
+
+    expect(screen.getByRole("alert")).toHaveClass(
+      "bx--inline-notification--error",
+    );
+    expect(screen.getByText("Error:")).toBeInTheDocument();
+    expect(
+      screen.getByText("An internal server error occurred."),
+    ).toBeInTheDocument();
+  });
+
+  it("should handle different kinds", () => {
+    (
+      [
+        "error",
+        "info",
+        "info-square",
+        "success",
+        "warning",
+        "warning-alt",
+      ] as const
+    ).forEach((kind) => {
+      const { container } = render(InlineNotification, {
+        props: { kind },
+      });
+
+      expect(
+        container.querySelector(`.bx--inline-notification--${kind}`),
+      ).toBeInTheDocument();
+      container.remove();
+    });
+  });
+
+  it("should handle low contrast variant", () => {
+    render(InlineNotification, {
+      props: { lowContrast: true },
+    });
+
+    expect(screen.getByRole("alert")).toHaveClass(
+      "bx--inline-notification--low-contrast",
+    );
+  });
+
+  it("should handle close button click", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(InlineNotification);
+
+    await user.click(screen.getByRole("button"));
+
+    expect(consoleLog).toHaveBeenCalledWith("close", { timeout: false });
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+
+  it("should hide close button", () => {
+    render(InlineNotification, {
+      props: { hideCloseButton: true },
+    });
+
+    expect(
+      screen.queryByLabelText("Close notification"),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole("alert")).toHaveClass(
+      "bx--inline-notification--hide-close-button",
+    );
+  });
+
+  it("should handle custom icon descriptions", () => {
+    render(InlineNotification, {
+      props: {
+        statusIconDescription: "Custom status",
+        closeButtonDescription: "Custom close",
+      },
+    });
+
+    expect(screen.getByText("Custom status")).toBeInTheDocument();
+    expect(screen.getByRole("button")).toHaveAttribute(
+      "aria-label",
+      "Custom close",
+    );
+  });
+
+  it("should handle custom role", () => {
+    render(InlineNotification, {
+      props: { role: "status" },
+    });
+
+    expect(screen.getByRole("status")).toBeInTheDocument();
+  });
+
+  it("should handle timeout", async () => {
+    vi.useFakeTimers();
+    const consoleLog = vi.spyOn(console, "log");
+    render(InlineNotification, { props: { timeout: 1000 } });
+
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(consoleLog).toHaveBeenCalledWith("close", { timeout: true });
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    vi.useRealTimers();
+  });
+
+  it("should handle custom slots", () => {
+    render(InlineNotificationCustom);
+
+    const title = screen.getByText("Custom Title:");
+    expect(title).not.toHaveClass("bx--inline-notification__title");
+    expect(title.tagName).toBe("STRONG");
+
+    const subtitle = screen.getByText("Custom subtitle content.");
+    expect(subtitle).not.toHaveClass("bx--inline-notification__subtitle");
+    expect(subtitle.tagName).toBe("STRONG");
+  });
+
+  it("should render action button", () => {
+    render(InlineNotificationCustom);
+
+    expect(
+      screen.getByRole("button", { name: "Learn more" }),
+    ).toBeInTheDocument();
+  });
+
+  it("should cleanup timeout on unmount", () => {
+    vi.useFakeTimers();
+    const clearTimeoutSpy = vi.spyOn(window, "clearTimeout");
+
+    const { unmount } = render(InlineNotification, {
+      props: { timeout: 1_000 },
+    });
+
+    unmount();
+    expect(clearTimeoutSpy).toHaveBeenCalled();
+    vi.useRealTimers();
+  });
+
+  it("should prevent default close behavior", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(InlineNotificationClose);
+
+    await user.click(screen.getByRole("button"));
+    expect(consoleLog).toHaveBeenCalledWith("close", { timeout: false });
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+  });
+});

tests/InlineNotification/InlineNotificationCustom.test.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import {
+    InlineNotification,
+    NotificationActionButton,
+  } from "carbon-components-svelte";
+</script>
+
+<InlineNotification kind="warning">
+  <strong slot="title">Custom Title:</strong>
+  <strong slot="subtitle">Custom subtitle content.</strong>
+  <svelte:fragment slot="actions">
+    <NotificationActionButton>Learn more</NotificationActionButton>
+  </svelte:fragment>
+</InlineNotification>