fix(history): auto-apply history filters and remove explicit buttons
HistoryPage no longer requires Apply/Clear; filter state auto-syncs with query. Added guard to avoid redundant state updates. Updated task list in Docs/Tasks.md to mark completion.
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { FluentProvider, webLightTheme } from "@fluentui/react-components";
|
||||
import { HistoryPage } from "../HistoryPage";
|
||||
|
||||
let lastQuery: Record<string, unknown> | null = null;
|
||||
const mockUseHistory = vi.fn((query: Record<string, unknown>) => {
|
||||
console.log("mockUseHistory called", query);
|
||||
lastQuery = query;
|
||||
return {
|
||||
items: [],
|
||||
@@ -18,16 +18,16 @@ const mockUseHistory = vi.fn((query: Record<string, unknown>) => {
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock("../hooks/useHistory", () => ({
|
||||
vi.mock("../../hooks/useHistory", () => ({
|
||||
useHistory: (query: Record<string, unknown>) => mockUseHistory(query),
|
||||
useIpHistory: () => ({ detail: null, loading: false, error: null, refresh: vi.fn() }),
|
||||
}));
|
||||
|
||||
vi.mock("../components/WorldMap", () => ({
|
||||
vi.mock("../../components/WorldMap", () => ({
|
||||
WorldMap: () => <div data-testid="world-map" />,
|
||||
}));
|
||||
|
||||
vi.mock("../api/config", () => ({
|
||||
vi.mock("../../api/config", () => ({
|
||||
fetchMapColorThresholds: async () => ({
|
||||
threshold_low: 10,
|
||||
threshold_medium: 50,
|
||||
@@ -35,8 +35,10 @@ vi.mock("../api/config", () => ({
|
||||
}),
|
||||
}));
|
||||
|
||||
import { HistoryPage } from "../HistoryPage";
|
||||
|
||||
describe("HistoryPage", () => {
|
||||
it("renders DashboardFilterBar and applies origin+range filters", async () => {
|
||||
it("auto-applies filters on change and hides apply/clear actions", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(
|
||||
@@ -45,14 +47,30 @@ describe("HistoryPage", () => {
|
||||
</FluentProvider>,
|
||||
);
|
||||
|
||||
// Initial load should include the default query.
|
||||
expect(lastQuery).toEqual({ page_size: 50 });
|
||||
// Initial load should include the auto-applied default query.
|
||||
await waitFor(() => {
|
||||
expect(lastQuery).toEqual({
|
||||
range: "24h",
|
||||
origin: undefined,
|
||||
jail: undefined,
|
||||
ip: undefined,
|
||||
page: 1,
|
||||
page_size: 50,
|
||||
});
|
||||
});
|
||||
|
||||
// Change the time-range and origin filter, then apply.
|
||||
expect(screen.queryByRole("button", { name: /apply/i })).toBeNull();
|
||||
expect(screen.queryByRole("button", { name: /clear/i })).toBeNull();
|
||||
|
||||
// Time-range and origin updates should be applied automatically.
|
||||
await user.click(screen.getByRole("button", { name: /Last 7 days/i }));
|
||||
await user.click(screen.getByRole("button", { name: /Blocklist/i }));
|
||||
await user.click(screen.getByRole("button", { name: /Apply/i }));
|
||||
await waitFor(() => {
|
||||
expect(lastQuery).toMatchObject({ range: "7d" });
|
||||
});
|
||||
|
||||
expect(lastQuery).toMatchObject({ range: "7d", origin: "blocklist" });
|
||||
await user.click(screen.getByRole("button", { name: /Blocklist/i }));
|
||||
await waitFor(() => {
|
||||
expect(lastQuery).toMatchObject({ origin: "blocklist" });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user