134 lines
4.5 KiB
TypeScript
134 lines
4.5 KiB
TypeScript
import { fireEvent, render, screen, within } from "@testing-library/react";
|
|
import { QueryClientProvider } from "@tanstack/react-query";
|
|
import { RouterProvider, createMemoryHistory } from "@tanstack/react-router";
|
|
import { AuthProvider } from "@/auth/store";
|
|
import { createQueryClient } from "@/lib/queryClient";
|
|
import { createAppRouter } from "@/routes";
|
|
|
|
const RESPONSES: Record<string, unknown> = {
|
|
"/api/rules": {
|
|
rules: [
|
|
{
|
|
id: 1,
|
|
group_id: 1,
|
|
group: "Default",
|
|
pattern: "ads.example.com",
|
|
kind: "exact",
|
|
action: "block",
|
|
created_at: 1700000000,
|
|
},
|
|
{
|
|
id: 2,
|
|
group_id: 2,
|
|
group: "Kids",
|
|
pattern: "*.cdn.example.com",
|
|
kind: "wildcard",
|
|
action: "allow",
|
|
created_at: 1700000100,
|
|
},
|
|
],
|
|
},
|
|
"/api/version": { version: "0.0.0-test", git_commit: "0000000", zig_version: "0.16.0", uptime_seconds: 1 },
|
|
};
|
|
|
|
// The API orders groups by name, so the id-1 default is not always first.
|
|
let groups: { id: number; name: string; safe_search: boolean }[];
|
|
|
|
beforeEach(() => {
|
|
groups = [
|
|
{ id: 1, name: "Default", safe_search: false },
|
|
{ id: 2, name: "Kids", safe_search: true },
|
|
];
|
|
vi.stubGlobal(
|
|
"fetch",
|
|
vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
|
|
const url = String(input);
|
|
if (url === "/api/rules" && init?.method === "POST") {
|
|
return new Response(JSON.stringify({ error: "rate limited" }), {
|
|
status: 429,
|
|
headers: { "content-type": "application/json", "Retry-After": "5" },
|
|
});
|
|
}
|
|
const payload = url === "/api/groups" ? { groups } : RESPONSES[url];
|
|
if (payload === undefined) return new Response(JSON.stringify({ error: "not stubbed" }), { status: 404 });
|
|
return new Response(JSON.stringify(payload), {
|
|
status: 200,
|
|
headers: { "content-type": "application/json" },
|
|
});
|
|
}),
|
|
);
|
|
});
|
|
|
|
afterEach(() => {
|
|
vi.unstubAllGlobals();
|
|
});
|
|
|
|
function renderRulesRoute() {
|
|
const queryClient = createQueryClient();
|
|
const router = createAppRouter(createMemoryHistory({ initialEntries: ["/rules"] }), queryClient);
|
|
render(
|
|
<AuthProvider>
|
|
<QueryClientProvider client={queryClient}>
|
|
<RouterProvider router={router} />
|
|
</QueryClientProvider>
|
|
</AuthProvider>,
|
|
);
|
|
}
|
|
|
|
test("renders the rule table and the create form with contract enums", async () => {
|
|
renderRulesRoute();
|
|
await screen.findByRole("heading", { name: "Rules" });
|
|
|
|
const table = within(screen.getByRole("table"));
|
|
expect(table.getByText("ads.example.com")).toBeTruthy();
|
|
expect(table.getByText("*.cdn.example.com")).toBeTruthy();
|
|
expect(table.getByText("block")).toBeTruthy();
|
|
expect(table.getByText("allow")).toBeTruthy();
|
|
expect(table.getByText("Kids")).toBeTruthy();
|
|
expect(screen.getAllByRole("button", { name: "Delete" })).toHaveLength(2);
|
|
|
|
const kindSelect = screen.getByLabelText("Kind") as HTMLSelectElement;
|
|
expect(Array.from(kindSelect.options).map((o) => o.value)).toEqual(["exact", "wildcard"]);
|
|
|
|
const actionSelect = screen.getByLabelText("Action") as HTMLSelectElement;
|
|
expect(Array.from(actionSelect.options).map((o) => o.value)).toEqual(["allow", "block"]);
|
|
|
|
const groupSelect = screen.getByLabelText("Group") as HTMLSelectElement;
|
|
expect(Array.from(groupSelect.options).map((o) => o.textContent)).toEqual(["Default", "Kids"]);
|
|
});
|
|
|
|
test("rule create shows a countdown when rate limited with Retry-After", async () => {
|
|
renderRulesRoute();
|
|
await screen.findByRole("heading", { name: "Rules" });
|
|
|
|
fireEvent.change(screen.getByLabelText("Pattern"), { target: { value: "ads.example.net" } });
|
|
fireEvent.click(screen.getByRole("button", { name: "Create rule" }));
|
|
|
|
const alert = await screen.findByRole("alert");
|
|
expect(alert.textContent).toBe("Rate limited. Try again in 5s.");
|
|
});
|
|
|
|
test("the group select preselects the id-1 default, not the alphabetically first group", async () => {
|
|
groups = [
|
|
{ id: 5, name: "Attic", safe_search: false },
|
|
{ id: 1, name: "Default", safe_search: false },
|
|
];
|
|
renderRulesRoute();
|
|
await screen.findByRole("heading", { name: "Rules" });
|
|
|
|
const groupSelect = screen.getByLabelText("Group") as HTMLSelectElement;
|
|
expect(Array.from(groupSelect.options).map((o) => o.textContent)).toEqual(["Attic", "Default"]);
|
|
expect(groupSelect.value).toBe("1");
|
|
});
|
|
|
|
test("the group select falls back to the first group when the default is absent", async () => {
|
|
groups = [
|
|
{ id: 5, name: "Attic", safe_search: false },
|
|
{ id: 7, name: "Basement", safe_search: false },
|
|
];
|
|
renderRulesRoute();
|
|
await screen.findByRole("heading", { name: "Rules" });
|
|
|
|
expect((screen.getByLabelText("Group") as HTMLSelectElement).value).toBe("5");
|
|
});
|