File size: 2,140 Bytes
6a7089a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | import { render, screen } from "@testing-library/react";
import { describe, it, expect, beforeAll } from "vitest";
import TabsChart from "./TabsChart";
import type { TabDataPoint } from "../../stores/useAppStore";
// Mock ResizeObserver for Recharts ResponsiveContainer
beforeAll(() => {
class ResizeObserverMock {
observe() {}
unobserve() {}
disconnect() {}
}
window.ResizeObserver = ResizeObserverMock as any;
});
const mockInstances = [
{ id: "inst_1", profileName: "profile-1" },
{ id: "inst_2", profileName: "profile-2" },
];
const mockData: TabDataPoint[] = [
{ timestamp: Date.now() - 60000, inst_1: 3, inst_2: 5 },
{ timestamp: Date.now() - 30000, inst_1: 4, inst_2: 6 },
{ timestamp: Date.now(), inst_1: 5, inst_2: 4 },
];
describe("TabsChart", () => {
describe("empty states", () => {
it('shows "Collecting data..." when no data at all', () => {
render(
<TabsChart
data={[]}
instances={[]}
selectedInstanceId={null}
onSelectInstance={() => {}}
/>,
);
expect(screen.getByText("Collecting data...")).toBeInTheDocument();
});
it("renders chart even with no instances if data exists (e.g., server metrics)", () => {
const { container } = render(
<TabsChart
data={mockData}
instances={[]}
selectedInstanceId={null}
onSelectInstance={() => {}}
/>,
);
// Chart container should render, not empty state
expect(
container.querySelector(".recharts-responsive-container"),
).toBeInTheDocument();
});
});
describe("chart rendering", () => {
it("renders chart container when data and instances exist", () => {
const { container } = render(
<TabsChart
data={mockData}
instances={mockInstances}
selectedInstanceId={null}
onSelectInstance={() => {}}
/>,
);
// Should render the chart container (not the empty state)
expect(
container.querySelector(".recharts-responsive-container"),
).toBeInTheDocument();
});
});
});
|