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

// @vitest-environment jsdom

import type { ReactNode } from "react";
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 { queryKeys } from "@/lib/queryKeys";
import { SidebarCompanyMenu } from "./SidebarCompanyMenu";
import { SidebarCompanyMenu as SidebarCompanyMenuProduction } from "./SidebarCompanyMenu.production";

vi.mock("./PluginOrganizationSwitcher", () => ({ PluginOrganizationSwitcher: ({ children }: { children: ReactNode }) => children }));

const mockAuthApi = vi.hoisted(() => ({
  getSession: vi.fn(),
  signInEmail: vi.fn(),
  signUpEmail: vi.fn(),
  getProfile: vi.fn(),
  updateProfile: vi.fn(),
  signOut: vi.fn(),
}));
const mockNavigate = vi.hoisted(() => vi.fn());
const mockOpenOnboarding = vi.hoisted(() => vi.fn());
const mockSetSelectedCompanyId = vi.hoisted(() => vi.fn());
const mockSetSidebarOpen = vi.hoisted(() => vi.fn());
const mockLocation = vi.hoisted(() => ({ pathname: "/PAP/dashboard" }));
const mockSidebarPreferencesApi = vi.hoisted(() => ({
  getCompanyOrder: vi.fn(),
  updateCompanyOrder: vi.fn(),
}));
const mockNavigateTopLevel = vi.hoisted(() => vi.fn());

vi.mock("@/api/auth", () => ({
  authApi: mockAuthApi,
}));

vi.mock("@/lib/browserNavigation", () => ({
  navigateTopLevel: mockNavigateTopLevel,
}));

vi.mock("@/api/sidebarPreferences", () => ({
  sidebarPreferencesApi: mockSidebarPreferencesApi,
}));

vi.mock("@/lib/router", () => ({
  Link: ({ children, to, ...props }: { children: ReactNode; to: string }) => (
    <a href={to} {...props}>{children}</a>
  ),
  useLocation: () => mockLocation,
  useNavigate: () => mockNavigate,
}));

// Overridable so the list-unavailable branch can be exercised; null means "use
// the default three companies below".
const mockCompanyState = vi.hoisted(() => ({
  companies: null as unknown[] | null,
  companyListUnavailable: false,
  retryCompanies: vi.fn(),
}));

vi.mock("@/context/CompanyContext", () => ({
  useCompany: () => ({
    companyListUnavailable: mockCompanyState.companyListUnavailable,
    retryCompanies: mockCompanyState.retryCompanies,
    companies: mockCompanyState.companies ?? [
      {
        id: "company-1",
        issuePrefix: "PAP",
        name: "Acme Labs",
        status: "active",
      },
      {
        id: "company-2",
        issuePrefix: "STR",
        name: "Strata",
        status: "active",
      },
      {
        id: "company-3",
        issuePrefix: "ANA",
        name: "Anachronist Wiki",
        status: "active",
      },
    ],
    selectedCompany: {
      id: "company-1",
      issuePrefix: "PAP",
      name: "Acme Labs",
      logoUrl: "/api/assets/logo-asset-1/content",
      status: "active",
    },
    setSelectedCompanyId: mockSetSelectedCompanyId,
  }),
}));

vi.mock("@/context/DialogContext", () => ({
  useDialogActions: () => ({
    openOnboarding: mockOpenOnboarding,
  }),
}));

vi.mock("./CompanyPatternIcon", () => ({
  CompanyPatternIcon: ({ companyName, logoUrl }: { companyName: string; logoUrl?: string | null }) => (
    <span aria-hidden="true" data-logo-url={logoUrl ?? undefined}>{companyName.slice(0, 1)}</span>
  ),
}));

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

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

function act(callback: () => void) {
  flushSync(callback);
}

async function flushReact() {
  await Promise.resolve();
  await new Promise((resolve) => window.setTimeout(resolve, 0));
}

const CLOUD_HEALTH = {
  status: "ok" as const,
  cloud: {
    managed: true as const,
    managedBy: "paperclip-cloud" as const,
    stackSlug: "acme-labs",
    cloudBaseUrl: "https://cloud.example.test",
  },
};

describe("SidebarCompanyMenu", () => {
  let container: HTMLDivElement;

  beforeEach(() => {
    container = document.createElement("div");
    document.body.appendChild(container);
    mockAuthApi.getSession.mockResolvedValue({
      session: { id: "session-1", userId: "user-1" },
      user: {
        id: "user-1",
        name: "Jane Example",
        email: "jane@example.com",
      },
    });
    mockAuthApi.signOut.mockResolvedValue(undefined);
    mockSidebarPreferencesApi.getCompanyOrder.mockResolvedValue({
      orderedIds: ["company-1", "company-2", "company-3"],
      updatedAt: null,
    });
    mockSidebarPreferencesApi.updateCompanyOrder.mockResolvedValue({
      orderedIds: ["company-1", "company-2", "company-3"],
      updatedAt: null,
    });
    mockLocation.pathname = "/PAP/dashboard";
    mockCompanyState.companies = null;
    mockCompanyState.companyListUnavailable = false;
  });

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

  function renderMenu(options: { cloud?: boolean; health?: unknown; production?: boolean } = {}) {
    const queryClient = new QueryClient({
      defaultOptions: { queries: { retry: false } },
    });
    // CloudAccessGate owns the health fetch in the app; seeding the cache is how
    // useCloudInstance sees a cloud-managed instance under test.
    if (options.cloud || options.health) {
      queryClient.setQueryData(queryKeys.health, options.health ?? CLOUD_HEALTH);
    }
    const root = createRoot(container);
    const Menu = options.production ? SidebarCompanyMenuProduction : SidebarCompanyMenu;
    act(() => {
      root.render(
        <QueryClientProvider client={queryClient}>
          <Menu />
        </QueryClientProvider>,
      );
    });
    return { root, queryClient };
  }

  async function openMenu(ariaLabel: string) {
    const trigger = container.querySelector(`button[aria-label="${ariaLabel}"]`);
    expect(trigger).not.toBeNull();
    act(() => {
      trigger?.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, button: 0 }));
      trigger?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });
    await flushReact();
  }

  // This menu is the one the app renders, so it is the only place a customer can
  // act on a failed company list. Saying "No companies" there states something
  // about the account that a failed request cannot support, and leaves the tab
  // with no way back short of a browser reload.
  it("offers a way back when the company list could not be loaded", async () => {
    mockCompanyState.companies = [];
    mockCompanyState.companyListUnavailable = true;

    const { root } = renderMenu();
    await flushReact();
    await openMenu("Open Acme Labs organization switcher");

    expect(document.body.textContent).toContain("Couldn't load organizations");
    expect(document.body.textContent).not.toContain("No organizations");

    const retryItem = Array.from(document.body.querySelectorAll('[role="menuitem"]')).find(
      (item) => item.textContent?.includes("Try again"),
    );
    expect(retryItem).not.toBeUndefined();

    act(() => {
      retryItem?.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, button: 0 }));
      retryItem?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });
    await flushReact();

    expect(mockCompanyState.retryCompanies).toHaveBeenCalled();

    act(() => {
      root.unmount();
    });
  });

  it("still reports an account that owns no companies as empty, not broken", async () => {
    mockCompanyState.companies = [];
    mockCompanyState.companyListUnavailable = false;

    const { root } = renderMenu();
    await flushReact();
    await openMenu("Open Acme Labs organization switcher");

    expect(document.body.textContent).toContain("No organizations");
    expect(document.body.textContent).not.toContain("Couldn't load organizations");

    act(() => {
      root.unmount();
    });
  });

  it("uses company-centric create copy without the chat flag", async () => {
    const root = createRoot(container);
    const queryClient = new QueryClient({
      defaultOptions: { queries: { retry: false } },
    });

    act(() => {
      root.render(
        <QueryClientProvider client={queryClient}>
          <SidebarCompanyMenu />
        </QueryClientProvider>,
      );
    });
    await flushReact();
    await flushReact();

    const trigger = container.querySelector('button[aria-label="Open Acme Labs organization switcher"]');
    expect(trigger).not.toBeNull();
    expect(trigger?.classList).toContain("px-4");
    expect(trigger?.classList).toContain("has-[>svg]:px-4");
    expect(trigger?.classList).toContain("hover:bg-sidebar-accent");
    expect(trigger?.classList).toContain("hover:text-sidebar-accent-foreground");
    expect(trigger?.classList).toContain("dark:hover:bg-sidebar-accent");
    expect(trigger?.classList).toContain("dark:hover:text-sidebar-accent-foreground");
    expect(trigger?.classList).not.toContain("hover:bg-background");
    expect(trigger?.classList).not.toContain("dark:hover:bg-background");
    expect(trigger?.classList).not.toContain("dark:hover:bg-accent/50");
    act(() => {
      trigger?.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, button: 0 }));
      trigger?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });
    await flushReact();

    expect(document.body.textContent).toContain("Create organization");
    expect(document.body.textContent).not.toContain("Add company...");

    act(() => {
      root.unmount();
    });
  });

  it("shows the requested company actions and signs out through the dropdown", async () => {
    const root = createRoot(container);
    const queryClient = new QueryClient({
      defaultOptions: { queries: { retry: false } },
    });
    // The invite shortcut waits for the health response before it shows, so
    // resolve it here the way CloudAccessGate does in the app.
    queryClient.setQueryData(queryKeys.health, { status: "ok" });

    act(() => {
      root.render(
        <QueryClientProvider client={queryClient}>
          <SidebarCompanyMenu />
        </QueryClientProvider>,
      );
    });
    await flushReact();
    await flushReact();

    expect(container.textContent).toContain("Acme Labs");

    const trigger = container.querySelector('button[aria-label="Open Acme Labs organization switcher"]');
    expect(trigger).not.toBeNull();

    act(() => {
      trigger?.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, button: 0 }));
      trigger?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });
    await flushReact();

    expect(document.body.textContent).toContain("Organizations");
    expect(document.body.textContent).toContain("Edit");
    expect(document.body.textContent).toContain("Strata");
    expect(document.body.textContent).toContain("ANA");
    expect(document.body.textContent).toContain("Create organization");
    expect(document.body.textContent).toContain("Invite people to Acme Labs");
    expect(document.body.textContent).not.toContain("Company settings");
    expect(document.body.textContent).toContain("Sign out");

    const signOutButton = Array.from(document.body.querySelectorAll('[data-slot="dropdown-menu-item"]'))
      .find((element) => element.textContent?.includes("Sign out"));
    expect(signOutButton).toBeTruthy();

    act(() => {
      signOutButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });
    await flushReact();

    expect(mockAuthApi.signOut).toHaveBeenCalledTimes(1);
    expect(mockNavigateTopLevel).not.toHaveBeenCalled();
    expect(queryClient.getQueryState(queryKeys.health)?.isInvalidated).toBe(true);
    expect(document.body.textContent).not.toContain("Organizations");

    act(() => {
      root.unmount();
    });
  });

  it("shows the production-shell invite shortcut when no surface is hidden", async () => {
    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
    queryClient.setQueryData(queryKeys.health, { status: "ok" });
    const root = createRoot(container);
    act(() => {
      root.render(
        <QueryClientProvider client={queryClient}>
          <SidebarCompanyMenuProduction />
        </QueryClientProvider>,
      );
    });
    await flushReact();
    await flushReact();

    await openMenu("Open Acme Labs company switcher");

    expect(document.body.textContent).toContain("Invite people to Acme Labs");

    act(() => {
      root.unmount();
    });
  });

  it("hides the production-shell invite shortcut when the operator hides the invites surface", async () => {
    // The production shell (streamlined UI disabled) must honor
    // PAPERCLIP_HIDDEN_SETTINGS like the streamlined menu — this is the knob
    // Paperclip Cloud uses to drop the shortcut on its managed stacks.
    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
    queryClient.setQueryData(queryKeys.health, { status: "ok", hiddenSettings: ["company.invites"] });
    const root = createRoot(container);
    act(() => {
      root.render(
        <QueryClientProvider client={queryClient}>
          <SidebarCompanyMenuProduction />
        </QueryClientProvider>,
      );
    });
    await flushReact();
    await flushReact();

    await openMenu("Open Acme Labs company switcher");

    expect(document.body.textContent).toContain("Organizations");
    expect(document.body.textContent).not.toContain("Invite people");

    act(() => {
      root.unmount();
    });
  });

  it("keeps the invite shortcut out of the menu until hidden settings resolve", async () => {
    // No health data in the cache: the hidden-settings set is unknown, so the
    // shortcut must not flash in and then disappear once the response lands.
    const { root } = renderMenu();
    await flushReact();
    await flushReact();

    await openMenu("Open Acme Labs organization switcher");

    expect(document.body.textContent).toContain("Organizations");
    expect(document.body.textContent).not.toContain("Invite people");

    act(() => {
      root.unmount();
    });
  });

  it("hides the invite shortcut when the operator hides the invites surface", async () => {
    const { root } = renderMenu({
      health: { status: "ok", hiddenSettings: ["company.invites"] },
    });
    await flushReact();
    await flushReact();

    await openMenu("Open Acme Labs organization switcher");

    expect(document.body.textContent).toContain("Organizations");
    expect(document.body.textContent).not.toContain("Invite people");

    act(() => {
      root.unmount();
    });
  });

  it("hides the invite shortcut when the operator hides the members page", async () => {
    const { root } = renderMenu({
      health: { status: "ok", hiddenSettings: ["company.members"] },
    });
    await flushReact();
    await flushReact();

    await openMenu("Open Acme Labs organization switcher");

    expect(document.body.textContent).toContain("Organizations");
    expect(document.body.textContent).not.toContain("Invite people");

    act(() => {
      root.unmount();
    });
  });

  it("toggles company order editing without selecting a company", async () => {
    const root = createRoot(container);
    const queryClient = new QueryClient({
      defaultOptions: { queries: { retry: false } },
    });

    act(() => {
      root.render(
        <QueryClientProvider client={queryClient}>
          <SidebarCompanyMenu />
        </QueryClientProvider>,
      );
    });
    await flushReact();
    await flushReact();

    const trigger = container.querySelector('button[aria-label="Open Acme Labs organization switcher"]');
    expect(trigger).not.toBeNull();

    act(() => {
      trigger?.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, button: 0 }));
      trigger?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });
    await flushReact();

    const editButton = Array.from(document.body.querySelectorAll("button"))
      .find((element) => element.textContent === "Edit");
    expect(editButton).toBeTruthy();

    act(() => {
      editButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });
    await flushReact();

    expect(document.body.textContent).toContain("Done");
    expect(document.body.textContent).not.toContain("PAP");
    expect(document.body.textContent).not.toContain("ANA");
    const reorderButton = document.body.querySelector<HTMLButtonElement>(
      'button[aria-label="Reorder Strata"]',
    );
    expect(reorderButton).toBeTruthy();
    expect(reorderButton?.classList).toContain("size-8");

    const strataItem = Array.from(document.body.querySelectorAll('[data-slot="dropdown-menu-item"]'))
      .find((element) => element.textContent?.includes("Strata"));
    expect(strataItem).toBeTruthy();

    act(() => {
      strataItem?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });
    await flushReact();

    expect(mockSetSelectedCompanyId).not.toHaveBeenCalled();
    expect(mockNavigate).not.toHaveBeenCalled();

    act(() => {
      root.unmount();
    });
  });

  it("navigates to the selected company dashboard from company-prefixed routes", async () => {
    mockLocation.pathname = "/PAP/issues";
    const root = createRoot(container);
    const queryClient = new QueryClient({
      defaultOptions: { queries: { retry: false } },
    });

    act(() => {
      root.render(
        <QueryClientProvider client={queryClient}>
          <SidebarCompanyMenu />
        </QueryClientProvider>,
      );
    });
    await flushReact();
    await flushReact();

    const trigger = container.querySelector('button[aria-label="Open Acme Labs organization switcher"]');
    expect(trigger).not.toBeNull();

    act(() => {
      trigger?.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, button: 0 }));
      trigger?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });
    await flushReact();

    const strataItem = Array.from(document.body.querySelectorAll('[data-slot="dropdown-menu-item"]'))
      .find((element) => element.textContent?.includes("Strata"));
    expect(strataItem).toBeTruthy();

    act(() => {
      strataItem?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });
    await flushReact();

    expect(mockSetSelectedCompanyId).toHaveBeenCalledWith("company-2");
    expect(mockNavigate).toHaveBeenCalledWith("/STR/dashboard");

    act(() => {
      root.unmount();
    });
  });

  it("keeps the in-app company wizard and never leaves the app when self-hosted", async () => {
    const { root } = renderMenu();
    await flushReact();
    await flushReact();

    await openMenu("Open Acme Labs organization switcher");

    const createItem = Array.from(document.body.querySelectorAll('[data-slot="dropdown-menu-item"]'))
      .find((element) => element.textContent?.includes("Create organization"));
    expect(createItem).toBeTruthy();

    act(() => {
      createItem?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });
    await flushReact();

    expect(mockOpenOnboarding).toHaveBeenCalledTimes(1);
    expect(mockNavigateTopLevel).not.toHaveBeenCalled();

    act(() => {
      root.unmount();
    });
  });

  // The trigger sits in a fixed 240px sidebar header beside two shrink-0
  // controls, so a long name may only truncate — never widen the row and push
  // the chevron, search, and collapse controls out of the panel. Truncation
  // needs `min-w-0` on EVERY flex link of the chain (a flex item's default
  // `min-width:auto` floors it at its content width), which is invisible to
  // behavioural assertions, so the class chain itself is the contract.
  it("lets a long workspace name truncate instead of widening the trigger", async () => {
    const { root } = renderMenu();
    await flushReact();

    const trigger = container.querySelector('button[aria-label="Open Acme Labs organization switcher"]');
    expect(trigger).not.toBeNull();
    expect(trigger?.className).toContain("min-w-0");

    const labelRow = trigger?.firstElementChild;
    expect(labelRow?.className).toContain("min-w-0");

    const label = labelRow?.lastElementChild;
    expect(label?.textContent).toBe("Acme Labs");
    expect(label?.className).toContain("min-w-0");
    expect(label?.className).toContain("truncate");
    // A truncated name stays recoverable on hover.
    expect(label?.getAttribute("title")).toBe("Acme Labs");

    act(() => {
      root.unmount();
    });
  });

  describe("in Paperclip Cloud", () => {
    it("closes the menu and enters the Cloud logout flow without local sign-out", async () => {
      const { root } = renderMenu({ cloud: true });
      await flushReact();
      await flushReact();
      await openMenu("Open Acme Labs organization switcher");

      const signOutItem = Array.from(document.body.querySelectorAll('[data-slot="dropdown-menu-item"]'))
        .find((element) => element.textContent?.includes("Sign out"));
      expect(signOutItem).toBeTruthy();

      act(() => {
        signOutItem?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
      });
      await flushReact();

      expect(mockAuthApi.signOut).not.toHaveBeenCalled();
      expect(mockNavigateTopLevel).toHaveBeenCalledOnce();
      expect(mockNavigateTopLevel).toHaveBeenCalledWith("/cloud/logout");
      expect(document.body.textContent).not.toContain("Organizations");

      act(() => {
        root.unmount();
      });
    });

    it.each([false, true])("keeps company navigation without local creation when a managed host has no switcher plugin (production=%s)", async (production) => {
      const { root } = renderMenu({ cloud: true, production });
      await flushReact();
      await flushReact();
      await openMenu(`Open Acme Labs ${production ? "company" : "organization"} switcher`);
      expect(document.body.textContent).toContain("Anachronist Wiki");
      expect(document.body.textContent).toContain("ANA");
      expect(document.body.textContent).not.toContain("Create organization");
      expect(mockOpenOnboarding).not.toHaveBeenCalled();
      const row = [...document.querySelectorAll('[data-slot="dropdown-menu-item"]')]
        .find(element => element.textContent?.includes("Anachronist Wiki"));
      act(() => row?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
      expect(mockSetSelectedCompanyId).toHaveBeenCalledWith("company-3");
      expect(mockNavigate).toHaveBeenCalledWith("/ANA/dashboard");
      expect(mockNavigateTopLevel).not.toHaveBeenCalled();
      act(() => root.unmount());
    });
  });
});