milestone 32: task-shaped configuration, file mode as a rendering, config status api
This commit is contained in:
@@ -0,0 +1,259 @@
|
||||
import { fireEvent, screen, waitFor, within } from "@testing-library/react";
|
||||
import { DATABASE, renderPage, stubApi, type Call } from "./testFixtures";
|
||||
|
||||
/**
|
||||
* Resolution in database mode: the upstream pool, the local records and the
|
||||
* forward zones, each rehomed from its own page onto a tab of one.
|
||||
*/
|
||||
|
||||
let calls: Call[];
|
||||
|
||||
afterEach(() => {
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
function writes(): Call[] {
|
||||
return calls;
|
||||
}
|
||||
|
||||
async function openResolution(tab?: string, options: Parameters<typeof stubApi>[1] = {}) {
|
||||
calls = stubApi(DATABASE, options);
|
||||
const suffix = tab === undefined ? "" : `?tab=${tab}`;
|
||||
return renderPage(`/configuration/resolution${suffix}`, "Resolution");
|
||||
}
|
||||
|
||||
/** The row Delete opens the dialog; the dialog's own Delete is the confirm. */
|
||||
async function openDeleteDialog(index = 0) {
|
||||
fireEvent.click(screen.getAllByRole("button", { name: "Delete" })[index]!);
|
||||
return await screen.findByRole("alertdialog");
|
||||
}
|
||||
|
||||
test("the upstream pool is the default tab and lists every field", async () => {
|
||||
await openResolution();
|
||||
|
||||
expect(await screen.findByText("udp://1.1.1.1:53")).toBeTruthy();
|
||||
expect(screen.getByText("tls://9.9.9.9:853")).toBeTruthy();
|
||||
expect(screen.getByText("dns.quad9.net")).toBeTruthy();
|
||||
expect((screen.getByLabelText("udp://1.1.1.1:53 enabled") as HTMLInputElement).checked).toBe(true);
|
||||
expect((screen.getByLabelText("tls://9.9.9.9:853 enabled") as HTMLInputElement).checked).toBe(false);
|
||||
expect(screen.getByRole("heading", { name: "Add upstream" })).toBeTruthy();
|
||||
expect(screen.getByText(/takes effect at the next restart/)).toBeTruthy();
|
||||
});
|
||||
|
||||
test("adding an upstream posts every field", async () => {
|
||||
await openResolution();
|
||||
await screen.findByRole("heading", { name: "Add upstream" });
|
||||
|
||||
fireEvent.change(screen.getByLabelText("URL"), { target: { value: "udp://8.8.8.8:53" } });
|
||||
fireEvent.change(screen.getByLabelText("Priority"), { target: { value: "150" } });
|
||||
fireEvent.click(screen.getByRole("button", { name: "Add upstream" }));
|
||||
|
||||
await waitFor(() => expect(writes()).toHaveLength(1));
|
||||
expect(writes()[0]).toEqual({
|
||||
url: "/api/upstreams",
|
||||
method: "POST",
|
||||
body: { url: "udp://8.8.8.8:53", priority: 150, enabled: true, tls_name: "" },
|
||||
});
|
||||
});
|
||||
|
||||
test("an upstream write re-reads the config status, and the shell states the pending restart", async () => {
|
||||
// The client never decides a restart is owed: the server sets the flag, and
|
||||
// the mutation's invalidation is only what makes the page ask again.
|
||||
let restartPending = false;
|
||||
await openResolution(undefined, {
|
||||
responses: { "GET /api/config/status": () => ({ ...DATABASE, restart_pending: restartPending }) },
|
||||
onWrite: () => {
|
||||
restartPending = true;
|
||||
return null;
|
||||
},
|
||||
});
|
||||
await screen.findByRole("heading", { name: "Add upstream" });
|
||||
expect(screen.queryByText(/Restart nxdns to apply them/)).toBeNull();
|
||||
|
||||
fireEvent.change(screen.getByLabelText("URL"), { target: { value: "udp://8.8.8.8:53" } });
|
||||
fireEvent.click(screen.getByRole("button", { name: "Add upstream" }));
|
||||
|
||||
await screen.findByText(/Saved changes are not running yet\. Restart nxdns to apply them\./);
|
||||
});
|
||||
|
||||
test("toggling enabled resends the whole row", async () => {
|
||||
await openResolution();
|
||||
await screen.findByLabelText("tls://9.9.9.9:853 enabled");
|
||||
|
||||
fireEvent.click(screen.getByLabelText("tls://9.9.9.9:853 enabled"));
|
||||
|
||||
await waitFor(() => expect(writes()).toHaveLength(1));
|
||||
expect(writes()[0]).toEqual({
|
||||
url: "/api/upstreams/2",
|
||||
method: "PUT",
|
||||
body: { url: "tls://9.9.9.9:853", priority: 200, enabled: true, tls_name: "dns.quad9.net" },
|
||||
});
|
||||
});
|
||||
|
||||
test("upstream delete asks for confirmation and skips the request when cancelled", async () => {
|
||||
await openResolution();
|
||||
await screen.findByText("udp://1.1.1.1:53");
|
||||
|
||||
const dialog = await openDeleteDialog();
|
||||
expect(dialog.textContent).toContain('Delete upstream "udp://1.1.1.1:53"?');
|
||||
|
||||
fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
|
||||
await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
|
||||
expect(writes()).toHaveLength(0);
|
||||
});
|
||||
|
||||
test("confirming the upstream delete dialog issues the DELETE", async () => {
|
||||
await openResolution();
|
||||
await screen.findByText("udp://1.1.1.1:53");
|
||||
|
||||
const dialog = await openDeleteDialog();
|
||||
fireEvent.click(within(dialog).getByRole("button", { name: "Delete" }));
|
||||
|
||||
await waitFor(() => expect(writes()).toHaveLength(1));
|
||||
expect(writes()[0]).toMatchObject({ method: "DELETE", url: "/api/upstreams/1" });
|
||||
});
|
||||
|
||||
test("a 409 on create renders the conflict text inline", async () => {
|
||||
await openResolution(undefined, {
|
||||
onWrite: () =>
|
||||
new Response(JSON.stringify({ error: "an upstream with that url already exists" }), {
|
||||
status: 409,
|
||||
headers: { "content-type": "application/json" },
|
||||
}),
|
||||
});
|
||||
await screen.findByRole("heading", { name: "Add upstream" });
|
||||
|
||||
fireEvent.change(screen.getByLabelText("URL"), { target: { value: "udp://1.1.1.1:53" } });
|
||||
fireEvent.click(screen.getByRole("button", { name: "Add upstream" }));
|
||||
|
||||
const alert = await screen.findByRole("alert");
|
||||
expect(alert.textContent).toBe("an upstream with that url already exists");
|
||||
});
|
||||
|
||||
test("a 409 on toggle renders the last-enabled conflict", async () => {
|
||||
await openResolution(undefined, {
|
||||
onWrite: () =>
|
||||
new Response(JSON.stringify({ error: "the last enabled upstream cannot be disabled" }), {
|
||||
status: 409,
|
||||
headers: { "content-type": "application/json" },
|
||||
}),
|
||||
});
|
||||
await screen.findByLabelText("udp://1.1.1.1:53 enabled");
|
||||
|
||||
fireEvent.click(screen.getByLabelText("udp://1.1.1.1:53 enabled"));
|
||||
|
||||
const alert = await screen.findByRole("alert");
|
||||
expect(alert.textContent).toBe("the last enabled upstream cannot be disabled");
|
||||
});
|
||||
|
||||
test("a 409 on delete renders the last-enabled conflict", async () => {
|
||||
await openResolution(undefined, {
|
||||
onWrite: () =>
|
||||
new Response(JSON.stringify({ error: "the last enabled upstream cannot be removed" }), {
|
||||
status: 409,
|
||||
headers: { "content-type": "application/json" },
|
||||
}),
|
||||
});
|
||||
await screen.findByText("udp://1.1.1.1:53");
|
||||
|
||||
const dialog = await openDeleteDialog();
|
||||
fireEvent.click(within(dialog).getByRole("button", { name: "Delete" }));
|
||||
|
||||
const alert = await screen.findByRole("alert");
|
||||
expect(alert.textContent).toBe("the last enabled upstream cannot be removed");
|
||||
});
|
||||
|
||||
test("editing a row seeds the form and PUTs the replaced row", async () => {
|
||||
await openResolution();
|
||||
await screen.findByText("tls://9.9.9.9:853");
|
||||
|
||||
fireEvent.click(screen.getAllByRole("button", { name: "Edit" })[1]!);
|
||||
await screen.findByRole("heading", { name: "Edit tls://9.9.9.9:853" });
|
||||
|
||||
expect((screen.getByLabelText("URL") as HTMLInputElement).value).toBe("tls://9.9.9.9:853");
|
||||
expect((screen.getByLabelText("Priority") as HTMLInputElement).value).toBe("200");
|
||||
expect((screen.getByLabelText("TLS name") as HTMLInputElement).value).toBe("dns.quad9.net");
|
||||
|
||||
fireEvent.change(screen.getByLabelText("Priority"), { target: { value: "10" } });
|
||||
fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
|
||||
|
||||
await waitFor(() => expect(writes()).toHaveLength(1));
|
||||
expect(writes()[0]).toEqual({
|
||||
url: "/api/upstreams/2",
|
||||
method: "PUT",
|
||||
body: { url: "tls://9.9.9.9:853", priority: 10, enabled: false, tls_name: "dns.quad9.net" },
|
||||
});
|
||||
await screen.findByRole("heading", { name: "Add upstream" });
|
||||
});
|
||||
|
||||
test("the arrow keys move between tabs, and the panel follows", async () => {
|
||||
await openResolution();
|
||||
await screen.findByText("udp://1.1.1.1:53");
|
||||
|
||||
const tablist = screen.getByRole("tablist", { name: "Resolution" });
|
||||
expect(screen.getByRole("tab", { name: "Upstreams" }).getAttribute("aria-selected")).toBe("true");
|
||||
|
||||
fireEvent.keyDown(tablist, { key: "ArrowRight" });
|
||||
await waitFor(() =>
|
||||
expect(screen.getByRole("tab", { name: "Records" }).getAttribute("aria-selected")).toBe("true"),
|
||||
);
|
||||
await screen.findByText("nas.lan.home");
|
||||
|
||||
fireEvent.keyDown(tablist, { key: "ArrowLeft" });
|
||||
await waitFor(() =>
|
||||
expect(screen.getByRole("tab", { name: "Upstreams" }).getAttribute("aria-selected")).toBe("true"),
|
||||
);
|
||||
await screen.findByText("udp://1.1.1.1:53");
|
||||
});
|
||||
|
||||
test("creating a local record posts exactly the LocalRecordInput", async () => {
|
||||
await openResolution("records");
|
||||
await screen.findByText("nas.lan.home");
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "Add record" }));
|
||||
fireEvent.change(screen.getByLabelText("Name"), { target: { value: "printer.lan.home" } });
|
||||
// The record type is a RAC Select: open the listbox, then pick.
|
||||
fireEvent.click(screen.getByRole("button", { name: /Type$/ }));
|
||||
fireEvent.click(await screen.findByRole("option", { name: "AAAA" }));
|
||||
fireEvent.change(screen.getByLabelText("Value"), { target: { value: "fd00::11" } });
|
||||
fireEvent.click(screen.getByRole("button", { name: "Save" }));
|
||||
|
||||
await waitFor(() => expect(writes()).toHaveLength(1));
|
||||
expect(writes()[0]).toMatchObject({
|
||||
url: "/api/local-records",
|
||||
method: "POST",
|
||||
body: { name: "printer.lan.home", rtype: "AAAA", value: "fd00::11" },
|
||||
});
|
||||
});
|
||||
|
||||
test("the record delete dialog names the record and only deletes on confirm", async () => {
|
||||
await openResolution("records");
|
||||
await screen.findByText("nas.lan.home");
|
||||
|
||||
let dialog = await openDeleteDialog();
|
||||
expect(dialog.textContent).toContain('Delete record "nas.lan.home"?');
|
||||
fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
|
||||
await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
|
||||
expect(writes()).toHaveLength(0);
|
||||
|
||||
dialog = await openDeleteDialog();
|
||||
fireEvent.click(within(dialog).getByRole("button", { name: "Delete" }));
|
||||
await waitFor(() => expect(writes()).toHaveLength(1));
|
||||
expect(writes()[0]).toMatchObject({ method: "DELETE", url: "/api/local-records/1" });
|
||||
});
|
||||
|
||||
test("the forward zone delete dialog names the zone and only deletes on confirm", async () => {
|
||||
await openResolution("zones");
|
||||
await screen.findByText("lan.home");
|
||||
|
||||
let dialog = await openDeleteDialog();
|
||||
expect(dialog.textContent).toContain('Delete forward zone "lan.home"?');
|
||||
fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
|
||||
await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
|
||||
expect(writes()).toHaveLength(0);
|
||||
|
||||
dialog = await openDeleteDialog();
|
||||
fireEvent.click(within(dialog).getByRole("button", { name: "Delete" }));
|
||||
await waitFor(() => expect(writes()).toHaveLength(1));
|
||||
expect(writes()[0]).toMatchObject({ method: "DELETE", url: "/api/forward-zones/1" });
|
||||
});
|
||||
Reference in New Issue
Block a user