311 lines
11 KiB
TypeScript
311 lines
11 KiB
TypeScript
// @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);
|
|
});
|
|
});
|