chore(ui): plugin tests (#797)

Author: dazy-ds

typescript/ui/__tests__/setup.tsx

@@ -1,5 +1,6 @@
 import { IconProps } from "@iconify/react";
 import "@testing-library/jest-dom";
+import { PropsWithChildren } from "react";
 import { afterEach, vi } from "vitest";
 
 vi.mock("react-router", () => ({
@@ -14,6 +15,27 @@ vi.mock("@iconify/react", () => ({
   ),
 }));
 
+// Disable framer-motion animations so portals/modals render immediately
+vi.mock("framer-motion", async () => {
+  return {
+    // No-op presence
+    AnimatePresence: ({ children }: { children: React.ReactNode }) => (
+      <>{children}</>
+    ),
+    // Render motion.* as simple divs
+    motion: new Proxy(
+      {},
+      {
+        get:
+          () =>
+          ({ children, ...props }: PropsWithChildren) => (
+            <div {...props}>{children}</div>
+          ),
+      },
+    ),
+  };
+});
+
 Object.defineProperty(window, "scrollTo", {
   value: vi.fn(),
   writable: true,

typescript/ui/__tests__/unit/ChatMessage.test.tsx

@@ -89,10 +89,6 @@ vi.mock("../../src/core/utils/plugins/PluginWrapper.tsx", () => ({
   },
 }));
 
-vi.mock("../DelayedTooltip.tsx", () => ({
-  DelayedTooltip: ({ children }: PropsWithChildren) => children,
-}));
-
 vi.mock("react-markdown", () => ({
   default: ({ children }: PropsWithChildren) => (
     <div className="markdown-content">{children}</div>
@@ -179,12 +175,14 @@ describe("ChatMessage", () => {
       const clipboardText = await navigator.clipboard.readText();
       expect(clipboardText).toBe("Hello, world!");
       await waitFor(async () => {
-        expect(
-          await screen.findByTestId("chat-message-copy-icon"),
-        ).toHaveAttribute("data-icon", "heroicons:check");
+        expect(await screen.findByText("heroicons:check"));
       });
-      // Not waiting for the icon to change due to current bug with fake timers and userEvent
-      // https://github.com/testing-library/user-event/issues/1115
+      await waitFor(
+        async () => {
+          expect(await screen.findByText("heroicons:clipboard"));
+        },
+        { timeout: 5000 },
+      );
     });
   });
 

typescript/ui/__tests__/unit/plugin/AuthPlugin/AuthGuard.test.tsx

@@ -0,0 +1,99 @@
+import { describe, it, beforeEach, vi, expect, Mock } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { useStore } from "zustand";
+import AuthGuard from "../../../../src/plugins/AuthPlugin/components/AuthGuard";
+
+// --- mocks ---
+vi.mock("zustand", async (importOriginal) => ({
+  ...(await importOriginal()),
+  useStore: vi.fn(),
+}));
+
+vi.mock("../../../../src/plugins/AuthPlugin/stores/authStore", () => ({
+  authStore: {},
+}));
+
+vi.mock(
+  "../../../../src/plugins/AuthPlugin/contexts/AuthStoreContext/AuthStoreContextProvider",
+  () => ({
+    AuthStoreContextProvider: ({ children }: { children: React.ReactNode }) => (
+      <div data-testid="auth-store-context">{children}</div>
+    ),
+  }),
+);
+
+vi.mock("../../../../src/plugins/AuthPlugin/components/AuthWatcher", () => ({
+  AuthWatcher: () => <div data-testid="auth-watcher" />,
+}));
+
+let mockPathname = "/";
+vi.mock("react-router", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-router")>();
+  return {
+    ...actual,
+    useLocation: () => ({ pathname: mockPathname }),
+    Navigate: ({ to, replace }: { to: string; replace?: boolean }) => (
+      <div
+        data-testid="navigate"
+        data-to={to}
+        data-replace={replace?.toString()}
+      />
+    ),
+  };
+});
+
+describe("AuthGuard", () => {
+  const useStoreMock = useStore as Mock;
+
+  beforeEach(() => {
+    vi.resetAllMocks();
+    mockPathname = "/"; // default
+  });
+
+  it("renders children if route is /login regardless of auth state", () => {
+    mockPathname = "/login";
+    useStoreMock.mockReturnValue(false);
+
+    render(
+      <AuthGuard>
+        <div data-testid="child">Login page child</div>
+      </AuthGuard>,
+    );
+
+    expect(screen.getByTestId("child")).toBeInTheDocument();
+    expect(screen.queryByTestId("auth-watcher")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("navigate")).not.toBeInTheDocument();
+  });
+
+  it("wraps children and renders AuthWatcher if authenticated", () => {
+    mockPathname = "/dashboard";
+    useStoreMock.mockReturnValue(true);
+
+    render(
+      <AuthGuard>
+        <div data-testid="child">Dashboard child</div>
+      </AuthGuard>,
+    );
+
+    expect(screen.getByTestId("child")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-store-context")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-watcher")).toBeInTheDocument();
+    expect(screen.queryByTestId("navigate")).not.toBeInTheDocument();
+  });
+
+  it("renders Navigate to /login if not authenticated", () => {
+    mockPathname = "/dashboard";
+    useStoreMock.mockReturnValue(false);
+
+    render(
+      <AuthGuard>
+        <div data-testid="child">Dashboard child</div>
+      </AuthGuard>,
+    );
+
+    const nav = screen.getByTestId("navigate");
+    expect(nav).toHaveAttribute("data-to", "/login");
+    expect(nav).toHaveAttribute("data-replace", "true");
+    expect(screen.queryByTestId("child")).not.toBeInTheDocument();
+  });
+});

typescript/ui/__tests__/unit/plugin/AuthPlugin/AuthWatcher.test.tsx

@@ -0,0 +1,139 @@
+import { useNavigate } from "react-router";
+import { describe, it, vi, beforeEach, afterEach, expect, Mock } from "vitest";
+import { useStore } from "zustand";
+import { useConversationProperty } from "../../../../src/core/stores/HistoryStore/selectors";
+import { AuthWatcher } from "../../../../src/plugins/AuthPlugin/components/AuthWatcher";
+import { act, useState } from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+vi.mock("zustand", async (importOriginal) => ({
+  ...(await importOriginal()),
+  useStore: vi.fn(),
+}));
+
+vi.mock("../../../../src/core/stores/HistoryStore/selectors", () => ({
+  useConversationProperty: vi.fn(),
+}));
+
+vi.mock("react-router", () => ({
+  useNavigate: vi.fn(),
+}));
+
+describe("AuthWatcher", () => {
+  let logoutMock: Mock;
+  let navigateMock: Mock;
+  let useStoreMock: Mock;
+  let useConversationPropertyMock: Mock;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    logoutMock = vi.fn();
+    navigateMock = vi.fn();
+    useStoreMock = useStore as Mock;
+    useConversationPropertyMock = useConversationProperty as Mock;
+
+    useStoreMock.mockReturnValue({
+      token: "token-123",
+      tokenExpiration: Date.now() + 1000, // 1 second in the future
+      logout: logoutMock,
+    });
+    useConversationPropertyMock.mockReturnValue(false);
+
+    (useNavigate as Mock).mockReturnValue(navigateMock);
+  });
+
+  afterEach(() => {
+    vi.clearAllTimers();
+    vi.resetAllMocks();
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  it("does nothing if token is null", () => {
+    useStoreMock.mockReturnValue({
+      token: null,
+      tokenExpiration: null,
+      logout: logoutMock,
+    });
+
+    render(<AuthWatcher />);
+    vi.advanceTimersByTime(10000);
+    expect(logoutMock).not.toHaveBeenCalled();
+    expect(navigateMock).not.toHaveBeenCalled();
+  });
+
+  it("logs out immediately if token has expired", () => {
+    const now = Date.now();
+    useStoreMock.mockReturnValue({
+      token: "token-123",
+      tokenExpiration: now - 1000, // expired
+      logout: logoutMock,
+    });
+    useConversationPropertyMock.mockReturnValue(false);
+
+    render(<AuthWatcher />);
+    vi.runAllTimers();
+
+    expect(logoutMock).toHaveBeenCalled();
+    expect(navigateMock).toHaveBeenCalledWith("/login");
+  });
+
+  it("waits for token expiration and then logs out", () => {
+    const now = Date.now();
+    useStoreMock.mockReturnValue({
+      token: "token-123",
+      tokenExpiration: now + 5000, // expires in 5s
+      logout: logoutMock,
+    });
+    useConversationPropertyMock.mockReturnValue(false);
+
+    render(<AuthWatcher />);
+    vi.advanceTimersByTime(4999);
+    expect(logoutMock).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(2); // pass expiration
+    expect(logoutMock).toHaveBeenCalled();
+    expect(navigateMock).toHaveBeenCalledWith("/login");
+  });
+
+  it("waits until conversations finish loading before logging out", async () => {
+    const now = Date.now();
+    useStoreMock.mockReturnValue({
+      token: "token-123",
+      tokenExpiration: now - 1000,
+      logout: logoutMock,
+    });
+
+    const TestWrapper = () => {
+      const [loading, setLoading] = useState(true);
+      useConversationPropertyMock.mockReturnValue(loading);
+
+      return (
+        <>
+          <AuthWatcher />
+          <button
+            onClick={() => {
+              setLoading(false);
+            }}
+          >
+            finish loading
+          </button>
+        </>
+      );
+    };
+
+    render(<TestWrapper />);
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(logoutMock).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByText("finish loading"));
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    expect(logoutMock).toHaveBeenCalledTimes(1);
+    expect(navigateMock).toHaveBeenCalledWith("/login");
+  });
+});