Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 464c5d7410 | |||
| 8bd3585f55 | |||
| a507d5d19f | |||
| 7f90630f98 | |||
| 303cc4623e | |||
| de2d4330df | |||
| 1688c1a991 |
@@ -220,12 +220,14 @@ jobs:
|
||||
run: |
|
||||
set -euo pipefail
|
||||
if [ -z "${MOLECULE_GITEA_TOKEN}" ]; then
|
||||
echo "::error::AUTO_SYNC_TOKEN secret is empty — register the devops-engineer persona PAT in repo Actions secrets"
|
||||
exit 1
|
||||
echo "::warning::AUTO_SYNC_TOKEN not set — using anonymous clone (repos are public per manifest.json OSS contract)"
|
||||
fi
|
||||
mkdir -p .tenant-bundle-deps
|
||||
# Strip JSON5 comments before jq parsing — Integration Tester appends
|
||||
# `// Triggered by ...` which breaks `jq` in clone-manifest.sh.
|
||||
sed '/^[[:space:]]*\/\//d' manifest.json > .manifest-stripped.json
|
||||
bash scripts/clone-manifest.sh \
|
||||
manifest.json \
|
||||
.manifest-stripped.json \
|
||||
.tenant-bundle-deps/workspace-configs-templates \
|
||||
.tenant-bundle-deps/org-templates \
|
||||
.tenant-bundle-deps/plugins
|
||||
|
||||
@@ -96,8 +96,11 @@ jobs:
|
||||
# 2026-05-08 migration). The token is only needed for private repos.
|
||||
# Do NOT require it — a missing secret would fail the build unnecessarily.
|
||||
mkdir -p .tenant-bundle-deps
|
||||
# Strip JSON5 comments before jq parsing — Integration Tester appends
|
||||
# `// Triggered by ...` which breaks `jq` in clone-manifest.sh.
|
||||
sed '/^[[:space:]]*\/\//d' manifest.json > .manifest-stripped.json
|
||||
bash scripts/clone-manifest.sh \
|
||||
manifest.json \
|
||||
.manifest-stripped.json \
|
||||
.tenant-bundle-deps/workspace-configs-templates \
|
||||
.tenant-bundle-deps/org-templates \
|
||||
.tenant-bundle-deps/plugins
|
||||
|
||||
@@ -0,0 +1,224 @@
|
||||
// @vitest-environment jsdom
|
||||
/**
|
||||
* FilesTab: NotAvailablePanel + FilesToolbar coverage.
|
||||
*
|
||||
* NotAvailablePanel: pure presentational component — renders a "feature not
|
||||
* available" placeholder for external-runtime workspaces.
|
||||
* FilesToolbar: pure props-driven component — directory selector, file count,
|
||||
* action buttons (New, Upload, Export, Clear, Refresh) with correct aria-labels.
|
||||
*
|
||||
* No @testing-library/jest-dom import — use textContent / className /
|
||||
* getAttribute checks to avoid "expect is not defined" errors.
|
||||
*/
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import { cleanup, render, screen } from "@testing-library/react";
|
||||
import React from "react";
|
||||
|
||||
import { FilesToolbar } from "../FilesToolbar";
|
||||
import { NotAvailablePanel } from "../NotAvailablePanel";
|
||||
|
||||
// ─── afterEach ─────────────────────────────────────────────────────────────────
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
// ─── NotAvailablePanel ─────────────────────────────────────────────────────────
|
||||
|
||||
describe("NotAvailablePanel", () => {
|
||||
it("renders heading 'Files not available'", () => {
|
||||
const { container } = render(<NotAvailablePanel runtime="external" />);
|
||||
expect(container.textContent).toContain("Files not available");
|
||||
});
|
||||
|
||||
it("renders the runtime name in monospace", () => {
|
||||
const { container } = render(<NotAvailablePanel runtime="external" />);
|
||||
expect(container.textContent).toContain("external");
|
||||
const spans = container.querySelectorAll("span");
|
||||
const monoSpans = Array.from(spans).filter(
|
||||
(s) => s.className && s.className.includes("font-mono"),
|
||||
);
|
||||
expect(monoSpans.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("renders a Chat tab hint in description", () => {
|
||||
const { container } = render(<NotAvailablePanel runtime="remote-agent" />);
|
||||
expect(container.textContent).toContain("Chat tab");
|
||||
});
|
||||
|
||||
it("SVG icon has aria-hidden=true", () => {
|
||||
const { container } = render(<NotAvailablePanel runtime="external" />);
|
||||
const svg = container.querySelector("svg");
|
||||
expect(svg?.getAttribute("aria-hidden")).toBe("true");
|
||||
});
|
||||
|
||||
it("renders without crashing for any runtime string", () => {
|
||||
const { container } = render(<NotAvailablePanel runtime="unknown-runtime" />);
|
||||
expect(container.textContent).toContain("unknown-runtime");
|
||||
});
|
||||
|
||||
it("applies the correct layout classes to root div", () => {
|
||||
const { container } = render(<NotAvailablePanel runtime="external" />);
|
||||
const root = container.firstElementChild as HTMLElement;
|
||||
expect(root.className).toContain("flex");
|
||||
expect(root.className).toContain("flex-col");
|
||||
expect(root.className).toContain("items-center");
|
||||
});
|
||||
});
|
||||
|
||||
// ─── FilesToolbar ───────────────────────────────────────────────────────────────
|
||||
|
||||
describe("FilesToolbar", () => {
|
||||
const noop = vi.fn();
|
||||
|
||||
function renderToolbar(props: Partial<React.ComponentProps<typeof FilesToolbar>> = {}) {
|
||||
return render(
|
||||
<FilesToolbar
|
||||
root="/configs"
|
||||
setRoot={noop}
|
||||
fileCount={0}
|
||||
onNewFile={noop}
|
||||
onUpload={noop}
|
||||
onDownloadAll={noop}
|
||||
onClearAll={noop}
|
||||
onRefresh={noop}
|
||||
{...props}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
it("renders the directory selector with correct aria-label", () => {
|
||||
const { container } = renderToolbar();
|
||||
const select = container.querySelector("select");
|
||||
expect(select?.getAttribute("aria-label")).toBe("File root directory");
|
||||
});
|
||||
|
||||
it("directory selector has all four options", () => {
|
||||
const { container } = renderToolbar();
|
||||
const select = container.querySelector("select") as HTMLSelectElement;
|
||||
const options = Array.from(select?.options ?? []);
|
||||
const values = options.map((o) => o.value);
|
||||
expect(values).toContain("/configs");
|
||||
expect(values).toContain("/home");
|
||||
expect(values).toContain("/workspace");
|
||||
expect(values).toContain("/plugins");
|
||||
});
|
||||
|
||||
it("calls setRoot when directory changes", () => {
|
||||
const setRoot = vi.fn();
|
||||
const { container } = renderToolbar({ setRoot });
|
||||
const select = container.querySelector("select") as HTMLSelectElement;
|
||||
select.value = "/home";
|
||||
select.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
expect(setRoot).toHaveBeenCalledWith("/home");
|
||||
});
|
||||
|
||||
it("displays the file count", () => {
|
||||
const { container } = renderToolbar({ fileCount: 42 });
|
||||
expect(container.textContent).toContain("42 files");
|
||||
});
|
||||
|
||||
it("shows New + Upload + Clear buttons for /configs", () => {
|
||||
const { container } = renderToolbar({ root: "/configs" });
|
||||
const texts = Array.from(container.querySelectorAll("button")).map(
|
||||
(b) => b.textContent?.trim(),
|
||||
);
|
||||
expect(texts).toContain("+ New");
|
||||
expect(texts).toContain("Upload");
|
||||
expect(texts).toContain("Clear");
|
||||
expect(texts).toContain("Export");
|
||||
expect(texts).toContain("↻");
|
||||
});
|
||||
|
||||
it("hides New + Upload + Clear for /workspace", () => {
|
||||
const { container } = renderToolbar({ root: "/workspace" });
|
||||
const texts = Array.from(container.querySelectorAll("button")).map(
|
||||
(b) => b.textContent?.trim(),
|
||||
);
|
||||
expect(texts).not.toContain("+ New");
|
||||
expect(texts).not.toContain("Upload");
|
||||
expect(texts).not.toContain("Clear");
|
||||
expect(texts).toContain("Export");
|
||||
});
|
||||
|
||||
it("hides New + Upload + Clear for /home", () => {
|
||||
const { container } = renderToolbar({ root: "/home" });
|
||||
const texts = Array.from(container.querySelectorAll("button")).map(
|
||||
(b) => b.textContent?.trim(),
|
||||
);
|
||||
expect(texts).not.toContain("+ New");
|
||||
expect(texts).not.toContain("Upload");
|
||||
expect(texts).not.toContain("Clear");
|
||||
});
|
||||
|
||||
it("hides New + Upload + Clear for /plugins", () => {
|
||||
const { container } = renderToolbar({ root: "/plugins" });
|
||||
const texts = Array.from(container.querySelectorAll("button")).map(
|
||||
(b) => b.textContent?.trim(),
|
||||
);
|
||||
expect(texts).not.toContain("+ New");
|
||||
expect(texts).not.toContain("Upload");
|
||||
expect(texts).not.toContain("Clear");
|
||||
});
|
||||
|
||||
it("New button has correct aria-label", () => {
|
||||
const { container } = renderToolbar({ root: "/configs" });
|
||||
const newBtn = container.querySelector('button[aria-label="Create new file"]');
|
||||
expect(newBtn?.textContent?.trim()).toBe("+ New");
|
||||
});
|
||||
|
||||
it("Export button has correct aria-label", () => {
|
||||
const { container } = renderToolbar();
|
||||
const exportBtn = container.querySelector('button[aria-label="Download all files"]');
|
||||
expect(exportBtn?.textContent?.trim()).toBe("Export");
|
||||
});
|
||||
|
||||
it("Clear button has correct aria-label", () => {
|
||||
const { container } = renderToolbar({ root: "/configs" });
|
||||
const clearBtn = container.querySelector('button[aria-label="Delete all files"]');
|
||||
expect(clearBtn?.textContent?.trim()).toBe("Clear");
|
||||
});
|
||||
|
||||
it("Refresh button has correct aria-label", () => {
|
||||
const { container } = renderToolbar();
|
||||
const refreshBtn = container.querySelector('button[aria-label="Refresh file list"]');
|
||||
expect(refreshBtn?.textContent?.trim()).toBe("↻");
|
||||
});
|
||||
|
||||
it("calls onNewFile when New button is clicked", () => {
|
||||
const onNewFile = vi.fn();
|
||||
const { container } = renderToolbar({ root: "/configs", onNewFile });
|
||||
container.querySelector('button[aria-label="Create new file"]')!.click();
|
||||
expect(onNewFile).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("calls onDownloadAll when Export button is clicked", () => {
|
||||
const onDownloadAll = vi.fn();
|
||||
const { container } = renderToolbar({ onDownloadAll });
|
||||
container.querySelector('button[aria-label="Download all files"]')!.click();
|
||||
expect(onDownloadAll).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("calls onClearAll when Clear button is clicked", () => {
|
||||
const onClearAll = vi.fn();
|
||||
const { container } = renderToolbar({ root: "/configs", onClearAll });
|
||||
container.querySelector('button[aria-label="Delete all files"]')!.click();
|
||||
expect(onClearAll).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("calls onRefresh when Refresh button is clicked", () => {
|
||||
const onRefresh = vi.fn();
|
||||
const { container } = renderToolbar({ onRefresh });
|
||||
container.querySelector('button[aria-label="Refresh file list"]')!.click();
|
||||
expect(onRefresh).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("applies focus-visible ring to all interactive buttons", () => {
|
||||
const { container } = renderToolbar({ root: "/configs" });
|
||||
const buttons = container.querySelectorAll("button");
|
||||
for (const btn of buttons) {
|
||||
expect(btn.className).toContain("focus-visible:ring-2");
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1,451 +0,0 @@
|
||||
// @vitest-environment jsdom
|
||||
/**
|
||||
* form-inputs — pure presentational form primitives for the Config tab.
|
||||
*
|
||||
* NOTE: No @testing-library/jest-dom import — use textContent / className /
|
||||
* getAttribute / checked / value checks to avoid "expect is not defined"
|
||||
* errors in this vitest configuration.
|
||||
*
|
||||
* Covers:
|
||||
* - TextInput renders label and input with correct value
|
||||
* - TextInput calls onChange with new value on keystroke
|
||||
* - TextInput renders placeholder text when provided
|
||||
* - TextInput applies mono class when mono=true
|
||||
* - TextInput input has accessible aria-label from label
|
||||
* - TextInput input is not mono by default
|
||||
* - NumberInput renders label and number input
|
||||
* - NumberInput calls onChange with parsed integer on keystroke
|
||||
* - NumberInput calls onChange with 0 for non-numeric input
|
||||
* - NumberInput respects min/max bounds
|
||||
* - NumberInput input has aria-label from label prop
|
||||
* - NumberInput input has font-mono class
|
||||
* - Toggle renders checkbox with label text
|
||||
* - Toggle renders checked/unchecked state correctly
|
||||
* - Toggle calls onChange with boolean on toggle
|
||||
* - TagList renders existing tags with remove buttons
|
||||
* - TagList × button has aria-label "Remove tag {value}"
|
||||
* - TagList calls onChange without removed tag on × click
|
||||
* - TagList renders the label text
|
||||
* - TagList renders placeholder text when provided
|
||||
* - TagList renders exactly one textbox
|
||||
* - TagList adds tag on Enter key
|
||||
* - TagList does not add empty/whitespace-only tags on Enter
|
||||
* - TagList clears input after adding tag
|
||||
* - Section renders the title
|
||||
* - Section renders children when open (defaultOpen=true)
|
||||
* - Section starts closed when defaultOpen=false
|
||||
* - Section opens/closes content on title click
|
||||
* - Section button has aria-expanded reflecting open state
|
||||
* - Section toggle indicator changes on open/close
|
||||
*/
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
|
||||
import React from "react";
|
||||
|
||||
import {
|
||||
TextInput,
|
||||
NumberInput,
|
||||
Toggle,
|
||||
TagList,
|
||||
Section,
|
||||
} from "../form-inputs";
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.restoreAllMocks();
|
||||
vi.resetModules();
|
||||
});
|
||||
|
||||
// ─── TextInput ───────────────────────────────────────────────────────────────
|
||||
|
||||
describe("TextInput", () => {
|
||||
it("renders the label text", () => {
|
||||
const { container } = render(
|
||||
<TextInput label="Agent Name" value="" onChange={vi.fn()} />,
|
||||
);
|
||||
expect(container.textContent).toContain("Agent Name");
|
||||
});
|
||||
|
||||
it("renders the input with the given value", () => {
|
||||
render(<TextInput label="Model" value="claude-opus-4" onChange={vi.fn()} />);
|
||||
const input = document.querySelector("input") as HTMLInputElement;
|
||||
expect(input.value).toBe("claude-opus-4");
|
||||
});
|
||||
|
||||
it("calls onChange with new value on keystroke", () => {
|
||||
const onChange = vi.fn();
|
||||
render(<TextInput label="Name" value="hello" onChange={onChange} />);
|
||||
const input = document.querySelector("input") as HTMLInputElement;
|
||||
fireEvent.change(input, { target: { value: "hello world" } });
|
||||
expect(onChange).toHaveBeenCalledWith("hello world");
|
||||
});
|
||||
|
||||
it("renders placeholder text when provided", () => {
|
||||
render(
|
||||
<TextInput
|
||||
label="Token"
|
||||
value=""
|
||||
onChange={vi.fn()}
|
||||
placeholder="sk-..."
|
||||
/>,
|
||||
);
|
||||
const input = document.querySelector("input") as HTMLInputElement;
|
||||
expect(input.getAttribute("placeholder")).toBe("sk-...");
|
||||
});
|
||||
|
||||
it("applies mono class when mono=true", () => {
|
||||
const { container } = render(
|
||||
<TextInput label="Model" value="" onChange={vi.fn()} mono />,
|
||||
);
|
||||
const input = container.querySelector("input") as HTMLInputElement;
|
||||
expect(input.className).toContain("font-mono");
|
||||
});
|
||||
|
||||
it("input has aria-label matching the label", () => {
|
||||
render(<TextInput label="API Key" value="" onChange={vi.fn()} />);
|
||||
const input = document.querySelector("input") as HTMLInputElement;
|
||||
expect(input.getAttribute("aria-label")).toBe("API Key");
|
||||
});
|
||||
|
||||
it("input is not mono by default", () => {
|
||||
const { container } = render(
|
||||
<TextInput label="Description" value="" onChange={vi.fn()} />,
|
||||
);
|
||||
const input = container.querySelector("input") as HTMLInputElement;
|
||||
expect(input.className).not.toContain("font-mono");
|
||||
});
|
||||
});
|
||||
|
||||
// ─── NumberInput ─────────────────────────────────────────────────────────────
|
||||
|
||||
describe("NumberInput", () => {
|
||||
it("renders the label text", () => {
|
||||
const { container } = render(
|
||||
<NumberInput label="Timeout (s)" value={30} onChange={vi.fn()} />,
|
||||
);
|
||||
expect(container.textContent).toContain("Timeout (s)");
|
||||
});
|
||||
|
||||
it("renders the input with the given numeric value", () => {
|
||||
render(<NumberInput label="Retries" value={3} onChange={vi.fn()} />);
|
||||
const input = document.querySelector("input[type=number]") as HTMLInputElement;
|
||||
expect(input.value).toBe("3");
|
||||
});
|
||||
|
||||
it("calls onChange with parsed integer on keystroke", () => {
|
||||
const onChange = vi.fn();
|
||||
render(<NumberInput label="Delay" value={1} onChange={onChange} />);
|
||||
const input = document.querySelector("input[type=number]") as HTMLInputElement;
|
||||
fireEvent.change(input, { target: { value: "7" } });
|
||||
expect(onChange).toHaveBeenCalledWith(7);
|
||||
});
|
||||
|
||||
it("calls onChange with 0 for non-numeric input", () => {
|
||||
const onChange = vi.fn();
|
||||
render(<NumberInput label="Count" value={5} onChange={onChange} />);
|
||||
const input = document.querySelector("input[type=number]") as HTMLInputElement;
|
||||
fireEvent.change(input, { target: { value: "abc" } });
|
||||
expect(onChange).toHaveBeenCalledWith(0);
|
||||
});
|
||||
|
||||
it("respects min attribute", () => {
|
||||
render(
|
||||
<NumberInput
|
||||
label="Port"
|
||||
value={8000}
|
||||
onChange={vi.fn()}
|
||||
min={1024}
|
||||
/>,
|
||||
);
|
||||
const input = document.querySelector("input[type=number]") as HTMLInputElement;
|
||||
expect(input.getAttribute("min")).toBe("1024");
|
||||
});
|
||||
|
||||
it("respects max attribute", () => {
|
||||
render(
|
||||
<NumberInput
|
||||
label="Memory (MB)"
|
||||
value={256}
|
||||
onChange={vi.fn()}
|
||||
max={65535}
|
||||
/>,
|
||||
);
|
||||
const input = document.querySelector("input[type=number]") as HTMLInputElement;
|
||||
expect(input.getAttribute("max")).toBe("65535");
|
||||
});
|
||||
|
||||
it("input has aria-label from label prop", () => {
|
||||
render(<NumberInput label="Timeout" value={60} onChange={vi.fn()} />);
|
||||
const input = document.querySelector("input[type=number]") as HTMLInputElement;
|
||||
expect(input.getAttribute("aria-label")).toBe("Timeout");
|
||||
});
|
||||
|
||||
it("input has font-mono class", () => {
|
||||
const { container } = render(
|
||||
<NumberInput label="Budget" value={100} onChange={vi.fn()} />,
|
||||
);
|
||||
const input = container.querySelector("input") as HTMLInputElement;
|
||||
expect(input.className).toContain("font-mono");
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Toggle ──────────────────────────────────────────────────────────────────
|
||||
|
||||
describe("Toggle", () => {
|
||||
it("renders the checkbox with label text", () => {
|
||||
const { container } = render(
|
||||
<Toggle label="Enable streaming" checked={false} onChange={vi.fn()} />,
|
||||
);
|
||||
const checkbox = container.querySelector(
|
||||
"input[type=checkbox]",
|
||||
) as HTMLInputElement;
|
||||
expect(checkbox.checked).toBe(false);
|
||||
expect(
|
||||
checkbox.closest("label")?.textContent,
|
||||
).toContain("Enable streaming");
|
||||
});
|
||||
|
||||
it("renders checked state correctly", () => {
|
||||
const { container } = render(
|
||||
<Toggle label="Push notifications" checked onChange={vi.fn()} />,
|
||||
);
|
||||
const checkbox = container.querySelector(
|
||||
"input[type=checkbox]",
|
||||
) as HTMLInputElement;
|
||||
expect(checkbox.checked).toBe(true);
|
||||
});
|
||||
|
||||
it("calls onChange with true when toggled on", () => {
|
||||
const onChange = vi.fn();
|
||||
const { container } = render(
|
||||
<Toggle label="Escalate" checked={false} onChange={onChange} />,
|
||||
);
|
||||
const checkbox = container.querySelector(
|
||||
"input[type=checkbox]",
|
||||
) as HTMLInputElement;
|
||||
checkbox.click();
|
||||
expect(onChange).toHaveBeenCalledWith(true);
|
||||
});
|
||||
|
||||
it("calls onChange with false when toggled off", () => {
|
||||
const onChange = vi.fn();
|
||||
const { container } = render(
|
||||
<Toggle label="Escalate" checked onChange={onChange} />,
|
||||
);
|
||||
const checkbox = container.querySelector(
|
||||
"input[type=checkbox]",
|
||||
) as HTMLInputElement;
|
||||
checkbox.click();
|
||||
expect(onChange).toHaveBeenCalledWith(false);
|
||||
});
|
||||
|
||||
it("checkbox is a native input element", () => {
|
||||
const { container } = render(
|
||||
<Toggle label="Feature flag" checked={false} onChange={vi.fn()} />,
|
||||
);
|
||||
expect(container.querySelector("input[type=checkbox]")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
// ─── TagList ────────────────────────────────────────────────────────────────
|
||||
|
||||
describe("TagList", () => {
|
||||
it("renders existing tags", () => {
|
||||
const { container } = render(
|
||||
<TagList label="Tools" values={["file_read", "bash"]} onChange={vi.fn()} />,
|
||||
);
|
||||
expect(container.textContent).toContain("file_read");
|
||||
expect(container.textContent).toContain("bash");
|
||||
});
|
||||
|
||||
it("renders × remove button for each tag with aria-label", () => {
|
||||
render(
|
||||
<TagList
|
||||
label="Skills"
|
||||
values={["python", "golang"]}
|
||||
onChange={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
const buttons = document.querySelectorAll("button");
|
||||
// buttons[0] = first × (python), buttons[1] = second × (golang)
|
||||
expect(buttons[0].getAttribute("aria-label")).toBe(
|
||||
"Remove tag python",
|
||||
);
|
||||
expect(buttons[1].getAttribute("aria-label")).toBe(
|
||||
"Remove tag golang",
|
||||
);
|
||||
});
|
||||
|
||||
it("calls onChange without removed tag when × is clicked", () => {
|
||||
const onChange = vi.fn();
|
||||
render(
|
||||
<TagList
|
||||
label="Tags"
|
||||
values={["react", "vue", "angular"]}
|
||||
onChange={onChange}
|
||||
/>,
|
||||
);
|
||||
const buttons = document.querySelectorAll("button");
|
||||
// buttons[0] = react ×, buttons[1] = vue ×, buttons[2] = angular ×
|
||||
buttons[0].click(); // Remove react
|
||||
expect(onChange).toHaveBeenCalledWith(["vue", "angular"]);
|
||||
});
|
||||
|
||||
it("renders the label text", () => {
|
||||
const { container } = render(
|
||||
<TagList label="Required env vars" values={[]} onChange={vi.fn()} />,
|
||||
);
|
||||
expect(container.textContent).toContain("Required env vars");
|
||||
});
|
||||
|
||||
it("renders placeholder text when provided", () => {
|
||||
render(
|
||||
<TagList
|
||||
label="Tags"
|
||||
values={[]}
|
||||
onChange={vi.fn()}
|
||||
placeholder="Add a tag..."
|
||||
/>,
|
||||
);
|
||||
const input = document.querySelector("input[type=text]") as HTMLInputElement;
|
||||
expect(input.getAttribute("placeholder")).toBe("Add a tag...");
|
||||
});
|
||||
|
||||
it("renders exactly one textbox (the input)", () => {
|
||||
const { container } = render(
|
||||
<TagList
|
||||
label="Tools"
|
||||
values={["read", "write"]}
|
||||
onChange={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(
|
||||
container.querySelectorAll("input[type=text]"),
|
||||
).toHaveLength(1);
|
||||
});
|
||||
|
||||
it("adds tag on Enter key", () => {
|
||||
const onChange = vi.fn();
|
||||
render(
|
||||
<TagList label="Skills" values={["python"]} onChange={onChange} />,
|
||||
);
|
||||
const input = document.querySelector("input[type=text]") as HTMLInputElement;
|
||||
fireEvent.change(input, { target: { value: "rust" } });
|
||||
fireEvent.keyDown(input, { key: "Enter" });
|
||||
expect(onChange).toHaveBeenCalledWith(["python", "rust"]);
|
||||
});
|
||||
|
||||
it("does not add empty tag on Enter", () => {
|
||||
const onChange = vi.fn();
|
||||
render(
|
||||
<TagList label="Tools" values={[]} onChange={onChange} />,
|
||||
);
|
||||
const input = document.querySelector("input[type=text]") as HTMLInputElement;
|
||||
fireEvent.change(input, { target: { value: " " } });
|
||||
fireEvent.keyDown(input, { key: "Enter" });
|
||||
expect(onChange).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("clears input after adding tag", () => {
|
||||
render(
|
||||
<TagList label="Tags" values={[]} onChange={vi.fn()} />,
|
||||
);
|
||||
const input = document.querySelector("input[type=text]") as HTMLInputElement;
|
||||
fireEvent.change(input, { target: { value: "golang" } });
|
||||
fireEvent.keyDown(input, { key: "Enter" });
|
||||
expect(input.value).toBe("");
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Section ───────────────────────────────────────────────────────────────
|
||||
|
||||
describe("Section", () => {
|
||||
it("renders the title", () => {
|
||||
const { container } = render(
|
||||
<Section title="Runtime config">Content here</Section>,
|
||||
);
|
||||
expect(container.textContent).toContain("Runtime config");
|
||||
});
|
||||
|
||||
it("renders children when open (defaultOpen=true)", () => {
|
||||
const { container } = render(
|
||||
<Section title="A section">Hidden content</Section>,
|
||||
);
|
||||
expect(container.textContent).toContain("Hidden content");
|
||||
});
|
||||
|
||||
it("starts closed when defaultOpen=false", () => {
|
||||
const { container } = render(
|
||||
<Section title="Collapsed" defaultOpen={false}>
|
||||
Should not be visible
|
||||
</Section>,
|
||||
);
|
||||
expect(container.textContent).not.toContain("Should not be visible");
|
||||
});
|
||||
|
||||
it("opens/closes content on title click", () => {
|
||||
const { container } = render(
|
||||
<Section title="Toggle me" defaultOpen={false}>
|
||||
Now you see me
|
||||
</Section>,
|
||||
);
|
||||
// Should be closed initially
|
||||
expect(container.textContent).not.toContain("Now you see me");
|
||||
// Click to open
|
||||
const btn = container.querySelector("button") as HTMLButtonElement;
|
||||
fireEvent.click(btn);
|
||||
expect(container.textContent).toContain("Now you see me");
|
||||
// Click to close
|
||||
fireEvent.click(btn);
|
||||
expect(container.textContent).not.toContain("Now you see me");
|
||||
});
|
||||
|
||||
it("title button has aria-expanded reflecting open state", () => {
|
||||
// Open section
|
||||
const { container: openContainer } = render(
|
||||
<Section title="A section" defaultOpen={true}>
|
||||
Open content
|
||||
</Section>,
|
||||
);
|
||||
const openBtn = openContainer.querySelector(
|
||||
"button",
|
||||
) as HTMLButtonElement;
|
||||
expect(openBtn.getAttribute("aria-expanded")).toBe("true");
|
||||
|
||||
// Closed section
|
||||
const { container: closedContainer } = render(
|
||||
<Section title="B section" defaultOpen={false}>
|
||||
Closed content
|
||||
</Section>,
|
||||
);
|
||||
const closedBtn = closedContainer.querySelector(
|
||||
"button",
|
||||
) as HTMLButtonElement;
|
||||
expect(closedBtn.getAttribute("aria-expanded")).toBe("false");
|
||||
});
|
||||
|
||||
it("toggle indicator changes between ▾ (open) and ▸ (closed)", () => {
|
||||
// Open: uses ▾
|
||||
const { container: openContainer } = render(
|
||||
<Section title="Indicator" defaultOpen={true}>
|
||||
Open
|
||||
</Section>,
|
||||
);
|
||||
// Button has two spans: title (first) and indicator (second, aria-hidden)
|
||||
const openSpans = openContainer
|
||||
.querySelectorAll("button span");
|
||||
const openIndicator = openSpans[1]?.textContent?.trim();
|
||||
expect(openIndicator).toBe("▾");
|
||||
|
||||
// Closed: uses ▸
|
||||
const { container: closedContainer } = render(
|
||||
<Section title="Indicator" defaultOpen={false}>
|
||||
Closed
|
||||
</Section>,
|
||||
);
|
||||
const closedSpans = closedContainer
|
||||
.querySelectorAll("button span");
|
||||
const closedIndicator = closedSpans[1]?.textContent?.trim();
|
||||
expect(closedIndicator).toBe("▸");
|
||||
});
|
||||
});
|
||||
@@ -127,21 +127,13 @@ export function TagList({ label, values, onChange, placeholder }: { label: strin
|
||||
|
||||
export function Section({ title, children, defaultOpen = true }: { title: string; children: React.ReactNode; defaultOpen?: boolean }) {
|
||||
const [open, setOpen] = useState(defaultOpen);
|
||||
// Stable id for aria-controls linkage
|
||||
const id = `section-content-${title.toLowerCase().replace(/\s+/g, "-")}`;
|
||||
return (
|
||||
<div className="border border-line rounded mb-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(!open)}
|
||||
aria-expanded={open}
|
||||
aria-controls={id}
|
||||
className="w-full flex items-center justify-between px-3 py-1.5 text-[10px] text-ink-mid hover:text-ink bg-surface-sunken/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
|
||||
>
|
||||
<button type="button" onClick={() => setOpen(!open)} className="w-full flex items-center justify-between px-3 py-1.5 text-[10px] text-ink-mid hover:text-ink bg-surface-sunken/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1">
|
||||
<span className="font-medium uppercase tracking-wider">{title}</span>
|
||||
<span aria-hidden="true">{open ? "▾" : "▸"}</span>
|
||||
<span>{open ? "▾" : "▸"}</span>
|
||||
</button>
|
||||
{open && <div id={id} className="p-3 space-y-3">{children}</div>}
|
||||
{open && <div className="p-3 space-y-3">{children}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -763,6 +763,7 @@ def test_sanitize_agent_error_stderr_and_exc():
|
||||
out = sanitize_agent_error(exc=err, stderr="rate limit exceeded")
|
||||
assert "ValueError" in out # exc class IS the tag when stderr is provided
|
||||
assert "rate limit exceeded" in out
|
||||
assert "workspace logs" not in out # stderr form, not the generic form
|
||||
|
||||
|
||||
def test_sanitize_agent_error_stderr_empty_string():
|
||||
|
||||
Reference in New Issue
Block a user