mokhtar
c65d92d8f8
the client address follows its name as visible muted text in the query tables, the config lock indicator prints its reason beside the tag except in table rows where a page-level note explains the lock instead, and the locked delete buttons describe themselves through that one visible note. the chart legend tooltip is deleted because a named client is deliberately not addressed in the chart, and the dead series address field went with it. titles that merely repeat visible copyable text stay.
469 lines
21 KiB
TypeScript
469 lines
21 KiB
TypeScript
import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
|
|
import { ClientName, type ClientNames } from "./clientNames";
|
|
import { BASE, CLIENTS, MANAGED_FILE, NEVER, renderClientsPage, setConfigStatus } from "./testFixtures";
|
|
|
|
/** The text of the elements an input points at with `aria-describedby`. */
|
|
function describedText(input: HTMLElement): string {
|
|
const ids = input.getAttribute("aria-describedby");
|
|
if (ids === null) throw new Error("input has no aria-describedby");
|
|
return ids
|
|
.split(/\s+/)
|
|
.map((id) => {
|
|
const node = document.getElementById(id);
|
|
if (node === null) throw new Error(`aria-describedby names missing element ${id}`);
|
|
return node.textContent ?? "";
|
|
})
|
|
.join(" ");
|
|
}
|
|
|
|
function clientRow(ip: string): HTMLElement {
|
|
const row = screen.getByText(ip).closest("tr");
|
|
if (row === null) throw new Error(`no client row for ${ip}`);
|
|
return row;
|
|
}
|
|
|
|
function assignmentsSection(): HTMLElement {
|
|
const heading = screen.getByRole("heading", { name: /Network assignments/ });
|
|
const section = heading.closest("section");
|
|
if (section === null) throw new Error("no network assignments section");
|
|
return section;
|
|
}
|
|
|
|
/**
|
|
* Editing a client writes configuration, so the affordance is absent until the
|
|
* status query says the database owns it — never disabled, never assumed.
|
|
*/
|
|
async function unlockedEdit(index: number): Promise<HTMLButtonElement> {
|
|
const buttons = await screen.findAllByRole("button", { name: "Edit" });
|
|
return buttons[index] as HTMLButtonElement;
|
|
}
|
|
|
|
afterEach(() => {
|
|
vi.unstubAllGlobals();
|
|
});
|
|
|
|
test("renders the identity-first table: address, name, group, first and last seen", async () => {
|
|
await renderClientsPage();
|
|
|
|
const headers = screen.getAllByRole("columnheader").map((cell) => cell.textContent);
|
|
expect(headers).toEqual(["Address", "Name", "Group", "First seen", "Last seen", "Actions"]);
|
|
expect(screen.getByText("192.168.1.10")).toBeTruthy();
|
|
expect(screen.getByText("192.168.1.11")).toBeTruthy();
|
|
expect(screen.getByText("laptop")).toBeTruthy();
|
|
expect(screen.getAllByRole("cell", { name: "kids" })).toHaveLength(1);
|
|
});
|
|
|
|
test("a named row shows the typed name and hides the learned one", async () => {
|
|
await renderClientsPage();
|
|
|
|
expect(screen.getByText("laptop")).toBeTruthy();
|
|
expect(screen.queryByText("laptop-1.lan")).toBeNull();
|
|
});
|
|
|
|
test("an unnamed row shows the learned name with the learned marker", async () => {
|
|
await renderClientsPage();
|
|
|
|
// The cell holds the learned name followed by the marker, so the match is on
|
|
// the containing span rather than on a bare text node.
|
|
const learned = screen.getByText(
|
|
(content, element) => element?.tagName === "SPAN" && content.startsWith("kids-tablet.lan"),
|
|
);
|
|
// The marker is text, not colour, so a screen reader announces it too.
|
|
expect(within(learned).getByText("learned")).toBeTruthy();
|
|
});
|
|
|
|
test("the learned marker is a Clients-page affordance: query tables render the same name without it", () => {
|
|
const names: ClientNames = new Map([["192.168.1.11", { name: "", learned_name: "kids-tablet.lan" }]]);
|
|
render(<ClientName ip="192.168.1.11" names={names} />);
|
|
|
|
expect(screen.getByText("kids-tablet.lan")).toBeTruthy();
|
|
expect(screen.queryByText("learned")).toBeNull();
|
|
});
|
|
|
|
test("the address links to the client's detail page", async () => {
|
|
await renderClientsPage();
|
|
|
|
const link = within(clientRow("192.168.1.10")).getByRole("link", { name: "192.168.1.10" });
|
|
expect(link.getAttribute("href")).toBe("/clients/1");
|
|
});
|
|
|
|
test("delete asks first, naming the row, and the confirmation carries out the delete", async () => {
|
|
const { fetchMock } = await renderClientsPage({ ...BASE, "DELETE /api/clients/2": {} });
|
|
|
|
fireEvent.click(within(clientRow("192.168.1.11")).getByRole("button", { name: "Delete" }));
|
|
|
|
const dialog = await screen.findByRole("alertdialog", { name: "Delete client" });
|
|
// The operator has to be able to tell from the dialog alone which row this is.
|
|
expect(within(dialog).getByText(/kids-tablet\.lan \(192\.168\.1\.11\)/)).toBeTruthy();
|
|
expect(within(dialog).getByText(/re-materialize on their next DNS query/)).toBeTruthy();
|
|
// Asking is not deleting.
|
|
expect(fetchMock.mock.calls.filter(([, init]) => init?.method === "DELETE")).toEqual([]);
|
|
|
|
fireEvent.click(within(dialog).getByRole("button", { name: "Delete" }));
|
|
await waitFor(() =>
|
|
expect(
|
|
fetchMock.mock.calls.filter(([input, init]) => init?.method === "DELETE" && String(input).endsWith("/2")),
|
|
).toHaveLength(1),
|
|
);
|
|
await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
|
|
});
|
|
|
|
test("cancelling the confirmation keeps the client", async () => {
|
|
const { fetchMock } = await renderClientsPage({ ...BASE, "DELETE /api/clients/2": {} });
|
|
|
|
fireEvent.click(within(clientRow("192.168.1.11")).getByRole("button", { name: "Delete" }));
|
|
const dialog = await screen.findByRole("alertdialog", { name: "Delete client" });
|
|
fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
|
|
|
|
await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
|
|
expect(screen.getByText("192.168.1.11")).toBeTruthy();
|
|
expect(fetchMock.mock.calls.filter(([, init]) => init?.method === "DELETE")).toEqual([]);
|
|
});
|
|
|
|
test("shows the DNS-activity empty state when there are no clients", async () => {
|
|
await renderClientsPage({ ...BASE, "GET /api/clients": { clients: [] } });
|
|
|
|
expect(screen.getByText(/rows appear automatically as devices on the network make dns queries/i)).toBeTruthy();
|
|
expect(screen.queryByRole("table")).toBeNull();
|
|
});
|
|
|
|
test("edit opens a dialog seeded with the client's name and group", async () => {
|
|
await renderClientsPage();
|
|
|
|
fireEvent.click(await unlockedEdit(0));
|
|
// The dialog portals out of the table, so every field query is scoped to it.
|
|
const dialog = within(await screen.findByRole("dialog", { name: "Edit client 192.168.1.10" }));
|
|
expect((dialog.getByLabelText("Name") as HTMLInputElement).value).toBe("laptop");
|
|
// The RAC Select names its trigger with the value and then the label.
|
|
expect(dialog.getByRole("button", { name: /Group$/ }).textContent).toContain("default");
|
|
});
|
|
|
|
test("the group picker offers every group and reports the choice", async () => {
|
|
await renderClientsPage();
|
|
|
|
fireEvent.click(await unlockedEdit(0));
|
|
const dialog = within(await screen.findByRole("dialog", { name: "Edit client 192.168.1.10" }));
|
|
fireEvent.click(dialog.getByRole("button", { name: /Group$/ }));
|
|
|
|
const options = await screen.findAllByRole("option");
|
|
expect(options.map((option) => option.textContent)).toEqual(["default", "kids"]);
|
|
|
|
fireEvent.click(screen.getByRole("option", { name: "kids" }));
|
|
expect(screen.getByRole("button", { name: /Group$/ }).textContent).toContain("kids");
|
|
});
|
|
|
|
test("network assignments start clean and dirty on add", async () => {
|
|
await renderClientsPage();
|
|
|
|
const range = (await screen.findByLabelText("Range 1")) as HTMLInputElement;
|
|
expect(range.value).toBe("192.168.1.0/24");
|
|
const save = screen.getByRole("button", { name: "Save assignments" }) as HTMLButtonElement;
|
|
expect(save.disabled).toBe(true);
|
|
|
|
fireEvent.click(screen.getByRole("button", { name: "Add range" }));
|
|
expect(save.disabled).toBe(false);
|
|
expect((screen.getByLabelText("Range 2") as HTMLInputElement).value).toBe("");
|
|
});
|
|
|
|
test("?group= filters the list to that group", async () => {
|
|
const { router } = await renderClientsPage();
|
|
await router.navigate({ to: "/clients", search: { group: 2 } });
|
|
|
|
await waitFor(() => expect(screen.queryByText("192.168.1.10")).toBeNull());
|
|
expect(screen.getByText("192.168.1.11")).toBeTruthy();
|
|
expect(screen.getByText("Showing clients in kids.")).toBeTruthy();
|
|
});
|
|
|
|
test("an unknown group id filters to nothing and offers a way out", async () => {
|
|
const { router } = await renderClientsPage();
|
|
await router.navigate({ to: "/clients", search: { group: 999 } });
|
|
|
|
await screen.findByText("No group with id 999 exists.");
|
|
expect(screen.getByText("No clients match this filter.")).toBeTruthy();
|
|
expect(screen.queryByRole("table")).toBeNull();
|
|
|
|
fireEvent.click(screen.getByRole("link", { name: "Clear filter" }));
|
|
await waitFor(() => expect(screen.getByText("192.168.1.10")).toBeTruthy());
|
|
expect(router.state.location.search).toEqual({});
|
|
});
|
|
|
|
// Both statuses lock the declared delete, but only file authority proves the
|
|
// file declares the row; the anchors keep the two sentences apart.
|
|
const DECLARED_NOTE = /^This client is declared in the configuration file/;
|
|
const UNKNOWN_NOTE = /^nxdns cannot say whether this client is declared/;
|
|
test("file mode drops every edit affordance and keeps the observed delete live (R2-4)", async () => {
|
|
await renderClientsPage({ ...BASE, "GET /api/config/status": MANAGED_FILE });
|
|
// The settled sentence, not the tag: "Locked" is already on screen while
|
|
// authority is pending, so waiting on it would not wait for this status.
|
|
await screen.findAllByText(/^Managed by \/etc\/nxdns\/config\.zon/);
|
|
|
|
expect(screen.queryAllByRole("button", { name: "Edit" })).toEqual([]);
|
|
|
|
const declared = clientRow("192.168.1.10");
|
|
const observed = clientRow("192.168.1.11");
|
|
expect((within(declared).getByRole("button", { name: "Delete" }) as HTMLButtonElement).disabled).toBe(true);
|
|
expect((within(observed).getByRole("button", { name: "Delete" }) as HTMLButtonElement).disabled).toBe(false);
|
|
|
|
// Why the locked Delete will not answer, in visible text and exactly once:
|
|
// per row it would repeat down the whole page, and on the button it was a
|
|
// title that a keyboard and a touch screen never reached.
|
|
expect(screen.getAllByText(DECLARED_NOTE, { selector: "p" })).toHaveLength(1);
|
|
expect(within(declared).queryByText(DECLARED_NOTE, { selector: "p" })).toBeNull();
|
|
// The description stays on the button itself too, for a reader on that control.
|
|
const locked = within(declared).getByRole("button", { name: "Delete" });
|
|
expect(document.getElementById(locked.getAttribute("aria-describedby") ?? "")?.textContent).toMatch(DECLARED_NOTE);
|
|
});
|
|
|
|
test("an all-observed page still says why Edit is gone, with no delete note to carry it", async () => {
|
|
// Every row observed, so no Delete is locked. The edit lock is still real, and
|
|
// "Locked" appearing with nothing to explain it is the failure this guards.
|
|
const observedOnly = { clients: [CLIENTS.clients[1]] };
|
|
await renderClientsPage({
|
|
...BASE,
|
|
"GET /api/clients": observedOnly,
|
|
"GET /api/config/status": MANAGED_FILE,
|
|
});
|
|
// The settled sentence is both the anchor and the assertion: it is the whole
|
|
// explanation for the missing Edit action.
|
|
await screen.findAllByText(/^Managed by \/etc\/nxdns\/config\.zon/);
|
|
expect(await screen.findAllByText("Locked")).not.toHaveLength(0);
|
|
|
|
// The delete sentence belongs only to a row that has one.
|
|
expect(screen.queryByText(DECLARED_NOTE)).toBeNull();
|
|
expect((screen.getByRole("button", { name: "Delete" }) as HTMLButtonElement).disabled).toBe(false);
|
|
});
|
|
|
|
test("file mode renders network assignments with no mutation control at all (R2-4)", async () => {
|
|
await renderClientsPage({ ...BASE, "GET /api/config/status": MANAGED_FILE });
|
|
const section = await waitFor(() => {
|
|
const found = assignmentsSection();
|
|
if (found.querySelector("table") === null) throw new Error("still editing");
|
|
return found;
|
|
});
|
|
|
|
expect(within(section).getByText("192.168.1.0/24")).toBeTruthy();
|
|
expect(
|
|
section.querySelectorAll(
|
|
"input, textarea, select, [role='combobox'], [role='checkbox'], [contenteditable], button",
|
|
),
|
|
).toHaveLength(0);
|
|
});
|
|
|
|
test("a failed config status exposes no configuration mutation, and still deletes an observed client (R3-4)", async () => {
|
|
await renderClientsPage({ ...BASE, "GET /api/config/status": undefined });
|
|
await screen.findAllByText(/^Configuration status unavailable/);
|
|
|
|
expect(screen.queryAllByRole("button", { name: "Edit" })).toEqual([]);
|
|
expect(screen.queryByRole("button", { name: "Save assignments" })).toBeNull();
|
|
expect(within(assignmentsSection()).getByText(/Configuration status unavailable/)).toBeTruthy();
|
|
|
|
const observed = clientRow("192.168.1.11");
|
|
expect((within(observed).getByRole("button", { name: "Delete" }) as HTMLButtonElement).disabled).toBe(false);
|
|
const declared = clientRow("192.168.1.10");
|
|
expect((within(declared).getByRole("button", { name: "Delete" }) as HTMLButtonElement).disabled).toBe(true);
|
|
});
|
|
|
|
// The status query polls, so authority can turn while a dialog or a delete
|
|
// confirmation is already open. `undefined` is the failed status: the fetch stub
|
|
// answers 404 for a key it does not hold.
|
|
//
|
|
describe.each([
|
|
["file authority", MANAGED_FILE, DECLARED_NOTE, UNKNOWN_NOTE],
|
|
["a failed status", undefined, UNKNOWN_NOTE, DECLARED_NOTE],
|
|
])("authority turning to %s under an open affordance", (_label, status, lockNote, otherNote) => {
|
|
test("locks the open edit dialog's save path and leaves cancel working", async () => {
|
|
const map = { ...BASE };
|
|
const { queryClient } = await renderClientsPage(map);
|
|
|
|
fireEvent.click(await unlockedEdit(0));
|
|
expect(
|
|
within(await screen.findByRole("dialog", { name: "Edit client 192.168.1.10" })).getByRole("button", {
|
|
name: "Save",
|
|
}),
|
|
).toBeTruthy();
|
|
|
|
await setConfigStatus(map, queryClient, status);
|
|
|
|
// The draft survives; only the save path goes, and it says why.
|
|
const dialog = screen.getByRole("dialog", { name: "Edit client 192.168.1.10" });
|
|
expect(within(dialog).queryByRole("button", { name: "Save" })).toBeNull();
|
|
expect((within(dialog).getByLabelText("Name") as HTMLInputElement).value).toBe("laptop");
|
|
expect(within(dialog).getByText(/can no longer be saved/)).toBeTruthy();
|
|
expect(within(dialog).getByText("Locked")).toBeTruthy();
|
|
|
|
fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
|
|
await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
|
|
});
|
|
|
|
test("locks an open declared-client delete confirmation in place and leaves cancel working", async () => {
|
|
const map = { ...BASE };
|
|
const { queryClient, fetchMock } = await renderClientsPage(map);
|
|
// The Edit affordance appearing is the proof authority resolved to
|
|
// database; the transition under test starts from there.
|
|
await unlockedEdit(0);
|
|
|
|
const declared = clientRow("192.168.1.10");
|
|
fireEvent.click(within(declared).getByRole("button", { name: "Delete" }));
|
|
const dialog = await screen.findByRole("alertdialog", { name: "Delete client" });
|
|
|
|
await setConfigStatus(map, queryClient, status);
|
|
|
|
// The dialog stays put. Closing it would throw focus at the Delete button
|
|
// the same turn disabled, and the reason would survive only as a title
|
|
// attribute; here the reason is the dialog's own message.
|
|
await waitFor(() => expect(within(dialog).queryByRole("button", { name: "Delete" })).toBeNull());
|
|
expect(within(dialog).getByText(lockNote)).toBeTruthy();
|
|
expect(within(dialog).queryByText(otherNote)).toBeNull();
|
|
expect(within(dialog).getByText("Locked")).toBeTruthy();
|
|
|
|
fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
|
|
await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
|
|
expect(fetchMock.mock.calls.filter(([, init]) => init?.method === "DELETE")).toEqual([]);
|
|
});
|
|
|
|
test("a cancelled confirmation stays closed when authority comes back", async () => {
|
|
const map = { ...BASE };
|
|
const { queryClient } = await renderClientsPage(map);
|
|
await unlockedEdit(0);
|
|
|
|
fireEvent.click(within(clientRow("192.168.1.10")).getByRole("button", { name: "Delete" }));
|
|
const dialog = await screen.findByRole("alertdialog", { name: "Delete client" });
|
|
fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
|
|
await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
|
|
|
|
// A poll that fails and then recovers must not raise a destructive
|
|
// question the operator already answered.
|
|
await setConfigStatus(map, queryClient, status);
|
|
await setConfigStatus(map, queryClient, BASE["GET /api/config/status"]);
|
|
|
|
await waitFor(() => expect(screen.getAllByRole("button", { name: "Edit" }).length).toBeGreaterThan(0));
|
|
expect(screen.queryByRole("alertdialog")).toBeNull();
|
|
});
|
|
|
|
test("the confirm action comes back when authority does, without a second prompt", async () => {
|
|
const map = { ...BASE, "DELETE /api/clients/1": {} };
|
|
const { queryClient, fetchMock } = await renderClientsPage(map);
|
|
await unlockedEdit(0);
|
|
|
|
fireEvent.click(within(clientRow("192.168.1.10")).getByRole("button", { name: "Delete" }));
|
|
const dialog = await screen.findByRole("alertdialog", { name: "Delete client" });
|
|
|
|
await setConfigStatus(map, queryClient, status);
|
|
await waitFor(() => expect(within(dialog).queryByRole("button", { name: "Delete" })).toBeNull());
|
|
|
|
await setConfigStatus(map, queryClient, BASE["GET /api/config/status"]);
|
|
|
|
// The question was never withdrawn, so the answer returns to the same
|
|
// dialog rather than asking the operator to start again.
|
|
const confirm = await within(dialog).findByRole("button", { name: "Delete" });
|
|
fireEvent.click(confirm);
|
|
await waitFor(() =>
|
|
expect(
|
|
fetchMock.mock.calls.filter(
|
|
([input, init]) => init?.method === "DELETE" && String(input).endsWith("/1"),
|
|
),
|
|
).toHaveLength(1),
|
|
);
|
|
});
|
|
|
|
test("keeps an open observed-client delete confirmation live (R3-4)", async () => {
|
|
const map = { ...BASE, "DELETE /api/clients/2": {} };
|
|
const { queryClient, fetchMock } = await renderClientsPage(map);
|
|
// The Edit affordance appearing is the proof authority resolved to
|
|
// database; the transition under test starts from there.
|
|
await unlockedEdit(0);
|
|
|
|
const observed = clientRow("192.168.1.11");
|
|
fireEvent.click(within(observed).getByRole("button", { name: "Delete" }));
|
|
const dialog = await screen.findByRole("alertdialog", { name: "Delete client" });
|
|
|
|
await setConfigStatus(map, queryClient, status);
|
|
|
|
fireEvent.click(within(dialog).getByRole("button", { name: "Delete" }));
|
|
await waitFor(() =>
|
|
expect(
|
|
fetchMock.mock.calls.filter(
|
|
([input, init]) => init?.method === "DELETE" && String(input).endsWith("/2"),
|
|
),
|
|
).toHaveLength(1),
|
|
);
|
|
});
|
|
});
|
|
|
|
test("a pending config status holds the same line as a failed one (R3-4)", async () => {
|
|
// The status request never settles, so authority stays pending for the whole
|
|
// test: nothing configuration owns may be offered on that guess.
|
|
await renderClientsPage({ ...BASE, "GET /api/config/status": NEVER });
|
|
await screen.findAllByText(/^Checking which configuration source/);
|
|
|
|
expect(screen.queryAllByRole("button", { name: "Edit" })).toEqual([]);
|
|
expect(screen.queryByRole("button", { name: "Save assignments" })).toBeNull();
|
|
expect(within(assignmentsSection()).getByText(/Checking which configuration source/)).toBeTruthy();
|
|
|
|
const observed = clientRow("192.168.1.11");
|
|
expect((within(observed).getByRole("button", { name: "Delete" }) as HTMLButtonElement).disabled).toBe(false);
|
|
});
|
|
|
|
test("a save-time problem marks the input it is about and describes it", async () => {
|
|
await renderClientsPage();
|
|
|
|
const range = (await screen.findByLabelText("Range 1")) as HTMLInputElement;
|
|
fireEvent.change(range, { target: { value: "" } });
|
|
fireEvent.click(screen.getByRole("button", { name: "Save assignments" }));
|
|
|
|
expect(range.getAttribute("aria-invalid")).toBe("true");
|
|
expect(describedText(range)).toBe("Row 1: prefix is required.");
|
|
|
|
// Only the offending input is marked; the priority beside it is untouched.
|
|
const priority = screen.getByLabelText("Priority for range 1");
|
|
expect(priority.getAttribute("aria-invalid")).toBeNull();
|
|
expect(priority.getAttribute("aria-describedby")).toBeNull();
|
|
|
|
fireEvent.change(range, { target: { value: "10.0.0.0/8" } });
|
|
fireEvent.change(screen.getByLabelText("Priority for range 1"), { target: { value: "abc" } });
|
|
fireEvent.click(screen.getByRole("button", { name: "Save assignments" }));
|
|
|
|
expect(range.getAttribute("aria-invalid")).toBeNull();
|
|
expect(describedText(screen.getByLabelText("Priority for range 1"))).toBe(
|
|
"Row 1: priority must be a whole number.",
|
|
);
|
|
});
|
|
|
|
test("removing a row drops the message rather than moving it to another input", async () => {
|
|
await renderClientsPage();
|
|
|
|
// Row 1 is the offending one, so removing it is what would slide the stale
|
|
// index onto row 2 — an input that validated cleanly.
|
|
const range = (await screen.findByLabelText("Range 1")) as HTMLInputElement;
|
|
fireEvent.change(range, { target: { value: "" } });
|
|
fireEvent.click(screen.getByRole("button", { name: "Add range" }));
|
|
fireEvent.change(screen.getByLabelText("Range 2"), { target: { value: "10.0.0.0/8" } });
|
|
fireEvent.click(screen.getByRole("button", { name: "Save assignments" }));
|
|
|
|
expect(range.getAttribute("aria-invalid")).toBe("true");
|
|
expect(describedText(range)).toBe("Row 1: prefix is required.");
|
|
|
|
const section = assignmentsSection();
|
|
fireEvent.click(within(section).getAllByRole("button", { name: "Remove" })[0] as HTMLButtonElement);
|
|
|
|
const survivor = screen.getByLabelText("Range 1") as HTMLInputElement;
|
|
expect(survivor.value).toBe("10.0.0.0/8");
|
|
expect(survivor.getAttribute("aria-invalid")).toBeNull();
|
|
expect(survivor.getAttribute("aria-describedby")).toBeNull();
|
|
expect(within(section).queryByRole("alert")).toBeNull();
|
|
expect(screen.queryByLabelText("Range 2")).toBeNull();
|
|
});
|
|
|
|
test("editing a row clears the message it was about", async () => {
|
|
await renderClientsPage();
|
|
|
|
const range = (await screen.findByLabelText("Range 1")) as HTMLInputElement;
|
|
fireEvent.change(range, { target: { value: "" } });
|
|
fireEvent.click(screen.getByRole("button", { name: "Save assignments" }));
|
|
expect(range.getAttribute("aria-invalid")).toBe("true");
|
|
|
|
fireEvent.change(range, { target: { value: "10.0.0.0/8" } });
|
|
expect(range.getAttribute("aria-invalid")).toBeNull();
|
|
expect(within(assignmentsSection()).queryByRole("alert")).toBeNull();
|
|
});
|