8231fef06b
The Overview dropdown previously rendered "X active · Y running" where both X (stats.activeCount) and Y (activeAgents.length) counted agents whose state was either "active" or "running" — so an agent that was merely enabled but idle would still inflate the "running" tally. The label now counts each state distinctly so "running" only reflects agents that are mid-heartbeat. Adds AgentsOverviewBar.test.tsx to lock in the new contract. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
import { describe, it, expect, vi } from "vitest";
|
|
import { render, screen } from "@testing-library/react";
|
|
import { AgentsOverviewBar } from "../AgentsOverviewBar";
|
|
import type { Agent } from "../../api";
|
|
|
|
vi.mock("lucide-react", async () => {
|
|
const actual = await vi.importActual("lucide-react");
|
|
return {
|
|
...actual,
|
|
ChevronDown: () => <span data-testid="chevron-down" />,
|
|
ChevronRight: () => <span data-testid="chevron-right" />,
|
|
};
|
|
});
|
|
|
|
vi.mock("../AgentMetricsBar", () => ({
|
|
AgentMetricsBar: () => <div data-testid="agent-metrics-bar" />,
|
|
}));
|
|
|
|
vi.mock("../ActiveAgentsPanel", () => ({
|
|
ActiveAgentsPanel: () => <div data-testid="active-agents-panel" />,
|
|
}));
|
|
|
|
function makeAgent(id: string, state: Agent["state"]): Agent {
|
|
return {
|
|
id,
|
|
name: id,
|
|
role: "executor",
|
|
state,
|
|
createdAt: new Date().toISOString(),
|
|
updatedAt: new Date().toISOString(),
|
|
metadata: {},
|
|
};
|
|
}
|
|
|
|
describe("AgentsOverviewBar", () => {
|
|
it("counts active and running states separately in the meta label", () => {
|
|
// Three in 'active' (idle/enabled) and one in 'running' (mid-heartbeat).
|
|
// The label must reflect the distinction — previously both buckets were
|
|
// displayed under "running", which was misleading when only some were
|
|
// actually executing.
|
|
const agents = [
|
|
makeAgent("a-1", "active"),
|
|
makeAgent("a-2", "active"),
|
|
makeAgent("a-3", "active"),
|
|
makeAgent("a-4", "running"),
|
|
];
|
|
|
|
render(
|
|
<AgentsOverviewBar
|
|
stats={null}
|
|
activeAgents={agents}
|
|
isOpen={false}
|
|
onToggle={() => {}}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getByText("3 active · 1 running")).toBeInTheDocument();
|
|
});
|
|
|
|
it("shows zero counts when no agents are active or running", () => {
|
|
render(
|
|
<AgentsOverviewBar
|
|
stats={null}
|
|
activeAgents={[]}
|
|
isOpen={false}
|
|
onToggle={() => {}}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getByText("0 active · 0 running")).toBeInTheDocument();
|
|
});
|
|
|
|
it("renders metrics bar and active agents panel when open", () => {
|
|
render(
|
|
<AgentsOverviewBar
|
|
stats={null}
|
|
activeAgents={[]}
|
|
isOpen
|
|
onToggle={() => {}}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getByTestId("agent-metrics-bar")).toBeInTheDocument();
|
|
expect(screen.getByTestId("active-agents-panel")).toBeInTheDocument();
|
|
});
|
|
|
|
it("hides content when collapsed", () => {
|
|
render(
|
|
<AgentsOverviewBar
|
|
stats={null}
|
|
activeAgents={[]}
|
|
isOpen={false}
|
|
onToggle={() => {}}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.queryByTestId("agent-metrics-bar")).toBeNull();
|
|
expect(screen.queryByTestId("active-agents-panel")).toBeNull();
|
|
});
|
|
});
|