test(toast-notification): add unit tests

tests/ToastNotification.test.svelte

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

tests/ToastNotification/ToastNotification.close.test.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ToastNotification } from "carbon-components-svelte";
+</script>
+
+<ToastNotification
+  title="Custom"
+  subtitle="Message"
+  caption="2024-03-21 12:00:00"
+  on:close={(e) => {
+    e.preventDefault();
+    console.log("close", e.detail);
+  }}
+/>

tests/ToastNotification/ToastNotification.test.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { ToastNotification } from "carbon-components-svelte";
+  import type { ComponentProps } from "svelte";
+
+  export let kind: ComponentProps<ToastNotification>["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 caption = "2024-03-21 12:00:00";
+  export let hideCloseButton = false;
+  export let fullWidth = false;
+  export let statusIconDescription = "";
+  export let closeButtonDescription = "";
+</script>
+
+<ToastNotification
+  {kind}
+  {lowContrast}
+  {timeout}
+  {role}
+  {title}
+  {subtitle}
+  {caption}
+  {hideCloseButton}
+  {fullWidth}
+  {statusIconDescription}
+  {closeButtonDescription}
+  on:close={(e) => {
+    console.log("close", e.detail);
+  }}
+/>

tests/ToastNotification/ToastNotification.test.ts

@@ -0,0 +1,159 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import ToastNotification from "./ToastNotification.test.svelte";
+import ToastNotificationCustom from "./ToastNotificationCustom.test.svelte";
+import ToastNotificationClose from "./ToastNotification.close.test.svelte";
+
+describe("ToastNotification", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("should render with default props", () => {
+    render(ToastNotification);
+
+    expect(screen.getByRole("alert")).toHaveClass(
+      "bx--toast-notification--error",
+    );
+    expect(screen.getByText("Error")).toBeInTheDocument();
+    expect(
+      screen.getByText("An internal server error occurred."),
+    ).toBeInTheDocument();
+    expect(screen.getByText("2024-03-21 12:00:00")).toBeInTheDocument();
+  });
+
+  it("should handle different kinds", () => {
+    const kinds = [
+      "error",
+      "info",
+      "info-square",
+      "success",
+      "warning",
+      "warning-alt",
+    ] as const;
+
+    kinds.forEach((kind) => {
+      const { container } = render(ToastNotification, {
+        props: { kind },
+      });
+
+      expect(
+        container.querySelector(`.bx--toast-notification--${kind}`),
+      ).toBeInTheDocument();
+      container.remove();
+    });
+  });
+
+  it("should handle low contrast variant", () => {
+    render(ToastNotification, {
+      props: { lowContrast: true },
+    });
+
+    expect(screen.getByRole("alert")).toHaveClass(
+      "bx--toast-notification--low-contrast",
+    );
+  });
+
+  it("should handle close button click", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(ToastNotification);
+
+    await user.click(screen.getByRole("button"));
+
+    expect(consoleLog).toHaveBeenCalledWith("close", { timeout: false });
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+
+  it("should hide close button", () => {
+    render(ToastNotification, {
+      props: { hideCloseButton: true },
+    });
+
+    expect(
+      screen.queryByLabelText("Close notification"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should handle custom icon descriptions", () => {
+    render(ToastNotification, {
+      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(ToastNotification, {
+      props: { role: "status" },
+    });
+
+    expect(screen.getByRole("status")).toBeInTheDocument();
+  });
+
+  it("should handle timeout", async () => {
+    vi.useFakeTimers();
+    const consoleLog = vi.spyOn(console, "log");
+
+    render(ToastNotification, { 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(ToastNotificationCustom);
+
+    const title = screen.getByText("Custom Title:");
+    expect(title).not.toHaveClass("bx--toast-notification__title");
+    expect(title.tagName).toBe("STRONG");
+
+    const subtitle = screen.getByText("Custom subtitle content.");
+    expect(subtitle).not.toHaveClass("bx--toast-notification__subtitle");
+    expect(subtitle.tagName).toBe("STRONG");
+
+    const caption = screen.getByText("Custom caption content.");
+    expect(caption).not.toHaveClass("bx--toast-notification__caption");
+    expect(caption.tagName).toBe("STRONG");
+  });
+
+  it("should handle full width", () => {
+    render(ToastNotification, { props: { fullWidth: true } });
+
+    const notification = screen.getByRole("alert");
+    expect(notification).toHaveStyle({ width: "100%" });
+  });
+
+  it("should cleanup timeout on unmount", () => {
+    vi.useFakeTimers();
+    const clearTimeoutSpy = vi.spyOn(window, "clearTimeout");
+
+    const { unmount } = render(ToastNotification, {
+      props: { timeout: 1000 },
+    });
+
+    unmount();
+    expect(clearTimeoutSpy).toHaveBeenCalled();
+    vi.useRealTimers();
+  });
+
+  it("should prevent default close behavior", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(ToastNotificationClose);
+
+    await user.click(screen.getByRole("button"));
+    expect(consoleLog).toHaveBeenCalledWith("close", { timeout: false });
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+  });
+});

tests/ToastNotification/ToastNotificationCustom.test.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { ToastNotification } from "carbon-components-svelte";
+</script>
+
+<ToastNotification kind="warning">
+  <strong slot="title">Custom Title:</strong>
+  <strong slot="subtitle">Custom subtitle content.</strong>
+  <strong slot="caption">Custom caption content.</strong>
+</ToastNotification>