PaperClipAI/ui/src/components/AppConnectionSidebar.test.tsx

// @vitest-environment jsdom

import { flushSync } from "react-dom";
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { AppDetailSidebar } from "./AppConnectionSidebar";

const sidebarNavItemMock = vi.hoisted(() => vi.fn());
const currentPath = vi.hoisted(() => ({ value: "/apps/conn-1/permissions" }));
const mockToolsApi = vi.hoisted(() => ({
  getConnection: vi.fn(),
  listApplications: vi.fn(),
  listConnections: vi.fn(),
  listGallery: vi.fn(),
  listAppsAttention: vi.fn(),
}));

vi.mock("@/lib/router", () => ({
  Link: ({
    children,
    to,
    onClick,
    className,
  }: {
    children: React.ReactNode;
    to: string;
    onClick?: () => void;
    className?: string;
  }) => (
    <a href={to} onClick={onClick} className={className}>
      {children}
    </a>
  ),
}));

vi.mock("@/context/CompanyContext", () => ({
  useCompany: () => ({
    selectedCompanyId: "company-1",
  }),
}));

vi.mock("@/context/SidebarContext", () => ({
  useSidebar: () => ({
    isMobile: false,
    setSidebarOpen: vi.fn(),
  }),
}));

vi.mock("@/api/tools", () => ({
  toolsApi: mockToolsApi,
}));

vi.mock("@/pages/apps/AppLogo", () => ({
  AppLogo: ({
    name,
    brandKey,
    logoUrl,
    allowRemoteFallback,
  }: {
    name: string;
    brandKey?: string | null;
    logoUrl?: string | null;
    allowRemoteFallback?: boolean;
  }) => (
    <span
      data-app-logo={name}
      data-brand-key={brandKey ?? ""}
      data-logo-url={logoUrl ?? ""}
      data-allow-remote-fallback={allowRemoteFallback ? "true" : "false"}
    />
  ),
}));

vi.mock("./SidebarNavItem", () => ({
  SidebarNavItem: (props: {
    to: string;
    label: string;
    end?: boolean;
    badge?: number;
    badgeTone?: string;
    badgeLabel?: string;
  }) => {
    sidebarNavItemMock(props);
    return (
      <div data-to={props.to} data-active={props.to === currentPath.value ? "true" : "false"}>
        {props.label}
        {props.badge ? ` ${props.badge}` : ""}
      </div>
    );
  },
}));

// eslint-disable-next-line @typescript-eslint/no-explicit-any
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;

async function act(callback: () => void | Promise<void>) {
  let result: void | Promise<void> = undefined;
  flushSync(() => {
    result = callback();
  });
  await result;
}

async function flushReact() {
  for (let i = 0; i < 3; i += 1) {
    await act(async () => {
      await Promise.resolve();
      await new Promise((resolve) => window.setTimeout(resolve, 0));
    });
  }
}

function connection(overrides: Record<string, unknown> = {}) {
  return {
    id: "conn-1",
    applicationId: "app-1",
    name: "GitHub",
    transport: "mcp_remote",
    status: "active",
    healthStatus: "healthy",
    enabled: true,
    config: {},
    transportConfig: {},
    ...overrides,
  };
}

describe("AppConnectionSidebar", () => {
  let container: HTMLDivElement;
  let root: ReturnType<typeof createRoot>;

  beforeEach(() => {
    container = document.createElement("div");
    document.body.appendChild(container);
    currentPath.value = "/apps/conn-1/permissions";
    mockToolsApi.getConnection.mockResolvedValue(connection());
    mockToolsApi.listApplications.mockResolvedValue({
      applications: [{
        id: "app-1",
        applicationKey: "github",
        name: "GitHub",
        description: "GitHub app",
        status: "active",
      }],
    });
    mockToolsApi.listConnections.mockResolvedValue({
      connections: [connection({ id: "archived-1", applicationId: "app-1", status: "archived" })],
    });
    mockToolsApi.listGallery.mockResolvedValue({
      apps: [{ key: "github", name: "GitHub", logoUrl: "https://example.test/github.png" }],
    });
    mockToolsApi.listAppsAttention.mockResolvedValue({
      apps: [
        {
          connection: connection(),
          pendingActionRequestCount: 2,
          quarantinedCatalogEntryCount: 3,
          healthNeedsAttention: false,
          reasons: ["pending_action_requests", "quarantined_catalog_entries"],
        },
      ],
      totals: {},
    });
  });

  afterEach(() => {
    flushSync(() => root?.unmount());
    container.remove();
    document.body.innerHTML = "";
    vi.clearAllMocks();
  });

  async function renderSidebar(element = <AppDetailSidebar kind="connection" connectionId="conn-1" />) {
    const queryClient = new QueryClient({
      defaultOptions: { queries: { retry: false } },
    });
    root = createRoot(container);
    await act(async () => {
      root.render(
        <QueryClientProvider client={queryClient}>
          {element}
        </QueryClientProvider>,
      );
    });
    await flushReact();
  }

  it("renders a back link and the connected app tabs with Test after Setup", async () => {
    await renderSidebar();

    expect(container.querySelector('a[href="/apps/connections"]')?.textContent).toContain("All apps");
    expect(container.textContent).toContain("GitHub");
    expect(container.querySelectorAll("[data-to]").length).toBe(5);
    expect(sidebarNavItemMock).toHaveBeenCalledWith(expect.objectContaining({ to: "/apps/conn-1/setup", label: "Setup", end: true }));
    expect(sidebarNavItemMock).toHaveBeenCalledWith(expect.objectContaining({ to: "/apps/conn-1/review", label: "Review", badge: 3, badgeTone: "danger" }));
    expect(sidebarNavItemMock).toHaveBeenCalledWith(expect.objectContaining({ to: "/apps/conn-1/permissions", label: "Permissions", end: true }));
    expect(sidebarNavItemMock).toHaveBeenCalledWith(expect.objectContaining({ to: "/apps/conn-1/test", label: "Test", end: true }));
    expect(sidebarNavItemMock).toHaveBeenCalledWith(expect.objectContaining({ to: "/apps/conn-1/activity", label: "Activity", end: true }));
    expect(sidebarNavItemMock).not.toHaveBeenCalledWith(expect.objectContaining({ label: "Advanced" }));
  });

  it("marks the current tab active through the nav item target", async () => {
    await renderSidebar();

    expect(container.querySelector('[data-to="/apps/conn-1/permissions"]')?.getAttribute("data-active")).toBe("true");
    expect(container.querySelector('[data-to="/apps/conn-1/setup"]')?.getAttribute("data-active")).toBe("false");
  });

  it("uses the application key for a customized connection display name", async () => {
    mockToolsApi.getConnection.mockResolvedValue(connection({ name: "Dotta's GitHub" }));

    await renderSidebar();

    expect(container.querySelector("[data-app-logo]")?.getAttribute("data-brand-key")).toBe("github");
    expect(container.querySelector("[data-app-logo]")?.getAttribute("data-allow-remote-fallback")).toBe("true");
  });

  it("keeps remote fallback disabled until the stable application key resolves", async () => {
    let resolveApplications!: (value: {
      applications: Array<{ id: string; applicationKey: string; name: string; status: string }>;
    }) => void;
    mockToolsApi.getConnection.mockResolvedValue(connection({ name: "Dotta's source control" }));
    mockToolsApi.listApplications.mockReturnValueOnce(new Promise((resolve) => {
      resolveApplications = resolve;
    }));

    await renderSidebar();

    expect(container.querySelector("[data-app-logo]")?.getAttribute("data-brand-key")).toBe("");
    expect(container.querySelector("[data-app-logo]")?.getAttribute("data-allow-remote-fallback")).toBe("false");

    await act(async () => {
      resolveApplications({
        applications: [{ id: "app-1", applicationKey: "github", name: "GitHub", status: "active" }],
      });
    });
    await flushReact();

    expect(container.querySelector("[data-app-logo]")?.getAttribute("data-brand-key")).toBe("github");
    expect(container.querySelector("[data-app-logo]")?.getAttribute("data-allow-remote-fallback")).toBe("true");
  });

  it("allows remote fallback after application identity lookup fails", async () => {
    mockToolsApi.listApplications.mockRejectedValueOnce(new Error("Application lookup unavailable"));

    await renderSidebar();

    expect(container.querySelector("[data-app-logo]")?.getAttribute("data-allow-remote-fallback")).toBe("true");
  });

  it("keeps a customized connection logo when application identity lookup fails", async () => {
    mockToolsApi.getConnection.mockResolvedValue(connection({
      name: "Dotta's source control",
      config: { sourceTemplateKey: "github" },
    }));
    mockToolsApi.listApplications.mockRejectedValueOnce(new Error("Application lookup unavailable"));

    await renderSidebar();

    const logo = container.querySelector("[data-app-logo]");
    expect(logo?.getAttribute("data-brand-key")).toBe("github");
    expect(logo?.getAttribute("data-logo-url")).toBe("https://example.test/github.png");
    expect(logo?.getAttribute("data-allow-remote-fallback")).toBe("true");
  });

  it("renders application-mode tabs under the not-connected app route", async () => {
    currentPath.value = "/apps/app/app-1/review";

    await renderSidebar(<AppDetailSidebar kind="application" applicationId="app-1" />);

    expect(container.querySelector('a[href="/apps/connections"]')?.textContent).toContain("All apps");
    expect(container.textContent).toContain("GitHub");
    expect(mockToolsApi.getConnection).not.toHaveBeenCalled();
    expect(sidebarNavItemMock).toHaveBeenCalledWith(expect.objectContaining({ to: "/apps/app/app-1/setup", label: "Setup", end: true }));
    expect(sidebarNavItemMock).toHaveBeenCalledWith(expect.objectContaining({ to: "/apps/app/app-1/review", label: "Review", end: true }));
    expect(sidebarNavItemMock).toHaveBeenCalledWith(expect.objectContaining({ to: "/apps/app/app-1/permissions", label: "Permissions", end: true }));
    expect(sidebarNavItemMock).toHaveBeenCalledWith(expect.objectContaining({ to: "/apps/app/app-1/activity", label: "Activity", end: true }));
    expect(sidebarNavItemMock).not.toHaveBeenCalledWith(expect.objectContaining({ label: "Advanced" }));
    expect(container.querySelector('[data-to="/apps/app/app-1/review"]')?.getAttribute("data-active")).toBe("true");
    // The Test tab needs a live connection, so it is hidden in application mode.
    expect(container.querySelector('[data-to="/apps/app/app-1/test"]')).toBeNull();
    expect(container.querySelectorAll("[data-to]").length).toBe(4);
  });

  it("keeps rendering a connection sidebar when its connection is unavailable", async () => {
    mockToolsApi.getConnection.mockResolvedValue(undefined);
    mockToolsApi.listGallery.mockResolvedValue({ apps: [] });
    mockToolsApi.listAppsAttention.mockResolvedValue({ apps: [], totals: {} });

    await renderSidebar();

    expect(container.textContent).toContain("App");
    expect(container.querySelector('a[href="/apps/connections"]')?.textContent).toContain("All apps");
    expect(container.querySelectorAll("[data-to]").length).toBe(5);
  });

  it("keeps rendering an application sidebar when its application is unavailable", async () => {
    mockToolsApi.listApplications.mockResolvedValue({ applications: [] });
    mockToolsApi.listConnections.mockResolvedValue({ connections: [] });
    mockToolsApi.listGallery.mockResolvedValue({ apps: [] });
    mockToolsApi.listAppsAttention.mockResolvedValue({ apps: [], totals: {} });

    await renderSidebar(<AppDetailSidebar kind="application" applicationId="missing-app" />);

    expect(container.textContent).toContain("App");
    expect(container.querySelector('a[href="/apps/connections"]')?.textContent).toContain("All apps");
    expect(container.querySelectorAll("[data-to]").length).toBe(4);
  });
});