fusion/packages/dashboard/app/hooks/__tests__/useToast.test.tsx

import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import { render, renderHook, act, screen } from "@testing-library/react";
import { ToastProvider, useToast } from "../useToast";
import type { ReactNode } from "react";

/**
 * Toast hook tests
 *
 * Tests for the Toast context provider and useToast hook.
 */

function createWrapper() {
  return function Wrapper({ children }: { children: ReactNode }) {
    return <ToastProvider>{children}</ToastProvider>;
  };
}

describe("ToastProvider", () => {
  it("renders children correctly", () => {
    const { container } = render(
      <ToastProvider>
        <div data-testid="child">Test Child</div>
      </ToastProvider>
    );

    expect(screen.getByTestId("child")).toBeDefined();
    expect(container.textContent).toContain("Test Child");
  });
});

describe("useToast", () => {
  beforeEach(() => {
    vi.useFakeTimers({ shouldAdvanceTime: true });
  });

  afterEach(() => {
    vi.useRealTimers();
  });

  it("throws error when used outside provider", () => {
    // Suppress console.error for expected error
    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});

    expect(() => {
      renderHook(() => useToast());
    }).toThrow("useToast must be used within ToastProvider");

    consoleSpy.mockRestore();
  });

  it("returns correct context value within provider", () => {
    const { result } = renderHook(() => useToast(), {
      wrapper: createWrapper(),
    });

    expect(result.current).toHaveProperty("toasts");
    expect(result.current).toHaveProperty("addToast");
    expect(result.current).toHaveProperty("removeToast");
    expect(typeof result.current.addToast).toBe("function");
    expect(typeof result.current.removeToast).toBe("function");
  });

  it("`toasts` array is initially empty", () => {
    const { result } = renderHook(() => useToast(), {
      wrapper: createWrapper(),
    });

    expect(result.current.toasts).toEqual([]);
  });

describe("addToast", () => {
    it("adds a toast to the list with correct message and type", () => {
      const { result } = renderHook(() => useToast(), {
        wrapper: createWrapper(),
      });

      act(() => {
        result.current.addToast("Test message", "success");
      });

      expect(result.current.toasts).toHaveLength(1);
      expect(result.current.toasts[0].message).toBe("Test message");
      expect(result.current.toasts[0].type).toBe("success");
    });

    it("auto-assigns unique incrementing IDs starting from 0", () => {
      const { result } = renderHook(() => useToast(), {
        wrapper: createWrapper(),
      });

      act(() => {
        result.current.addToast("First", "info");
        result.current.addToast("Second", "info");
        result.current.addToast("Third", "info");
      });

      expect(result.current.toasts[0].id).toBe(0);
      expect(result.current.toasts[1].id).toBe(1);
      expect(result.current.toasts[2].id).toBe(2);
    });

    it("defaults type to 'info' when not specified", () => {
      const { result } = renderHook(() => useToast(), {
        wrapper: createWrapper(),
      });

      act(() => {
        result.current.addToast("Test message");
      });

      expect(result.current.toasts[0].type).toBe("info");
    });

    it("accepts 'success' type", () => {
      const { result } = renderHook(() => useToast(), {
        wrapper: createWrapper(),
      });

      act(() => {
        result.current.addToast("Success!", "success");
      });

      expect(result.current.toasts[0].type).toBe("success");
    });

    it("accepts 'error' type", () => {
      const { result } = renderHook(() => useToast(), {
        wrapper: createWrapper(),
      });

      act(() => {
        result.current.addToast("Error!", "error");
      });

      expect(result.current.toasts[0].type).toBe("error");
    });

    it("accepts 'info' type explicitly", () => {
      const { result } = renderHook(() => useToast(), {
        wrapper: createWrapper(),
      });

      act(() => {
        result.current.addToast("Info", "info");
      });

      expect(result.current.toasts[0].type).toBe("info");
    });

    it("toasts auto-remove after 4000ms", () => {
      const { result } = renderHook(() => useToast(), {
        wrapper: createWrapper(),
      });

      act(() => {
        result.current.addToast("Test message");
      });

      expect(result.current.toasts).toHaveLength(1);

      // Advance time by 4000ms
      act(() => {
        vi.advanceTimersByTime(4000);
      });

      expect(result.current.toasts).toHaveLength(0);
    });

    it("toasts remain visible before 4000ms expires", () => {
      const { result } = renderHook(() => useToast(), {
        wrapper: createWrapper(),
      });

      act(() => {
        result.current.addToast("Test message");
      });

      // Advance time by 3999ms - toast should still be there
      act(() => {
        vi.advanceTimersByTime(3999);
      });

      expect(result.current.toasts).toHaveLength(1);
    });
  });

describe("removeToast", () => {
    it("manually removes a specific toast by ID", () => {
      const { result } = renderHook(() => useToast(), {
        wrapper: createWrapper(),
      });

      act(() => {
        result.current.addToast("First", "info");
        result.current.addToast("Second", "info");
        result.current.addToast("Third", "info");
      });

      expect(result.current.toasts).toHaveLength(3);

      // Remove the second toast (ID: 1)
      act(() => {
        result.current.removeToast(1);
      });

      expect(result.current.toasts).toHaveLength(2);
      expect(result.current.toasts.map((t) => t.id)).toEqual([0, 2]);
    });

    it("does nothing when removing non-existent toast ID", () => {
      const { result } = renderHook(() => useToast(), {
        wrapper: createWrapper(),
      });

      act(() => {
        result.current.addToast("Test", "info");
      });

      expect(result.current.toasts).toHaveLength(1);

      // Try to remove non-existent ID
      act(() => {
        result.current.removeToast(999);
      });

      // Toast should still be there
      expect(result.current.toasts).toHaveLength(1);
    });
  });

describe("multiple toasts", () => {
    it("can exist simultaneously", () => {
      const { result } = renderHook(() => useToast(), {
        wrapper: createWrapper(),
      });

      act(() => {
        result.current.addToast("First", "info");
        result.current.addToast("Second", "success");
        result.current.addToast("Third", "error");
      });

      expect(result.current.toasts).toHaveLength(3);
      expect(result.current.toasts[0].message).toBe("First");
      expect(result.current.toasts[1].message).toBe("Second");
      expect(result.current.toasts[2].message).toBe("Third");
    });

    it("auto-remove independently based on their creation time", () => {
      const { result } = renderHook(() => useToast(), {
        wrapper: createWrapper(),
      });

      // Add first toast at time 0
      act(() => {
        result.current.addToast("First", "info");
      });

      // Advance 2000ms and add second toast
      act(() => {
        vi.advanceTimersByTime(2000);
      });

      act(() => {
        result.current.addToast("Second", "info");
      });

      expect(result.current.toasts).toHaveLength(2);

      // Advance 2000ms more (total 4000ms from first toast)
      act(() => {
        vi.advanceTimersByTime(2000);
      });

      // First toast should be gone, second still there
      expect(result.current.toasts).toHaveLength(1);
      expect(result.current.toasts[0].message).toBe("Second");

      // Advance 2000ms more (total 4000ms from second toast)
      act(() => {
        vi.advanceTimersByTime(2000);
      });

      // Both should be gone
      expect(result.current.toasts).toHaveLength(0);
    });

    it("have unique IDs even with same message", () => {
      const { result } = renderHook(() => useToast(), {
        wrapper: createWrapper(),
      });

      act(() => {
        result.current.addToast("Same message", "info");
        result.current.addToast("Same message", "info");
        result.current.addToast("Same message", "info");
      });

      const ids = result.current.toasts.map((t) => t.id);
      const uniqueIds = new Set(ids);

      expect(uniqueIds.size).toBe(3); // All IDs should be unique
    });
  });

describe("timer cleanup on unmount", () => {
    it("clears pending timers when provider unmounts", () => {
      const clearTimeoutSpy = vi.spyOn(global, "clearTimeout");

      const { result, unmount } = renderHook(() => useToast(), {
        wrapper: createWrapper(),
      });

      act(() => {
        result.current.addToast("Test");
      });

      unmount();

      expect(clearTimeoutSpy).toHaveBeenCalled();

      clearTimeoutSpy.mockRestore();
    });

    it("does not trigger state update after unmount", () => {
      const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});

      const { result, unmount } = renderHook(() => useToast(), {
        wrapper: createWrapper(),
      });

      act(() => {
        result.current.addToast("Test");
      });

      unmount();

      // Advance timers past the auto-dismiss duration
      act(() => {
        vi.advanceTimersByTime(5000);
      });

      // No console.error should have been called (which would indicate a state update on unmounted component)
      expect(consoleSpy).not.toHaveBeenCalled();

      consoleSpy.mockRestore();
    });

    it("clears timers for manually removed toasts", () => {
      const clearTimeoutSpy = vi.spyOn(global, "clearTimeout");

      const { result } = renderHook(() => useToast(), {
        wrapper: createWrapper(),
      });

      act(() => {
        result.current.addToast("First", "info");
        result.current.addToast("Second", "info");
      });

      expect(result.current.toasts).toHaveLength(2);

      // Manually remove the first toast
      act(() => {
        result.current.removeToast(0);
      });

      expect(result.current.toasts).toHaveLength(1);
      expect(clearTimeoutSpy).toHaveBeenCalled();

      // Advance timers past 4000ms
      act(() => {
        vi.advanceTimersByTime(5000);
      });

      // The second toast should be auto-removed without issues
      expect(result.current.toasts).toHaveLength(0);

      clearTimeoutSpy.mockRestore();
    });

    it("continues auto-removing toasts after one is removed early", () => {
      const { result } = renderHook(() => useToast(), {
        wrapper: createWrapper(),
      });

      act(() => {
        result.current.addToast("First", "info");
        result.current.addToast("Second", "info");
      });

      // Remove first toast immediately
      act(() => {
        result.current.removeToast(0);
      });

      expect(result.current.toasts).toHaveLength(1);
      expect(result.current.toasts[0].message).toBe("Second");

      // Advance full 4000ms from when second toast was created
      act(() => {
        vi.advanceTimersByTime(4000);
      });

      // Second toast should still auto-remove
      expect(result.current.toasts).toHaveLength(0);
    });
  });
});