115 lines
3.6 KiB
TypeScript
115 lines
3.6 KiB
TypeScript
import { describe, expect, it, vi } from "vitest";
|
|
import { render, screen } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { FluentProvider, webLightTheme } from "@fluentui/react-components";
|
|
import { getLastArgs, setMapData } from "../../hooks/useMapData";
|
|
import { MapPage } from "../MapPage";
|
|
|
|
vi.mock("../../hooks/useMapData", () => {
|
|
let lastArgs: { range: string; origin: string } = { range: "", origin: "" };
|
|
let dataState = {
|
|
countries: {},
|
|
countryNames: {},
|
|
bans: [],
|
|
total: 0,
|
|
loading: false,
|
|
error: null,
|
|
refresh: () => {},
|
|
};
|
|
|
|
return {
|
|
useMapData: (range: string, origin: string) => {
|
|
lastArgs = { range, origin };
|
|
return { ...dataState };
|
|
},
|
|
setMapData: (newState: Partial<typeof dataState>) => {
|
|
dataState = { ...dataState, ...newState };
|
|
},
|
|
getLastArgs: () => lastArgs,
|
|
};
|
|
});
|
|
|
|
vi.mock("../../api/config", () => ({
|
|
fetchMapColorThresholds: vi.fn(async () => ({
|
|
threshold_low: 10,
|
|
threshold_medium: 50,
|
|
threshold_high: 100,
|
|
})),
|
|
}));
|
|
|
|
vi.mock("../../components/WorldMap", () => ({
|
|
WorldMap: () => <div data-testid="world-map" />,
|
|
}));
|
|
|
|
describe("MapPage", () => {
|
|
it("renders DashboardFilterBar and updates data when filters change", async () => {
|
|
const user = userEvent.setup();
|
|
|
|
render(
|
|
<FluentProvider theme={webLightTheme}>
|
|
<MapPage />
|
|
</FluentProvider>,
|
|
);
|
|
|
|
// Initial load should call useMapData with default filters.
|
|
expect(getLastArgs()).toEqual({ range: "24h", origin: "all" });
|
|
|
|
await user.click(screen.getByRole("button", { name: /Last 7 days/i }));
|
|
expect(getLastArgs().range).toBe("7d");
|
|
|
|
await user.click(screen.getByRole("button", { name: /Blocklist/i }));
|
|
expect(getLastArgs().origin).toBe("blocklist");
|
|
});
|
|
|
|
it("supports pagination with 100 items per page and reset on filter changes", async () => {
|
|
const user = userEvent.setup();
|
|
|
|
const bans: import("../../types/map").MapBanItem[] = Array.from({ length: 120 }, (_, index) => ({
|
|
ip: `192.0.2.${index}`,
|
|
jail: "ssh",
|
|
banned_at: new Date(Date.now() - index * 1000).toISOString(),
|
|
service: null,
|
|
country_code: "US",
|
|
country_name: "United States",
|
|
asn: null,
|
|
org: null,
|
|
ban_count: 1,
|
|
origin: "selfblock",
|
|
}));
|
|
|
|
setMapData({
|
|
countries: { US: 120 },
|
|
countryNames: { US: "United States" },
|
|
bans,
|
|
total: 120,
|
|
loading: false,
|
|
error: null,
|
|
});
|
|
|
|
render(
|
|
<FluentProvider theme={webLightTheme}>
|
|
<MapPage />
|
|
</FluentProvider>,
|
|
);
|
|
|
|
expect(await screen.findByText(/Page 1 of 2/i)).toBeInTheDocument();
|
|
expect(screen.getByText(/Showing 100 of 120 filtered bans/i)).toBeInTheDocument();
|
|
|
|
await user.click(screen.getByRole("button", { name: /Next page/i }));
|
|
expect(await screen.findByText(/Page 2 of 2/i)).toBeInTheDocument();
|
|
|
|
await user.click(screen.getByRole("button", { name: /Previous page/i }));
|
|
expect(await screen.findByText(/Page 1 of 2/i)).toBeInTheDocument();
|
|
|
|
// Page size selector should adjust pagination
|
|
await user.selectOptions(screen.getByRole("combobox", { name: /Page size/i }), "25");
|
|
expect(await screen.findByText(/Page 1 of 5/i)).toBeInTheDocument();
|
|
expect(screen.getByText(/Showing 25 of 120 filtered bans/i)).toBeInTheDocument();
|
|
|
|
// Changing filter keeps page reset to 1
|
|
await user.click(screen.getByRole("button", { name: /Blocklist/i }));
|
|
expect(getLastArgs().origin).toBe("blocklist");
|
|
expect(await screen.findByText(/Page 1 of 5/i)).toBeInTheDocument();
|
|
});
|
|
});
|