test(canvas): add FilesTab + tree pure-function coverage — 36 cases #879
@ -1,216 +1,162 @@
|
||||
// @vitest-environment jsdom
|
||||
/**
|
||||
* FilesTab: NotAvailablePanel + FilesToolbar coverage.
|
||||
* Tests for the main FilesTab / PlatformOwnedFilesTab component.
|
||||
*
|
||||
* 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.
|
||||
* Covers: NotAvailablePanel (external runtime), loading/empty/error states,
|
||||
* FilesToolbar actions, and the /configs-only upload guard.
|
||||
*
|
||||
* No @testing-library/jest-dom import — use textContent / className /
|
||||
* getAttribute checks to avoid "expect is not defined" errors.
|
||||
* No @testing-library/jest-dom — use textContent / className / getAttribute.
|
||||
*/
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import { cleanup, render, screen } from "@testing-library/react";
|
||||
import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
|
||||
import React from "react";
|
||||
|
||||
import { FilesToolbar } from "../FilesToolbar";
|
||||
import { NotAvailablePanel } from "../NotAvailablePanel";
|
||||
import { FilesTab } from "../../FilesTab.tsx";
|
||||
import type { FileEntry } from "../../FilesTab/tree";
|
||||
|
||||
// ─── afterEach ─────────────────────────────────────────────────────────────────
|
||||
// ─── Mock ──────────────────────────────────────────────────────────────────
|
||||
|
||||
const _mockGet = vi.hoisted(() => vi.fn<() => Promise<unknown>>());
|
||||
vi.mock("@/lib/api", () => ({
|
||||
api: { get: _mockGet, put: vi.fn(), del: vi.fn() },
|
||||
}));
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.restoreAllMocks();
|
||||
_mockGet.mockReset();
|
||||
});
|
||||
|
||||
// ─── NotAvailablePanel ─────────────────────────────────────────────────────────
|
||||
// ─── Helpers ───────────────────────────────────────────────────────────────
|
||||
|
||||
describe("NotAvailablePanel", () => {
|
||||
it("renders heading 'Files not available'", () => {
|
||||
const { container } = render(<NotAvailablePanel runtime="external" />);
|
||||
expect(container.textContent).toContain("Files not available");
|
||||
});
|
||||
const emptyFileList: FileEntry[] = [];
|
||||
|
||||
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);
|
||||
});
|
||||
/** Render FilesTab with a non-external runtime (triggers PlatformOwnedFilesTab). */
|
||||
function renderPlatformTab(extraProps: Partial<React.ComponentProps<typeof FilesTab>> = {}) {
|
||||
return render(
|
||||
<FilesTab
|
||||
workspaceId="ws-1"
|
||||
data={{ id: "ws-1", name: "Test", runtime: "claude-code", status: "online", tier: 0, skills: [], created_at: "" }}
|
||||
{...extraProps}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
it("renders a Chat tab hint in description", () => {
|
||||
const { container } = render(<NotAvailablePanel runtime="remote-agent" />);
|
||||
expect(container.textContent).toContain("Chat tab");
|
||||
});
|
||||
// ─── NotAvailablePanel ──────────────────────────────────────────────────────
|
||||
|
||||
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}
|
||||
describe("FilesTab — NotAvailablePanel", () => {
|
||||
it("renders NotAvailablePanel when runtime is external", async () => {
|
||||
_mockGet.mockResolvedValueOnce(emptyFileList);
|
||||
render(
|
||||
<FilesTab
|
||||
workspaceId="ws-1"
|
||||
data={{ id: "ws-1", name: "Test", runtime: "external", status: "online", tier: 0, skills: [], created_at: "" }}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
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");
|
||||
expect(screen.getByText(/Files not available/i)).toBeTruthy();
|
||||
});
|
||||
|
||||
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(),
|
||||
it("renders the runtime name in NotAvailablePanel", async () => {
|
||||
_mockGet.mockResolvedValueOnce(emptyFileList);
|
||||
render(
|
||||
<FilesTab
|
||||
workspaceId="ws-1"
|
||||
data={{ id: "ws-1", name: "Test", runtime: "external", status: "online", tier: 0, skills: [], created_at: "" }}
|
||||
/>,
|
||||
);
|
||||
expect(texts).toContain("+ New");
|
||||
expect(texts).toContain("Upload");
|
||||
expect(texts).toContain("Clear");
|
||||
expect(texts).toContain("Export");
|
||||
expect(texts).toContain("↻");
|
||||
expect(screen.getByText(/external/i)).toBeTruthy();
|
||||
});
|
||||
|
||||
it("hides New + Upload + Clear for /workspace", () => {
|
||||
const { container } = renderToolbar({ root: "/workspace" });
|
||||
const texts = Array.from(container.querySelectorAll("button")).map(
|
||||
(b) => b.textContent?.trim(),
|
||||
it("does NOT call api.get when runtime is external", async () => {
|
||||
render(
|
||||
<FilesTab
|
||||
workspaceId="ws-1"
|
||||
data={{ id: "ws-1", name: "Test", runtime: "external", status: "online", tier: 0, skills: [], created_at: "" }}
|
||||
/>,
|
||||
);
|
||||
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);
|
||||
expect(_mockGet).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Loading / Empty / Error states ────────────────────────────────────────
|
||||
|
||||
describe("FilesTab — states", () => {
|
||||
it("shows loading text while fetching files", () => {
|
||||
_mockGet.mockImplementation(
|
||||
() => new Promise<unknown>(() => {}) as unknown as Promise<unknown>,
|
||||
);
|
||||
renderPlatformTab();
|
||||
expect(screen.getByText("Loading files...")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("shows 'No config files yet' when root is /configs and no files", async () => {
|
||||
_mockGet.mockResolvedValueOnce(emptyFileList);
|
||||
renderPlatformTab();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/No config files yet/i)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("fetches from the correct endpoint", async () => {
|
||||
_mockGet.mockResolvedValueOnce(emptyFileList);
|
||||
renderPlatformTab();
|
||||
await waitFor(() => {
|
||||
expect(_mockGet).toHaveBeenCalledWith(expect.stringContaining("/workspaces/ws-1/files"));
|
||||
});
|
||||
});
|
||||
|
||||
it("shows file count from toolbar when files exist", async () => {
|
||||
_mockGet.mockResolvedValue([
|
||||
{ path: "configs/a.yaml", size: 10, dir: false },
|
||||
{ path: "configs/b.yaml", size: 20, dir: false },
|
||||
]);
|
||||
renderPlatformTab();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("2 files")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// ─── FilesToolbar ──────────────────────────────────────────────────────────
|
||||
|
||||
describe("FilesTab — FilesToolbar", () => {
|
||||
it("shows Refresh button", async () => {
|
||||
_mockGet.mockResolvedValueOnce(emptyFileList);
|
||||
renderPlatformTab();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByLabelText("Refresh file list")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows root directory selector", async () => {
|
||||
_mockGet.mockResolvedValueOnce(emptyFileList);
|
||||
renderPlatformTab();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole("combobox")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("Refresh button triggers a reload", async () => {
|
||||
// Use persistent mock — loadFiles fires on mount AND on Refresh click.
|
||||
_mockGet.mockResolvedValue(emptyFileList);
|
||||
renderPlatformTab();
|
||||
await waitFor(() => screen.getByLabelText("Refresh file list"));
|
||||
const before = _mockGet.mock.calls.length;
|
||||
fireEvent.click(screen.getByLabelText("Refresh file list"));
|
||||
await waitFor(() => {
|
||||
expect(_mockGet.mock.calls.length).toBeGreaterThan(before);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Upload guard ──────────────────────────────────────────────────────────
|
||||
|
||||
describe("FilesTab — upload guard", () => {
|
||||
it("no error alert on dragover when root is /configs (default)", async () => {
|
||||
_mockGet.mockResolvedValue(emptyFileList);
|
||||
renderPlatformTab();
|
||||
await waitFor(() => screen.getByText(/No config files yet/i));
|
||||
|
||||
// No alert should be present
|
||||
expect(screen.queryByRole("alert")).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
218
canvas/src/components/tabs/FilesTab/__tests__/tree.test.ts
Normal file
218
canvas/src/components/tabs/FilesTab/__tests__/tree.test.ts
Normal file
@ -0,0 +1,218 @@
|
||||
// @vitest-environment jsdom
|
||||
/**
|
||||
* Tests for tree.ts — buildTree and getIcon pure functions.
|
||||
*/
|
||||
import { describe, expect, it } from "vitest";
|
||||
import type { FileEntry } from "../tree";
|
||||
import { buildTree, getIcon } from "../tree";
|
||||
|
||||
// ─── getIcon ─────────────────────────────────────────────────────────────────
|
||||
|
||||
describe("getIcon", () => {
|
||||
it("returns folder emoji for directories", () => {
|
||||
expect(getIcon("/configs", true)).toBe("📁");
|
||||
});
|
||||
|
||||
it("returns correct emoji for .md", () => {
|
||||
expect(getIcon("readme.md", false)).toBe("📄");
|
||||
});
|
||||
|
||||
it("returns correct emoji for .yaml", () => {
|
||||
expect(getIcon("config.yaml", false)).toBe("⚙");
|
||||
});
|
||||
|
||||
it("returns correct emoji for .yml", () => {
|
||||
expect(getIcon("config.yml", false)).toBe("⚙");
|
||||
});
|
||||
|
||||
it("returns correct emoji for .py", () => {
|
||||
expect(getIcon("script.py", false)).toBe("🐍");
|
||||
});
|
||||
|
||||
it("returns correct emoji for .ts", () => {
|
||||
expect(getIcon("index.ts", false)).toBe("💠");
|
||||
});
|
||||
|
||||
it("returns correct emoji for .tsx", () => {
|
||||
expect(getIcon("App.tsx", false)).toBe("💠");
|
||||
});
|
||||
|
||||
it("returns correct emoji for .js", () => {
|
||||
expect(getIcon("index.js", false)).toBe("📜");
|
||||
});
|
||||
|
||||
it("returns correct emoji for .json", () => {
|
||||
expect(getIcon("package.json", false)).toBe("{}");
|
||||
});
|
||||
|
||||
it("returns correct emoji for .html", () => {
|
||||
expect(getIcon("index.html", false)).toBe("🌐");
|
||||
});
|
||||
|
||||
it("returns correct emoji for .css", () => {
|
||||
expect(getIcon("style.css", false)).toBe("🎨");
|
||||
});
|
||||
|
||||
it("returns correct emoji for .sh", () => {
|
||||
expect(getIcon("deploy.sh", false)).toBe("▸");
|
||||
});
|
||||
|
||||
it("returns default file emoji for unknown extensions", () => {
|
||||
expect(getIcon("Makefile", false)).toBe("📄");
|
||||
expect(getIcon("Dockerfile", false)).toBe("📄");
|
||||
expect(getIcon("Rakefile", false)).toBe("📄");
|
||||
});
|
||||
|
||||
it("extension matching is case-insensitive", () => {
|
||||
expect(getIcon("readme.MD", false)).toBe("📄");
|
||||
expect(getIcon("script.PY", false)).toBe("🐍");
|
||||
});
|
||||
});
|
||||
|
||||
// ─── buildTree ───────────────────────────────────────────────────────────────
|
||||
|
||||
describe("buildTree", () => {
|
||||
it("returns empty array for empty input", () => {
|
||||
expect(buildTree([])).toEqual([]);
|
||||
});
|
||||
|
||||
it("adds a single file at root", () => {
|
||||
const files: FileEntry[] = [{ path: "config.yaml", size: 128, dir: false }];
|
||||
const tree = buildTree(files);
|
||||
expect(tree).toHaveLength(1);
|
||||
expect(tree[0]).toMatchObject({
|
||||
name: "config.yaml",
|
||||
path: "config.yaml",
|
||||
isDir: false,
|
||||
children: [],
|
||||
size: 128,
|
||||
});
|
||||
});
|
||||
|
||||
it("adds a single directory at root", () => {
|
||||
const files: FileEntry[] = [{ path: "skills", size: 0, dir: true }];
|
||||
const tree = buildTree(files);
|
||||
expect(tree).toHaveLength(1);
|
||||
expect(tree[0]).toMatchObject({
|
||||
name: "skills",
|
||||
path: "skills",
|
||||
isDir: true,
|
||||
children: [],
|
||||
size: 0,
|
||||
});
|
||||
});
|
||||
|
||||
it("sorts dirs before files at the same level", () => {
|
||||
const files: FileEntry[] = [
|
||||
{ path: "b.txt", size: 10, dir: false },
|
||||
{ path: "a.txt", size: 10, dir: false },
|
||||
{ path: "z-dir", size: 0, dir: true },
|
||||
{ path: "a-dir", size: 0, dir: true },
|
||||
];
|
||||
const tree = buildTree(files);
|
||||
expect(tree).toHaveLength(4);
|
||||
// Dirs first: z-dir, a-dir alphabetically → a before z
|
||||
expect(tree[0].name).toBe("a-dir");
|
||||
expect(tree[1].name).toBe("z-dir");
|
||||
// Then files alphabetically
|
||||
expect(tree[2].name).toBe("a.txt");
|
||||
expect(tree[3].name).toBe("b.txt");
|
||||
});
|
||||
|
||||
it("alphabetically sorts files within the same level", () => {
|
||||
const files: FileEntry[] = [
|
||||
{ path: "z.yaml", size: 10, dir: false },
|
||||
{ path: "a.yaml", size: 10, dir: false },
|
||||
{ path: "m.yaml", size: 10, dir: false },
|
||||
];
|
||||
const tree = buildTree(files);
|
||||
expect(tree.map((n) => n.name)).toEqual(["a.yaml", "m.yaml", "z.yaml"]);
|
||||
});
|
||||
|
||||
it("nests a file under its parent directory", () => {
|
||||
const files: FileEntry[] = [
|
||||
{ path: "skills", size: 0, dir: true },
|
||||
{ path: "skills/readme.md", size: 64, dir: false },
|
||||
];
|
||||
const tree = buildTree(files);
|
||||
expect(tree).toHaveLength(1);
|
||||
expect(tree[0].name).toBe("skills");
|
||||
expect(tree[0].children).toHaveLength(1);
|
||||
expect(tree[0].children[0]).toMatchObject({
|
||||
name: "readme.md",
|
||||
path: "skills/readme.md",
|
||||
isDir: false,
|
||||
size: 64,
|
||||
});
|
||||
});
|
||||
|
||||
it("creates intermediate directories automatically", () => {
|
||||
const files: FileEntry[] = [
|
||||
{ path: "a/b/c/deep.txt", size: 32, dir: false },
|
||||
];
|
||||
const tree = buildTree(files);
|
||||
// Root has one child: "a"
|
||||
expect(tree).toHaveLength(1);
|
||||
expect(tree[0].name).toBe("a");
|
||||
expect(tree[0].isDir).toBe(true);
|
||||
// "a" has one child: "b"
|
||||
expect(tree[0].children).toHaveLength(1);
|
||||
expect(tree[0].children[0].name).toBe("b");
|
||||
// "b" has one child: "c"
|
||||
expect(tree[0].children[0].children).toHaveLength(1);
|
||||
expect(tree[0].children[0].children[0].name).toBe("c");
|
||||
// "c" has the file
|
||||
expect(tree[0].children[0].children[0].children[0].name).toBe("deep.txt");
|
||||
expect(tree[0].children[0].children[0].children[0].size).toBe(32);
|
||||
});
|
||||
|
||||
it("adds multiple files to the same directory", () => {
|
||||
const files: FileEntry[] = [
|
||||
{ path: "configs", size: 0, dir: true },
|
||||
{ path: "configs/a.yaml", size: 10, dir: false },
|
||||
{ path: "configs/b.yaml", size: 20, dir: false },
|
||||
];
|
||||
const tree = buildTree(files);
|
||||
expect(tree).toHaveLength(1);
|
||||
expect(tree[0].children.map((n) => n.name).sort()).toEqual(["a.yaml", "b.yaml"]);
|
||||
});
|
||||
|
||||
it("does not duplicate a directory already created as intermediate", () => {
|
||||
const files: FileEntry[] = [
|
||||
{ path: "a/b.txt", size: 5, dir: false },
|
||||
{ path: "a", size: 0, dir: true },
|
||||
];
|
||||
const tree = buildTree(files);
|
||||
// "a" should appear only once
|
||||
expect(tree).toHaveLength(1);
|
||||
expect(tree[0].name).toBe("a");
|
||||
// The dir "a" should still contain "b.txt"
|
||||
expect(tree[0].children).toHaveLength(1);
|
||||
expect(tree[0].children[0].name).toBe("b.txt");
|
||||
});
|
||||
|
||||
it("intermediate dirs have size 0", () => {
|
||||
const files: FileEntry[] = [
|
||||
{ path: "a/b/c/file.txt", size: 1, dir: false },
|
||||
];
|
||||
const tree = buildTree(files);
|
||||
expect(tree[0].size).toBe(0);
|
||||
expect(tree[0].children[0].size).toBe(0);
|
||||
});
|
||||
|
||||
it("handles deeply nested mixed dirs and files", () => {
|
||||
const files: FileEntry[] = [
|
||||
{ path: "a", size: 0, dir: true },
|
||||
{ path: "a/b", size: 0, dir: true },
|
||||
{ path: "a/b/c", size: 0, dir: true },
|
||||
{ path: "a/b/c/d.txt", size: 1, dir: false },
|
||||
{ path: "a/b/e.txt", size: 2, dir: false },
|
||||
{ path: "a/f.txt", size: 3, dir: false },
|
||||
];
|
||||
const tree = buildTree(files);
|
||||
expect(tree).toHaveLength(1); // root: "a"
|
||||
expect(tree[0].children.map((n) => n.name).sort()).toEqual(["b", "f.txt"]);
|
||||
expect(tree[0].children.find((n) => n.name === "b")!.children.map((n) => n.name).sort())
|
||||
.toEqual(["c", "e.txt"]);
|
||||
});
|
||||
});
|
||||
271
canvas/src/components/tabs/__tests__/ChannelsTab.test.tsx
Normal file
271
canvas/src/components/tabs/__tests__/ChannelsTab.test.tsx
Normal file
@ -0,0 +1,271 @@
|
||||
// @vitest-environment jsdom
|
||||
/**
|
||||
* Tests for ChannelsTab component.
|
||||
*
|
||||
* Covers: relativeTime pure function, SUPPORTS_DETECT_CHATS constant,
|
||||
* loading/empty/error states, channel list rendering (enabled/disabled),
|
||||
* auto-refresh interval, header + Connect button.
|
||||
*/
|
||||
import React from "react";
|
||||
import { render, screen, fireEvent, cleanup, waitFor } from "@testing-library/react";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import { ChannelsTab } from "../ChannelsTab";
|
||||
|
||||
// Mock @/lib/api — hoisted so it's applied before the module loads.
|
||||
const _mockGet = vi.hoisted(() => vi.fn<() => Promise<unknown>>());
|
||||
vi.mock("@/lib/api", () => ({
|
||||
api: { get: _mockGet },
|
||||
}));
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
_mockGet.mockReset();
|
||||
});
|
||||
|
||||
// ─── SUPPORTS_DETECT_CHATS ─────────────────────────────────────────────────
|
||||
|
||||
describe("ChannelsTab — SUPPORTS_DETECT_CHATS", () => {
|
||||
it("supports Detect Chats for telegram", async () => {
|
||||
// Telegram is the only platform that supports Detect Chats.
|
||||
// This is a smoke test: the tab must render without crashing.
|
||||
// NOTE: ChannelsTab calls Promise.allSettled([channels, adapters]) so
|
||||
// both must be mocked for the load() to complete and exit loading state.
|
||||
_mockGet.mockResolvedValueOnce([]);
|
||||
_mockGet.mockResolvedValueOnce([]);
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Channels")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// ─── States ───────────────────────────────────────────────────────────────
|
||||
|
||||
describe("ChannelsTab — states", () => {
|
||||
it("shows loading text initially", () => {
|
||||
_mockGet.mockImplementation(
|
||||
() => new Promise<unknown>(() => {}) as unknown as Promise<unknown>
|
||||
);
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
expect(screen.getByText("Loading channels...")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("shows empty message when no channels", async () => {
|
||||
_mockGet.mockResolvedValueOnce([]);
|
||||
_mockGet.mockResolvedValueOnce([]);
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("No channels connected")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows error alert when channels fetch fails", async () => {
|
||||
// Channels fails; adapters succeeds. Both must be resolved/rejected
|
||||
// for Promise.allSettled to settle and setLoading(false).
|
||||
_mockGet.mockRejectedValueOnce(new Error("server error"));
|
||||
_mockGet.mockResolvedValueOnce([]);
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
// The component renders a generic error message, not the raw error text.
|
||||
expect(screen.getByText(/Failed to load connected channels/i)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows error alert when adapters fetch fails", async () => {
|
||||
_mockGet.mockResolvedValueOnce([]);
|
||||
_mockGet.mockRejectedValueOnce(new Error("adapters error"));
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/Failed to load platforms/i)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Channel list ──────────────────────────────────────────────────────────
|
||||
|
||||
describe("ChannelsTab — channel list", () => {
|
||||
// ChannelsTab.load() calls Promise.allSettled([channels, adapters]).
|
||||
// Both must be mocked for load() to complete and exit loading state.
|
||||
const channelsPayload = (channels: object[]) => channels;
|
||||
const adaptersPayload: unknown[] = [];
|
||||
|
||||
it("renders one channel", async () => {
|
||||
_mockGet.mockResolvedValueOnce(channelsPayload([{
|
||||
id: "ch-1", workspace_id: "ws-1", channel_type: "telegram",
|
||||
config: { chat_id: "12345" }, enabled: true, allowed_users: [],
|
||||
message_count: 10, last_message_at: null, created_at: new Date().toISOString(),
|
||||
}]));
|
||||
_mockGet.mockResolvedValueOnce(adaptersPayload);
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Telegram")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("renders multiple channels", async () => {
|
||||
_mockGet.mockResolvedValueOnce(channelsPayload([
|
||||
{ id: "ch-1", workspace_id: "ws-1", channel_type: "telegram",
|
||||
config: { chat_id: "1" }, enabled: true, allowed_users: [],
|
||||
message_count: 5, last_message_at: null, created_at: new Date().toISOString() },
|
||||
{ id: "ch-2", workspace_id: "ws-1", channel_type: "slack",
|
||||
config: { channel_id: "C0123" }, enabled: false, allowed_users: [],
|
||||
message_count: 0, last_message_at: null, created_at: new Date().toISOString() },
|
||||
]));
|
||||
_mockGet.mockResolvedValueOnce(adaptersPayload);
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Telegram")).toBeTruthy();
|
||||
expect(screen.getByText("Slack")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("capitalises channel type", async () => {
|
||||
_mockGet.mockResolvedValueOnce(channelsPayload([{
|
||||
id: "ch-1", workspace_id: "ws-1", channel_type: "discord",
|
||||
config: {}, enabled: true, allowed_users: [],
|
||||
message_count: 0, last_message_at: null, created_at: new Date().toISOString(),
|
||||
}]));
|
||||
_mockGet.mockResolvedValueOnce(adaptersPayload);
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Discord")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows 'On' toggle for enabled channel", async () => {
|
||||
_mockGet.mockResolvedValueOnce(channelsPayload([{
|
||||
id: "ch-1", workspace_id: "ws-1", channel_type: "telegram",
|
||||
config: {}, enabled: true, allowed_users: [],
|
||||
message_count: 1, last_message_at: null, created_at: new Date().toISOString(),
|
||||
}]));
|
||||
_mockGet.mockResolvedValueOnce(adaptersPayload);
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
// Use exact string "On" (not regex) — "Connect" contains "on" and would
|
||||
// match /on/i, causing multiple-element errors.
|
||||
expect(screen.getByRole("button", { name: "On" })).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows 'Off' toggle for disabled channel", async () => {
|
||||
_mockGet.mockResolvedValueOnce(channelsPayload([{
|
||||
id: "ch-1", workspace_id: "ws-1", channel_type: "telegram",
|
||||
config: {}, enabled: false, allowed_users: [],
|
||||
message_count: 1, last_message_at: null, created_at: new Date().toISOString(),
|
||||
}]));
|
||||
_mockGet.mockResolvedValueOnce(adaptersPayload);
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole("button", { name: "Off" })).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows message count", async () => {
|
||||
_mockGet.mockResolvedValueOnce(channelsPayload([{
|
||||
id: "ch-1", workspace_id: "ws-1", channel_type: "telegram",
|
||||
config: {}, enabled: true, allowed_users: [],
|
||||
message_count: 42, last_message_at: null, created_at: new Date().toISOString(),
|
||||
}]));
|
||||
_mockGet.mockResolvedValueOnce(adaptersPayload);
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("42 messages")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows 'Last: never' when last_message_at is null", async () => {
|
||||
_mockGet.mockResolvedValueOnce(channelsPayload([{
|
||||
id: "ch-1", workspace_id: "ws-1", channel_type: "telegram",
|
||||
config: {}, enabled: true, allowed_users: [],
|
||||
message_count: 0, last_message_at: null, created_at: new Date().toISOString(),
|
||||
}]));
|
||||
_mockGet.mockResolvedValueOnce(adaptersPayload);
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Last: never")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows allowed user count when users are present", async () => {
|
||||
_mockGet.mockResolvedValueOnce(channelsPayload([{
|
||||
id: "ch-1", workspace_id: "ws-1", channel_type: "telegram",
|
||||
config: {}, enabled: true, allowed_users: ["alice", "bob"],
|
||||
message_count: 0, last_message_at: null, created_at: new Date().toISOString(),
|
||||
}]));
|
||||
_mockGet.mockResolvedValueOnce(adaptersPayload);
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("2 allowed user(s)")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("has a Test button for each channel", async () => {
|
||||
_mockGet.mockResolvedValueOnce(channelsPayload([{
|
||||
id: "ch-1", workspace_id: "ws-1", channel_type: "telegram",
|
||||
config: {}, enabled: true, allowed_users: [],
|
||||
message_count: 0, last_message_at: null, created_at: new Date().toISOString(),
|
||||
}]));
|
||||
_mockGet.mockResolvedValueOnce(adaptersPayload);
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole("button", { name: /test/i })).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("has a Remove button for each channel", async () => {
|
||||
_mockGet.mockResolvedValueOnce(channelsPayload([{
|
||||
id: "ch-1", workspace_id: "ws-1", channel_type: "telegram",
|
||||
config: {}, enabled: true, allowed_users: [],
|
||||
message_count: 0, last_message_at: null, created_at: new Date().toISOString(),
|
||||
}]));
|
||||
_mockGet.mockResolvedValueOnce(adaptersPayload);
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole("button", { name: /remove/i })).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Header + Connect button ───────────────────────────────────────────────
|
||||
|
||||
describe("ChannelsTab — header", () => {
|
||||
it("renders the Channels heading", async () => {
|
||||
_mockGet.mockResolvedValue([]);
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Channels")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("has a Connect button when channels exist", async () => {
|
||||
_mockGet.mockResolvedValue([
|
||||
{
|
||||
id: "ch-1", workspace_id: "ws-1", channel_type: "telegram",
|
||||
config: {}, enabled: true, allowed_users: [],
|
||||
message_count: 1, last_message_at: null, created_at: new Date().toISOString(),
|
||||
},
|
||||
]);
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole("button", { name: /connect/i })).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("has a Cancel button when form is open", async () => {
|
||||
_mockGet.mockResolvedValue([
|
||||
{
|
||||
id: "ch-1", workspace_id: "ws-1", channel_type: "telegram",
|
||||
config: {}, enabled: true, allowed_users: [],
|
||||
message_count: 1, last_message_at: null, created_at: new Date().toISOString(),
|
||||
},
|
||||
]);
|
||||
render(<ChannelsTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
const btn = screen.getByRole("button", { name: /connect/i });
|
||||
fireEvent.click(btn);
|
||||
});
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole("button", { name: /cancel/i })).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
292
canvas/src/components/tabs/__tests__/TracesTab.test.tsx
Normal file
292
canvas/src/components/tabs/__tests__/TracesTab.test.tsx
Normal file
@ -0,0 +1,292 @@
|
||||
// @vitest-environment jsdom
|
||||
/**
|
||||
* Tests for TracesTab component.
|
||||
*
|
||||
* Covers: loading/empty/error states, trace list rendering, expand/collapse,
|
||||
* status dot coloring, latency formatting, token usage display, Refresh button.
|
||||
*/
|
||||
import React from "react";
|
||||
import { render, screen, fireEvent, cleanup, waitFor } from "@testing-library/react";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import { TracesTab } from "../TracesTab";
|
||||
|
||||
const _mockGet = vi.hoisted(() => vi.fn<() => Promise<unknown>>());
|
||||
vi.mock("@/lib/api", () => ({
|
||||
api: { get: _mockGet },
|
||||
}));
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
_mockGet.mockReset();
|
||||
});
|
||||
|
||||
// ─── States ───────────────────────────────────────────────────────────────
|
||||
|
||||
describe("TracesTab — states", () => {
|
||||
it("shows loading text initially", () => {
|
||||
_mockGet.mockImplementation(
|
||||
() => new Promise<unknown>(() => {}) as unknown as Promise<unknown>
|
||||
);
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
expect(screen.getByText("Loading traces...")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("shows empty message when no traces", async () => {
|
||||
_mockGet.mockResolvedValueOnce({ data: [] });
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("No traces yet")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows empty message when API returns null data", async () => {
|
||||
_mockGet.mockResolvedValueOnce({ data: null });
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("No traces yet")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows error alert when fetch fails", async () => {
|
||||
_mockGet.mockRejectedValueOnce(new Error("trace service unavailable"));
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/trace service unavailable/i)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Trace list ──────────────────────────────────────────────────────────
|
||||
|
||||
describe("TracesTab — trace list", () => {
|
||||
it("renders one trace", async () => {
|
||||
_mockGet.mockResolvedValueOnce({
|
||||
data: [{
|
||||
id: "t-1",
|
||||
name: "deploy-agent",
|
||||
timestamp: new Date().toISOString(),
|
||||
status: "ok",
|
||||
}],
|
||||
});
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("deploy-agent")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("renders trace name as fallback to 'trace'", async () => {
|
||||
_mockGet.mockResolvedValueOnce({
|
||||
data: [{
|
||||
id: "t-1",
|
||||
name: "",
|
||||
timestamp: new Date().toISOString(),
|
||||
}],
|
||||
});
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("trace")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows trace count in header", async () => {
|
||||
_mockGet.mockResolvedValueOnce({
|
||||
data: [
|
||||
{ id: "t-1", name: "A", timestamp: new Date().toISOString() },
|
||||
{ id: "t-2", name: "B", timestamp: new Date().toISOString() },
|
||||
{ id: "t-3", name: "C", timestamp: new Date().toISOString() },
|
||||
],
|
||||
});
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("3 traces")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows latency in milliseconds for values < 1000", async () => {
|
||||
_mockGet.mockResolvedValueOnce({
|
||||
data: [{
|
||||
id: "t-1",
|
||||
name: "Fast trace",
|
||||
timestamp: new Date().toISOString(),
|
||||
latency: 250,
|
||||
}],
|
||||
});
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("250ms")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows latency in seconds for values >= 1000", async () => {
|
||||
_mockGet.mockResolvedValueOnce({
|
||||
data: [{
|
||||
id: "t-1",
|
||||
name: "Slow trace",
|
||||
timestamp: new Date().toISOString(),
|
||||
latency: 3500,
|
||||
}],
|
||||
});
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("3.5s")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows token usage when present", async () => {
|
||||
_mockGet.mockResolvedValueOnce({
|
||||
data: [{
|
||||
id: "t-1",
|
||||
name: "AI trace",
|
||||
timestamp: new Date().toISOString(),
|
||||
usage: { input: 100, output: 200, total: 300 },
|
||||
}],
|
||||
});
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("300 tok")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("does not show latency when latency is absent", async () => {
|
||||
_mockGet.mockResolvedValueOnce({
|
||||
data: [{
|
||||
id: "t-1",
|
||||
name: "Trace",
|
||||
timestamp: new Date().toISOString(),
|
||||
}],
|
||||
});
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Trace")).toBeTruthy();
|
||||
// Should have no "ms" or "s" latency text
|
||||
expect(screen.queryByText(/\d+ms/)).toBeNull();
|
||||
expect(screen.queryByText(/\d+\.\d+s/)).toBeNull();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Expand / Collapse ───────────────────────────────────────────────────
|
||||
|
||||
describe("TracesTab — expand/collapse", () => {
|
||||
it("expands a trace row on click", async () => {
|
||||
_mockGet.mockResolvedValueOnce({
|
||||
data: [{
|
||||
id: "t-expand",
|
||||
name: "Expandable",
|
||||
timestamp: new Date().toISOString(),
|
||||
input: { prompt: "hello" },
|
||||
output: { result: "world" },
|
||||
totalCost: 0.000123,
|
||||
}],
|
||||
});
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
await waitFor(() => screen.getByText("Expandable"));
|
||||
|
||||
fireEvent.click(screen.getByText("Expandable"));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Input")).toBeTruthy();
|
||||
expect(screen.getByText("Output")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows trace ID in expanded panel", async () => {
|
||||
_mockGet.mockResolvedValueOnce({
|
||||
data: [{
|
||||
id: "trace-id-abc123",
|
||||
name: "Trace",
|
||||
timestamp: new Date().toISOString(),
|
||||
}],
|
||||
});
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
await waitFor(() => screen.getByText("Trace"));
|
||||
|
||||
fireEvent.click(screen.getByText("Trace"));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("trace-id-abc123")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows cost when totalCost is present", async () => {
|
||||
_mockGet.mockResolvedValueOnce({
|
||||
data: [{
|
||||
id: "t-cost",
|
||||
name: "Costly trace",
|
||||
timestamp: new Date().toISOString(),
|
||||
totalCost: 0.000456,
|
||||
}],
|
||||
});
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
await waitFor(() => screen.getByText("Costly trace"));
|
||||
|
||||
fireEvent.click(screen.getByText("Costly trace"));
|
||||
|
||||
await waitFor(() => {
|
||||
// Use regex — toFixed(6) is locale-sensitive (may render as "0,000456").
|
||||
expect(screen.getByText(/\$0\.000456/)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("collapses expanded row on second click", async () => {
|
||||
_mockGet.mockResolvedValueOnce({
|
||||
data: [{
|
||||
id: "t-collapse",
|
||||
name: "Collapsible",
|
||||
timestamp: new Date().toISOString(),
|
||||
input: { key: "value" },
|
||||
}],
|
||||
});
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
await waitFor(() => screen.getByText("Collapsible"));
|
||||
|
||||
fireEvent.click(screen.getByText("Collapsible"));
|
||||
await waitFor(() => expect(screen.getByText("Input")).toBeTruthy());
|
||||
|
||||
fireEvent.click(screen.getByText("Collapsible"));
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText("Input")).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
it("has aria-expanded attribute on trace row", async () => {
|
||||
_mockGet.mockResolvedValueOnce({
|
||||
data: [{
|
||||
id: "t-a11y",
|
||||
name: "A11y trace",
|
||||
timestamp: new Date().toISOString(),
|
||||
}],
|
||||
});
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
await waitFor(() => screen.getByText("A11y trace"));
|
||||
|
||||
const row = screen.getByText("A11y trace").closest("button");
|
||||
expect(row?.getAttribute("aria-expanded")).toBe("false");
|
||||
|
||||
fireEvent.click(row!);
|
||||
await waitFor(() => {
|
||||
expect(row?.getAttribute("aria-expanded")).toBe("true");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Refresh button ───────────────────────────────────────────────────────
|
||||
|
||||
describe("TracesTab — refresh", () => {
|
||||
it("has a Refresh button", async () => {
|
||||
_mockGet.mockResolvedValueOnce({ data: [] });
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
await waitFor(() => {});
|
||||
expect(screen.getByRole("button", { name: /refresh/i })).toBeTruthy();
|
||||
});
|
||||
|
||||
it("Refresh button triggers a reload", async () => {
|
||||
_mockGet.mockResolvedValueOnce({ data: [] });
|
||||
render(<TracesTab workspaceId="ws-1" />);
|
||||
await waitFor(() => screen.getByRole("button", { name: /refresh/i }));
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /refresh/i }));
|
||||
|
||||
expect(_mockGet).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user