@agent-native/dispatch 0.13.13 → 0.14.1

package/src/components/layout/Layout.spec.tsx

@@ -0,0 +1,154 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { MemoryRouter } from "react-router";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { TooltipProvider } from "../ui/tooltip";
+import { NavContent } from "./Layout";
+
+const clientState = vi.hoisted(() => ({
+  createThread: vi.fn<() => Promise<string | null>>(),
+  switchThread: vi.fn(),
+  threads: [] as Array<Record<string, unknown>>,
+}));
+
+vi.mock("@agent-native/core/client", () => ({
+  AgentSidebar: ({ children }: { children: React.ReactNode }) => children,
+  FeedbackButton: () => <div>Feedback</div>,
+  appBasePath: () => "",
+  appPath: (path: string) => path,
+  focusAgentChat: vi.fn(),
+  navigateWithAgentChatViewTransition: (
+    navigate: (path: string) => void,
+    path: string,
+  ) => navigate(path),
+  useActionQuery: () => ({ data: undefined }),
+  useAgentChatHomeHandoff: () => false,
+  useAgentChatHomeHandoffLinks: vi.fn(),
+  useChatThreads: () => ({
+    threads: clientState.threads,
+    activeThreadId: "active-thread",
+    isLoading: false,
+    createThread: clientState.createThread,
+    switchThread: clientState.switchThread,
+    renameThread: vi.fn(),
+    refreshThreads: vi.fn(),
+  }),
+  useFormatters: () => ({
+    formatDate: () => "Jan 1",
+  }),
+  useT: () => (key: string, values?: Record<string, unknown>) => {
+    const messages: Record<string, string> = {
+      "dispatch.nav.chat": "Chat",
+      "dispatch.nav.overview": "Overview",
+      "dispatch.nav.apps": "Apps",
+      "dispatch.nav.operate": "Operate",
+      "dispatch.nav.advanced": "Advanced",
+      "dispatch.sidebar.newChat": "New chat",
+      "dispatch.sidebar.newDispatchChat": "New Dispatch chat",
+      "dispatch.sidebar.renameChat": "Rename chat",
+      "dispatch.sidebar.chatOptions": `Options for ${values?.title ?? ""}`,
+      "dispatch.sidebar.renameThread": `Rename ${values?.title ?? ""}`,
+      "sidebar.collapseSidebar": "Collapse sidebar",
+      "sidebar.expandSidebar": "Expand sidebar",
+    };
+    return messages[key] ?? String(values?.defaultValue ?? key);
+  },
+}));
+
+vi.mock("@agent-native/core/client/extensions", () => ({
+  ExtensionsSidebarSection: () => <div>Extensions</div>,
+}));
+
+vi.mock("@agent-native/core/client/org", () => ({
+  InvitationBanner: () => null,
+  OrgSwitcher: () => <div>Organization</div>,
+}));
+
+describe("Dispatch NavContent", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => {
+      callback(0);
+      return 0;
+    });
+    clientState.createThread.mockResolvedValue("new-thread");
+    clientState.switchThread.mockReset();
+    clientState.threads = [
+      {
+        id: "active-thread",
+        title: "Current Dispatch work",
+        messageCount: 2,
+        updatedAt: Date.now(),
+        createdAt: Date.now(),
+      },
+      {
+        id: "older-thread",
+        title: "Earlier Dispatch work",
+        messageCount: 1,
+        updatedAt: Date.now() - 5 * 60_000,
+        createdAt: Date.now() - 5 * 60_000,
+      },
+    ];
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("uses the quieter Analytics-style chat history and retains thread actions", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/chat/active-thread"]}>
+          <TooltipProvider>
+            <NavContent />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    expect(container.textContent).not.toContain("Chats");
+    expect(container.textContent).toContain("Current Dispatch work");
+    expect(container.textContent).toContain("Earlier Dispatch work");
+    expect(container.textContent).toContain("New chat");
+    expect(container.textContent).toContain("5m");
+    expect(
+      [...container.querySelectorAll("div")].some((element) =>
+        element.className.includes("group/item"),
+      ),
+    ).toBe(true);
+    expect(
+      container.querySelector('img[src="/agent-native-icon-light.svg"]')
+        ?.parentElement?.className,
+    ).not.toContain("border");
+    expect(container.textContent).not.toContain("Workspace control plane");
+
+    const threadButton = [...container.querySelectorAll("button")].find(
+      (button) => button.textContent === "Earlier Dispatch work",
+    );
+    expect(threadButton).toBeDefined();
+    await act(async () => {
+      threadButton?.click();
+    });
+    expect(clientState.switchThread).toHaveBeenCalledWith("older-thread");
+
+    const newChatButton = [...container.querySelectorAll("button")].find(
+      (button) => button.textContent?.includes("New chat"),
+    );
+    expect(newChatButton).toBeDefined();
+    await act(async () => {
+      newChatButton?.click();
+    });
+    expect(clientState.createThread).toHaveBeenCalledOnce();
+    expect(clientState.switchThread).toHaveBeenCalledWith("new-thread");
+  });
+});