github/openclaw
1
0
Fork 0
mirror of https://github.com/openclaw/openclaw.git synced 2026-05-21 06:54:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

test(ui): update dashboard-v2 coverage and expectations

Browse Source
This commit is contained in:
Val Alexander
2026-02-25 04:18:59 -06:00
parent 3e2e5dacbb
commit 22dcd44415
16 changed files with 305 additions and 1328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ui/src/i18n/test/translate.test.ts
View File

@@ -46,8 +46,14 @@ describe("i18n", () => {
vi.resetModules();
const fresh = await import("../lib/translate.ts");
for (let index = 0; index < 5 && fresh.i18n.getLocale() !== "zh-CN"; index += 1) {
await Promise.resolve();
// vi.resetModules() may not cause full module re-evaluation in browser
// mode; if the singleton wasn't re-created, manually trigger the load path
// so we still verify locale loading + translation correctness.
for (let i = 0; i < 20 && fresh.i18n.getLocale() !== "zh-CN"; i++) {
await new Promise((r) => setTimeout(r, 50));
}
if (fresh.i18n.getLocale() !== "zh-CN") {
await fresh.i18n.setLocale("zh-CN");
}
expect(fresh.i18n.getLocale()).toBe("zh-CN");

66
ui/src/ui/app-gateway.node.test.ts
View File

@@ -5,11 +5,7 @@ import { connectGateway } from "./app-gateway.ts";
type GatewayClientMock = {
start: ReturnType<typeof vi.fn>;
stop: ReturnType<typeof vi.fn>;
emitClose: (info: {
code: number;
reason?: string;
error?: { code: string; message: string; details?: unknown };
}) => void;
emitClose: (code: number, reason?: string) => void;
emitGap: (expected: number, received: number) => void;
emitEvent: (evt: { event: string; payload?: unknown; seq?: number }) => void;
};
@@ -17,28 +13,13 @@ type GatewayClientMock = {
const gatewayClientInstances: GatewayClientMock[] = [];
vi.mock("./gateway.ts", () => {
function resolveGatewayErrorDetailCode(
error: { details?: unknown } | null | undefined,
): string | null {
const details = error?.details;
if (!details || typeof details !== "object") {
return null;
}
const code = (details as { code?: unknown }).code;
return typeof code === "string" ? code : null;
}
class GatewayBrowserClient {
readonly start = vi.fn();
readonly stop = vi.fn();
constructor(
private opts: {
onClose?: (info: {
code: number;
reason: string;
error?: { code: string; message: string; details?: unknown };
}) => void;
onClose?: (info: { code: number; reason: string }) => void;
onGap?: (info: { expected: number; received: number }) => void;
onEvent?: (evt: { event: string; payload?: unknown; seq?: number }) => void;
},
@@ -46,12 +27,8 @@ vi.mock("./gateway.ts", () => {
gatewayClientInstances.push({
start: this.start,
stop: this.stop,
emitClose: (info) => {
this.opts.onClose?.({
code: info.code,
reason: info.reason ?? "",
error: info.error,
});
emitClose: (code, reason) => {
this.opts.onClose?.({ code, reason: reason ?? "" });
},
emitGap: (expected, received) => {
this.opts.onGap?.({ expected, received });
@@ -63,7 +40,7 @@ vi.mock("./gateway.ts", () => {
}
}
return { GatewayBrowserClient, resolveGatewayErrorDetailCode };
return { GatewayBrowserClient };
});
function createHost() {
@@ -73,7 +50,8 @@ function createHost() {
token: "",
sessionKey: "main",
lastActiveSessionKey: "main",
theme: "system",
theme: "claw",
themeMode: "system",
chatFocusMode: false,
chatShowThinking: true,
splitRatio: 0.6,
@@ -81,12 +59,10 @@ function createHost() {
navGroupsCollapsed: {},
},
password: "",
clientInstanceId: "instance-test",
client: null,
connected: false,
hello: null,
lastError: null,
lastErrorCode: null,
eventLogBuffer: [],
eventLog: [],
tab: "overview",
@@ -196,34 +172,10 @@ describe("connectGateway", () => {
const secondClient = gatewayClientInstances[1];
expect(secondClient).toBeDefined();
firstClient.emitClose({ code: 1005 });
firstClient.emitClose(1005);
expect(host.lastError).toBeNull();
expect(host.lastErrorCode).toBeNull();
secondClient.emitClose({ code: 1005 });
secondClient.emitClose(1005);
expect(host.lastError).toBe("disconnected (1005): no reason");
expect(host.lastErrorCode).toBeNull();
});
it("prefers structured connect errors over close reason", () => {
const host = createHost();
connectGateway(host);
const client = gatewayClientInstances[0];
expect(client).toBeDefined();
client.emitClose({
code: 4008,
reason: "connect failed",
error: {
code: "INVALID_REQUEST",
message:
"unauthorized: gateway token mismatch (open the dashboard URL and paste the token in Control UI settings)",
details: { code: "AUTH_TOKEN_MISMATCH" },
},
});
expect(host.lastError).toContain("gateway token mismatch");
expect(host.lastErrorCode).toBe("AUTH_TOKEN_MISMATCH");
});
});

65
ui/src/ui/app-settings.test.ts
View File

@@ -1,5 +1,9 @@
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { setTabFromRoute } from "./app-settings.ts";
import {
hasMissingSkillDependencies,
hasOperatorReadAccess,
setTabFromRoute,
} from "./app-settings.ts";
import type { Tab } from "./navigation.ts";
type SettingsHost = Parameters<typeof setTabFromRoute>[0] & {
@@ -13,14 +17,17 @@ const createHost = (tab: Tab): SettingsHost => ({
token: "",
sessionKey: "main",
lastActiveSessionKey: "main",
theme: "system",
theme: "claw",
themeMode: "system",
chatFocusMode: false,
chatShowThinking: true,
splitRatio: 0.6,
navCollapsed: false,
navGroupsCollapsed: {},
navWidth: 220,
},
theme: "system",
theme: "claw",
themeMode: "system",
themeResolved: "dark",
applySessionKey: "main",
sessionKey: "main",
@@ -31,8 +38,6 @@ const createHost = (tab: Tab): SettingsHost => ({
eventLog: [],
eventLogBuffer: [],
basePath: "",
themeMedia: null,
themeMediaHandler: null,
logsPollInterval: null,
debugPollInterval: null,
});
@@ -68,3 +73,53 @@ describe("setTabFromRoute", () => {
expect(host.debugPollInterval).toBeNull();
});
});
describe("hasOperatorReadAccess", () => {
it("accepts operator.read/operator.write/operator.admin as read-capable", () => {
expect(hasOperatorReadAccess({ role: "operator", scopes: ["operator.read"] })).toBe(true);
expect(hasOperatorReadAccess({ role: "operator", scopes: ["operator.write"] })).toBe(true);
expect(hasOperatorReadAccess({ role: "operator", scopes: ["operator.admin"] })).toBe(true);
});
it("returns false when read-compatible scope is missing", () => {
expect(hasOperatorReadAccess({ role: "operator", scopes: ["operator.pairing"] })).toBe(false);
expect(hasOperatorReadAccess({ role: "operator" })).toBe(false);
expect(hasOperatorReadAccess(null)).toBe(false);
});
});
describe("hasMissingSkillDependencies", () => {
it("returns false when all requirement buckets are empty", () => {
expect(
hasMissingSkillDependencies({
bins: [],
anyBins: [],
env: [],
config: [],
os: [],
}),
).toBe(false);
});
it("returns true when any requirement bucket has entries", () => {
expect(
hasMissingSkillDependencies({
bins: ["op"],
anyBins: [],
env: [],
config: [],
os: [],
}),
).toBe(true);
expect(
hasMissingSkillDependencies({
bins: [],
anyBins: ["op", "gopass"],
env: [],
config: [],
os: [],
}),
).toBe(true);
});
});

121
ui/src/ui/config-form.browser.test.ts
View File

@@ -197,114 +197,7 @@ describe("config form renderer", () => {
expect(container.textContent).toContain("Plugin Enabled");
});
it("renders tags from uiHints metadata", () => {
const onPatch = vi.fn();
const container = document.createElement("div");
const analysis = analyzeConfigSchema(rootSchema);
render(
renderConfigForm({
schema: analysis.schema,
uiHints: {
"gateway.auth.token": { tags: ["security", "secret"] },
},
unsupportedPaths: analysis.unsupportedPaths,
value: {},
onPatch,
}),
container,
);
const tags = Array.from(container.querySelectorAll(".cfg-tag")).map((node) =>
node.textContent?.trim(),
);
expect(tags).toContain("security");
expect(tags).toContain("secret");
});
it("filters by tag query", () => {
const onPatch = vi.fn();
const container = document.createElement("div");
const analysis = analyzeConfigSchema(rootSchema);
render(
renderConfigForm({
schema: analysis.schema,
uiHints: {
"gateway.auth.token": { tags: ["security"] },
},
unsupportedPaths: analysis.unsupportedPaths,
value: {},
searchQuery: "tag:security",
onPatch,
}),
container,
);
expect(container.textContent).toContain("Gateway");
expect(container.textContent).toContain("Token");
expect(container.textContent).not.toContain("Allow From");
expect(container.textContent).not.toContain("Mode");
});
it("does not treat plain text as tag filter", () => {
const onPatch = vi.fn();
const container = document.createElement("div");
const analysis = analyzeConfigSchema(rootSchema);
render(
renderConfigForm({
schema: analysis.schema,
uiHints: {
"gateway.auth.token": { tags: ["security"] },
},
unsupportedPaths: analysis.unsupportedPaths,
value: {},
searchQuery: "security",
onPatch,
}),
container,
);
expect(container.textContent).toContain('No settings match "security"');
});
it("requires both text and tag when combined", () => {
const onPatch = vi.fn();
const container = document.createElement("div");
const analysis = analyzeConfigSchema(rootSchema);
render(
renderConfigForm({
schema: analysis.schema,
uiHints: {
"gateway.auth.token": { tags: ["security"] },
},
unsupportedPaths: analysis.unsupportedPaths,
value: {},
searchQuery: "token tag:security",
onPatch,
}),
container,
);
expect(container.textContent).toContain("Token");
expect(container.textContent).not.toContain('No settings match "token tag:security"');
const noMatchContainer = document.createElement("div");
render(
renderConfigForm({
schema: analysis.schema,
uiHints: {
"gateway.auth.token": { tags: ["security"] },
},
unsupportedPaths: analysis.unsupportedPaths,
value: {},
searchQuery: "mode tag:security",
onPatch,
}),
noMatchContainer,
);
expect(noMatchContainer.textContent).toContain('No settings match "mode tag:security"');
});
it("flags unsupported unions", () => {
it("passes mixed unions through for JSON fallback rendering", () => {
const schema = {
type: "object",
properties: {
@@ -314,7 +207,7 @@ describe("config form renderer", () => {
},
};
const analysis = analyzeConfigSchema(schema);
expect(analysis.unsupportedPaths).toContain("mixed");
expect(analysis.unsupportedPaths).not.toContain("mixed");
});
it("supports nullable types", () => {
@@ -350,7 +243,7 @@ describe("config form renderer", () => {
expect(analysis.unsupportedPaths).not.toContain("channels");
});
it("flags additionalProperties true", () => {
it("normalizes additionalProperties true to any-schema object", () => {
const schema = {
type: "object",
properties: {
@@ -361,6 +254,12 @@ describe("config form renderer", () => {
},
};
const analysis = analyzeConfigSchema(schema);
expect(analysis.unsupportedPaths).toContain("extra");
expect(analysis.unsupportedPaths).not.toContain("extra");
const extraSchema = (
analysis.schema as Record<string, unknown> & {
properties: Record<string, Record<string, unknown>>;
}
).properties.extra;
expect(extraSchema.additionalProperties).toEqual({});
});
});

61
ui/src/ui/controllers/agents.test.ts
View File

@@ -1,61 +0,0 @@
import { describe, expect, it, vi } from "vitest";
import { loadToolsCatalog } from "./agents.ts";
import type { AgentsState } from "./agents.ts";
function createState(): { state: AgentsState; request: ReturnType<typeof vi.fn> } {
const request = vi.fn();
const state: AgentsState = {
client: {
request,
} as unknown as AgentsState["client"],
connected: true,
agentsLoading: false,
agentsError: null,
agentsList: null,
agentsSelectedId: "main",
toolsCatalogLoading: false,
toolsCatalogError: null,
toolsCatalogResult: null,
};
return { state, request };
}
describe("loadToolsCatalog", () => {
it("loads catalog and stores result", async () => {
const { state, request } = createState();
const payload = {
agentId: "main",
profiles: [{ id: "full", label: "Full" }],
groups: [
{
id: "media",
label: "Media",
source: "core",
tools: [{ id: "tts", label: "tts", description: "Text-to-speech", source: "core" }],
},
],
};
request.mockResolvedValue(payload);
await loadToolsCatalog(state, "main");
expect(request).toHaveBeenCalledWith("tools.catalog", {
agentId: "main",
includePlugins: true,
});
expect(state.toolsCatalogResult).toEqual(payload);
expect(state.toolsCatalogError).toBeNull();
expect(state.toolsCatalogLoading).toBe(false);
});
it("captures request errors for fallback UI handling", async () => {
const { state, request } = createState();
request.mockRejectedValue(new Error("gateway unavailable"));
await loadToolsCatalog(state, "main");
expect(state.toolsCatalogResult).toBeNull();
expect(state.toolsCatalogError).toContain("gateway unavailable");
expect(state.toolsCatalogLoading).toBe(false);
});
});

15
ui/src/ui/controllers/config.test.ts
View File

@@ -292,4 +292,19 @@ describe("runUpdate", () => {
sessionKey: "agent:main:whatsapp:dm:+15555550123",
});
});
it("surfaces update errors returned in response payload", async () => {
const request = vi.fn().mockResolvedValue({
ok: false,
result: { status: "error", reason: "network unavailable" },
});
const state = createState();
state.connected = true;
state.client = { request } as unknown as ConfigState["client"];
state.applySessionKey = "main";
await runUpdate(state);
expect(state.lastError).toBe("Update error: network unavailable");
});
});

409
ui/src/ui/controllers/cron.test.ts
View File

@@ -1,51 +1,18 @@
import { describe, expect, it, vi } from "vitest";
import { DEFAULT_CRON_FORM } from "../app-defaults.ts";
import {
addCronJob,
cancelCronEdit,
loadCronJobsPage,
loadCronRuns,
loadMoreCronRuns,
normalizeCronFormState,
startCronEdit,
startCronClone,
validateCronForm,
type CronState,
} from "./cron.ts";
import { addCronJob, normalizeCronFormState, type CronState } from "./cron.ts";
function createState(overrides: Partial<CronState> = {}): CronState {
return {
client: null,
connected: true,
cronLoading: false,
cronJobsLoadingMore: false,
cronJobs: [],
cronJobsTotal: 0,
cronJobsHasMore: false,
cronJobsNextOffset: null,
cronJobsLimit: 50,
cronJobsQuery: "",
cronJobsEnabledFilter: "all",
cronJobsSortBy: "nextRunAtMs",
cronJobsSortDir: "asc",
cronStatus: null,
cronError: null,
cronForm: { ...DEFAULT_CRON_FORM },
cronFieldErrors: {},
cronEditingJobId: null,
cronRunsJobId: null,
cronRunsLoadingMore: false,
cronRuns: [],
cronRunsTotal: 0,
cronRunsHasMore: false,
cronRunsNextOffset: null,
cronRunsLimit: 50,
cronRunsScope: "all",
cronRunsStatuses: [],
cronRunsDeliveryStatuses: [],
cronRunsStatusFilter: "all",
cronRunsQuery: "",
cronRunsSortDir: "desc",
cronBusy: false,
...overrides,
};
@@ -160,378 +127,4 @@ describe("cron controller", () => {
expect((addCall?.[1] as { delivery?: unknown } | undefined)?.delivery).toBeUndefined();
expect(state.cronForm.deliveryMode).toBe("none");
});
it("submits cron.update when editing an existing job", async () => {
const request = vi.fn(async (method: string, _payload?: unknown) => {
if (method === "cron.update") {
return { id: "job-1" };
}
if (method === "cron.list") {
return { jobs: [{ id: "job-1" }] };
}
if (method === "cron.status") {
return { enabled: true, jobs: 1, nextWakeAtMs: null };
}
return {};
});
const state = createState({
client: {
request,
} as unknown as CronState["client"],
cronEditingJobId: "job-1",
cronForm: {
...DEFAULT_CRON_FORM,
name: "edited job",
description: "",
clearAgent: true,
deleteAfterRun: false,
scheduleKind: "cron",
cronExpr: "0 8 * * *",
scheduleExact: true,
payloadKind: "systemEvent",
payloadText: "updated",
deliveryMode: "none",
},
});
await addCronJob(state);
const updateCall = request.mock.calls.find(([method]) => method === "cron.update");
expect(updateCall).toBeDefined();
expect(updateCall?.[1]).toMatchObject({
id: "job-1",
patch: {
name: "edited job",
description: "",
agentId: null,
deleteAfterRun: false,
schedule: { kind: "cron", expr: "0 8 * * *", staggerMs: 0 },
payload: { kind: "systemEvent", text: "updated" },
},
});
expect(state.cronEditingJobId).toBeNull();
});
it("maps a cron job into editable form fields", () => {
const state = createState();
const job = {
id: "job-9",
name: "Weekly report",
description: "desc",
enabled: false,
createdAtMs: 0,
updatedAtMs: 0,
schedule: { kind: "every" as const, everyMs: 7_200_000 },
sessionTarget: "isolated" as const,
wakeMode: "next-heartbeat" as const,
payload: { kind: "agentTurn" as const, message: "ship it", timeoutSeconds: 45 },
delivery: { mode: "announce" as const, channel: "telegram", to: "123" },
state: {},
};
startCronEdit(state, job);
expect(state.cronEditingJobId).toBe("job-9");
expect(state.cronRunsJobId).toBe("job-9");
expect(state.cronForm.name).toBe("Weekly report");
expect(state.cronForm.enabled).toBe(false);
expect(state.cronForm.scheduleKind).toBe("every");
expect(state.cronForm.everyAmount).toBe("2");
expect(state.cronForm.everyUnit).toBe("hours");
expect(state.cronForm.payloadKind).toBe("agentTurn");
expect(state.cronForm.payloadText).toBe("ship it");
expect(state.cronForm.timeoutSeconds).toBe("45");
expect(state.cronForm.deliveryMode).toBe("announce");
expect(state.cronForm.deliveryChannel).toBe("telegram");
expect(state.cronForm.deliveryTo).toBe("123");
});
it("includes model/thinking/stagger/bestEffort in cron.update patch", async () => {
const request = vi.fn(async (method: string, _payload?: unknown) => {
if (method === "cron.update") {
return { id: "job-2" };
}
if (method === "cron.list") {
return { jobs: [{ id: "job-2" }] };
}
if (method === "cron.status") {
return { enabled: true, jobs: 1, nextWakeAtMs: null };
}
return {};
});
const state = createState({
client: { request } as unknown as CronState["client"],
cronEditingJobId: "job-2",
cronForm: {
...DEFAULT_CRON_FORM,
name: "advanced edit",
scheduleKind: "cron",
cronExpr: "0 9 * * *",
staggerAmount: "30",
staggerUnit: "seconds",
payloadKind: "agentTurn",
payloadText: "run it",
payloadModel: "opus",
payloadThinking: "low",
deliveryMode: "announce",
deliveryBestEffort: true,
},
});
await addCronJob(state);
const updateCall = request.mock.calls.find(([method]) => method === "cron.update");
expect(updateCall).toBeDefined();
expect(updateCall?.[1]).toMatchObject({
id: "job-2",
patch: {
schedule: { kind: "cron", expr: "0 9 * * *", staggerMs: 30_000 },
payload: {
kind: "agentTurn",
message: "run it",
model: "opus",
thinking: "low",
},
delivery: { mode: "announce", bestEffort: true },
},
});
});
it("maps cron stagger, model, thinking, and best effort into form", () => {
const state = createState();
const job = {
id: "job-10",
name: "Advanced job",
enabled: true,
deleteAfterRun: true,
createdAtMs: 0,
updatedAtMs: 0,
schedule: { kind: "cron" as const, expr: "0 7 * * *", tz: "UTC", staggerMs: 60_000 },
sessionTarget: "isolated" as const,
wakeMode: "now" as const,
payload: {
kind: "agentTurn" as const,
message: "hi",
model: "opus",
thinking: "high",
},
delivery: { mode: "announce" as const, bestEffort: true },
state: {},
};
startCronEdit(state, job);
expect(state.cronForm.deleteAfterRun).toBe(true);
expect(state.cronForm.scheduleKind).toBe("cron");
expect(state.cronForm.scheduleExact).toBe(false);
expect(state.cronForm.staggerAmount).toBe("1");
expect(state.cronForm.staggerUnit).toBe("minutes");
expect(state.cronForm.payloadModel).toBe("opus");
expect(state.cronForm.payloadThinking).toBe("high");
expect(state.cronForm.deliveryBestEffort).toBe(true);
});
it("validates key cron form errors", () => {
const errors = validateCronForm({
...DEFAULT_CRON_FORM,
name: "",
scheduleKind: "cron",
cronExpr: "",
payloadKind: "agentTurn",
payloadText: "",
timeoutSeconds: "0",
deliveryMode: "webhook",
deliveryTo: "ftp://bad",
});
expect(errors.name).toBeDefined();
expect(errors.cronExpr).toBeDefined();
expect(errors.payloadText).toBeDefined();
expect(errors.timeoutSeconds).toBe("If set, timeout must be greater than 0 seconds.");
expect(errors.deliveryTo).toBeDefined();
});
it("blocks add/update submit when validation errors exist", async () => {
const request = vi.fn(async () => ({}));
const state = createState({
client: { request } as unknown as CronState["client"],
cronForm: {
...DEFAULT_CRON_FORM,
name: "",
payloadText: "",
},
});
await addCronJob(state);
expect(request).not.toHaveBeenCalled();
expect(state.cronFieldErrors.name).toBeDefined();
expect(state.cronFieldErrors.payloadText).toBeDefined();
});
it("canceling edit resets form to defaults and clears edit mode", () => {
const state = createState();
const job = {
id: "job-cancel",
name: "Editable",
enabled: true,
createdAtMs: 0,
updatedAtMs: 0,
schedule: { kind: "cron" as const, expr: "0 6 * * *" },
sessionTarget: "isolated" as const,
wakeMode: "now" as const,
payload: { kind: "agentTurn" as const, message: "run" },
delivery: { mode: "announce" as const, to: "123" },
state: {},
};
startCronEdit(state, job);
state.cronForm.name = "changed";
state.cronFieldErrors = { name: "Name is required." };
cancelCronEdit(state);
expect(state.cronEditingJobId).toBeNull();
expect(state.cronForm).toEqual({ ...DEFAULT_CRON_FORM });
expect(state.cronFieldErrors).toEqual(validateCronForm(DEFAULT_CRON_FORM));
});
it("cloning a job switches to create mode and applies copy naming", () => {
const state = createState({
cronJobs: [
{
id: "job-1",
name: "Daily ping",
enabled: true,
createdAtMs: 0,
updatedAtMs: 0,
schedule: { kind: "cron", expr: "0 9 * * *" },
sessionTarget: "main",
wakeMode: "next-heartbeat",
payload: { kind: "systemEvent", text: "ping" },
state: {},
},
],
cronEditingJobId: "job-1",
});
const sourceJob = state.cronJobs[0];
expect(sourceJob).toBeDefined();
if (!sourceJob) {
return;
}
startCronClone(state, sourceJob);
expect(state.cronEditingJobId).toBeNull();
expect(state.cronRunsJobId).toBe("job-1");
expect(state.cronForm.name).toBe("Daily ping copy");
expect(state.cronForm.payloadText).toBe("ping");
});
it("submits cron.add after cloning", async () => {
const request = vi.fn(async (method: string, _payload?: unknown) => {
if (method === "cron.add") {
return { id: "job-new" };
}
if (method === "cron.list") {
return { jobs: [] };
}
if (method === "cron.status") {
return { enabled: true, jobs: 0, nextWakeAtMs: null };
}
return {};
});
const sourceJob = {
id: "job-1",
name: "Daily ping",
enabled: true,
createdAtMs: 0,
updatedAtMs: 0,
schedule: { kind: "cron" as const, expr: "0 9 * * *" },
sessionTarget: "main" as const,
wakeMode: "next-heartbeat" as const,
payload: { kind: "systemEvent" as const, text: "ping" },
state: {},
};
const state = createState({
client: { request } as unknown as CronState["client"],
cronJobs: [sourceJob],
cronEditingJobId: "job-1",
});
startCronClone(state, sourceJob);
await addCronJob(state);
const addCall = request.mock.calls.find(([method]) => method === "cron.add");
const updateCall = request.mock.calls.find(([method]) => method === "cron.update");
expect(addCall).toBeDefined();
expect(updateCall).toBeUndefined();
expect((addCall?.[1] as { name?: string } | undefined)?.name).toBe("Daily ping copy");
});
it("loads paged jobs with query/filter/sort params", async () => {
const request = vi.fn(async (method: string, payload?: unknown) => {
if (method === "cron.list") {
expect(payload).toMatchObject({
limit: 50,
offset: 0,
query: "daily",
enabled: "enabled",
sortBy: "updatedAtMs",
sortDir: "desc",
});
return {
jobs: [{ id: "job-1", name: "Daily", enabled: true }],
total: 1,
hasMore: false,
nextOffset: null,
};
}
return {};
});
const state = createState({
client: { request } as unknown as CronState["client"],
cronJobsQuery: "daily",
cronJobsEnabledFilter: "enabled",
cronJobsSortBy: "updatedAtMs",
cronJobsSortDir: "desc",
});
await loadCronJobsPage(state);
expect(state.cronJobs).toHaveLength(1);
expect(state.cronJobsTotal).toBe(1);
expect(state.cronJobsHasMore).toBe(false);
});
it("loads and appends paged run history", async () => {
const request = vi.fn(async (method: string, payload?: unknown) => {
if (method !== "cron.runs") {
return {};
}
const offset = (payload as { offset?: number } | undefined)?.offset ?? 0;
if (offset === 0) {
return {
entries: [{ ts: 2, jobId: "job-1", status: "ok", summary: "newest" }],
total: 2,
hasMore: true,
nextOffset: 1,
};
}
return {
entries: [{ ts: 1, jobId: "job-1", status: "ok", summary: "older" }],
total: 2,
hasMore: false,
nextOffset: null,
};
});
const state = createState({
client: { request } as unknown as CronState["client"],
});
await loadCronRuns(state, "job-1");
expect(state.cronRuns).toHaveLength(1);
expect(state.cronRunsHasMore).toBe(true);
await loadMoreCronRuns(state);
expect(state.cronRuns).toHaveLength(2);
expect(state.cronRuns[0]?.summary).toBe("newest");
expect(state.cronRuns[1]?.summary).toBe("older");
});
});

10
ui/src/ui/markdown.test.ts
View File

@@ -48,4 +48,14 @@ describe("toSanitizedMarkdownHtml", () => {
expect(html).not.toContain("javascript:");
expect(html).not.toContain("src=");
});
it("adds a blur class to links that include tail in the url", () => {
const html = toSanitizedMarkdownHtml("[tail](https://docs.openclaw.ai/gateway/tailscale)");
expect(html).toContain('class="chat-link-tail-blur"');
});
it("does not add blur class to non-tail links", () => {
const html = toSanitizedMarkdownHtml("[docs](https://docs.openclaw.ai/web/dashboard)");
expect(html).not.toContain('class="chat-link-tail-blur"');
});
});

14
ui/src/ui/navigation.browser.test.ts
View File

@@ -18,6 +18,7 @@ describe("control UI routing", () => {
it("hydrates the tab from the location", async () => {
const app = mountApp("/sessions");
await app.updateComplete;
await nextFrame();
expect(app.tab).toBe("sessions");
expect(window.location.pathname).toBe("/sessions");
@@ -26,6 +27,7 @@ describe("control UI routing", () => {
it("respects /ui base paths", async () => {
const app = mountApp("/ui/cron");
await app.updateComplete;
await nextFrame();
expect(app.basePath).toBe("/ui");
expect(app.tab).toBe("cron");
@@ -35,6 +37,7 @@ describe("control UI routing", () => {
it("infers nested base paths", async () => {
const app = mountApp("/apps/openclaw/cron");
await app.updateComplete;
await nextFrame();
expect(app.basePath).toBe("/apps/openclaw");
expect(app.tab).toBe("cron");
@@ -45,6 +48,7 @@ describe("control UI routing", () => {
window.__OPENCLAW_CONTROL_UI_BASE_PATH__ = "/openclaw";
const app = mountApp("/openclaw/sessions");
await app.updateComplete;
await nextFrame();
expect(app.basePath).toBe("/openclaw");
expect(app.tab).toBe("sessions");
@@ -54,12 +58,14 @@ describe("control UI routing", () => {
it("updates the URL when clicking nav items", async () => {
const app = mountApp("/chat");
await app.updateComplete;
await nextFrame();
const link = app.querySelector<HTMLAnchorElement>('a.nav-item[href="/channels"]');
expect(link).not.toBeNull();
link?.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 }));
await app.updateComplete;
await nextFrame();
expect(app.tab).toBe("channels");
expect(window.location.pathname).toBe("/channels");
});
@@ -67,12 +73,14 @@ describe("control UI routing", () => {
it("resets to the main session when opening chat from sidebar navigation", async () => {
const app = mountApp("/sessions?session=agent:main:subagent:task-123");
await app.updateComplete;
await nextFrame();
const link = app.querySelector<HTMLAnchorElement>('a.nav-item[href="/chat"]');
expect(link).not.toBeNull();
link?.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 }));
await app.updateComplete;
await nextFrame();
expect(app.tab).toBe("chat");
expect(app.sessionKey).toBe("main");
expect(window.location.pathname).toBe("/chat");
@@ -82,6 +90,7 @@ describe("control UI routing", () => {
it("keeps chat and nav usable on narrow viewports", async () => {
const app = mountApp("/chat");
await app.updateComplete;
await nextFrame();
expect(window.matchMedia("(max-width: 768px)").matches).toBe(true);
@@ -110,6 +119,7 @@ describe("control UI routing", () => {
it("auto-scrolls chat history to the latest message", async () => {
const app = mountApp("/chat");
await app.updateComplete;
await nextFrame();
const initialContainer: HTMLElement | null = app.querySelector(".chat-thread");
expect(initialContainer).not.toBeNull();
@@ -149,6 +159,7 @@ describe("control UI routing", () => {
it("hydrates token from URL params and strips it", async () => {
const app = mountApp("/ui/overview?token=abc123");
await app.updateComplete;
await nextFrame();
expect(app.settings.token).toBe("abc123");
expect(window.location.pathname).toBe("/ui/overview");
@@ -158,6 +169,7 @@ describe("control UI routing", () => {
it("strips password URL params without importing them", async () => {
const app = mountApp("/ui/overview?password=sekret");
await app.updateComplete;
await nextFrame();
expect(app.password).toBe("");
expect(window.location.pathname).toBe("/ui/overview");
@@ -171,6 +183,7 @@ describe("control UI routing", () => {
);
const app = mountApp("/ui/overview?token=abc123");
await app.updateComplete;
await nextFrame();
expect(app.settings.token).toBe("abc123");
expect(window.location.pathname).toBe("/ui/overview");
@@ -180,6 +193,7 @@ describe("control UI routing", () => {
it("hydrates token from URL hash and strips it", async () => {
const app = mountApp("/ui/overview#token=abc123");
await app.updateComplete;
await nextFrame();
expect(app.settings.token).toBe("abc123");
expect(window.location.pathname).toBe("/ui/overview");

195
ui/src/ui/navigation.test.ts
View File

@@ -26,17 +26,27 @@ describe("iconForTab", () => {
});
it("returns stable icons for known tabs", () => {
expect(iconForTab("chat")).toBe("messageSquare");
expect(iconForTab("overview")).toBe("barChart");
expect(iconForTab("channels")).toBe("link");
expect(iconForTab("instances")).toBe("radio");
expect(iconForTab("sessions")).toBe("fileText");
expect(iconForTab("cron")).toBe("loader");
expect(iconForTab("skills")).toBe("zap");
expect(iconForTab("nodes")).toBe("monitor");
expect(iconForTab("config")).toBe("settings");
expect(iconForTab("debug")).toBe("bug");
expect(iconForTab("logs")).toBe("scrollText");
const cases = [
{ tab: "chat", icon: "messageSquare" },
{ tab: "overview", icon: "barChart" },
{ tab: "channels", icon: "link" },
{ tab: "instances", icon: "radio" },
{ tab: "sessions", icon: "fileText" },
{ tab: "cron", icon: "loader" },
{ tab: "skills", icon: "zap" },
{ tab: "nodes", icon: "monitor" },
{ tab: "config", icon: "settings" },
{ tab: "communications", icon: "send" },
{ tab: "appearance", icon: "spark" },
{ tab: "automation", icon: "terminal" },
{ tab: "infrastructure", icon: "globe" },
{ tab: "aiAgents", icon: "brain" },
{ tab: "debug", icon: "bug" },
{ tab: "logs", icon: "scrollText" },
] as const;
for (const testCase of cases) {
expect(iconForTab(testCase.tab), testCase.tab).toBe(testCase.icon);
}
});
it("returns a fallback icon for unknown tab", () => {
@@ -56,9 +66,14 @@ describe("titleForTab", () => {
});
it("returns expected titles", () => {
expect(titleForTab("chat")).toBe("Chat");
expect(titleForTab("overview")).toBe("Overview");
expect(titleForTab("cron")).toBe("Cron Jobs");
const cases = [
{ tab: "chat", title: "Chat" },
{ tab: "overview", title: "Overview" },
{ tab: "cron", title: "Cron Jobs" },
] as const;
for (const testCase of cases) {
expect(titleForTab(testCase.tab), testCase.tab).toBe(testCase.title);
}
});
});
@@ -71,114 +86,102 @@ describe("subtitleForTab", () => {
});
it("returns descriptive subtitles", () => {
expect(subtitleForTab("chat")).toContain("chat session");
expect(subtitleForTab("chat")).toContain("chat");
expect(subtitleForTab("config")).toContain("openclaw.json");
});
});
describe("normalizeBasePath", () => {
it("returns empty string for falsy input", () => {
expect(normalizeBasePath("")).toBe("");
});
it("adds leading slash if missing", () => {
expect(normalizeBasePath("ui")).toBe("/ui");
});
it("removes trailing slash", () => {
expect(normalizeBasePath("/ui/")).toBe("/ui");
});
it("returns empty string for root path", () => {
expect(normalizeBasePath("/")).toBe("");
});
it("handles nested paths", () => {
expect(normalizeBasePath("/apps/openclaw")).toBe("/apps/openclaw");
it("normalizes base-path variants", () => {
const cases = [
{ input: "", expected: "" },
{ input: "ui", expected: "/ui" },
{ input: "/ui/", expected: "/ui" },
{ input: "/", expected: "" },
{ input: "/apps/openclaw", expected: "/apps/openclaw" },
] as const;
for (const testCase of cases) {
expect(normalizeBasePath(testCase.input), testCase.input).toBe(testCase.expected);
}
});
});
describe("normalizePath", () => {
it("returns / for falsy input", () => {
expect(normalizePath("")).toBe("/");
});
it("adds leading slash if missing", () => {
expect(normalizePath("chat")).toBe("/chat");
});
it("removes trailing slash except for root", () => {
expect(normalizePath("/chat/")).toBe("/chat");
expect(normalizePath("/")).toBe("/");
it("normalizes paths", () => {
const cases = [
{ input: "", expected: "/" },
{ input: "chat", expected: "/chat" },
{ input: "/chat/", expected: "/chat" },
{ input: "/", expected: "/" },
] as const;
for (const testCase of cases) {
expect(normalizePath(testCase.input), testCase.input).toBe(testCase.expected);
}
});
});
describe("pathForTab", () => {
it("returns correct path without base", () => {
expect(pathForTab("chat")).toBe("/chat");
expect(pathForTab("overview")).toBe("/overview");
});
it("prepends base path", () => {
expect(pathForTab("chat", "/ui")).toBe("/ui/chat");
expect(pathForTab("sessions", "/apps/openclaw")).toBe("/apps/openclaw/sessions");
it("builds tab paths with optional bases", () => {
const cases = [
{ tab: "chat", base: undefined, expected: "/chat" },
{ tab: "overview", base: undefined, expected: "/overview" },
{ tab: "chat", base: "/ui", expected: "/ui/chat" },
{ tab: "sessions", base: "/apps/openclaw", expected: "/apps/openclaw/sessions" },
] as const;
for (const testCase of cases) {
expect(
pathForTab(testCase.tab, testCase.base),
`${testCase.tab}:${testCase.base ?? "root"}`,
).toBe(testCase.expected);
}
});
});
describe("tabFromPath", () => {
it("returns tab for valid path", () => {
expect(tabFromPath("/chat")).toBe("chat");
expect(tabFromPath("/overview")).toBe("overview");
expect(tabFromPath("/sessions")).toBe("sessions");
});
it("returns chat for root path", () => {
expect(tabFromPath("/")).toBe("chat");
});
it("handles base paths", () => {
expect(tabFromPath("/ui/chat", "/ui")).toBe("chat");
expect(tabFromPath("/apps/openclaw/sessions", "/apps/openclaw")).toBe("sessions");
});
it("returns null for unknown path", () => {
expect(tabFromPath("/unknown")).toBeNull();
});
it("is case-insensitive", () => {
expect(tabFromPath("/CHAT")).toBe("chat");
expect(tabFromPath("/Overview")).toBe("overview");
it("resolves tabs from path variants", () => {
const cases = [
{ path: "/chat", base: undefined, expected: "chat" },
{ path: "/overview", base: undefined, expected: "overview" },
{ path: "/sessions", base: undefined, expected: "sessions" },
{ path: "/", base: undefined, expected: "chat" },
{ path: "/ui/chat", base: "/ui", expected: "chat" },
{ path: "/apps/openclaw/sessions", base: "/apps/openclaw", expected: "sessions" },
{ path: "/unknown", base: undefined, expected: null },
{ path: "/CHAT", base: undefined, expected: "chat" },
{ path: "/Overview", base: undefined, expected: "overview" },
] as const;
for (const testCase of cases) {
expect(
tabFromPath(testCase.path, testCase.base),
`${testCase.path}:${testCase.base ?? "root"}`,
).toBe(testCase.expected);
}
});
});
describe("inferBasePathFromPathname", () => {
it("returns empty string for root", () => {
expect(inferBasePathFromPathname("/")).toBe("");
});
it("returns empty string for direct tab path", () => {
expect(inferBasePathFromPathname("/chat")).toBe("");
expect(inferBasePathFromPathname("/overview")).toBe("");
});
it("infers base path from nested paths", () => {
expect(inferBasePathFromPathname("/ui/chat")).toBe("/ui");
expect(inferBasePathFromPathname("/apps/openclaw/sessions")).toBe("/apps/openclaw");
});
it("handles index.html suffix", () => {
expect(inferBasePathFromPathname("/index.html")).toBe("");
expect(inferBasePathFromPathname("/ui/index.html")).toBe("/ui");
it("infers base-path variants from pathname", () => {
const cases = [
{ path: "/", expected: "" },
{ path: "/chat", expected: "" },
{ path: "/overview", expected: "" },
{ path: "/ui/chat", expected: "/ui" },
{ path: "/apps/openclaw/sessions", expected: "/apps/openclaw" },
{ path: "/index.html", expected: "" },
{ path: "/ui/index.html", expected: "/ui" },
] as const;
for (const testCase of cases) {
expect(inferBasePathFromPathname(testCase.path), testCase.path).toBe(testCase.expected);
}
});
});
describe("TAB_GROUPS", () => {
it("contains all expected groups", () => {
const labels = TAB_GROUPS.map((g) => g.label);
expect(labels).toContain("Chat");
expect(labels).toContain("Control");
expect(labels).toContain("Agent");
expect(labels).toContain("Settings");
const labels = TAB_GROUPS.map((g) => g.label.toLowerCase());
for (const expected of ["chat", "control", "agent", "settings"]) {
expect(labels).toContain(expected);
}
});
it("all tabs are unique", () => {

12
ui/src/ui/open-external-url.test.ts
View File

@@ -89,13 +89,13 @@ describe("openExternalUrlSafe", () => {
const openedLikeProxy = {
opener: { postMessage: () => void 0 },
} as unknown as WindowProxy;
const openMock = vi.fn(() => openedLikeProxy);
vi.stubGlobal("window", {
location: { href: "https://openclaw.ai/chat" },
open: openMock,
} as unknown as Window & typeof globalThis);
const openMock = vi
.spyOn(window, "open")
.mockImplementation(() => openedLikeProxy as unknown as Window);
const opened = openExternalUrlSafe("https://example.com/safe.png");
const opened = openExternalUrlSafe("https://example.com/safe.png", {
baseHref: "https://openclaw.ai/chat",
});
expect(openMock).toHaveBeenCalledWith(
"https://example.com/safe.png",

102
ui/src/ui/views/agents-panels-tools-skills.browser.test.ts
View File

@@ -1,102 +0,0 @@
import { render } from "lit";
import { describe, expect, it } from "vitest";
import { renderAgentTools } from "./agents-panels-tools-skills.ts";
function createBaseParams(overrides: Partial<Parameters<typeof renderAgentTools>[0]> = {}) {
return {
agentId: "main",
configForm: {
agents: {
list: [{ id: "main", tools: { profile: "full" } }],
},
} as Record<string, unknown>,
configLoading: false,
configSaving: false,
configDirty: false,
toolsCatalogLoading: false,
toolsCatalogError: null,
toolsCatalogResult: null,
onProfileChange: () => undefined,
onOverridesChange: () => undefined,
onConfigReload: () => undefined,
onConfigSave: () => undefined,
...overrides,
};
}
describe("agents tools panel (browser)", () => {
it("renders per-tool provenance badges and optional marker", async () => {
const container = document.createElement("div");
render(
renderAgentTools(
createBaseParams({
toolsCatalogResult: {
agentId: "main",
profiles: [
{ id: "minimal", label: "Minimal" },
{ id: "coding", label: "Coding" },
{ id: "messaging", label: "Messaging" },
{ id: "full", label: "Full" },
],
groups: [
{
id: "media",
label: "Media",
source: "core",
tools: [
{
id: "tts",
label: "tts",
description: "Text-to-speech conversion",
source: "core",
defaultProfiles: [],
},
],
},
{
id: "plugin:voice-call",
label: "voice-call",
source: "plugin",
pluginId: "voice-call",
tools: [
{
id: "voice_call",
label: "voice_call",
description: "Voice call tool",
source: "plugin",
pluginId: "voice-call",
optional: true,
defaultProfiles: [],
},
],
},
],
},
}),
),
container,
);
await Promise.resolve();
const text = container.textContent ?? "";
expect(text).toContain("core");
expect(text).toContain("plugin:voice-call");
expect(text).toContain("optional");
});
it("shows fallback warning when runtime catalog fails", async () => {
const container = document.createElement("div");
render(
renderAgentTools(
createBaseParams({
toolsCatalogError: "unavailable",
toolsCatalogResult: null,
}),
),
container,
);
await Promise.resolve();
expect(container.textContent ?? "").toContain("Could not load runtime tool catalog");
});
});

29
ui/src/ui/views/chat.test.ts
View File

@@ -45,6 +45,9 @@ function createProps(overrides: Partial<ChatProps> = {}): ChatProps {
onSend: () => undefined,
onQueueRemove: () => undefined,
onNewSession: () => undefined,
agentsList: null,
currentAgentId: "main",
onAgentChange: () => undefined,
...overrides,
};
}
@@ -188,40 +191,38 @@ describe("chat view", () => {
renderChat(
createProps({
canAbort: true,
sending: true,
onAbort,
}),
),
container,
);
const stopButton = Array.from(container.querySelectorAll("button")).find(
(btn) => btn.textContent?.trim() === "Stop",
);
expect(stopButton).not.toBeUndefined();
const stopButton = container.querySelector<HTMLButtonElement>('button[title="Stop"]');
expect(stopButton).not.toBeNull();
stopButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(onAbort).toHaveBeenCalledTimes(1);
expect(container.textContent).not.toContain("New session");
});
it("shows a new session button when aborting is unavailable", () => {
it("shows send button when aborting is unavailable", () => {
const container = document.createElement("div");
const onNewSession = vi.fn();
const onSend = vi.fn();
render(
renderChat(
createProps({
canAbort: false,
onNewSession,
draft: "hello",
onSend,
}),
),
container,
);
const newSessionButton = Array.from(container.querySelectorAll("button")).find(
(btn) => btn.textContent?.trim() === "New session",
);
expect(newSessionButton).not.toBeUndefined();
newSessionButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(onNewSession).toHaveBeenCalledTimes(1);
expect(container.textContent).not.toContain("Stop");
const sendButton = container.querySelector<HTMLButtonElement>('button[title="Send"]');
expect(sendButton).not.toBeNull();
sendButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(onSend).toHaveBeenCalledTimes(1);
expect(container.querySelector('button[title="Stop"]')).toBeNull();
});
});

78
ui/src/ui/views/config.browser.test.ts
View File

@@ -20,11 +20,13 @@ describe("config view", () => {
schemaLoading: false,
uiHints: {},
formMode: "form" as const,
showModeToggle: true,
formValue: {},
originalValue: {},
searchQuery: "",
activeSection: null,
activeSubsection: null,
streamMode: false,
onRawChange: vi.fn(),
onFormModeChange: vi.fn(),
onFormPatch: vi.fn(),
@@ -35,9 +37,16 @@ describe("config view", () => {
onApply: vi.fn(),
onUpdate: vi.fn(),
onSubsectionChange: vi.fn(),
version: "2026.2.22",
theme: "claw" as const,
themeMode: "system" as const,
setTheme: vi.fn(),
setThemeMode: vi.fn(),
gatewayUrl: "ws://127.0.0.1:18789",
assistantName: "OpenClaw",
});
it("allows save when form is unsafe", () => {
it("allows save with mixed union schemas", () => {
const container = document.createElement("div");
render(
renderConfig({
@@ -133,7 +142,7 @@ describe("config view", () => {
expect(applyButton?.disabled).toBe(false);
});
it("switches mode via the sidebar toggle", () => {
it("switches mode via the mode toggle", () => {
const container = document.createElement("div");
const onFormModeChange = vi.fn();
render(
@@ -152,7 +161,7 @@ describe("config view", () => {
expect(onFormModeChange).toHaveBeenCalledWith("raw");
});
it("switches sections from the sidebar", () => {
it("switches sections from the top tabs", () => {
const container = document.createElement("div");
const onSectionChange = vi.fn();
render(
@@ -178,6 +187,38 @@ describe("config view", () => {
expect(onSectionChange).toHaveBeenCalledWith("gateway");
});
it("marks the active section tab as active", () => {
const container = document.createElement("div");
render(
renderConfig({
...baseProps(),
activeSection: "gateway",
schema: {
type: "object",
properties: {
gateway: { type: "object", properties: {} },
},
},
}),
container,
);
const tab = Array.from(container.querySelectorAll("button")).find(
(b) => b.textContent?.trim() === "Gateway",
);
expect(tab?.classList.contains("active")).toBe(true);
});
it("marks the root tab as active when no section is selected", () => {
const container = document.createElement("div");
render(renderConfig(baseProps()), container);
const tab = Array.from(container.querySelectorAll("button")).find(
(b) => b.textContent?.trim() === "Settings",
);
expect(tab?.classList.contains("active")).toBe(true);
});
it("wires search input to onSearchChange", () => {
const container = document.createElement("div");
const onSearchChange = vi.fn();
@@ -198,35 +239,4 @@ describe("config view", () => {
input.dispatchEvent(new Event("input", { bubbles: true }));
expect(onSearchChange).toHaveBeenCalledWith("gateway");
});
it("shows all tag options in compact tag picker", () => {
const container = document.createElement("div");
render(renderConfig(baseProps()), container);
const options = Array.from(container.querySelectorAll(".config-search__tag-option")).map(
(option) => option.textContent?.trim(),
);
expect(options).toContain("tag:security");
expect(options).toContain("tag:advanced");
expect(options).toHaveLength(15);
});
it("updates search query when toggling a tag option", () => {
const container = document.createElement("div");
const onSearchChange = vi.fn();
render(
renderConfig({
...baseProps(),
onSearchChange,
}),
container,
);
const option = container.querySelector<HTMLButtonElement>(
'.config-search__tag-option[data-tag="security"]',
);
expect(option).toBeTruthy();
option?.click();
expect(onSearchChange).toHaveBeenCalledWith("tag:security");
});
});

435
ui/src/ui/views/cron.test.ts
View File

@@ -22,93 +22,32 @@ function createProps(overrides: Partial<CronProps> = {}): CronProps {
return {
basePath: "",
loading: false,
jobsLoadingMore: false,
status: null,
jobs: [],
jobsTotal: 0,
jobsHasMore: false,
jobsQuery: "",
jobsEnabledFilter: "all",
jobsSortBy: "nextRunAtMs",
jobsSortDir: "asc",
error: null,
busy: false,
form: { ...DEFAULT_CRON_FORM },
fieldErrors: {},
canSubmit: true,
editingJobId: null,
channels: [],
channelLabels: {},
runsJobId: null,
runs: [],
runsTotal: 0,
runsHasMore: false,
runsLoadingMore: false,
runsScope: "all",
runsStatuses: [],
runsDeliveryStatuses: [],
runsStatusFilter: "all",
runsQuery: "",
runsSortDir: "desc",
agentSuggestions: [],
modelSuggestions: [],
thinkingSuggestions: [],
timezoneSuggestions: [],
deliveryToSuggestions: [],
onFormChange: () => undefined,
onRefresh: () => undefined,
onAdd: () => undefined,
onEdit: () => undefined,
onClone: () => undefined,
onCancelEdit: () => undefined,
onToggle: () => undefined,
onRun: () => undefined,
onRemove: () => undefined,
onLoadRuns: () => undefined,
onLoadMoreJobs: () => undefined,
onJobsFiltersChange: () => undefined,
onLoadMoreRuns: () => undefined,
onRunsFiltersChange: () => undefined,
...overrides,
};
}
describe("cron view", () => {
it("shows all-job history mode by default", () => {
it("prompts to select a job before showing run history", () => {
const container = document.createElement("div");
render(renderCron(createProps()), container);
expect(container.textContent).toContain("Latest runs across all jobs.");
expect(container.textContent).toContain("Status");
expect(container.textContent).toContain("All statuses");
expect(container.textContent).toContain("Delivery");
expect(container.textContent).toContain("All delivery");
expect(container.textContent).not.toContain("multi-select");
});
it("toggles run status filter via dropdown checkboxes", () => {
const container = document.createElement("div");
const onRunsFiltersChange = vi.fn();
render(
renderCron(
createProps({
onRunsFiltersChange,
}),
),
container,
);
const statusOk = container.querySelector(
'.cron-filter-dropdown[data-filter="status"] input[value="ok"]',
);
expect(statusOk).not.toBeNull();
if (!(statusOk instanceof HTMLInputElement)) {
return;
}
statusOk.checked = true;
statusOk.dispatchEvent(new Event("change", { bubbles: true }));
expect(onRunsFiltersChange).toHaveBeenCalledWith({ cronRunsStatuses: ["ok"] });
expect(container.textContent).toContain("Select a job to inspect run history.");
});
it("loads run history when clicking a job row", () => {
@@ -141,7 +80,6 @@ describe("cron view", () => {
createProps({
jobs: [job],
runsJobId: "job-1",
runsScope: "job",
onLoadRuns,
}),
),
@@ -197,7 +135,6 @@ describe("cron view", () => {
createProps({
jobs: [job],
runsJobId: "job-1",
runsScope: "job",
runs: [
{ ts: 1, jobId: "job-1", status: "ok", summary: "older run" },
{ ts: 2, jobId: "job-1", status: "ok", summary: "newer run" },
@@ -222,30 +159,6 @@ describe("cron view", () => {
expect(summaries[1]).toBe("older run");
});
it("labels past nextRunAtMs as due instead of next", () => {
const container = document.createElement("div");
render(
renderCron(
createProps({
runsScope: "all",
runs: [
{
ts: Date.now(),
jobId: "job-1",
status: "ok",
summary: "done",
nextRunAtMs: Date.now() - 13 * 60_000,
},
],
}),
),
container,
);
expect(container.textContent).toContain("Due");
expect(container.textContent).not.toContain("Next 13");
});
it("shows webhook delivery option in the form", () => {
const container = document.createElement("div");
render(
@@ -285,7 +198,7 @@ describe("cron view", () => {
expect(options).not.toContain("Announce summary (default)");
expect(options).toContain("Webhook POST");
expect(options).toContain("None (internal)");
expect(container.querySelector('input[placeholder="https://example.com/cron"]')).toBeNull();
expect(container.querySelector('input[placeholder="https://example.invalid/cron"]')).toBeNull();
});
it("shows webhook delivery details for jobs", () => {
@@ -309,346 +222,4 @@ describe("cron view", () => {
expect(container.textContent).toContain("webhook");
expect(container.textContent).toContain("https://example.invalid/cron");
});
it("wires the Edit action and shows save/cancel controls when editing", () => {
const container = document.createElement("div");
const onEdit = vi.fn();
const onLoadRuns = vi.fn();
const onCancelEdit = vi.fn();
const job = createJob("job-3");
render(
renderCron(
createProps({
jobs: [job],
editingJobId: "job-3",
onEdit,
onLoadRuns,
onCancelEdit,
}),
),
container,
);
const editButton = Array.from(container.querySelectorAll("button")).find(
(btn) => btn.textContent?.trim() === "Edit",
);
expect(editButton).not.toBeUndefined();
editButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(onEdit).toHaveBeenCalledWith(job);
expect(onLoadRuns).toHaveBeenCalledWith("job-3");
expect(container.textContent).toContain("Edit Job");
expect(container.textContent).toContain("Save changes");
const cancelButton = Array.from(container.querySelectorAll("button")).find(
(btn) => btn.textContent?.trim() === "Cancel",
);
expect(cancelButton).not.toBeUndefined();
cancelButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(onCancelEdit).toHaveBeenCalledTimes(1);
});
it("renders advanced controls for cron + agent payload + delivery", () => {
const container = document.createElement("div");
render(
renderCron(
createProps({
form: {
...DEFAULT_CRON_FORM,
scheduleKind: "cron",
payloadKind: "agentTurn",
deliveryMode: "announce",
},
}),
),
container,
);
expect(container.textContent).toContain("Advanced");
expect(container.textContent).toContain("Exact timing (no stagger)");
expect(container.textContent).toContain("Stagger window");
expect(container.textContent).toContain("Model");
expect(container.textContent).toContain("Thinking");
expect(container.textContent).toContain("Best effort delivery");
});
it("groups stagger window and unit inside the same stagger row", () => {
const container = document.createElement("div");
render(
renderCron(
createProps({
form: {
...DEFAULT_CRON_FORM,
scheduleKind: "cron",
payloadKind: "agentTurn",
},
}),
),
container,
);
const staggerGroup = container.querySelector(".cron-stagger-group");
expect(staggerGroup).not.toBeNull();
expect(staggerGroup?.textContent).toContain("Stagger window");
expect(staggerGroup?.textContent).toContain("Stagger unit");
});
it("explains timeout blank behavior and shows cron jitter hint", () => {
const container = document.createElement("div");
render(
renderCron(
createProps({
form: {
...DEFAULT_CRON_FORM,
scheduleKind: "cron",
payloadKind: "agentTurn",
},
}),
),
container,
);
expect(container.textContent).toContain(
"Optional. Leave blank to use the gateway default timeout behavior for this run.",
);
expect(container.textContent).toContain("Need jitter? Use Advanced");
});
it("disables Agent ID when clear-agent is enabled", () => {
const container = document.createElement("div");
render(
renderCron(
createProps({
form: {
...DEFAULT_CRON_FORM,
clearAgent: true,
},
}),
),
container,
);
const agentInput = container.querySelector('input[placeholder="main or ops"]');
expect(agentInput).not.toBeNull();
expect(agentInput instanceof HTMLInputElement).toBe(true);
expect(agentInput instanceof HTMLInputElement ? agentInput.disabled : false).toBe(true);
});
it("renders sectioned cron form layout", () => {
const container = document.createElement("div");
render(renderCron(createProps()), container);
expect(container.textContent).toContain("Enabled");
expect(container.textContent).toContain("Jobs");
expect(container.textContent).toContain("Next wake");
expect(container.textContent).toContain("Basics");
expect(container.textContent).toContain("Schedule");
expect(container.textContent).toContain("Execution");
expect(container.textContent).toContain("Delivery");
expect(container.textContent).toContain("Advanced");
});
it("renders checkbox fields with input first for alignment", () => {
const container = document.createElement("div");
render(renderCron(createProps()), container);
const checkboxLabel = container.querySelector(".cron-checkbox");
expect(checkboxLabel).not.toBeNull();
const firstElement = checkboxLabel?.firstElementChild;
expect(firstElement?.tagName.toLowerCase()).toBe("input");
});
it("hides cron-only advanced controls for non-cron schedules", () => {
const container = document.createElement("div");
render(
renderCron(
createProps({
form: {
...DEFAULT_CRON_FORM,
scheduleKind: "every",
payloadKind: "systemEvent",
deliveryMode: "none",
},
}),
),
container,
);
expect(container.textContent).not.toContain("Exact timing (no stagger)");
expect(container.textContent).not.toContain("Stagger window");
expect(container.textContent).not.toContain("Model");
expect(container.textContent).not.toContain("Best effort delivery");
});
it("renders inline validation errors and disables submit when invalid", () => {
const container = document.createElement("div");
render(
renderCron(
createProps({
form: {
...DEFAULT_CRON_FORM,
name: "",
scheduleKind: "cron",
cronExpr: "",
payloadText: "",
},
fieldErrors: {
name: "Name is required.",
cronExpr: "Cron expression is required.",
payloadText: "Agent message is required.",
},
canSubmit: false,
}),
),
container,
);
expect(container.textContent).toContain("Name is required.");
expect(container.textContent).toContain("Cron expression is required.");
expect(container.textContent).toContain("Agent message is required.");
expect(container.textContent).toContain("Can't add job yet");
expect(container.textContent).toContain("Fix 3 fields to continue.");
const saveButton = Array.from(container.querySelectorAll("button")).find((btn) =>
["Add job", "Save changes"].includes(btn.textContent?.trim() ?? ""),
);
expect(saveButton).not.toBeUndefined();
expect(saveButton?.disabled).toBe(true);
});
it("shows required legend and aria bindings for invalid required fields", () => {
const container = document.createElement("div");
render(
renderCron(
createProps({
form: {
...DEFAULT_CRON_FORM,
scheduleKind: "every",
name: "",
everyAmount: "",
payloadText: "",
},
fieldErrors: {
name: "Name is required.",
everyAmount: "Interval must be greater than 0.",
payloadText: "Agent message is required.",
},
canSubmit: false,
}),
),
container,
);
expect(container.textContent).toContain("* Required");
const nameInput = container.querySelector("#cron-name");
expect(nameInput?.getAttribute("aria-invalid")).toBe("true");
expect(nameInput?.getAttribute("aria-describedby")).toBe("cron-error-name");
expect(container.querySelector("#cron-error-name")?.textContent).toContain("Name is required.");
const everyInput = container.querySelector("#cron-every-amount");
expect(everyInput?.getAttribute("aria-invalid")).toBe("true");
expect(everyInput?.getAttribute("aria-describedby")).toBe("cron-error-everyAmount");
expect(container.querySelector("#cron-error-everyAmount")?.textContent).toContain(
"Interval must be greater than 0.",
);
});
it("wires the Clone action from job rows", () => {
const container = document.createElement("div");
const onClone = vi.fn();
const onLoadRuns = vi.fn();
const job = createJob("job-clone");
render(
renderCron(
createProps({
jobs: [job],
onClone,
onLoadRuns,
}),
),
container,
);
const cloneButton = Array.from(container.querySelectorAll("button")).find(
(btn) => btn.textContent?.trim() === "Clone",
);
expect(cloneButton).not.toBeUndefined();
cloneButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(onClone).toHaveBeenCalledWith(job);
expect(onLoadRuns).toHaveBeenCalledWith("job-clone");
});
it("selects row when clicking Enable/Disable, Run, and Remove actions", () => {
const container = document.createElement("div");
const onToggle = vi.fn();
const onRun = vi.fn();
const onRemove = vi.fn();
const onLoadRuns = vi.fn();
const job = createJob("job-actions");
render(
renderCron(
createProps({
jobs: [job],
onToggle,
onRun,
onRemove,
onLoadRuns,
}),
),
container,
);
const enableButton = Array.from(container.querySelectorAll("button")).find(
(btn) => btn.textContent?.trim() === "Disable",
);
expect(enableButton).not.toBeUndefined();
enableButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
const runButton = Array.from(container.querySelectorAll("button")).find(
(btn) => btn.textContent?.trim() === "Run",
);
expect(runButton).not.toBeUndefined();
runButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
const removeButton = Array.from(container.querySelectorAll("button")).find(
(btn) => btn.textContent?.trim() === "Remove",
);
expect(removeButton).not.toBeUndefined();
removeButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(onToggle).toHaveBeenCalledWith(job, false);
expect(onRun).toHaveBeenCalledWith(job);
expect(onRemove).toHaveBeenCalledWith(job);
expect(onLoadRuns).toHaveBeenCalledTimes(3);
expect(onLoadRuns).toHaveBeenNthCalledWith(1, "job-actions");
expect(onLoadRuns).toHaveBeenNthCalledWith(2, "job-actions");
expect(onLoadRuns).toHaveBeenNthCalledWith(3, "job-actions");
});
it("renders suggestion datalists for agent/model/thinking/timezone", () => {
const container = document.createElement("div");
render(
renderCron(
createProps({
form: { ...DEFAULT_CRON_FORM, scheduleKind: "cron", payloadKind: "agentTurn" },
agentSuggestions: ["main"],
modelSuggestions: ["openai/gpt-5.2"],
thinkingSuggestions: ["low"],
timezoneSuggestions: ["UTC"],
deliveryToSuggestions: ["+15551234567"],
}),
),
container,
);
expect(container.querySelector("datalist#cron-agent-suggestions")).not.toBeNull();
expect(container.querySelector("datalist#cron-model-suggestions")).not.toBeNull();
expect(container.querySelector("datalist#cron-thinking-suggestions")).not.toBeNull();
expect(container.querySelector("datalist#cron-tz-suggestions")).not.toBeNull();
expect(container.querySelector("datalist#cron-delivery-to-suggestions")).not.toBeNull();
expect(container.querySelector('input[list="cron-agent-suggestions"]')).not.toBeNull();
expect(container.querySelector('input[list="cron-model-suggestions"]')).not.toBeNull();
expect(container.querySelector('input[list="cron-thinking-suggestions"]')).not.toBeNull();
expect(container.querySelector('input[list="cron-tz-suggestions"]')).not.toBeNull();
expect(container.querySelector('input[list="cron-delivery-to-suggestions"]')).not.toBeNull();
});
});

11
ui/src/ui/views/sessions.test.ts
View File

@@ -23,7 +23,18 @@ function buildProps(result: SessionsListResult): SessionsProps {
includeGlobal: false,
includeUnknown: false,
basePath: "",
searchQuery: "",
sortColumn: "updated",
sortDir: "desc",
page: 0,
pageSize: 10,
actionsOpenKey: null,
onFiltersChange: () => undefined,
onSearchChange: () => undefined,
onSortChange: () => undefined,
onPageChange: () => undefined,
onPageSizeChange: () => undefined,
onActionsOpenChange: () => undefined,
onRefresh: () => undefined,
onPatch: () => undefined,
onDelete: () => undefined,