fix: toast tests - variant & action

Author: pheralb

library/src/test/toast-test-component.tsx

@@ -1,12 +1,12 @@
-import { toast } from '../main';
+import { toast } from "../main";
 
-const ToastTestComponent = () => {
+const ToastVariantComponent = () => {
   return (
     <button
       onClick={() =>
         toast.success({
-          text: 'Hello Toast!',
-          description: 'This is a success toast',
+          text: "Hello Toast!",
+          description: "This is a success toast",
         })
       }
     >
@@ -15,4 +15,25 @@ const ToastTestComponent = () => {
   );
 };
 
-export default ToastTestComponent;
+const ToastActionsComponent = () => {
+  return (
+    <button
+      onClick={() =>
+        toast.success({
+          text: "Hello Toast!",
+          description: "This is a success toast",
+          action: {
+            content: "Action",
+            onClick: () => {
+              console.log("Action clicked");
+            },
+          },
+        })
+      }
+    >
+      Show Toast
+    </button>
+  );
+};
+
+export { ToastVariantComponent, ToastActionsComponent };

library/src/test/toast.test.tsx

@@ -1,43 +1,86 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { describe, test, expect } from 'vitest';
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, test, expect, vi } from "vitest";
 
-import { Toaster } from '../main';
-import ToastTestComponent from './toast-test-component';
+import { Toaster } from "../main";
+import {
+  ToastVariantComponent,
+  ToastActionsComponent,
+} from "./toast-test-component";
 
-describe('Toast notifications', () => {
-  test('should display a success toast', async () => {
+describe("🚀 Toast notifications", () => {
+  /** 📦 Display Single toast with variant: */
+  test("should display a success toast", async () => {
     render(
       <>
-        <Toaster position="bottom-right" />
-        <ToastTestComponent />
+        <Toaster position="bottom-center" theme="light" />
+        <ToastVariantComponent />
       </>,
     );
-
     // Click the button to show the toast:
-    const button = screen.getByText('Show Toast');
+    const button = screen.getByText("Show Toast");
     fireEvent.click(button);
-
     await waitFor(() => {
-      expect(screen.getByText('Hello Toast!')).toBeInTheDocument();
+      expect(screen.getByText("Hello Toast!")).toBeInTheDocument();
     });
-
     await waitFor(() => {
-      expect(screen.getByText('This is a success toast')).toBeInTheDocument();
+      expect(screen.getByText("This is a success toast")).toBeInTheDocument();
     });
-
     // Press Close Button to remove the toast:
-    const closeButton = screen.getByRole('button', { name: 'Close' });
+    const closeButton = screen.getByRole("button", { name: "Close" });
     fireEvent.click(closeButton);
+    await waitFor(() => {
+      expect(screen.queryByText("Hello Toast!")).not.toBeInTheDocument();
+    });
+    await waitFor(() => {
+      expect(
+        screen.queryByText("This is a success toast"),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  /** 📦 Display Toast with Actions: */
+  test("should display toast with action and handle interactions", async () => {
+    const consoleSpy = vi.spyOn(console, "log");
+
+    render(
+      <>
+        <Toaster position="bottom-right" theme="dark" />
+        <ToastActionsComponent />
+      </>,
+    );
 
+    const button = screen.getByText("Show Toast");
+    fireEvent.click(button);
+
+    // Verify toast content is displayed
     await waitFor(() => {
-      expect(screen.queryByText('Hello Toast!')).not.toBeInTheDocument();
+      expect(screen.getByText("Hello Toast!")).toBeInTheDocument();
+      expect(screen.getByText("This is a success toast")).toBeInTheDocument();
     });
 
+    // Click the action button
+    const actionButton = screen.getByText("Action");
+    fireEvent.click(actionButton);
+
+    // Verify console.log was called
     await waitFor(() => {
+      expect(consoleSpy).toHaveBeenCalledWith("Action clicked");
+    });
+
+    // Press Close Button to remove the toast
+    const closeButton = screen.getByRole("button", { name: "Close" });
+    fireEvent.click(closeButton);
+
+    // Verify toast is removed
+    await waitFor(() => {
+      expect(screen.queryByText("Hello Toast!")).not.toBeInTheDocument();
       expect(
-        screen.queryByText('This is a success toast'),
+        screen.queryByText("This is a success toast"),
       ).not.toBeInTheDocument();
     });
+
+    // Restore the original console.log
+    consoleSpy.mockRestore();
   });
 });