diff --git a/packages/ui/components/toast/showToast.tsx b/packages/ui/components/toast/showToast.tsx index 03820b484b..ad5c353864 100644 --- a/packages/ui/components/toast/showToast.tsx +++ b/packages/ui/components/toast/showToast.tsx @@ -62,7 +62,7 @@ export const DefaultToast = ({ message, toastVisible, onClose, toastId }: IToast -

{message}

+

{message}

); diff --git a/packages/ui/components/toast/toast.test.tsx b/packages/ui/components/toast/toast.test.tsx new file mode 100644 index 0000000000..cf0311ec75 --- /dev/null +++ b/packages/ui/components/toast/toast.test.tsx @@ -0,0 +1,33 @@ +import { render, screen, fireEvent } from "@testing-library/react"; +import { vi } from "vitest"; + +import { SuccessToast, ErrorToast, WarningToast, DefaultToast } from "./showToast"; + +describe("Tests for Toast Components", () => { + const testToastComponent = (Component: typeof DefaultToast, toastTestId: string) => { + const message = "This is a test message"; + const toastId = "some-id"; + + const onCloseMock = vi.fn(); + render(); + + const toast = screen.getByTestId(toastTestId); + expect(toast).toBeInTheDocument(); + expect(toast.textContent).toContain(message); + + const closeButton = screen.getByRole("button"); + fireEvent.click(closeButton); + expect(onCloseMock).toHaveBeenCalledWith(toastId); + }; + + const toastComponents: [string, typeof DefaultToast, string][] = [ + ["SuccessToast", SuccessToast, "toast-success"], + ["ErrorToast", ErrorToast, "toast-error"], + ["WarningToast", WarningToast, "toast-warning"], + ["DefaultToast", DefaultToast, "toast-default"], + ]; + + test.each(toastComponents)("Should render and close %s component", (_, ToastComponent, expectedClass) => { + testToastComponent(ToastComponent, expectedClass); + }); +});