carbon-components-svelte/tests/InlineNotification/InlineNotification.test.ts

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();
  });
});