889 lines
31 KiB
TypeScript
889 lines
31 KiB
TypeScript
// @vitest-environment jsdom
|
|
|
|
import { flushSync } from "react-dom";
|
|
import { createRoot, type Root } from "react-dom/client";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import type {
|
|
InstanceExperimentalSettings as InstanceExperimentalSettingsPayload,
|
|
InstanceExperimentalSettingsWithManaged,
|
|
} from "@paperclipai/shared";
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
import { InstanceExperimentalSettings } from "./InstanceExperimentalSettings";
|
|
import { queryKeys } from "../lib/queryKeys";
|
|
|
|
const mockInstanceSettingsApi = vi.hoisted(() => ({
|
|
getExperimental: vi.fn(),
|
|
updateExperimental: vi.fn(),
|
|
}));
|
|
|
|
vi.mock("@/api/instanceSettings", () => ({
|
|
instanceSettingsApi: mockInstanceSettingsApi,
|
|
}));
|
|
|
|
vi.mock("../context/BreadcrumbContext", () => ({
|
|
useBreadcrumbs: () => ({ setBreadcrumbs: vi.fn() }),
|
|
}));
|
|
|
|
async function act(callback: () => void | Promise<void>) {
|
|
let result: void | Promise<void> = undefined;
|
|
flushSync(() => {
|
|
result = callback();
|
|
});
|
|
await result;
|
|
}
|
|
|
|
async function flushReact() {
|
|
for (let index = 0; index < 5; index += 1) {
|
|
await Promise.resolve();
|
|
await new Promise((resolve) => window.setTimeout(resolve, 0));
|
|
}
|
|
flushSync(() => {});
|
|
}
|
|
|
|
const CONFERENCE_TOGGLE_SELECTOR =
|
|
'button[aria-label="Toggle conference room chat experimental setting"]';
|
|
const STREAMLINED_TOGGLE_SELECTOR =
|
|
'button[aria-label="Toggle Streamlined UI experimental setting"]';
|
|
const TASK_WATCHDOGS_TOGGLE_SELECTOR =
|
|
'button[aria-label="Toggle task watchdogs experimental setting"]';
|
|
const CLASSIC_TASK_INTERFACE_TOGGLE_SELECTOR =
|
|
'button[aria-label="Toggle classic task interface experimental setting"]';
|
|
const GOALS_SIDEBAR_LINK_TOGGLE_SELECTOR =
|
|
'button[aria-label="Toggle goals sidebar link experimental setting"]';
|
|
const DECISIONS_TOGGLE_SELECTOR =
|
|
'button[aria-label="Toggle decisions experimental setting"]';
|
|
const SERVER_INFO_TOGGLE_SELECTOR =
|
|
'button[aria-label="Toggle server info debug view experimental setting"]';
|
|
const PAPERCLIP_DEVELOPER_MODE_TOGGLE_SELECTOR =
|
|
'button[aria-label="Toggle Paperclip developer mode experimental setting"]';
|
|
const BUILT_IN_AGENTS_TOGGLE_SELECTOR =
|
|
'button[aria-label="Toggle built-in agents experimental setting"]';
|
|
const BETA_SKILLS_TOGGLE_SELECTOR =
|
|
'button[aria-label="Toggle beta skills experimental setting"]';
|
|
const SUMMARIES_TOGGLE_SELECTOR =
|
|
'button[aria-label="Toggle summaries experimental setting"]';
|
|
const STATUS_CARDS_TOGGLE_SELECTOR =
|
|
'button[aria-label="Toggle status cards experimental setting"]';
|
|
const PAPERCLIP_RUNNER_TOGGLE_SELECTOR =
|
|
'button[aria-label="Toggle Paperclip Runner experimental setting"]';
|
|
|
|
function defaultExperimentalSettings(): InstanceExperimentalSettingsPayload {
|
|
return {
|
|
enableEnvironments: false,
|
|
enableNativeRunner: false,
|
|
enableManagedSandboxOnly: false,
|
|
enableIsolatedWorkspaces: false,
|
|
enableStreamlinedLeftNavigation: true,
|
|
enableStreamlinedUi: true,
|
|
enableApps: true,
|
|
enablePipelines: false,
|
|
enableCases: false,
|
|
enableConferenceRoomChat: false,
|
|
enableClassicTaskInterface: false,
|
|
enableIssuePlanDecompositions: false,
|
|
enableExperimentalFileViewer: false,
|
|
enableExternalObjects: false,
|
|
enableBuiltInAgents: false,
|
|
enableBetaSkills: false,
|
|
enableSummaries: false,
|
|
enableStatusCards: false,
|
|
enableDecisions: false,
|
|
enableGoalsSidebarLink: false,
|
|
enableServerInfoDebugView: false,
|
|
enablePaperclipDeveloperMode: false,
|
|
enableSimplifiedEnglishInteractions: false,
|
|
enableSmokeLab: false,
|
|
autoRestartDevServerWhenIdle: false,
|
|
enableWorkspaceBranchReconcileForward: true,
|
|
enableWorkspaceDirtyQuarantineRepair: true,
|
|
enableOwnerInstanceAdmin: false,
|
|
enableSandboxDuplexBridge: false,
|
|
enableRunnerPreviewIngress: false,
|
|
enableWorktreeRunExecution: false,
|
|
worktreeRunExecutionActivatedAt: null,
|
|
worktreeRunExecutionActivationInstanceId: null,
|
|
};
|
|
}
|
|
|
|
const WORKTREE_RUN_EXECUTION_TOGGLE_SELECTOR =
|
|
'button[aria-label="Toggle worktree run execution setting"]';
|
|
|
|
function setWorktreeRuntimeMeta(enabled: boolean) {
|
|
const name = "paperclip-worktree-enabled";
|
|
let meta = document.querySelector<HTMLMetaElement>(`meta[name="${name}"]`);
|
|
if (enabled) {
|
|
if (!meta) {
|
|
meta = document.createElement("meta");
|
|
meta.setAttribute("name", name);
|
|
document.head.appendChild(meta);
|
|
}
|
|
meta.setAttribute("content", "true");
|
|
} else if (meta) {
|
|
meta.remove();
|
|
}
|
|
}
|
|
|
|
function setWorktreeInstanceIdMeta(instanceId: string | null) {
|
|
const name = "paperclip-instance-id";
|
|
let meta = document.querySelector<HTMLMetaElement>(`meta[name="${name}"]`);
|
|
if (instanceId) {
|
|
if (!meta) {
|
|
meta = document.createElement("meta");
|
|
meta.setAttribute("name", name);
|
|
document.head.appendChild(meta);
|
|
}
|
|
meta.setAttribute("content", instanceId);
|
|
} else if (meta) {
|
|
meta.remove();
|
|
}
|
|
}
|
|
|
|
describe("InstanceExperimentalSettings — Conference Room Chat card (PAP-11233)", () => {
|
|
let container: HTMLDivElement;
|
|
let root: Root | null = null;
|
|
let currentExperimentalSettings: InstanceExperimentalSettingsPayload;
|
|
|
|
async function renderPage() {
|
|
root = createRoot(container);
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: { queries: { retry: false } },
|
|
});
|
|
flushSync(() => {
|
|
root!.render(
|
|
<QueryClientProvider client={queryClient}>
|
|
<InstanceExperimentalSettings />
|
|
</QueryClientProvider>,
|
|
);
|
|
});
|
|
await flushReact();
|
|
}
|
|
|
|
beforeEach(() => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
currentExperimentalSettings = defaultExperimentalSettings();
|
|
mockInstanceSettingsApi.getExperimental.mockImplementation(async () => ({
|
|
...currentExperimentalSettings,
|
|
}));
|
|
mockInstanceSettingsApi.updateExperimental.mockImplementation(async (patch) => {
|
|
currentExperimentalSettings = { ...currentExperimentalSettings, ...patch };
|
|
return { ...currentExperimentalSettings };
|
|
});
|
|
});
|
|
|
|
afterEach(() => {
|
|
flushSync(() => {
|
|
root?.unmount();
|
|
});
|
|
root = null;
|
|
container.remove();
|
|
setWorktreeRuntimeMeta(false);
|
|
setWorktreeInstanceIdMeta(null);
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
it("renders a page-level warning about instability and lack of guarantees", async () => {
|
|
await renderPage();
|
|
|
|
const warning = [...container.querySelectorAll('[role="alert"]')].find((alert) =>
|
|
alert.textContent?.includes("Experimental features may break at any time."),
|
|
);
|
|
expect(warning?.textContent).toContain("Experimental features may break at any time.");
|
|
expect(warning?.textContent).toContain("no compatibility guarantees");
|
|
});
|
|
|
|
it("does not render an Apps experimental setting", async () => {
|
|
await renderPage();
|
|
|
|
expect(container.querySelector('button[aria-label="Toggle apps experimental setting"]')).toBeNull();
|
|
expect(container.textContent).not.toContain("Show the Apps navigation");
|
|
});
|
|
|
|
it("does not render the Conference Room Chat experimental setting for now", async () => {
|
|
await renderPage();
|
|
|
|
const headings = [...container.querySelectorAll("section h2")].map((h) => h.textContent);
|
|
expect(headings).not.toContain("Conference Room Chat");
|
|
expect(container.querySelector(CONFERENCE_TOGGLE_SELECTOR)).toBeNull();
|
|
});
|
|
|
|
it("does not render the Pipelines experimental setting for now", async () => {
|
|
await renderPage();
|
|
|
|
const headings = [...container.querySelectorAll("section h2")].map((h) => h.textContent);
|
|
expect(headings).not.toContain("Pipelines");
|
|
expect(container.querySelector('button[aria-label="Toggle pipelines experimental setting"]')).toBeNull();
|
|
});
|
|
|
|
it("does not render the toggle even when the stored flag is currently enabled", async () => {
|
|
currentExperimentalSettings = {
|
|
...currentExperimentalSettings,
|
|
enableConferenceRoomChat: true,
|
|
};
|
|
await renderPage();
|
|
|
|
const toggle = container.querySelector(CONFERENCE_TOGGLE_SELECTOR);
|
|
expect(toggle).toBeNull();
|
|
expect(mockInstanceSettingsApi.updateExperimental).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("renders and patches the Streamlined UI experimental toggle on and off", async () => {
|
|
await renderPage();
|
|
|
|
expect(container.textContent).toContain("Streamlined UI");
|
|
expect(container.textContent).toContain(
|
|
"Use the simplified main sidebar, shared Tasks and Inbox presentation, focused task detail layout, and contextual navigation across Agents, Routines, Skills, and Settings.",
|
|
);
|
|
|
|
const toggle = container.querySelector<HTMLButtonElement>(STREAMLINED_TOGGLE_SELECTOR);
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("true");
|
|
|
|
await act(() => toggle?.click());
|
|
await flushReact();
|
|
expect(mockInstanceSettingsApi.updateExperimental).toHaveBeenLastCalledWith({
|
|
enableStreamlinedUi: false,
|
|
});
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("false");
|
|
|
|
await act(() => toggle?.click());
|
|
await flushReact();
|
|
expect(mockInstanceSettingsApi.updateExperimental).toHaveBeenLastCalledWith({
|
|
enableStreamlinedUi: true,
|
|
});
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("true");
|
|
});
|
|
|
|
it("does not render a Task Watchdogs toggle because watchdogs are always enabled", async () => {
|
|
await renderPage();
|
|
|
|
expect(container.textContent).not.toContain("Task Watchdogs");
|
|
expect(container.querySelector('button[aria-label="Toggle task watchdogs experimental setting"]')).toBeNull();
|
|
});
|
|
|
|
it("does not expose the retired Runner Preview Ingress setting separately", async () => {
|
|
currentExperimentalSettings.enableRunnerPreviewIngress = true;
|
|
await renderPage();
|
|
|
|
expect(container.textContent).not.toContain("Runner Preview Ingress");
|
|
expect(container.querySelector(
|
|
'button[aria-label="Toggle runner preview ingress experimental setting"]',
|
|
)).toBeNull();
|
|
});
|
|
|
|
it("keeps Paperclip Runner default-off and exposes an explicit opt-in", async () => {
|
|
await renderPage();
|
|
|
|
expect(container.textContent).toContain("Paperclip Runner");
|
|
expect(container.textContent).toContain("Onboarding continues to use legacy adapters");
|
|
const toggle = container.querySelector<HTMLButtonElement>(
|
|
PAPERCLIP_RUNNER_TOGGLE_SELECTOR,
|
|
);
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("false");
|
|
|
|
await act(async () => {
|
|
toggle?.click();
|
|
});
|
|
await flushReact();
|
|
|
|
expect(mockInstanceSettingsApi.updateExperimental).toHaveBeenCalledWith({
|
|
enableNativeRunner: true,
|
|
});
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("true");
|
|
});
|
|
|
|
it("renders and patches the Classic Task Interface experimental toggle on and off", async () => {
|
|
await renderPage();
|
|
|
|
expect(container.textContent).toContain("Classic Task Interface");
|
|
expect(container.textContent).toContain(
|
|
"Restores the previous task detail page",
|
|
);
|
|
expect(container.textContent).toContain(
|
|
"Switching takes effect immediately. No task data is affected.",
|
|
);
|
|
|
|
const toggle = container.querySelector<HTMLButtonElement>(
|
|
CLASSIC_TASK_INTERFACE_TOGGLE_SELECTOR,
|
|
);
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("false");
|
|
|
|
await act(async () => {
|
|
toggle?.click();
|
|
});
|
|
await flushReact();
|
|
|
|
expect(mockInstanceSettingsApi.updateExperimental).toHaveBeenCalledWith({
|
|
enableClassicTaskInterface: true,
|
|
});
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("true");
|
|
|
|
flushSync(() => {
|
|
root?.unmount();
|
|
});
|
|
root = null;
|
|
container.textContent = "";
|
|
await renderPage();
|
|
|
|
const enabledToggle = container.querySelector<HTMLButtonElement>(
|
|
CLASSIC_TASK_INTERFACE_TOGGLE_SELECTOR,
|
|
);
|
|
expect(enabledToggle?.getAttribute("aria-checked")).toBe("true");
|
|
|
|
await act(async () => {
|
|
enabledToggle?.click();
|
|
});
|
|
await flushReact();
|
|
|
|
expect(mockInstanceSettingsApi.updateExperimental).toHaveBeenLastCalledWith({
|
|
enableClassicTaskInterface: false,
|
|
});
|
|
});
|
|
|
|
it("renders and patches the Decisions experimental toggle", async () => {
|
|
await renderPage();
|
|
|
|
expect(container.textContent).toContain("Decisions");
|
|
expect(container.textContent).toContain(
|
|
"Show the Decisions item in the main sidebar",
|
|
);
|
|
|
|
const toggle = container.querySelector<HTMLButtonElement>(DECISIONS_TOGGLE_SELECTOR);
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("false");
|
|
|
|
await act(async () => {
|
|
toggle?.click();
|
|
});
|
|
await flushReact();
|
|
|
|
expect(mockInstanceSettingsApi.updateExperimental).toHaveBeenCalledWith({
|
|
enableDecisions: true,
|
|
});
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("true");
|
|
});
|
|
|
|
it("renders and patches the Goals Sidebar Link experimental toggle", async () => {
|
|
await renderPage();
|
|
|
|
expect(container.textContent).toContain("Goals Sidebar Link");
|
|
expect(container.textContent).toContain(
|
|
"Restore the Goals item in the main sidebar while the goals surface is being evaluated.",
|
|
);
|
|
|
|
const toggle = container.querySelector<HTMLButtonElement>(GOALS_SIDEBAR_LINK_TOGGLE_SELECTOR);
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("false");
|
|
|
|
await act(async () => {
|
|
toggle?.click();
|
|
});
|
|
await flushReact();
|
|
|
|
expect(mockInstanceSettingsApi.updateExperimental).toHaveBeenCalledWith({
|
|
enableGoalsSidebarLink: true,
|
|
});
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("true");
|
|
});
|
|
|
|
it("hides the worktree run-execution toggle when not running in a worktree", async () => {
|
|
setWorktreeRuntimeMeta(false);
|
|
await renderPage();
|
|
|
|
const headings = [...container.querySelectorAll("section h2")].map((h) => h.textContent);
|
|
expect(headings).not.toContain("Run tasks in this worktree");
|
|
expect(container.querySelector(WORKTREE_RUN_EXECUTION_TOGGLE_SELECTOR)).toBeNull();
|
|
});
|
|
|
|
it("renders and patches the worktree run-execution toggle when in a worktree", async () => {
|
|
setWorktreeRuntimeMeta(true);
|
|
await renderPage();
|
|
|
|
expect(container.textContent).toContain("Run tasks in this worktree");
|
|
expect(container.textContent).toContain(
|
|
"isolated git-worktree preview instance",
|
|
);
|
|
|
|
const toggle = container.querySelector<HTMLButtonElement>(WORKTREE_RUN_EXECUTION_TOGGLE_SELECTOR);
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("false");
|
|
|
|
await act(async () => {
|
|
toggle?.click();
|
|
});
|
|
await flushReact();
|
|
|
|
expect(mockInstanceSettingsApi.updateExperimental).toHaveBeenCalledWith({
|
|
enableWorktreeRunExecution: true,
|
|
});
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("true");
|
|
});
|
|
|
|
it("shows the cutoff-copy for the worktree run-execution toggle when off", async () => {
|
|
setWorktreeRuntimeMeta(true);
|
|
await renderPage();
|
|
|
|
expect(container.textContent).toContain(
|
|
"Only tasks created after enabling will run automatically",
|
|
);
|
|
expect(container.textContent).toContain("Toggling off and on resets the cutoff.");
|
|
// Off => no armed banner and no fail-closed hint.
|
|
expect(container.textContent).not.toContain("Running tasks created after");
|
|
expect(container.textContent).not.toContain("Execution is suppressed");
|
|
});
|
|
|
|
it("shows the armed timestamp when the flag matches the current instance", async () => {
|
|
setWorktreeRuntimeMeta(true);
|
|
setWorktreeInstanceIdMeta("inst-current");
|
|
currentExperimentalSettings = {
|
|
...currentExperimentalSettings,
|
|
enableWorktreeRunExecution: true,
|
|
worktreeRunExecutionActivatedAt: "2026-07-10T18:34:00.000Z",
|
|
worktreeRunExecutionActivationInstanceId: "inst-current",
|
|
};
|
|
await renderPage();
|
|
|
|
expect(container.textContent).toContain("Running tasks created after");
|
|
expect(container.textContent).not.toContain("Execution is suppressed");
|
|
const toggle = container.querySelector<HTMLButtonElement>(WORKTREE_RUN_EXECUTION_TOGGLE_SELECTOR);
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("true");
|
|
});
|
|
|
|
it("fails closed with a re-enable hint when the flag was armed in another instance", async () => {
|
|
setWorktreeRuntimeMeta(true);
|
|
setWorktreeInstanceIdMeta("inst-current");
|
|
currentExperimentalSettings = {
|
|
...currentExperimentalSettings,
|
|
enableWorktreeRunExecution: true,
|
|
worktreeRunExecutionActivatedAt: "2026-07-10T18:34:00.000Z",
|
|
worktreeRunExecutionActivationInstanceId: "inst-other",
|
|
};
|
|
await renderPage();
|
|
|
|
expect(container.textContent).toContain("Execution is suppressed");
|
|
expect(container.textContent).toContain("armed in a different instance");
|
|
expect(container.textContent).toContain("Toggle it off and back on");
|
|
expect(container.textContent).not.toContain("Running tasks created after");
|
|
});
|
|
|
|
it("fails closed with a re-enable hint when the activation cutoff is missing", async () => {
|
|
setWorktreeRuntimeMeta(true);
|
|
setWorktreeInstanceIdMeta("inst-current");
|
|
currentExperimentalSettings = {
|
|
...currentExperimentalSettings,
|
|
enableWorktreeRunExecution: true,
|
|
worktreeRunExecutionActivatedAt: null,
|
|
worktreeRunExecutionActivationInstanceId: null,
|
|
};
|
|
await renderPage();
|
|
|
|
expect(container.textContent).toContain("Execution is suppressed");
|
|
expect(container.textContent).toContain("missing its activation cutoff");
|
|
expect(container.textContent).not.toContain("Running tasks created after");
|
|
});
|
|
|
|
it("renders and patches the Built-in Agents experimental toggle", async () => {
|
|
await renderPage();
|
|
|
|
expect(container.textContent).toContain("Built-in Agents");
|
|
expect(container.textContent).toContain("Show Paperclip-managed built-in agent surfaces");
|
|
|
|
const toggle = container.querySelector<HTMLButtonElement>(BUILT_IN_AGENTS_TOGGLE_SELECTOR);
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("false");
|
|
|
|
await act(async () => {
|
|
toggle?.click();
|
|
});
|
|
await flushReact();
|
|
|
|
expect(mockInstanceSettingsApi.updateExperimental).toHaveBeenCalledWith({
|
|
enableBuiltInAgents: true,
|
|
});
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("true");
|
|
});
|
|
|
|
it("renders and patches the Beta skills experimental toggle", async () => {
|
|
await renderPage();
|
|
|
|
expect(container.textContent).toContain("Beta skills");
|
|
expect(container.textContent).toContain("pin beta releases of the Paperclip core skill");
|
|
|
|
const toggle = container.querySelector<HTMLButtonElement>(BETA_SKILLS_TOGGLE_SELECTOR);
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("false");
|
|
|
|
await act(async () => {
|
|
toggle?.click();
|
|
});
|
|
await flushReact();
|
|
|
|
expect(mockInstanceSettingsApi.updateExperimental).toHaveBeenCalledWith({
|
|
enableBetaSkills: true,
|
|
});
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("true");
|
|
});
|
|
|
|
it("renders and patches the Summaries experimental toggle", async () => {
|
|
await renderPage();
|
|
|
|
expect(container.textContent).toContain("Summaries");
|
|
expect(container.textContent).toContain("Show Summarizer-generated status slots");
|
|
|
|
const toggle = container.querySelector<HTMLButtonElement>(SUMMARIES_TOGGLE_SELECTOR);
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("false");
|
|
|
|
await act(async () => {
|
|
toggle?.click();
|
|
});
|
|
await flushReact();
|
|
|
|
expect(mockInstanceSettingsApi.updateExperimental).toHaveBeenCalledWith({
|
|
enableSummaries: true,
|
|
});
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("true");
|
|
});
|
|
|
|
it("enables Summaries when enabling the Status Cards experimental toggle", async () => {
|
|
await renderPage();
|
|
|
|
expect(container.textContent).toContain("Status Cards");
|
|
expect(container.textContent).toContain("experimental shared status-card board");
|
|
|
|
const toggle = container.querySelector<HTMLButtonElement>(STATUS_CARDS_TOGGLE_SELECTOR);
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("false");
|
|
|
|
await act(async () => {
|
|
toggle?.click();
|
|
});
|
|
await flushReact();
|
|
|
|
expect(mockInstanceSettingsApi.updateExperimental).toHaveBeenCalledWith({
|
|
enableSummaries: true,
|
|
enableStatusCards: true,
|
|
});
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("true");
|
|
expect(
|
|
container.querySelector<HTMLButtonElement>(SUMMARIES_TOGGLE_SELECTOR)?.getAttribute("aria-checked"),
|
|
).toBe("true");
|
|
});
|
|
|
|
it("disables Status Cards when disabling Summaries", async () => {
|
|
currentExperimentalSettings = {
|
|
...currentExperimentalSettings,
|
|
enableSummaries: true,
|
|
enableStatusCards: true,
|
|
};
|
|
await renderPage();
|
|
|
|
const summariesToggle = container.querySelector<HTMLButtonElement>(SUMMARIES_TOGGLE_SELECTOR);
|
|
await act(async () => {
|
|
summariesToggle?.click();
|
|
});
|
|
await flushReact();
|
|
|
|
expect(mockInstanceSettingsApi.updateExperimental).toHaveBeenCalledWith({
|
|
enableSummaries: false,
|
|
enableStatusCards: false,
|
|
});
|
|
expect(summariesToggle?.getAttribute("aria-checked")).toBe("false");
|
|
expect(
|
|
container.querySelector<HTMLButtonElement>(STATUS_CARDS_TOGGLE_SELECTOR)?.getAttribute("aria-checked"),
|
|
).toBe("false");
|
|
});
|
|
|
|
it("renders and patches the Server Info Debug View experimental toggle", async () => {
|
|
await renderPage();
|
|
|
|
expect(container.textContent).toContain("Server Info Debug View");
|
|
expect(container.textContent).toContain(
|
|
'Show a "Server" section in the account drawer with the current server restart time and running commit.',
|
|
);
|
|
|
|
const toggle = container.querySelector<HTMLButtonElement>(SERVER_INFO_TOGGLE_SELECTOR);
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("false");
|
|
|
|
await act(async () => {
|
|
toggle?.click();
|
|
});
|
|
await flushReact();
|
|
|
|
expect(mockInstanceSettingsApi.updateExperimental).toHaveBeenCalledWith({
|
|
enableServerInfoDebugView: true,
|
|
});
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("true");
|
|
});
|
|
|
|
it("renders and patches Paperclip Developer Mode", async () => {
|
|
await renderPage();
|
|
|
|
expect(container.textContent).toContain("Paperclip Developer Mode");
|
|
expect(container.textContent).toContain("including Honeycomb trace queries on run pages");
|
|
|
|
const toggle = container.querySelector<HTMLButtonElement>(
|
|
PAPERCLIP_DEVELOPER_MODE_TOGGLE_SELECTOR,
|
|
);
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("false");
|
|
|
|
await act(async () => {
|
|
toggle?.click();
|
|
});
|
|
await flushReact();
|
|
|
|
expect(mockInstanceSettingsApi.updateExperimental).toHaveBeenCalledWith({
|
|
enablePaperclipDeveloperMode: true,
|
|
});
|
|
expect(toggle?.getAttribute("aria-checked")).toBe("true");
|
|
});
|
|
|
|
});
|
|
|
|
describe("InstanceExperimentalSettings — cloud-managed keys", () => {
|
|
const MANAGED_BADGE_TEXT = "Managed by Paperclip Cloud";
|
|
|
|
let container: HTMLDivElement;
|
|
let root: Root | null = null;
|
|
let queryClient: QueryClient;
|
|
|
|
async function renderPage(settings: InstanceExperimentalSettingsWithManaged) {
|
|
mockInstanceSettingsApi.getExperimental.mockResolvedValue({ ...settings });
|
|
root = createRoot(container);
|
|
queryClient = new QueryClient({
|
|
defaultOptions: { queries: { retry: false } },
|
|
});
|
|
flushSync(() => {
|
|
root!.render(
|
|
<QueryClientProvider client={queryClient}>
|
|
<InstanceExperimentalSettings />
|
|
</QueryClientProvider>,
|
|
);
|
|
});
|
|
await flushReact();
|
|
}
|
|
|
|
beforeEach(() => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
mockInstanceSettingsApi.updateExperimental.mockImplementation(async (patch) => ({
|
|
...defaultExperimentalSettings(),
|
|
...patch,
|
|
}));
|
|
});
|
|
|
|
afterEach(() => {
|
|
flushSync(() => {
|
|
root?.unmount();
|
|
});
|
|
root = null;
|
|
queryClient?.clear();
|
|
container.remove();
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
it("renders a managed key locked with the badge while unmanaged keys stay editable", async () => {
|
|
await renderPage({
|
|
...defaultExperimentalSettings(),
|
|
enableBuiltInAgents: true,
|
|
managedKeys: {
|
|
enableBuiltInAgents: { managed: true, managedBy: "paperclip-cloud" },
|
|
},
|
|
});
|
|
|
|
expect(container.textContent).toContain(MANAGED_BADGE_TEXT);
|
|
|
|
const builtInAgentsToggle = container.querySelector<HTMLButtonElement>(BUILT_IN_AGENTS_TOGGLE_SELECTOR);
|
|
expect(builtInAgentsToggle?.getAttribute("aria-checked")).toBe("true");
|
|
expect(builtInAgentsToggle?.disabled).toBe(true);
|
|
|
|
await act(() => builtInAgentsToggle?.click());
|
|
await flushReact();
|
|
expect(mockInstanceSettingsApi.updateExperimental).not.toHaveBeenCalled();
|
|
|
|
const summariesToggle = container.querySelector<HTMLButtonElement>(SUMMARIES_TOGGLE_SELECTOR);
|
|
expect(summariesToggle?.disabled).toBe(false);
|
|
|
|
await act(() => summariesToggle?.click());
|
|
await flushReact();
|
|
expect(mockInstanceSettingsApi.updateExperimental).toHaveBeenCalledWith({
|
|
enableSummaries: true,
|
|
});
|
|
});
|
|
|
|
it("locks Status Cards when managed Summaries is disabled", async () => {
|
|
await renderPage({
|
|
...defaultExperimentalSettings(),
|
|
managedKeys: {
|
|
enableSummaries: { managed: true, managedBy: "paperclip-cloud" },
|
|
},
|
|
});
|
|
|
|
const statusCardsToggle = container.querySelector<HTMLButtonElement>(STATUS_CARDS_TOGGLE_SELECTOR);
|
|
expect(statusCardsToggle?.disabled).toBe(true);
|
|
|
|
await act(() => statusCardsToggle?.click());
|
|
await flushReact();
|
|
expect(mockInstanceSettingsApi.updateExperimental).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("locks Summaries on when managed Status Cards is enabled", async () => {
|
|
await renderPage({
|
|
...defaultExperimentalSettings(),
|
|
enableSummaries: true,
|
|
enableStatusCards: true,
|
|
managedKeys: {
|
|
enableStatusCards: { managed: true, managedBy: "paperclip-cloud" },
|
|
},
|
|
});
|
|
|
|
const summariesToggle = container.querySelector<HTMLButtonElement>(SUMMARIES_TOGGLE_SELECTOR);
|
|
expect(summariesToggle?.disabled).toBe(true);
|
|
|
|
await act(() => summariesToggle?.click());
|
|
await flushReact();
|
|
expect(mockInstanceSettingsApi.updateExperimental).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("renders no managed badge and keeps toggles editable without managedKeys (self-hosted)", async () => {
|
|
await renderPage(defaultExperimentalSettings());
|
|
|
|
expect(container.textContent).not.toContain(MANAGED_BADGE_TEXT);
|
|
|
|
const builtInAgentsToggle = container.querySelector<HTMLButtonElement>(BUILT_IN_AGENTS_TOGGLE_SELECTOR);
|
|
expect(builtInAgentsToggle?.disabled).toBe(false);
|
|
|
|
await act(() => builtInAgentsToggle?.click());
|
|
await flushReact();
|
|
expect(mockInstanceSettingsApi.updateExperimental).toHaveBeenCalledWith({ enableBuiltInAgents: true });
|
|
});
|
|
});
|
|
|
|
describe("InstanceExperimentalSettings — card ordering and headings (PAP-393)", () => {
|
|
let container: HTMLDivElement;
|
|
let root: Root | null = null;
|
|
|
|
async function renderPage(settings: InstanceExperimentalSettingsWithManaged) {
|
|
mockInstanceSettingsApi.getExperimental.mockResolvedValue({ ...settings });
|
|
root = createRoot(container);
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: { queries: { retry: false } },
|
|
});
|
|
flushSync(() => {
|
|
root!.render(
|
|
<QueryClientProvider client={queryClient}>
|
|
<InstanceExperimentalSettings />
|
|
</QueryClientProvider>,
|
|
);
|
|
});
|
|
await flushReact();
|
|
}
|
|
|
|
beforeEach(() => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
mockInstanceSettingsApi.updateExperimental.mockImplementation(async (patch) => ({
|
|
...defaultExperimentalSettings(),
|
|
...patch,
|
|
}));
|
|
});
|
|
|
|
afterEach(() => {
|
|
flushSync(() => {
|
|
root?.unmount();
|
|
});
|
|
root = null;
|
|
container.remove();
|
|
setWorktreeRuntimeMeta(false);
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
it("groups developer and legacy settings into sections", async () => {
|
|
setWorktreeRuntimeMeta(true);
|
|
await renderPage(defaultExperimentalSettings());
|
|
|
|
const headings = [...container.querySelectorAll("section > div > h2")].map(
|
|
(heading) => heading.textContent ?? "",
|
|
);
|
|
expect(headings).toEqual([
|
|
"Experimental features",
|
|
"Paperclip Developer Mode",
|
|
"Legacy",
|
|
]);
|
|
|
|
const sections = [...container.querySelectorAll("section")];
|
|
expect(sections.at(0)?.textContent).not.toContain("Run tasks in this worktree");
|
|
expect(sections.at(0)?.textContent).not.toContain("Managed Environment Only");
|
|
expect(sections.at(-2)?.textContent).toContain("Run tasks in this worktree");
|
|
expect(sections.at(-2)?.textContent).toContain("Managed Environment Only");
|
|
expect(sections.at(-2)?.textContent).toContain("Auto-Restart Dev Server When Idle");
|
|
expect(sections.at(-2)?.textContent).toContain("Server Info Debug View");
|
|
expect(sections.at(-2)?.textContent).toContain("Smoke Lab");
|
|
expect(sections.at(-2)?.textContent).toContain("Task Plan Decomposition");
|
|
expect(sections.at(-1)?.textContent).toContain("These features are going to be removed.");
|
|
expect(sections.at(-1)?.textContent).toContain("Classic Task Interface");
|
|
expect(sections.at(-1)?.textContent).toContain("Goals Sidebar Link");
|
|
});
|
|
|
|
it("renders setting cards without a background color", async () => {
|
|
await renderPage(defaultExperimentalSettings());
|
|
|
|
const cards = [...container.querySelectorAll('[data-slot="card"]')];
|
|
expect(cards.length).toBeGreaterThan(10);
|
|
expect(cards.every((card) => card.classList.contains("bg-transparent"))).toBe(true);
|
|
});
|
|
|
|
it("no longer renders an 'Experimental' secondary badge on any card", async () => {
|
|
await renderPage(defaultExperimentalSettings());
|
|
|
|
const badges = [...container.querySelectorAll('[data-slot="badge"]')].map(
|
|
(badge) => badge.textContent?.trim(),
|
|
);
|
|
expect(badges).not.toContain("Experimental");
|
|
});
|
|
});
|
|
|
|
describe("InstanceExperimentalSettings — operator-hidden cards", () => {
|
|
let container: HTMLDivElement;
|
|
let root: Root | null = null;
|
|
let queryClient: QueryClient;
|
|
|
|
beforeEach(() => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
});
|
|
|
|
afterEach(() => {
|
|
flushSync(() => root?.unmount());
|
|
root = null;
|
|
queryClient?.clear();
|
|
container.remove();
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
async function renderPage(hiddenSettings?: string[]) {
|
|
mockInstanceSettingsApi.getExperimental.mockResolvedValue(defaultExperimentalSettings());
|
|
root = createRoot(container);
|
|
queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
|
queryClient.setQueryData(queryKeys.health, {
|
|
status: "ok",
|
|
...(hiddenSettings ? { hiddenSettings } : {}),
|
|
});
|
|
flushSync(() => {
|
|
root!.render(
|
|
<QueryClientProvider client={queryClient}>
|
|
<InstanceExperimentalSettings />
|
|
</QueryClientProvider>,
|
|
);
|
|
});
|
|
await flushReact();
|
|
}
|
|
|
|
it("renders nothing for an operator-hidden toggle and keeps the rest", async () => {
|
|
await renderPage(["instance.experimental.enableEnvironments"]);
|
|
|
|
expect(container.textContent).not.toContain("Enable Environments");
|
|
expect(container.textContent).toContain("Beta skills");
|
|
expect(container.textContent).not.toContain("Show the Apps navigation");
|
|
});
|
|
|
|
it("shows every toggle when nothing is hidden", async () => {
|
|
await renderPage();
|
|
|
|
expect(container.textContent).toContain("Enable Environments");
|
|
expect(container.textContent).toContain("Beta skills");
|
|
});
|
|
});
|