dev_agent
b629251905
Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com> Co-committed-by: dev_agent <dev_agent@cubecraftlabs.com>
2022 lines
78 KiB
TypeScript
2022 lines
78 KiB
TypeScript
import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
|
||
import { act, cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
|
||
import DefinitionsTab from "./DefinitionsTab";
|
||
import {
|
||
DEFINITION_ICONS,
|
||
DefinitionIcon,
|
||
FA_DEFINITION_ICONS,
|
||
emojiIconKey,
|
||
faIconName,
|
||
faTypedIconKey,
|
||
findDefinitionIcon,
|
||
normalizeDefinitionIconName,
|
||
searchFaIcons,
|
||
} from "./definitionIcons";
|
||
import type { AdminChild, DefinitionRule, QuestDefinition } from "../api/definitions";
|
||
import { storeTokens } from "../auth/oidc";
|
||
import { AppTimezoneProvider } from "../time/AppTimezone";
|
||
|
||
function child(id: number, name: string, overrides: Partial<AdminChild> = {}): AdminChild {
|
||
return {
|
||
id,
|
||
display_name: name,
|
||
colour: null,
|
||
avatar_ref: null,
|
||
sort_order: id,
|
||
is_active: true,
|
||
...overrides,
|
||
};
|
||
}
|
||
|
||
const CHILDREN: AdminChild[] = [
|
||
child(1, "Declan"),
|
||
child(2, "Maeve"),
|
||
child(3, "Rory"),
|
||
child(4, "Old", { is_active: false }),
|
||
];
|
||
|
||
function rule(overrides: Partial<DefinitionRule> = {}): DefinitionRule {
|
||
return {
|
||
rule_type: "daily",
|
||
interval: 1,
|
||
weekday_set: null,
|
||
day_of_month: null,
|
||
nth_weekday: null,
|
||
nth_weekday_weekday: null,
|
||
month: null,
|
||
start_date: "2026-01-01",
|
||
end_date: null,
|
||
...overrides,
|
||
};
|
||
}
|
||
|
||
const BRUSH: QuestDefinition = {
|
||
id: 10,
|
||
title: "Brush teeth",
|
||
description: null,
|
||
icon: "smile",
|
||
is_active: true,
|
||
skip_on_away: true,
|
||
rule: rule(),
|
||
assignees: [
|
||
{ id: 1, display_name: "Declan" },
|
||
{ id: 2, display_name: "Maeve" },
|
||
{ id: 3, display_name: "Rory" },
|
||
],
|
||
windows: [
|
||
{ window: "morning", due_time: "07:30" },
|
||
{ window: "evening", due_time: null },
|
||
],
|
||
};
|
||
|
||
const BINS: QuestDefinition = {
|
||
id: 11,
|
||
title: "Take out bins",
|
||
description: "Green bin",
|
||
icon: null,
|
||
is_active: true,
|
||
skip_on_away: false,
|
||
rule: rule({ rule_type: "weekly", interval: 2, weekday_set: [0, 3] }),
|
||
assignees: [
|
||
{ id: 1, display_name: "Declan" },
|
||
{ id: 4, display_name: "Old" },
|
||
],
|
||
windows: [{ window: "afternoon", due_time: "16:00" }],
|
||
};
|
||
|
||
const PIANO: QuestDefinition = {
|
||
id: 12,
|
||
title: "Piano practice",
|
||
description: null,
|
||
icon: null,
|
||
is_active: false,
|
||
skip_on_away: true,
|
||
rule: rule({ rule_type: "monthly_day", day_of_month: 15 }),
|
||
assignees: [{ id: 2, display_name: "Maeve" }],
|
||
windows: [{ window: "afternoon", due_time: null }],
|
||
};
|
||
|
||
function jsonResponse(body: unknown, status = 200): Response {
|
||
return new Response(JSON.stringify(body), {
|
||
status,
|
||
headers: { "Content-Type": "application/json" },
|
||
});
|
||
}
|
||
|
||
interface Call {
|
||
method: string;
|
||
path: string;
|
||
body: unknown;
|
||
}
|
||
|
||
const PREVIEW_PATH = "/api/v1/admin/quest-definitions/occurrences-preview";
|
||
|
||
/** Answers an occurrence-preview request; the default serves no dates. */
|
||
type PreviewHandler = (body: { rule: DefinitionRule; count?: number }) => Promise<Response>;
|
||
|
||
/**
|
||
* A stub of the admin API: serves the list and children, records writes, and
|
||
* lets a test queue a response for the next write. Occurrence previews are
|
||
* reads (recorded, never counted as writes) answered by `setPreview`.
|
||
*/
|
||
function fakeApi(initial: QuestDefinition[]) {
|
||
let definitions = [...initial];
|
||
const calls: Call[] = [];
|
||
let nextWrite: Response | null = null;
|
||
let preview: PreviewHandler = async () => jsonResponse({ dates: [] });
|
||
// Definitions with completion history: the API retires these on DELETE.
|
||
const withHistory = new Set<number>();
|
||
const fetchMock = vi.fn(async (input: RequestInfo | URL, init: RequestInit = {}) => {
|
||
const path = new URL(String(input), "http://localhost").pathname;
|
||
const method = init.method ?? "GET";
|
||
const body = typeof init.body === "string" ? JSON.parse(init.body) : null;
|
||
calls.push({ method, path, body });
|
||
if (method === "POST" && path === PREVIEW_PATH) return preview(body);
|
||
if (method === "GET" && path === "/api/v1/admin/quest-definitions") {
|
||
return jsonResponse({ definitions });
|
||
}
|
||
if (method === "GET" && path === "/api/v1/admin/children") {
|
||
return jsonResponse({ children: CHILDREN });
|
||
}
|
||
if (nextWrite) {
|
||
const response = nextWrite;
|
||
nextWrite = null;
|
||
return response;
|
||
}
|
||
if (method === "POST" && path === "/api/v1/admin/quest-definitions") {
|
||
const created: QuestDefinition = {
|
||
id: 99,
|
||
title: body.title,
|
||
description: null,
|
||
icon: body.icon ?? null,
|
||
is_active: true,
|
||
skip_on_away: body.skip_on_away,
|
||
rule: body.rule,
|
||
assignees: CHILDREN.filter((c) => body.assignee_child_ids.includes(c.id)).map((c) => ({
|
||
id: c.id,
|
||
display_name: c.display_name,
|
||
})),
|
||
windows: body.windows.map(([window, due_time]: [string, string | null]) => ({
|
||
window,
|
||
due_time,
|
||
})),
|
||
};
|
||
definitions = [...definitions, created];
|
||
return jsonResponse(created, 201);
|
||
}
|
||
const match = /^\/api\/v1\/admin\/quest-definitions\/(\d+)$/.exec(path);
|
||
if (method === "PATCH" && match) {
|
||
// Like the API's strict validate_icon: a Lucide name never has a colon.
|
||
if (typeof body.icon === "string" && /^lucide:.*:/.test(body.icon)) {
|
||
return jsonResponse({ detail: "icon is not a valid icon key" }, 422);
|
||
}
|
||
const id = Number(match[1]);
|
||
definitions = definitions.map((d) =>
|
||
d.id === id
|
||
? {
|
||
...d,
|
||
title: body.title ?? d.title,
|
||
icon: "icon" in body ? body.icon : d.icon,
|
||
skip_on_away: body.skip_on_away ?? d.skip_on_away,
|
||
rule: body.rule ?? d.rule,
|
||
// Like the API: a sent list replaces the whole set; an absent one keeps it.
|
||
assignees:
|
||
"assignee_child_ids" in body
|
||
? CHILDREN.filter((c) => body.assignee_child_ids.includes(c.id)).map((c) => ({
|
||
id: c.id,
|
||
display_name: c.display_name,
|
||
}))
|
||
: d.assignees,
|
||
}
|
||
: d,
|
||
);
|
||
return jsonResponse(definitions.find((d) => d.id === id));
|
||
}
|
||
if (method === "DELETE" && match) {
|
||
const id = Number(match[1]);
|
||
if (withHistory.has(id)) {
|
||
definitions = definitions.map((d) => (d.id === id ? { ...d, is_active: false } : d));
|
||
const retired = definitions.find((d) => d.id === id);
|
||
return jsonResponse({ definition_id: id, deleted: false, retired: true, definition: retired });
|
||
}
|
||
definitions = definitions.filter((d) => d.id !== id);
|
||
return jsonResponse({ definition_id: id, deleted: true, retired: false, definition: null });
|
||
}
|
||
return jsonResponse({ detail: "unexpected" }, 500);
|
||
});
|
||
return {
|
||
fetchMock,
|
||
calls,
|
||
writes: () => calls.filter((c) => c.method !== "GET" && c.path !== PREVIEW_PATH),
|
||
previews: () => calls.filter((c) => c.path === PREVIEW_PATH),
|
||
setPreview: (handler: PreviewHandler) => {
|
||
preview = handler;
|
||
},
|
||
listFetches: () =>
|
||
calls.filter((c) => c.method === "GET" && c.path === "/api/v1/admin/quest-definitions")
|
||
.length,
|
||
failNextWrite: (response: Response) => {
|
||
nextWrite = response;
|
||
},
|
||
markHistory: (id: number) => {
|
||
withHistory.add(id);
|
||
},
|
||
};
|
||
}
|
||
|
||
let api: ReturnType<typeof fakeApi>;
|
||
|
||
async function renderReady(initial: QuestDefinition[] = [BRUSH, BINS, PIANO]) {
|
||
api = fakeApi(initial);
|
||
vi.stubGlobal("fetch", api.fetchMock);
|
||
render(<DefinitionsTab />);
|
||
await screen.findByText("Brush teeth");
|
||
}
|
||
|
||
function meta(row: HTMLElement): string {
|
||
return (row.querySelector(".defs-row-meta") as HTMLElement).textContent ?? "";
|
||
}
|
||
|
||
function sheet(): HTMLElement {
|
||
return screen.getByRole("dialog");
|
||
}
|
||
|
||
describe("DefinitionsTab", () => {
|
||
beforeEach(() => {
|
||
sessionStorage.clear();
|
||
storeTokens({ access_token: "at-123", expires_in: 600 });
|
||
});
|
||
|
||
afterEach(() => {
|
||
cleanup();
|
||
vi.unstubAllGlobals();
|
||
vi.useRealTimers();
|
||
});
|
||
|
||
it("header counts definitions and active children", async () => {
|
||
await renderReady();
|
||
expect(screen.getByRole("heading", { name: "Tasks" })).toBeTruthy();
|
||
expect(screen.getByText("3 definitions · 3 children")).toBeTruthy();
|
||
const [url, init] = api.fetchMock.mock.calls[0];
|
||
expect(String(url)).toMatch(/\/api\/v1\/admin\/quest-definitions$/);
|
||
expect((init as RequestInit & { headers: Record<string, string> }).headers.Authorization).toBe(
|
||
"Bearer at-123",
|
||
);
|
||
});
|
||
|
||
it("rows show `<assignees> · <recurrence> · <windows>` meta", async () => {
|
||
await renderReady();
|
||
const brush = screen.getByTestId("definition-10");
|
||
expect(within(brush).getByText("Brush teeth")).toBeTruthy();
|
||
expect(meta(brush)).toBe("All three · Daily · Morning, Evening");
|
||
expect(meta(screen.getByTestId("definition-11"))).toBe(
|
||
"Declan, Old · Every 2 weeks on Mon, Thu · Afternoon",
|
||
);
|
||
expect(brush.className).not.toContain("defs-row--inactive");
|
||
});
|
||
|
||
it("an inactive definition is styled inactive with `· inactive`", async () => {
|
||
await renderReady();
|
||
const piano = screen.getByTestId("definition-12");
|
||
expect(meta(piano)).toBe("Maeve · Monthly on day 15 · Afternoon · inactive");
|
||
expect(piano.className).toContain("defs-row--inactive");
|
||
});
|
||
|
||
it("filter chips filter by child", async () => {
|
||
await renderReady();
|
||
const chips = screen.getByRole("group", { name: "Filter by child" });
|
||
expect(
|
||
within(chips)
|
||
.getAllByRole("button")
|
||
.map((b) => b.textContent),
|
||
).toEqual(["All", "Declan", "Maeve", "Rory"]);
|
||
expect(within(chips).getByRole("button", { name: "All" }).className).toContain(
|
||
"defs-chip--active",
|
||
);
|
||
|
||
fireEvent.click(within(chips).getByRole("button", { name: "Maeve" }));
|
||
expect(within(chips).getByRole("button", { name: "Maeve" }).getAttribute("aria-pressed")).toBe(
|
||
"true",
|
||
);
|
||
expect(screen.queryByTestId("definition-10")).toBeTruthy();
|
||
expect(screen.queryByTestId("definition-11")).toBeNull();
|
||
expect(screen.queryByTestId("definition-12")).toBeTruthy();
|
||
|
||
fireEvent.click(within(chips).getByRole("button", { name: "Rory" }));
|
||
expect(screen.queryByTestId("definition-10")).toBeTruthy();
|
||
expect(screen.queryByTestId("definition-12")).toBeNull();
|
||
|
||
fireEvent.click(within(chips).getByRole("button", { name: "All" }));
|
||
expect(screen.getAllByRole("listitem")).toHaveLength(3);
|
||
});
|
||
|
||
it("New opens the sheet and saving POSTs the exact body, then re-fetches", async () => {
|
||
vi.useFakeTimers({ toFake: ["Date"] });
|
||
vi.setSystemTime(new Date(2026, 8, 23, 9, 0)); // Wed 23 Sep 2026, local
|
||
await renderReady();
|
||
expect(api.listFetches()).toBe(1);
|
||
|
||
fireEvent.click(screen.getByRole("button", { name: "New" }));
|
||
const s = sheet();
|
||
expect(within(s).getByRole("heading", { name: "New task" })).toBeTruthy();
|
||
|
||
fireEvent.change(within(s).getByRole("textbox", { name: "Title" }), {
|
||
target: { value: " Feed the cat " },
|
||
});
|
||
fireEvent.click(within(s).getByRole("button", { name: /Assigned children/ }));
|
||
fireEvent.click(within(s).getByRole("checkbox", { name: "Declan" }));
|
||
fireEvent.click(within(s).getByRole("checkbox", { name: "Rory" }));
|
||
expect(within(s).getByRole("button", { name: /Assigned children/ }).textContent).toContain(
|
||
"Declan, Rory",
|
||
);
|
||
|
||
fireEvent.change(within(s).getByRole("combobox", { name: "Repeats" }), {
|
||
target: { value: "weekly" },
|
||
});
|
||
fireEvent.change(within(s).getByRole("spinbutton", { name: "Interval" }), {
|
||
target: { value: "2" },
|
||
});
|
||
// Today (Wednesday) is preselected; add Saturday.
|
||
expect(within(s).getByRole("button", { name: "Wednesday" }).getAttribute("aria-pressed")).toBe(
|
||
"true",
|
||
);
|
||
fireEvent.click(within(s).getByRole("button", { name: "Saturday" }));
|
||
|
||
fireEvent.click(within(s).getByRole("button", { name: "Evening" }));
|
||
fireEvent.click(within(s).getByRole("button", { name: "Morning" }));
|
||
fireEvent.change(within(s).getByLabelText("Morning due time"), {
|
||
target: { value: "07:15" },
|
||
});
|
||
|
||
const toggle = within(s).getByRole("switch", { name: "Skip on away days" });
|
||
expect(toggle.getAttribute("aria-checked")).toBe("true");
|
||
fireEvent.click(toggle);
|
||
expect(toggle.getAttribute("aria-checked")).toBe("false");
|
||
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
|
||
expect(api.writes()).toEqual([
|
||
{
|
||
method: "POST",
|
||
path: "/api/v1/admin/quest-definitions",
|
||
body: {
|
||
title: "Feed the cat",
|
||
icon: null,
|
||
rule: {
|
||
rule_type: "weekly",
|
||
interval: 2,
|
||
weekday_set: [2, 5],
|
||
day_of_month: null,
|
||
nth_weekday: null,
|
||
nth_weekday_weekday: null,
|
||
month: null,
|
||
start_date: "2026-09-23",
|
||
end_date: null,
|
||
},
|
||
assignee_child_ids: [1, 3],
|
||
windows: [
|
||
["morning", "07:15"],
|
||
["evening", null],
|
||
],
|
||
skip_on_away: false,
|
||
},
|
||
},
|
||
]);
|
||
|
||
const created = await screen.findByTestId("definition-99");
|
||
expect(meta(created)).toBe("Declan, Rory · Every 2 weeks on Wed, Sat · Morning, Evening");
|
||
expect(api.listFetches()).toBe(2);
|
||
expect(screen.queryByRole("dialog")).toBeNull();
|
||
expect(screen.getByText("4 definitions · 3 children")).toBeTruthy();
|
||
});
|
||
|
||
it("the weekday picker lists Sunday first and Sunday still stores 6", async () => {
|
||
vi.useFakeTimers({ toFake: ["Date"] });
|
||
vi.setSystemTime(new Date(2026, 8, 23, 9, 0)); // Wed 23 Sep 2026, local
|
||
await renderReady();
|
||
|
||
fireEvent.click(screen.getByRole("button", { name: "New" }));
|
||
const s = sheet();
|
||
fireEvent.change(within(s).getByRole("textbox", { name: "Title" }), {
|
||
target: { value: "Feed the cat" },
|
||
});
|
||
fireEvent.click(within(s).getByRole("button", { name: /Assigned children/ }));
|
||
fireEvent.click(within(s).getByRole("checkbox", { name: "Declan" }));
|
||
fireEvent.change(within(s).getByRole("combobox", { name: "Repeats" }), {
|
||
target: { value: "weekly" },
|
||
});
|
||
|
||
const days = within(s).getByRole("group", { name: "Days" });
|
||
expect(
|
||
within(days)
|
||
.getAllByRole("button")
|
||
.map((b) => b.getAttribute("aria-label")),
|
||
).toEqual(["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]);
|
||
fireEvent.click(within(days).getByRole("button", { name: "Sunday" }));
|
||
fireEvent.click(within(s).getByRole("button", { name: "Evening" }));
|
||
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
const body = api.writes()[0].body as { rule: DefinitionRule };
|
||
expect(body.rule.weekday_set).toEqual([2, 6]);
|
||
expect(meta(await screen.findByTestId("definition-99"))).toContain("on Sun, Wed");
|
||
});
|
||
|
||
it("tapping a row opens the sheet in editing state and saving PATCHes", async () => {
|
||
await renderReady();
|
||
const row = screen.getByTestId("definition-11");
|
||
fireEvent.click(row);
|
||
|
||
// §3.1 editing state on the row.
|
||
expect(row.className).toContain("defs-row--editing");
|
||
expect(meta(row)).toBe("Editing");
|
||
expect(row.getAttribute("aria-expanded")).toBe("true");
|
||
|
||
const s = sheet();
|
||
expect(within(s).getByRole("heading", { name: "Edit task" })).toBeTruthy();
|
||
expect((within(s).getByRole("textbox", { name: "Title" }) as HTMLInputElement).value).toBe(
|
||
"Take out bins",
|
||
);
|
||
expect((within(s).getByRole("combobox", { name: "Repeats" }) as HTMLSelectElement).value).toBe(
|
||
"weekly",
|
||
);
|
||
expect((within(s).getByLabelText("Afternoon due time") as HTMLInputElement).value).toBe(
|
||
"16:00",
|
||
);
|
||
// The inactive child "Old" is shown locked, not offered as a checkbox.
|
||
fireEvent.click(within(s).getByRole("button", { name: /Assigned children/ }));
|
||
expect(within(s).queryByRole("checkbox", { name: "Old" })).toBeNull();
|
||
const locked = within(s).getByTestId("inactive-assignee-4");
|
||
expect(locked.textContent).toContain("Old");
|
||
expect(locked.textContent).toContain("Inactive");
|
||
expect(locked.getAttribute("aria-disabled")).toBe("true");
|
||
fireEvent.click(within(s).getByRole("checkbox", { name: "Maeve" }));
|
||
|
||
fireEvent.change(within(s).getByRole("textbox", { name: "Title" }), {
|
||
target: { value: "Take out the bins" },
|
||
});
|
||
fireEvent.change(within(s).getByRole("combobox", { name: "Repeats" }), {
|
||
target: { value: "monthly" },
|
||
});
|
||
fireEvent.change(within(s).getByRole("spinbutton", { name: "Day of month" }), {
|
||
target: { value: "3" },
|
||
});
|
||
fireEvent.change(within(s).getByRole("spinbutton", { name: "Interval" }), {
|
||
target: { value: "1" },
|
||
});
|
||
fireEvent.change(within(s).getByLabelText("Afternoon due time"), {
|
||
target: { value: "" },
|
||
});
|
||
fireEvent.click(within(s).getByRole("switch", { name: "Skip on away days" }));
|
||
|
||
// Changing the selection would drop "Old": confirm before sending.
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
expect(api.writes()).toHaveLength(0);
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Unassign and save" }));
|
||
});
|
||
|
||
expect(api.writes()).toEqual([
|
||
{
|
||
method: "PATCH",
|
||
path: "/api/v1/admin/quest-definitions/11",
|
||
body: {
|
||
title: "Take out the bins",
|
||
rule: {
|
||
rule_type: "monthly_day",
|
||
interval: 1,
|
||
weekday_set: null,
|
||
day_of_month: 3,
|
||
nth_weekday: null,
|
||
nth_weekday_weekday: null,
|
||
month: null,
|
||
start_date: "2026-01-01",
|
||
end_date: null,
|
||
},
|
||
assignee_child_ids: [1, 2],
|
||
windows: [["afternoon", null]],
|
||
skip_on_away: true,
|
||
},
|
||
},
|
||
]);
|
||
await screen.findByText("Take out the bins");
|
||
expect(api.listFetches()).toBe(2);
|
||
expect(screen.queryByRole("dialog")).toBeNull();
|
||
});
|
||
|
||
it("editing only the title omits assignee_child_ids and keeps an inactive assignee", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByTestId("definition-11"));
|
||
const s = sheet();
|
||
expect(within(s).getByText(/Also assigned \(inactive\): Old\./)).toBeTruthy();
|
||
fireEvent.change(within(s).getByRole("textbox", { name: "Title" }), {
|
||
target: { value: "Bins out" },
|
||
});
|
||
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
|
||
expect(screen.queryByTestId("unassign-confirm")).toBeNull();
|
||
expect(api.writes()).toHaveLength(1);
|
||
const body = api.writes()[0].body as Record<string, unknown>;
|
||
expect(api.writes()[0].method).toBe("PATCH");
|
||
expect(body.title).toBe("Bins out");
|
||
expect(body).not.toHaveProperty("assignee_child_ids");
|
||
|
||
await screen.findByText("Bins out");
|
||
expect(meta(screen.getByTestId("definition-11"))).toBe(
|
||
"Declan, Old · Every 2 weeks on Mon, Thu · Afternoon",
|
||
);
|
||
});
|
||
|
||
it("changing the active selection with an inactive assignee asks first", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByTestId("definition-11"));
|
||
const s = sheet();
|
||
fireEvent.click(within(s).getByRole("button", { name: /Assigned children/ }));
|
||
fireEvent.click(within(s).getByRole("checkbox", { name: "Rory" }));
|
||
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
const confirm = within(s).getByTestId("unassign-confirm");
|
||
expect(confirm.textContent).toContain("Saving will unassign Old.");
|
||
expect(document.activeElement).toBe(confirm);
|
||
expect(api.writes()).toHaveLength(0);
|
||
|
||
// Going back sends nothing and restores the normal footer.
|
||
fireEvent.click(within(confirm).getByRole("button", { name: "Go back" }));
|
||
expect(within(s).queryByTestId("unassign-confirm")).toBeNull();
|
||
expect(api.writes()).toHaveLength(0);
|
||
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Unassign and save" }));
|
||
});
|
||
expect(api.writes()).toHaveLength(1);
|
||
expect((api.writes()[0].body as { assignee_child_ids: number[] }).assignee_child_ids).toEqual([
|
||
1, 3,
|
||
]);
|
||
});
|
||
|
||
it("reverting the selection to the original omits assignee_child_ids without asking", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByTestId("definition-11"));
|
||
const s = sheet();
|
||
fireEvent.click(within(s).getByRole("button", { name: /Assigned children/ }));
|
||
fireEvent.click(within(s).getByRole("checkbox", { name: "Rory" }));
|
||
fireEvent.click(within(s).getByRole("checkbox", { name: "Rory" }));
|
||
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
expect(screen.queryByTestId("unassign-confirm")).toBeNull();
|
||
expect(api.writes()).toHaveLength(1);
|
||
expect(api.writes()[0].body).not.toHaveProperty("assignee_child_ids");
|
||
});
|
||
|
||
it("focus moves into the sheet on open and returns to the row on Escape", async () => {
|
||
await renderReady();
|
||
const row = screen.getByTestId("definition-10");
|
||
row.focus();
|
||
fireEvent.click(row);
|
||
const s = sheet();
|
||
expect(document.activeElement).toBe(within(s).getByRole("heading", { name: "Edit task" }));
|
||
|
||
fireEvent.keyDown(s, { key: "Escape" });
|
||
expect(screen.queryByRole("dialog")).toBeNull();
|
||
expect(document.activeElement).toBe(row);
|
||
expect(api.writes()).toHaveLength(0);
|
||
});
|
||
|
||
it("Tab and Shift+Tab wrap within the sheet", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByTestId("definition-10"));
|
||
const s = sheet();
|
||
const title = within(s).getByRole("textbox", { name: "Title" });
|
||
// The edit sheet's last focusable control is its Delete button.
|
||
const last = within(s).getByRole("button", { name: "Delete task" });
|
||
|
||
last.focus();
|
||
fireEvent.keyDown(s, { key: "Tab" });
|
||
expect(document.activeElement).toBe(title);
|
||
|
||
fireEvent.keyDown(s, { key: "Tab", shiftKey: true });
|
||
expect(document.activeElement).toBe(last);
|
||
});
|
||
|
||
it("Escape does not close the sheet while saving", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByTestId("definition-10"));
|
||
let release: (response: Response) => void = () => {};
|
||
api.fetchMock.mockImplementationOnce(
|
||
() => new Promise<Response>((resolve) => (release = resolve)),
|
||
);
|
||
const s = sheet();
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
fireEvent.keyDown(s, { key: "Escape" });
|
||
expect(screen.getByRole("dialog")).toBeTruthy();
|
||
|
||
await act(async () => {
|
||
release(jsonResponse(BRUSH));
|
||
});
|
||
await vi.waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
|
||
});
|
||
|
||
it("the skip-on-away toggle reflects and persists a false value", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByTestId("definition-11"));
|
||
const s = sheet();
|
||
const toggle = within(s).getByRole("switch", { name: "Skip on away days" });
|
||
expect(toggle.getAttribute("aria-checked")).toBe("false");
|
||
expect(toggle.className).not.toContain("defs-switch--on");
|
||
expect(within(s).getByText("No instance when the child is absent")).toBeTruthy();
|
||
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
expect(api.writes()).toHaveLength(1);
|
||
expect((api.writes()[0].body as { skip_on_away: boolean }).skip_on_away).toBe(false);
|
||
});
|
||
|
||
it("a 422 from save shows the API's detail and keeps the sheet open", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByTestId("definition-10"));
|
||
api.failNextWrite(jsonResponse({ detail: "interval must be >= 1, got 0" }, 422));
|
||
|
||
await act(async () => {
|
||
fireEvent.click(within(sheet()).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
|
||
expect(screen.getByTestId("sheet-error").textContent).toBe("interval must be >= 1, got 0");
|
||
expect(screen.getByRole("dialog")).toBeTruthy();
|
||
expect(api.listFetches()).toBe(1);
|
||
// Save is usable again after the failure.
|
||
expect(
|
||
(within(sheet()).getByRole("button", { name: "Save changes" }) as HTMLButtonElement).disabled,
|
||
).toBe(false);
|
||
});
|
||
|
||
it("a 403 from save shows the admin-group refusal", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByTestId("definition-10"));
|
||
api.failNextWrite(jsonResponse({ detail: "Forbidden" }, 403));
|
||
|
||
await act(async () => {
|
||
fireEvent.click(within(sheet()).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
expect(screen.getByTestId("sheet-error").textContent).toBe(
|
||
"Your account is not in the nestquest-admins group.",
|
||
);
|
||
});
|
||
|
||
it("guards against a double submit", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByTestId("definition-10"));
|
||
const save = within(sheet()).getByRole("button", { name: "Save changes" });
|
||
await act(async () => {
|
||
fireEvent.click(save);
|
||
fireEvent.click(save);
|
||
});
|
||
expect(api.writes()).toHaveLength(1);
|
||
});
|
||
|
||
it("an incomplete new task is not submitted", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByRole("button", { name: "New" }));
|
||
fireEvent.click(within(sheet()).getByRole("button", { name: "Save changes" }));
|
||
expect(screen.getByTestId("sheet-error").textContent).toBe("Give the task a title.");
|
||
expect(api.writes()).toHaveLength(0);
|
||
});
|
||
|
||
it("Cancel closes the sheet without writing", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByTestId("definition-10"));
|
||
fireEvent.click(within(sheet()).getByRole("button", { name: "Cancel" }));
|
||
expect(screen.queryByRole("dialog")).toBeNull();
|
||
expect(meta(screen.getByTestId("definition-10"))).toBe("All three · Daily · Morning, Evening");
|
||
expect(api.writes()).toHaveLength(0);
|
||
});
|
||
|
||
it("a 403 on load renders the refusal", async () => {
|
||
vi.stubGlobal(
|
||
"fetch",
|
||
vi.fn(async () => jsonResponse({ detail: "Forbidden" }, 403)),
|
||
);
|
||
render(<DefinitionsTab />);
|
||
expect((await screen.findByTestId("definitions-error")).textContent).toContain(
|
||
"Your account is not in the nestquest-admins group.",
|
||
);
|
||
});
|
||
|
||
it("the Delete control is only offered for an existing task", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByRole("button", { name: "New" }));
|
||
expect(within(sheet()).queryByRole("button", { name: "Delete task" })).toBeNull();
|
||
fireEvent.click(within(sheet()).getByRole("button", { name: "Cancel" }));
|
||
fireEvent.click(screen.getByTestId("definition-10"));
|
||
expect(within(sheet()).getByRole("button", { name: "Delete task" })).toBeTruthy();
|
||
});
|
||
|
||
it("Delete asks first, explaining delete-vs-retire; Go back writes nothing", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByTestId("definition-10"));
|
||
fireEvent.click(within(sheet()).getByRole("button", { name: "Delete task" }));
|
||
const confirm = screen.getByTestId("delete-confirm");
|
||
expect(confirm.textContent).toContain("If it has no completion history it is deleted");
|
||
expect(confirm.textContent).toContain("otherwise it is retired");
|
||
expect(api.writes()).toHaveLength(0);
|
||
fireEvent.click(within(confirm).getByRole("button", { name: "Go back" }));
|
||
expect(screen.queryByTestId("delete-confirm")).toBeNull();
|
||
expect(api.writes()).toHaveLength(0);
|
||
});
|
||
|
||
it("confirming Delete on a task without history removes its row", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByTestId("definition-10"));
|
||
fireEvent.click(within(sheet()).getByRole("button", { name: "Delete task" }));
|
||
fireEvent.click(
|
||
within(screen.getByTestId("delete-confirm")).getByRole("button", { name: "Delete task" }),
|
||
);
|
||
await waitFor(() => expect(screen.queryByTestId("definition-10")).toBeNull());
|
||
expect(screen.queryByRole("dialog")).toBeNull();
|
||
expect(api.writes()).toEqual([
|
||
{ method: "DELETE", path: "/api/v1/admin/quest-definitions/10", body: null },
|
||
]);
|
||
expect(screen.getByTestId("definition-11")).toBeTruthy();
|
||
});
|
||
|
||
it("confirming Delete on a task with history shows it retired (inactive)", async () => {
|
||
await renderReady();
|
||
api.markHistory(10);
|
||
fireEvent.click(screen.getByTestId("definition-10"));
|
||
fireEvent.click(within(sheet()).getByRole("button", { name: "Delete task" }));
|
||
fireEvent.click(
|
||
within(screen.getByTestId("delete-confirm")).getByRole("button", { name: "Delete task" }),
|
||
);
|
||
await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
|
||
const row = screen.getByTestId("definition-10");
|
||
expect(row.className).toContain("defs-row--inactive");
|
||
expect(meta(row)).toContain("· inactive");
|
||
expect(api.writes().map((c) => c.method)).toEqual(["DELETE"]);
|
||
});
|
||
|
||
it("a failed Delete shows the API's detail and keeps the sheet open", async () => {
|
||
await renderReady();
|
||
api.failNextWrite(jsonResponse({ detail: "Quest definition not found" }, 404));
|
||
fireEvent.click(screen.getByTestId("definition-10"));
|
||
fireEvent.click(within(sheet()).getByRole("button", { name: "Delete task" }));
|
||
fireEvent.click(
|
||
within(screen.getByTestId("delete-confirm")).getByRole("button", { name: "Delete task" }),
|
||
);
|
||
expect((await screen.findByTestId("sheet-error")).textContent).toBe(
|
||
"Quest definition not found",
|
||
);
|
||
expect(screen.getByRole("dialog")).toBeTruthy();
|
||
expect(screen.getByTestId("definition-10")).toBeTruthy();
|
||
});
|
||
|
||
it("scroll column carries the 92px bottom padding", async () => {
|
||
await renderReady();
|
||
expect(screen.getByTestId("definitions-scroll").style.paddingBottom).toBe("92px");
|
||
});
|
||
});
|
||
|
||
/* ── Occurrence preview ─────────────────────────────────────────────── */
|
||
|
||
/** Past the sheet's 300 ms preview debounce. */
|
||
function settleDebounce(): Promise<void> {
|
||
return act(() => new Promise<void>((resolve) => setTimeout(resolve, 400)));
|
||
}
|
||
|
||
function previewText(): string | null {
|
||
return screen.queryByTestId("occurrence-preview")?.textContent ?? null;
|
||
}
|
||
|
||
/** BINS' rule (every 2 weeks on Mon, Thu) from 2026-10-05. */
|
||
const BINS_DATES = ["2026-10-05", "2026-10-08", "2026-10-19", "2026-10-22", "2026-11-02"];
|
||
/** The same rule on Tuesdays only. */
|
||
const TUESDAY_DATES = ["2026-10-06", "2026-10-20", "2026-11-03", "2026-11-17", "2026-12-01"];
|
||
|
||
function deferred() {
|
||
let resolve!: (response: Response) => void;
|
||
const promise = new Promise<Response>((r) => {
|
||
resolve = r;
|
||
});
|
||
return { promise, resolve };
|
||
}
|
||
|
||
describe("DefinitionsTab occurrence preview", () => {
|
||
beforeEach(() => {
|
||
sessionStorage.clear();
|
||
storeTokens({ access_token: "at-123", expires_in: 600 });
|
||
});
|
||
|
||
afterEach(() => {
|
||
cleanup();
|
||
vi.unstubAllGlobals();
|
||
vi.useRealTimers();
|
||
});
|
||
|
||
it("previews a weekly rule's next dates in plain language from the API", async () => {
|
||
await renderReady();
|
||
api.setPreview(async () => jsonResponse({ dates: BINS_DATES }));
|
||
fireEvent.click(screen.getByTestId("definition-11"));
|
||
|
||
await waitFor(() =>
|
||
expect(previewText()).toBe(
|
||
"Next: Mon 5 Oct · Thu 8 Oct · Mon 19 Oct · Thu 22 Oct · Mon 2 Nov · …",
|
||
),
|
||
);
|
||
expect(api.previews()).toEqual([
|
||
{
|
||
method: "POST",
|
||
path: "/api/v1/admin/quest-definitions/occurrences-preview",
|
||
body: { rule: BINS.rule, count: 5 },
|
||
},
|
||
]);
|
||
});
|
||
|
||
it("re-requests once per rule change, debounced, and not for non-rule edits", async () => {
|
||
await renderReady();
|
||
api.setPreview(async ({ rule }) =>
|
||
jsonResponse({ dates: rule.weekday_set?.includes(0) ? BINS_DATES : TUESDAY_DATES }),
|
||
);
|
||
fireEvent.click(screen.getByTestId("definition-11"));
|
||
const s = sheet();
|
||
await waitFor(() => expect(previewText()).toContain("Mon 5 Oct"));
|
||
|
||
// A title edit leaves the rule alone: no new request.
|
||
fireEvent.change(within(s).getByRole("textbox", { name: "Title" }), {
|
||
target: { value: "Bins" },
|
||
});
|
||
// Three rule edits in quick succession collapse into one request.
|
||
const days = within(s).getByRole("group", { name: "Days" });
|
||
fireEvent.click(within(days).getByRole("button", { name: "Monday" }));
|
||
fireEvent.click(within(days).getByRole("button", { name: "Thursday" }));
|
||
fireEvent.click(within(days).getByRole("button", { name: "Tuesday" }));
|
||
|
||
await waitFor(() =>
|
||
expect(previewText()).toBe(
|
||
"Next: Tue 6 Oct · Tue 20 Oct · Tue 3 Nov · Tue 17 Nov · Tue 1 Dec · …",
|
||
),
|
||
);
|
||
await settleDebounce();
|
||
expect(api.previews()).toHaveLength(2);
|
||
expect(api.previews()[1].body).toEqual({
|
||
rule: { ...BINS.rule, weekday_set: [1] },
|
||
count: 5,
|
||
});
|
||
|
||
// An interval change is a rule change too.
|
||
fireEvent.change(within(s).getByRole("spinbutton", { name: "Interval" }), {
|
||
target: { value: "1" },
|
||
});
|
||
await waitFor(() => expect(api.previews()).toHaveLength(3));
|
||
expect((api.previews()[2].body as { rule: DefinitionRule }).rule.interval).toBe(1);
|
||
});
|
||
|
||
it("window and assignee edits never request, and a rule edit waits out the debounce", async () => {
|
||
await renderReady();
|
||
api.setPreview(async () => jsonResponse({ dates: BINS_DATES }));
|
||
fireEvent.click(screen.getByTestId("definition-11"));
|
||
const s = sheet();
|
||
await waitFor(() => expect(previewText()).toContain("Mon 5 Oct"));
|
||
expect(api.previews()).toHaveLength(1);
|
||
|
||
vi.useFakeTimers({ toFake: ["setTimeout", "clearTimeout"] });
|
||
// Windows and assignees are not part of the rule.
|
||
fireEvent.click(within(s).getByRole("button", { name: "Morning" }));
|
||
fireEvent.click(within(s).getByRole("button", { name: /Assigned children/ }));
|
||
fireEvent.click(within(s).getByRole("checkbox", { name: "Maeve" }));
|
||
await act(async () => {
|
||
vi.advanceTimersByTime(1000);
|
||
});
|
||
expect(api.previews()).toHaveLength(1);
|
||
expect(previewText()).toContain("Mon 5 Oct");
|
||
|
||
// A rule edit is not requested until the 300 ms debounce elapses.
|
||
const days = within(s).getByRole("group", { name: "Days" });
|
||
fireEvent.click(within(days).getByRole("button", { name: "Tuesday" }));
|
||
await act(async () => {
|
||
vi.advanceTimersByTime(299);
|
||
});
|
||
expect(api.previews()).toHaveLength(1);
|
||
await act(async () => {
|
||
vi.advanceTimersByTime(1);
|
||
});
|
||
expect(api.previews()).toHaveLength(2);
|
||
expect((api.previews()[1].body as { rule: DefinitionRule }).rule.weekday_set).toEqual([
|
||
0, 1, 3,
|
||
]);
|
||
});
|
||
|
||
it("a rule edit hides the previous rule's dates until its own response arrives", async () => {
|
||
await renderReady();
|
||
const pending: ReturnType<typeof deferred>[] = [];
|
||
api.setPreview(() => {
|
||
const next = deferred();
|
||
pending.push(next);
|
||
return next.promise;
|
||
});
|
||
fireEvent.click(screen.getByTestId("definition-11"));
|
||
await waitFor(() => expect(pending).toHaveLength(1));
|
||
await act(async () => {
|
||
pending[0].resolve(jsonResponse({ dates: BINS_DATES }));
|
||
});
|
||
await waitFor(() => expect(previewText()).toContain("Mon 5 Oct"));
|
||
|
||
const days = within(sheet()).getByRole("group", { name: "Days" });
|
||
fireEvent.click(within(days).getByRole("button", { name: "Monday" }));
|
||
// Within the debounce: the old dates are already gone.
|
||
expect(previewText()).toBeNull();
|
||
// Request in flight: still nothing shown for the new rule.
|
||
await waitFor(() => expect(pending).toHaveLength(2));
|
||
expect(previewText()).toBeNull();
|
||
|
||
await act(async () => {
|
||
pending[1].resolve(jsonResponse({ dates: ["2026-10-08", "2026-10-22"] }));
|
||
});
|
||
await waitFor(() => expect(previewText()).toBe("Next: Thu 8 Oct · Thu 22 Oct"));
|
||
});
|
||
|
||
it("a rule edit hides the previous rule's error until its own response arrives", async () => {
|
||
await renderReady();
|
||
const pending: ReturnType<typeof deferred>[] = [];
|
||
api.setPreview(() => {
|
||
const next = deferred();
|
||
pending.push(next);
|
||
return next.promise;
|
||
});
|
||
fireEvent.click(screen.getByTestId("definition-11"));
|
||
await waitFor(() => expect(pending).toHaveLength(1));
|
||
await act(async () => {
|
||
pending[0].resolve(jsonResponse({ detail: "rule rejected" }, 422));
|
||
});
|
||
await waitFor(() => expect(previewText()).toBe("Upcoming dates unavailable: rule rejected"));
|
||
|
||
const days = within(sheet()).getByRole("group", { name: "Days" });
|
||
fireEvent.click(within(days).getByRole("button", { name: "Monday" }));
|
||
expect(previewText()).toBeNull();
|
||
await waitFor(() => expect(pending).toHaveLength(2));
|
||
expect(previewText()).toBeNull();
|
||
|
||
await act(async () => {
|
||
pending[1].resolve(jsonResponse({ dates: ["2026-10-08"] }));
|
||
});
|
||
await waitFor(() => expect(previewText()).toBe("Next: Thu 8 Oct"));
|
||
});
|
||
|
||
it("a stale response resolving after a newer one does not overwrite it", async () => {
|
||
await renderReady();
|
||
const pending: ReturnType<typeof deferred>[] = [];
|
||
api.setPreview(() => {
|
||
const next = deferred();
|
||
pending.push(next);
|
||
return next.promise;
|
||
});
|
||
fireEvent.click(screen.getByTestId("definition-11"));
|
||
await waitFor(() => expect(pending).toHaveLength(1));
|
||
|
||
const days = within(sheet()).getByRole("group", { name: "Days" });
|
||
fireEvent.click(within(days).getByRole("button", { name: "Monday" }));
|
||
fireEvent.click(within(days).getByRole("button", { name: "Thursday" }));
|
||
fireEvent.click(within(days).getByRole("button", { name: "Tuesday" }));
|
||
await waitFor(() => expect(pending).toHaveLength(2));
|
||
|
||
await act(async () => {
|
||
pending[1].resolve(jsonResponse({ dates: TUESDAY_DATES }));
|
||
});
|
||
await waitFor(() => expect(previewText()).toContain("Tue 6 Oct"));
|
||
await act(async () => {
|
||
pending[0].resolve(jsonResponse({ dates: BINS_DATES }));
|
||
});
|
||
await settleDebounce();
|
||
expect(previewText()).toBe(
|
||
"Next: Tue 6 Oct · Tue 20 Oct · Tue 3 Nov · Tue 17 Nov · Tue 1 Dec · …",
|
||
);
|
||
});
|
||
|
||
it("a failed preview shows a non-blocking message and the sheet still saves", async () => {
|
||
await renderReady();
|
||
api.setPreview(async () => jsonResponse({ detail: "rule rejected" }, 422));
|
||
fireEvent.click(screen.getByTestId("definition-10"));
|
||
|
||
await waitFor(() => expect(previewText()).toBe("Upcoming dates unavailable: rule rejected"));
|
||
expect(screen.queryByTestId("sheet-error")).toBeNull();
|
||
|
||
await act(async () => {
|
||
fireEvent.click(within(sheet()).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
expect(api.writes()).toHaveLength(1);
|
||
expect(api.writes()[0].method).toBe("PATCH");
|
||
await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
|
||
});
|
||
|
||
it("an incomplete draft does not call the preview endpoint", async () => {
|
||
await renderReady();
|
||
api.setPreview(async () => jsonResponse({ dates: TUESDAY_DATES }));
|
||
fireEvent.click(screen.getByRole("button", { name: "New" }));
|
||
const s = sheet();
|
||
fireEvent.change(within(s).getByRole("combobox", { name: "Repeats" }), {
|
||
target: { value: "weekly" },
|
||
});
|
||
// Clear the default weekday: a weekly rule with no days is incomplete.
|
||
const days = within(s).getByRole("group", { name: "Days" });
|
||
for (const day of within(days).getAllByRole("button")) {
|
||
if (day.getAttribute("aria-pressed") === "true") fireEvent.click(day);
|
||
}
|
||
await settleDebounce();
|
||
expect(api.previews()).toHaveLength(0);
|
||
expect(previewText()).toBeNull();
|
||
|
||
// An unparseable interval is incomplete too.
|
||
fireEvent.click(within(days).getByRole("button", { name: "Tuesday" }));
|
||
fireEvent.change(within(s).getByRole("spinbutton", { name: "Interval" }), {
|
||
target: { value: "" },
|
||
});
|
||
await settleDebounce();
|
||
expect(api.previews()).toHaveLength(0);
|
||
|
||
fireEvent.change(within(s).getByRole("spinbutton", { name: "Interval" }), {
|
||
target: { value: "2" },
|
||
});
|
||
await waitFor(() => expect(previewText()).toContain("Tue 6 Oct"));
|
||
expect(api.previews()).toHaveLength(1);
|
||
});
|
||
});
|
||
|
||
describe("DefinitionsTab icon picker", () => {
|
||
beforeEach(() => {
|
||
sessionStorage.clear();
|
||
storeTokens({ access_token: "at-123", expires_in: 600 });
|
||
});
|
||
|
||
afterEach(() => {
|
||
cleanup();
|
||
vi.unstubAllGlobals();
|
||
vi.useRealTimers();
|
||
});
|
||
|
||
/** The Lucide name a row renders, or null for the generic fallback glyph. */
|
||
function rowIcon(row: HTMLElement): string | null {
|
||
const svg = row.querySelector(".defs-row-glyph svg");
|
||
expect(svg).not.toBeNull();
|
||
return svg!.getAttribute("data-icon");
|
||
}
|
||
|
||
function iconRadio(s: HTMLElement, label: string): HTMLElement {
|
||
return within(within(s).getByRole("radiogroup", { name: "Icon" })).getByRole("radio", {
|
||
name: label,
|
||
});
|
||
}
|
||
|
||
it("ships the curated subset, and every entry renders an SVG", () => {
|
||
expect(DEFINITION_ICONS.map((entry) => entry.name)).toEqual([
|
||
"bed",
|
||
"bath",
|
||
"shower-head",
|
||
"toilet",
|
||
"brush",
|
||
"smile",
|
||
"shirt",
|
||
"washing-machine",
|
||
"utensils",
|
||
"cooking-pot",
|
||
"apple",
|
||
"brush-cleaning",
|
||
"spray-can",
|
||
"trash-2",
|
||
"recycle",
|
||
"sofa",
|
||
"house",
|
||
"backpack",
|
||
"book-open",
|
||
"pencil",
|
||
"music",
|
||
"dog",
|
||
"cat",
|
||
"fish",
|
||
"sprout",
|
||
"droplets",
|
||
"bike",
|
||
"volleyball",
|
||
"gamepad-2",
|
||
"star",
|
||
"heart",
|
||
"sun",
|
||
"moon",
|
||
"clock",
|
||
"calendar",
|
||
"list-checks",
|
||
]);
|
||
expect(DEFINITION_ICONS.length).toBeGreaterThanOrEqual(24);
|
||
expect(DEFINITION_ICONS.length).toBeLessThanOrEqual(40);
|
||
for (const { name } of DEFINITION_ICONS) {
|
||
const { container, unmount } = render(<DefinitionIcon name={name} />);
|
||
const svg = container.querySelector("svg");
|
||
expect(svg, name).not.toBeNull();
|
||
expect(svg!.getAttribute("data-icon")).toBe(name);
|
||
expect(svg!.querySelectorAll("path, circle, rect, line, polyline, ellipse").length).toBeGreaterThan(0);
|
||
unmount();
|
||
}
|
||
});
|
||
|
||
it("a chosen icon is POSTed for a new task and renders on its row", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByRole("button", { name: "New" }));
|
||
const s = sheet();
|
||
expect(iconRadio(s, "No icon").getAttribute("aria-checked")).toBe("true");
|
||
|
||
fireEvent.change(within(s).getByRole("textbox", { name: "Title" }), {
|
||
target: { value: "Make the bed" },
|
||
});
|
||
fireEvent.click(within(s).getByRole("button", { name: /Assigned children/ }));
|
||
fireEvent.click(within(s).getByRole("checkbox", { name: "Declan" }));
|
||
fireEvent.click(within(s).getByRole("button", { name: "Morning" }));
|
||
fireEvent.click(iconRadio(s, "Bed"));
|
||
expect(iconRadio(s, "Bed").getAttribute("aria-checked")).toBe("true");
|
||
expect(iconRadio(s, "Bed").className).toContain("defs-icon--on");
|
||
expect(iconRadio(s, "No icon").getAttribute("aria-checked")).toBe("false");
|
||
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
|
||
expect(api.writes()).toHaveLength(1);
|
||
expect(api.writes()[0].method).toBe("POST");
|
||
expect((api.writes()[0].body as { icon: string }).icon).toBe("lucide:bed");
|
||
expect(rowIcon(await screen.findByTestId("definition-99"))).toBe("bed");
|
||
});
|
||
|
||
it("a chosen icon is PATCHed for an existing task without breaking the assignee omit", async () => {
|
||
await renderReady();
|
||
expect(rowIcon(screen.getByTestId("definition-11"))).toBeNull();
|
||
fireEvent.click(screen.getByTestId("definition-11"));
|
||
const s = sheet();
|
||
expect(iconRadio(s, "No icon").getAttribute("aria-checked")).toBe("true");
|
||
fireEvent.click(iconRadio(s, "Bins"));
|
||
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
|
||
expect(screen.queryByTestId("unassign-confirm")).toBeNull();
|
||
expect(api.writes()).toHaveLength(1);
|
||
const { method, path, body } = api.writes()[0];
|
||
expect(method).toBe("PATCH");
|
||
expect(path).toBe("/api/v1/admin/quest-definitions/11");
|
||
expect((body as { icon: string }).icon).toBe("lucide:trash-2");
|
||
// Inactive "Old" stays assigned: the unchanged selection is still omitted.
|
||
expect(body).not.toHaveProperty("assignee_child_ids");
|
||
await waitFor(() => expect(rowIcon(screen.getByTestId("definition-11"))).toBe("trash-2"));
|
||
});
|
||
|
||
it("an unchanged icon is omitted on edit and shows as selected", async () => {
|
||
await renderReady();
|
||
expect(rowIcon(screen.getByTestId("definition-10"))).toBe("smile");
|
||
fireEvent.click(screen.getByTestId("definition-10"));
|
||
const s = sheet();
|
||
expect(iconRadio(s, "Smile").getAttribute("aria-checked")).toBe("true");
|
||
fireEvent.change(within(s).getByRole("textbox", { name: "Title" }), {
|
||
target: { value: "Brush teeth well" },
|
||
});
|
||
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
|
||
expect(api.writes()[0].body).not.toHaveProperty("icon");
|
||
});
|
||
|
||
it("an unknown legacy icon falls back to the generic glyph and is kept on save", async () => {
|
||
const legacy: QuestDefinition = { ...BRUSH, id: 20, icon: "rocket-ship-9000" };
|
||
await renderReady([legacy]);
|
||
const row = screen.getByTestId("definition-20");
|
||
expect(rowIcon(row)).toBeNull();
|
||
|
||
fireEvent.click(row);
|
||
const s = sheet();
|
||
const group = within(s).getByRole("radiogroup", { name: "Icon" });
|
||
for (const radio of within(group).getAllByRole("radio")) {
|
||
expect(radio.getAttribute("aria-checked")).toBe("false");
|
||
}
|
||
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
|
||
expect(api.writes()[0].body).not.toHaveProperty("icon");
|
||
await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
|
||
expect(rowIcon(screen.getByTestId("definition-20"))).toBeNull();
|
||
});
|
||
});
|
||
|
||
describe("DefinitionsTab namespaced icons", () => {
|
||
beforeEach(() => {
|
||
sessionStorage.clear();
|
||
storeTokens({ access_token: "at-123", expires_in: 600 });
|
||
});
|
||
|
||
afterEach(() => {
|
||
cleanup();
|
||
vi.unstubAllGlobals();
|
||
vi.useRealTimers();
|
||
});
|
||
|
||
function rowIcon(row: HTMLElement): string | null {
|
||
const svg = row.querySelector(".defs-row-glyph svg");
|
||
expect(svg).not.toBeNull();
|
||
return svg!.getAttribute("data-icon");
|
||
}
|
||
|
||
function iconRadio(s: HTMLElement, label: string): HTMLElement {
|
||
return within(within(s).getByRole("radiogroup", { name: "Icon" })).getByRole("radio", {
|
||
name: label,
|
||
});
|
||
}
|
||
|
||
it("normalizes lucide-namespaced and legacy bare values to one Lucide name", () => {
|
||
expect(normalizeDefinitionIconName("lucide:dog")).toBe("dog");
|
||
expect(normalizeDefinitionIconName("dog")).toBe("dog");
|
||
expect(normalizeDefinitionIconName("fa:dog")).toBeNull();
|
||
expect(normalizeDefinitionIconName("emoji:🐶")).toBeNull();
|
||
expect(normalizeDefinitionIconName("mystery:dog")).toBeNull();
|
||
expect(normalizeDefinitionIconName(null)).toBeNull();
|
||
});
|
||
|
||
for (const icon of ["lucide:dog", "dog"]) {
|
||
it(`renders and selects the Dog glyph for ${icon}`, async () => {
|
||
await renderReady([{ ...BRUSH, id: 30, icon }]);
|
||
const row = screen.getByTestId("definition-30");
|
||
expect(rowIcon(row)).toBe("dog");
|
||
|
||
fireEvent.click(row);
|
||
const s = sheet();
|
||
expect(iconRadio(s, "Dog").getAttribute("aria-checked")).toBe("true");
|
||
expect(iconRadio(s, "Dog").className).toContain("defs-icon--on");
|
||
expect(iconRadio(s, "No icon").getAttribute("aria-checked")).toBe("false");
|
||
});
|
||
}
|
||
|
||
for (const icon of ["mystery:dog", "lucide:not-an-icon", "fa:not-an-icon", "emoji:a b"]) {
|
||
it(`renders the fallback tile and selects nothing for ${icon}`, async () => {
|
||
await renderReady([{ ...BRUSH, id: 31, icon }]);
|
||
const row = screen.getByTestId("definition-31");
|
||
expect(rowIcon(row)).toBeNull();
|
||
|
||
fireEvent.click(row);
|
||
const s = sheet();
|
||
for (const name of ["Icon", "Font Awesome"]) {
|
||
const group = within(s).getByRole("radiogroup", { name });
|
||
for (const radio of within(group).getAllByRole("radio")) {
|
||
expect(radio.getAttribute("aria-checked")).toBe("false");
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
it("tapping a Lucide choice on a namespaced task PATCHes lucide:<name>, and No icon clears it", async () => {
|
||
await renderReady([{ ...BRUSH, id: 32, icon: "lucide:dog" }]);
|
||
fireEvent.click(screen.getByTestId("definition-32"));
|
||
let s = sheet();
|
||
fireEvent.click(iconRadio(s, "Cat"));
|
||
expect(iconRadio(s, "Cat").getAttribute("aria-checked")).toBe("true");
|
||
expect(iconRadio(s, "Dog").getAttribute("aria-checked")).toBe("false");
|
||
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
expect((api.writes()[0].body as { icon: string }).icon).toBe("lucide:cat");
|
||
await waitFor(() => expect(rowIcon(screen.getByTestId("definition-32"))).toBe("cat"));
|
||
|
||
fireEvent.click(screen.getByTestId("definition-32"));
|
||
s = sheet();
|
||
expect(iconRadio(s, "Cat").getAttribute("aria-checked")).toBe("true");
|
||
fireEvent.click(iconRadio(s, "No icon"));
|
||
expect(iconRadio(s, "No icon").getAttribute("aria-checked")).toBe("true");
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
expect((api.writes()[1].body as { icon: string | null }).icon).toBeNull();
|
||
});
|
||
});
|
||
|
||
describe("DefinitionsTab Font Awesome and emoji icons", () => {
|
||
beforeEach(() => {
|
||
sessionStorage.clear();
|
||
storeTokens({ access_token: "at-123", expires_in: 600 });
|
||
});
|
||
|
||
afterEach(() => {
|
||
cleanup();
|
||
vi.unstubAllGlobals();
|
||
vi.useRealTimers();
|
||
});
|
||
|
||
/** What a row draws: `svg:<data-icon>`, `emoji:<text>`, or `fallback`. */
|
||
function rowGlyph(row: HTMLElement): string {
|
||
const glyph = row.querySelector(".defs-row-glyph");
|
||
const emoji = glyph!.querySelector("[data-emoji]");
|
||
if (emoji) return `emoji:${emoji.textContent}`;
|
||
const svg = glyph!.querySelector("svg");
|
||
expect(svg).not.toBeNull();
|
||
const name = svg!.getAttribute("data-icon");
|
||
if (name === null) return "fallback";
|
||
return `${svg!.getAttribute("fill") === "none" ? "lucide" : "fa"}:${name}`;
|
||
}
|
||
|
||
function radio(s: HTMLElement, group: "Icon" | "Font Awesome", label: string): HTMLElement {
|
||
return within(within(s).getByRole("radiogroup", { name: group })).getByRole("radio", {
|
||
name: label,
|
||
});
|
||
}
|
||
|
||
function emojiInput(s: HTMLElement): HTMLInputElement {
|
||
return within(s).getByRole("textbox", { name: "Emoji" }) as HTMLInputElement;
|
||
}
|
||
|
||
async function save(s: HTMLElement) {
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
}
|
||
|
||
function fillNewTask(s: HTMLElement) {
|
||
fireEvent.change(within(s).getByRole("textbox", { name: "Title" }), {
|
||
target: { value: "Walk the dog" },
|
||
});
|
||
fireEvent.click(within(s).getByRole("button", { name: /Assigned children/ }));
|
||
fireEvent.click(within(s).getByRole("checkbox", { name: "Declan" }));
|
||
fireEvent.click(within(s).getByRole("button", { name: "Morning" }));
|
||
}
|
||
|
||
it("ships the curated Font Awesome quick picks, each drawn as a filled glyph", () => {
|
||
expect(FA_DEFINITION_ICONS.length).toBeGreaterThan(0);
|
||
for (const entry of FA_DEFINITION_ICONS) {
|
||
expect(entry.kind).toBe("fa");
|
||
expect(findDefinitionIcon(`fa:${entry.name}`)).toBe(entry);
|
||
const { container, unmount } = render(<DefinitionIcon name={`fa:${entry.name}`} />);
|
||
const svg = container.querySelector("svg");
|
||
expect(svg, entry.name).not.toBeNull();
|
||
expect(svg!.getAttribute("data-icon")).toBe(entry.name);
|
||
expect(svg!.getAttribute("fill")).toBe("currentColor");
|
||
unmount();
|
||
}
|
||
});
|
||
|
||
it("builds and validates emoji keys like the registry", () => {
|
||
expect(emojiIconKey("🐶")).toBe("emoji:🐶");
|
||
expect(emojiIconKey("👨👩👧👦")).toBe("emoji:👨👩👧👦");
|
||
expect(emojiIconKey("⭐".repeat(8))).toBe(`emoji:${"⭐".repeat(8)}`);
|
||
for (const bad of ["", " ", " 🐶 ", "🐶 ", "\t🐶", "⭐".repeat(9), "a b", "<b>", "a&b", "🐶\u0007"]) {
|
||
expect(emojiIconKey(bad), JSON.stringify(bad)).toBeNull();
|
||
}
|
||
expect(faIconName("fa:dog")).toBe("dog");
|
||
expect(faIconName("lucide:dog")).toBeNull();
|
||
expect(faIconName(null)).toBeNull();
|
||
});
|
||
|
||
it("renders lucide, legacy, fa and emoji rows, and the fallback for none or unknown", async () => {
|
||
await renderReady([
|
||
{ ...BRUSH, id: 40, icon: "lucide:dog" },
|
||
{ ...BRUSH, id: 41, title: "Task 41", icon: "dog" },
|
||
{ ...BRUSH, id: 42, title: "Task 42", icon: "fa:dog" },
|
||
{ ...BRUSH, id: 43, title: "Task 43", icon: "emoji:🐶" },
|
||
{ ...BRUSH, id: 44, title: "Task 44", icon: null },
|
||
{ ...BRUSH, id: 45, title: "Task 45", icon: "" },
|
||
{ ...BRUSH, id: 46, title: "Task 46", icon: "mystery:dog" },
|
||
]);
|
||
expect(rowGlyph(screen.getByTestId("definition-40"))).toBe("lucide:dog");
|
||
expect(rowGlyph(screen.getByTestId("definition-41"))).toBe("lucide:dog");
|
||
expect(rowGlyph(screen.getByTestId("definition-42"))).toBe("fa:dog");
|
||
expect(rowGlyph(screen.getByTestId("definition-43"))).toBe("emoji:🐶");
|
||
expect(rowGlyph(screen.getByTestId("definition-44"))).toBe("fallback");
|
||
expect(rowGlyph(screen.getByTestId("definition-45"))).toBe("fallback");
|
||
expect(rowGlyph(screen.getByTestId("definition-46"))).toBe("fallback");
|
||
});
|
||
|
||
it("a Font Awesome choice is POSTed as fa:<name> and renders on its row", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByRole("button", { name: "New" }));
|
||
const s = sheet();
|
||
fillNewTask(s);
|
||
fireEvent.click(radio(s, "Font Awesome", "Dog"));
|
||
expect(radio(s, "Font Awesome", "Dog").getAttribute("aria-checked")).toBe("true");
|
||
expect(radio(s, "Font Awesome", "Dog").className).toContain("defs-icon--on");
|
||
expect(radio(s, "Icon", "Dog").getAttribute("aria-checked")).toBe("false");
|
||
expect(radio(s, "Icon", "No icon").getAttribute("aria-checked")).toBe("false");
|
||
|
||
await save(s);
|
||
expect(api.writes()).toHaveLength(1);
|
||
expect(api.writes()[0].method).toBe("POST");
|
||
expect((api.writes()[0].body as { icon: string }).icon).toBe("fa:dog");
|
||
expect(rowGlyph(await screen.findByTestId("definition-99"))).toBe("fa:dog");
|
||
});
|
||
|
||
it("a typed emoji is POSTed as emoji:<grapheme> and renders on its row", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByRole("button", { name: "New" }));
|
||
const s = sheet();
|
||
fillNewTask(s);
|
||
fireEvent.change(emojiInput(s), { target: { value: "🐶" } });
|
||
expect(radio(s, "Icon", "No icon").getAttribute("aria-checked")).toBe("false");
|
||
|
||
await save(s);
|
||
expect(api.writes()).toHaveLength(1);
|
||
expect((api.writes()[0].body as { icon: string }).icon).toBe("emoji:🐶");
|
||
expect(rowGlyph(await screen.findByTestId("definition-99"))).toBe("emoji:🐶");
|
||
});
|
||
|
||
it("a Lucide choice is POSTed as lucide:<name> after an emoji was typed", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByRole("button", { name: "New" }));
|
||
const s = sheet();
|
||
fillNewTask(s);
|
||
fireEvent.change(emojiInput(s), { target: { value: "🐶" } });
|
||
fireEvent.click(radio(s, "Icon", "Dog"));
|
||
expect(emojiInput(s).value).toBe("");
|
||
|
||
await save(s);
|
||
expect((api.writes()[0].body as { icon: string }).icon).toBe("lucide:dog");
|
||
expect(rowGlyph(await screen.findByTestId("definition-99"))).toBe("lucide:dog");
|
||
});
|
||
|
||
for (const bad of [" 🐶 ", "🐶 ", " ", "a b", "<b>", "a&b", "⭐".repeat(9)]) {
|
||
it(`an invalid emoji entry ${JSON.stringify(bad)} is not saved`, async () => {
|
||
await renderReady([{ ...BRUSH, id: 50, icon: "lucide:dog" }]);
|
||
fireEvent.click(screen.getByTestId("definition-50"));
|
||
const s = sheet();
|
||
fireEvent.change(emojiInput(s), { target: { value: bad } });
|
||
|
||
await save(s);
|
||
expect(api.writes()).toHaveLength(0);
|
||
expect(within(s).getByText(/Enter a single emoji/)).toBeTruthy();
|
||
expect(screen.getByRole("dialog")).toBe(s);
|
||
});
|
||
}
|
||
|
||
it("prefills a fa:<name> task and PATCHes an emoji replacement", async () => {
|
||
await renderReady([{ ...BRUSH, id: 51, icon: "fa:dog" }]);
|
||
fireEvent.click(screen.getByTestId("definition-51"));
|
||
const s = sheet();
|
||
expect(radio(s, "Font Awesome", "Dog").getAttribute("aria-checked")).toBe("true");
|
||
expect(radio(s, "Icon", "Dog").getAttribute("aria-checked")).toBe("false");
|
||
expect(radio(s, "Icon", "No icon").getAttribute("aria-checked")).toBe("false");
|
||
expect(emojiInput(s).value).toBe("");
|
||
|
||
fireEvent.change(emojiInput(s), { target: { value: "🐱" } });
|
||
expect(radio(s, "Font Awesome", "Dog").getAttribute("aria-checked")).toBe("false");
|
||
await save(s);
|
||
const { method, path, body } = api.writes()[0];
|
||
expect(method).toBe("PATCH");
|
||
expect(path).toBe("/api/v1/admin/quest-definitions/51");
|
||
expect((body as { icon: string }).icon).toBe("emoji:🐱");
|
||
await waitFor(() => expect(rowGlyph(screen.getByTestId("definition-51"))).toBe("emoji:🐱"));
|
||
});
|
||
|
||
it("prefills an emoji:<grapheme> task and PATCHes a Font Awesome replacement", async () => {
|
||
await renderReady([{ ...BRUSH, id: 52, icon: "emoji:🐶" }]);
|
||
fireEvent.click(screen.getByTestId("definition-52"));
|
||
const s = sheet();
|
||
expect(emojiInput(s).value).toBe("🐶");
|
||
expect(radio(s, "Icon", "No icon").getAttribute("aria-checked")).toBe("false");
|
||
for (const name of ["Icon", "Font Awesome"]) {
|
||
const group = within(s).getByRole("radiogroup", { name });
|
||
expect(within(group).queryAllByRole("radio", { checked: true })).toHaveLength(0);
|
||
}
|
||
|
||
fireEvent.click(radio(s, "Font Awesome", "Pets"));
|
||
expect(emojiInput(s).value).toBe("");
|
||
await save(s);
|
||
expect((api.writes()[0].body as { icon: string }).icon).toBe("fa:paw");
|
||
await waitFor(() => expect(rowGlyph(screen.getByTestId("definition-52"))).toBe("fa:paw"));
|
||
});
|
||
|
||
it("an unchanged emoji is omitted on edit", async () => {
|
||
await renderReady([{ ...BRUSH, id: 53, icon: "emoji:🐶" }]);
|
||
fireEvent.click(screen.getByTestId("definition-53"));
|
||
const s = sheet();
|
||
fireEvent.change(within(s).getByRole("textbox", { name: "Title" }), {
|
||
target: { value: "Feed the dog" },
|
||
});
|
||
await save(s);
|
||
expect(api.writes()[0].body).not.toHaveProperty("icon");
|
||
});
|
||
|
||
it("No icon and an emptied emoji field both clear the icon to null", async () => {
|
||
await renderReady([
|
||
{ ...BRUSH, id: 54, icon: "emoji:🐶" },
|
||
{ ...BRUSH, id: 55, title: "Task 55", icon: "fa:dog" },
|
||
]);
|
||
fireEvent.click(screen.getByTestId("definition-54"));
|
||
let s = sheet();
|
||
fireEvent.change(emojiInput(s), { target: { value: "" } });
|
||
expect(radio(s, "Icon", "No icon").getAttribute("aria-checked")).toBe("true");
|
||
await save(s);
|
||
expect((api.writes()[0].body as { icon: string | null }).icon).toBeNull();
|
||
await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
|
||
|
||
fireEvent.click(screen.getByTestId("definition-55"));
|
||
s = sheet();
|
||
fireEvent.click(radio(s, "Icon", "No icon"));
|
||
expect(radio(s, "Font Awesome", "Dog").getAttribute("aria-checked")).toBe("false");
|
||
await save(s);
|
||
expect((api.writes()[1].body as { icon: string | null }).icon).toBeNull();
|
||
await waitFor(() => expect(rowGlyph(screen.getByTestId("definition-55"))).toBe("fallback"));
|
||
});
|
||
});
|
||
|
||
/* ── Font Awesome search ────────────────────────────────────────────── */
|
||
|
||
describe("DefinitionsTab Font Awesome search", () => {
|
||
beforeEach(() => {
|
||
sessionStorage.clear();
|
||
storeTokens({ access_token: "at-123", expires_in: 600 });
|
||
});
|
||
|
||
afterEach(() => {
|
||
cleanup();
|
||
vi.unstubAllGlobals();
|
||
vi.useRealTimers();
|
||
});
|
||
|
||
const CURATED = new Set(FA_DEFINITION_ICONS.map((icon) => icon.name));
|
||
|
||
function searchInput(s: HTMLElement): HTMLInputElement {
|
||
return within(s).getByRole("searchbox", { name: "Search Font Awesome icons" }) as HTMLInputElement;
|
||
}
|
||
|
||
function results(s: HTMLElement): HTMLElement {
|
||
return within(s).getByRole("radiogroup", { name: "Font Awesome search results" });
|
||
}
|
||
|
||
function resultKeys(s: HTMLElement): string[] {
|
||
return within(results(s))
|
||
.getAllByRole("radio")
|
||
.map((option) => option.getAttribute("data-icon-option")!);
|
||
}
|
||
|
||
function rowFaIcon(row: HTMLElement): string | null {
|
||
const svg = row.querySelector(".defs-row-glyph svg");
|
||
return svg!.getAttribute("fill") === "none" ? null : svg!.getAttribute("data-icon");
|
||
}
|
||
|
||
async function save(s: HTMLElement) {
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
}
|
||
|
||
function fillNewTask(s: HTMLElement) {
|
||
fireEvent.change(within(s).getByRole("textbox", { name: "Title" }), {
|
||
target: { value: "Walk the dog" },
|
||
});
|
||
fireEvent.click(within(s).getByRole("button", { name: /Assigned children/ }));
|
||
fireEvent.click(within(s).getByRole("checkbox", { name: "Declan" }));
|
||
fireEvent.click(within(s).getByRole("button", { name: "Morning" }));
|
||
}
|
||
|
||
it("searches the full Free Solid set by name or label, exact and prefix matches first", () => {
|
||
expect(searchFaIcons("")).toEqual([]);
|
||
expect(searchFaIcons(" ")).toEqual([]);
|
||
const dog = searchFaIcons(" DOG ").map((icon) => icon.name);
|
||
expect(dog[0]).toBe("dog");
|
||
expect(dog).toEqual(expect.arrayContaining(["hotdog", "shield-dog"]));
|
||
expect(dog.some((name) => !CURATED.has(name))).toBe(true);
|
||
// A label match: "Shield Dog" contains "shield d" though no name does.
|
||
expect(searchFaIcons("shield d").map((icon) => icon.name)).toContain("shield-dog");
|
||
expect(searchFaIcons("dog-leashed")).toEqual([]);
|
||
|
||
expect(faTypedIconKey("dragon")).toBe("fa:dragon");
|
||
expect(faTypedIconKey(" Dragon ")).toBe("fa:dragon");
|
||
for (const bad of ["", "drag", "dgo", "dog-leashed", "github", "fa:dog"]) {
|
||
expect(faTypedIconKey(bad), bad).toBeNull();
|
||
}
|
||
});
|
||
|
||
it("shows the curated quick picks while the search is empty", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByRole("button", { name: "New" }));
|
||
const s = sheet();
|
||
expect(searchInput(s).value).toBe("");
|
||
const quick = within(s).getByRole("radiogroup", { name: "Font Awesome" });
|
||
expect(within(quick).getAllByRole("radio")).toHaveLength(FA_DEFINITION_ICONS.length);
|
||
expect(within(s).queryByRole("radiogroup", { name: "Font Awesome search results" })).toBeNull();
|
||
});
|
||
|
||
it("a query swaps the quick picks for one bounded, labelled page of results", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByRole("button", { name: "New" }));
|
||
const s = sheet();
|
||
fireEvent.change(searchInput(s), { target: { value: "a" } });
|
||
const total = searchFaIcons("a").length;
|
||
expect(total).toBeGreaterThan(80);
|
||
expect(within(s).queryByRole("radiogroup", { name: "Font Awesome" })).toBeNull();
|
||
expect(resultKeys(s)).toHaveLength(40);
|
||
expect(within(results(s)).getAllByRole("radio")[0].textContent).toBe(searchFaIcons("a")[0].label);
|
||
expect(within(s).getByText(`Showing 1–40 of ${total}`)).toBeTruthy();
|
||
expect(within(s).queryByRole("button", { name: "Previous" })).toBeNull();
|
||
|
||
// "Show more" replaces the page rather than appending to it.
|
||
const firstPage = resultKeys(s);
|
||
fireEvent.click(within(s).getByRole("button", { name: "Show more" }));
|
||
expect(resultKeys(s)).toEqual(searchFaIcons("a").slice(40, 80).map((icon) => `fa:${icon.name}`));
|
||
expect(resultKeys(s).some((key) => firstPage.includes(key))).toBe(false);
|
||
expect(within(s).getByText(`Showing 41–80 of ${total}`)).toBeTruthy();
|
||
fireEvent.click(within(s).getByRole("button", { name: "Previous" }));
|
||
expect(resultKeys(s)).toEqual(firstPage);
|
||
|
||
// A new query starts again from the first page.
|
||
fireEvent.change(searchInput(s), { target: { value: "dog" } });
|
||
expect(resultKeys(s)[0]).toBe("fa:dog");
|
||
expect(resultKeys(s)).toContain("fa:hotdog");
|
||
expect(within(s).queryByRole("button", { name: "Show more" })).toBeNull();
|
||
|
||
fireEvent.change(searchInput(s), { target: { value: "" } });
|
||
expect(within(s).getByRole("radiogroup", { name: "Font Awesome" })).toBeTruthy();
|
||
});
|
||
|
||
it("paging through every match never mounts more than one page", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByRole("button", { name: "New" }));
|
||
const s = sheet();
|
||
fireEvent.change(searchInput(s), { target: { value: "-" } });
|
||
const all = searchFaIcons("-").map((icon) => `fa:${icon.name}`);
|
||
expect(all.length).toBeGreaterThan(900);
|
||
|
||
const seen: string[] = [];
|
||
for (;;) {
|
||
expect(results(s).children.length).toBeGreaterThan(0);
|
||
expect(results(s).children.length).toBeLessThanOrEqual(40);
|
||
seen.push(...resultKeys(s));
|
||
const more = within(s).queryByRole("button", { name: "Show more" });
|
||
if (!more) break;
|
||
fireEvent.click(more);
|
||
}
|
||
// Every match stays reachable, one page at a time, in order.
|
||
expect(seen).toEqual(all);
|
||
const lastStart = Math.floor((all.length - 1) / 40) * 40 + 1;
|
||
expect(within(s).getByText(`Showing ${lastStart}–${all.length} of ${all.length}`)).toBeTruthy();
|
||
});
|
||
|
||
it("selecting a search result POSTs fa:<name> and renders on its row", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByRole("button", { name: "New" }));
|
||
const s = sheet();
|
||
fillNewTask(s);
|
||
fireEvent.change(searchInput(s), { target: { value: "hot" } });
|
||
expect(within(s).getByRole("alert").textContent).toMatch(/Select a Font Awesome icon from the results/);
|
||
const hotdog = within(results(s)).getByRole("radio", { name: "Hotdog" });
|
||
fireEvent.click(hotdog);
|
||
expect(hotdog.getAttribute("aria-checked")).toBe("true");
|
||
expect(within(s).queryByRole("alert")).toBeNull();
|
||
expect(searchInput(s).value).toBe("hot");
|
||
|
||
await save(s);
|
||
expect((api.writes()[0].body as { icon: string }).icon).toBe("fa:hotdog");
|
||
await waitFor(() => expect(rowFaIcon(screen.getByTestId("definition-99"))).toBe("hotdog"));
|
||
});
|
||
|
||
it("a typed non-curated Free Solid name is accepted and PATCHed", async () => {
|
||
expect(CURATED.has("dragon")).toBe(false);
|
||
await renderReady([{ ...BRUSH, id: 70, icon: "lucide:dog" }]);
|
||
fireEvent.click(screen.getByTestId("definition-70"));
|
||
const s = sheet();
|
||
fireEvent.change(searchInput(s), { target: { value: "Dragon" } });
|
||
expect(within(s).queryByRole("alert")).toBeNull();
|
||
expect(within(results(s)).getByRole("radio", { name: "Dragon" }).getAttribute("aria-checked")).toBe(
|
||
"true",
|
||
);
|
||
const lucide = within(s).getByRole("radiogroup", { name: "Icon" });
|
||
expect(within(lucide).queryAllByRole("radio", { checked: true })).toHaveLength(0);
|
||
|
||
await save(s);
|
||
expect((api.writes()[0].body as { icon: string }).icon).toBe("fa:dragon");
|
||
await waitFor(() => expect(rowFaIcon(screen.getByTestId("definition-70"))).toBe("dragon"));
|
||
});
|
||
|
||
for (const [typed, message] of [
|
||
["do", /Select a Font Awesome icon from the results/],
|
||
["dgo", /“dgo” is not a Font Awesome Free Solid icon/],
|
||
["dog-leashed", /“dog-leashed” is not a Font Awesome Free Solid icon/],
|
||
["github", /“github” is not a Font Awesome Free Solid icon/],
|
||
] as const) {
|
||
it(`typed ${JSON.stringify(typed)} is rejected with a message and nothing is saved`, async () => {
|
||
await renderReady([{ ...BRUSH, id: 71, icon: "lucide:dog" }]);
|
||
fireEvent.click(screen.getByTestId("definition-71"));
|
||
const s = sheet();
|
||
fireEvent.change(searchInput(s), { target: { value: typed } });
|
||
expect(within(s).getByRole("alert").textContent).toMatch(message);
|
||
expect(within(s).getByRole("radio", { name: "No icon" }).getAttribute("aria-checked")).toBe("false");
|
||
|
||
await save(s);
|
||
expect(api.writes()).toHaveLength(0);
|
||
expect(within(s).getByTestId("sheet-error").textContent).toMatch(message);
|
||
expect(screen.getByRole("dialog")).toBe(s);
|
||
});
|
||
}
|
||
|
||
it("clearing the search, or No icon, removes the icon", async () => {
|
||
await renderReady([
|
||
{ ...BRUSH, id: 72, icon: "fa:dragon" },
|
||
{ ...BRUSH, id: 73, title: "Task 73", icon: "fa:dragon" },
|
||
]);
|
||
fireEvent.click(screen.getByTestId("definition-72"));
|
||
let s = sheet();
|
||
fireEvent.change(searchInput(s), { target: { value: "" } });
|
||
expect(within(s).getByRole("radio", { name: "No icon" }).getAttribute("aria-checked")).toBe("true");
|
||
await save(s);
|
||
expect((api.writes()[0].body as { icon: string | null }).icon).toBeNull();
|
||
await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
|
||
|
||
fireEvent.click(screen.getByTestId("definition-73"));
|
||
s = sheet();
|
||
fireEvent.click(within(s).getByRole("radio", { name: "No icon" }));
|
||
expect(searchInput(s).value).toBe("");
|
||
await save(s);
|
||
expect((api.writes()[1].body as { icon: string | null }).icon).toBeNull();
|
||
});
|
||
|
||
it("a saved non-curated fa:<name> renders on its row and opens selected in the results", async () => {
|
||
await renderReady([{ ...BRUSH, id: 74, icon: "fa:dragon" }]);
|
||
expect(rowFaIcon(screen.getByTestId("definition-74"))).toBe("dragon");
|
||
fireEvent.click(screen.getByTestId("definition-74"));
|
||
const s = sheet();
|
||
expect(searchInput(s).value).toBe("dragon");
|
||
expect(within(s).queryByRole("alert")).toBeNull();
|
||
expect(within(results(s)).getByRole("radio", { name: "Dragon" }).getAttribute("aria-checked")).toBe(
|
||
"true",
|
||
);
|
||
|
||
fireEvent.change(within(s).getByRole("textbox", { name: "Title" }), {
|
||
target: { value: "Feed the dragon" },
|
||
});
|
||
await save(s);
|
||
expect(api.writes()[0].body).not.toHaveProperty("icon");
|
||
});
|
||
|
||
it("a saved curated fa:<name> opens in the quick picks with an empty search", async () => {
|
||
await renderReady([{ ...BRUSH, id: 75, icon: "fa:dog" }]);
|
||
fireEvent.click(screen.getByTestId("definition-75"));
|
||
const s = sheet();
|
||
expect(searchInput(s).value).toBe("");
|
||
const quick = within(s).getByRole("radiogroup", { name: "Font Awesome" });
|
||
expect(within(quick).getByRole("radio", { name: "Dog" }).getAttribute("aria-checked")).toBe("true");
|
||
});
|
||
});
|
||
|
||
/* ── Legacy icons ───────────────────────────────────────────────────── */
|
||
|
||
describe("DefinitionsTab legacy icon edits", () => {
|
||
// The API reads a stored legacy `mdi:tooth` back as `lucide:mdi:tooth`,
|
||
// which its strict write validation rejects if sent back.
|
||
const LEGACY: QuestDefinition = { ...BRUSH, id: 60, icon: "lucide:mdi:tooth" };
|
||
|
||
beforeEach(() => {
|
||
sessionStorage.clear();
|
||
storeTokens({ access_token: "at-123", expires_in: 600 });
|
||
});
|
||
|
||
afterEach(() => {
|
||
cleanup();
|
||
vi.unstubAllGlobals();
|
||
vi.useRealTimers();
|
||
});
|
||
|
||
function radio(s: HTMLElement, group: "Icon" | "Font Awesome", label: string): HTMLElement {
|
||
return within(within(s).getByRole("radiogroup", { name: group })).getByRole("radio", {
|
||
name: label,
|
||
});
|
||
}
|
||
|
||
async function save(s: HTMLElement) {
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
}
|
||
|
||
it("editing only the title omits the legacy icon and saves", async () => {
|
||
await renderReady([LEGACY]);
|
||
fireEvent.click(screen.getByTestId("definition-60"));
|
||
const s = sheet();
|
||
fireEvent.change(within(s).getByRole("textbox", { name: "Title" }), {
|
||
target: { value: "Brush teeth well" },
|
||
});
|
||
await save(s);
|
||
|
||
expect(api.writes()).toHaveLength(1);
|
||
expect(api.writes()[0].method).toBe("PATCH");
|
||
expect(api.writes()[0].body).not.toHaveProperty("icon");
|
||
expect((api.writes()[0].body as { title: string }).title).toBe("Brush teeth well");
|
||
await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
|
||
expect(await screen.findByText("Brush teeth well")).toBeTruthy();
|
||
});
|
||
|
||
for (const [label, choose, sent] of [
|
||
["a Lucide", (s: HTMLElement) => fireEvent.click(radio(s, "Icon", "Dog")), "lucide:dog"],
|
||
["a Font Awesome", (s: HTMLElement) => fireEvent.click(radio(s, "Font Awesome", "Dog")), "fa:dog"],
|
||
[
|
||
"an emoji",
|
||
(s: HTMLElement) =>
|
||
fireEvent.change(within(s).getByRole("textbox", { name: "Emoji" }), {
|
||
target: { value: "🦷" },
|
||
}),
|
||
"emoji:🦷",
|
||
],
|
||
["No icon", (s: HTMLElement) => fireEvent.click(radio(s, "Icon", "No icon")), null],
|
||
] as const) {
|
||
it(`choosing ${label} replacement for the legacy icon sends ${JSON.stringify(sent)}`, async () => {
|
||
await renderReady([LEGACY]);
|
||
fireEvent.click(screen.getByTestId("definition-60"));
|
||
const s = sheet();
|
||
choose(s);
|
||
await save(s);
|
||
|
||
expect(api.writes()).toHaveLength(1);
|
||
expect(api.writes()[0].body).toHaveProperty("icon", sent);
|
||
await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
|
||
});
|
||
}
|
||
|
||
it("an invalid emoji replacing the legacy icon is still rejected before the request", async () => {
|
||
await renderReady([LEGACY]);
|
||
fireEvent.click(screen.getByTestId("definition-60"));
|
||
const s = sheet();
|
||
fireEvent.change(within(s).getByRole("textbox", { name: "Emoji" }), {
|
||
target: { value: "a b" },
|
||
});
|
||
await save(s);
|
||
|
||
expect(api.writes()).toHaveLength(0);
|
||
expect(within(s).getByText(/Enter a single emoji/)).toBeTruthy();
|
||
});
|
||
|
||
it("creating a task still sends icon, even when none is chosen", async () => {
|
||
await renderReady([LEGACY]);
|
||
fireEvent.click(screen.getByRole("button", { name: "New" }));
|
||
const s = sheet();
|
||
fireEvent.change(within(s).getByRole("textbox", { name: "Title" }), {
|
||
target: { value: "Floss" },
|
||
});
|
||
fireEvent.click(within(s).getByRole("button", { name: /Assigned children/ }));
|
||
fireEvent.click(within(s).getByRole("checkbox", { name: "Declan" }));
|
||
fireEvent.click(within(s).getByRole("button", { name: "Morning" }));
|
||
await save(s);
|
||
|
||
expect(api.writes()).toHaveLength(1);
|
||
expect(api.writes()[0].method).toBe("POST");
|
||
expect(api.writes()[0].body).toHaveProperty("icon", null);
|
||
});
|
||
});
|
||
|
||
/* ── Start date ─────────────────────────────────────────────────────── */
|
||
|
||
function startDateInput(s: HTMLElement): HTMLInputElement {
|
||
return within(s).getByLabelText("Start date", { selector: "input" }) as HTMLInputElement;
|
||
}
|
||
|
||
describe("DefinitionsTab start date", () => {
|
||
beforeEach(() => {
|
||
sessionStorage.clear();
|
||
storeTokens({ access_token: "at-123", expires_in: 600 });
|
||
});
|
||
|
||
afterEach(() => {
|
||
cleanup();
|
||
vi.unstubAllGlobals();
|
||
vi.useRealTimers();
|
||
});
|
||
|
||
it("a new task defaults to today and POSTs the chosen start date", async () => {
|
||
vi.useFakeTimers({ toFake: ["Date"] });
|
||
vi.setSystemTime(new Date(2026, 8, 23, 9, 0)); // Wed 23 Sep 2026, local
|
||
await renderReady();
|
||
|
||
fireEvent.click(screen.getByRole("button", { name: "New" }));
|
||
const s = sheet();
|
||
const input = startDateInput(s);
|
||
expect(input.type).toBe("date");
|
||
expect(input.value).toBe("2026-09-23");
|
||
|
||
fireEvent.change(within(s).getByRole("textbox", { name: "Title" }), {
|
||
target: { value: "Feed the cat" },
|
||
});
|
||
fireEvent.click(within(s).getByRole("button", { name: /Assigned children/ }));
|
||
fireEvent.click(within(s).getByRole("checkbox", { name: "Declan" }));
|
||
fireEvent.click(within(s).getByRole("button", { name: "Evening" }));
|
||
fireEvent.change(input, { target: { value: "2026-10-15" } });
|
||
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
expect(api.writes()).toHaveLength(1);
|
||
expect(api.writes()[0].method).toBe("POST");
|
||
expect((api.writes()[0].body as { rule: DefinitionRule }).rule.start_date).toBe("2026-10-15");
|
||
});
|
||
|
||
it("an edit pre-fills the definition's start date and PATCHes a changed one", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByTestId("definition-10"));
|
||
const s = sheet();
|
||
const input = startDateInput(s);
|
||
expect(input.value).toBe("2026-01-01");
|
||
|
||
fireEvent.change(input, { target: { value: "2026-11-02" } });
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
expect(api.writes()).toEqual([
|
||
expect.objectContaining({
|
||
method: "PATCH",
|
||
path: "/api/v1/admin/quest-definitions/10",
|
||
body: expect.objectContaining({ rule: rule({ start_date: "2026-11-02" }) }),
|
||
}),
|
||
]);
|
||
});
|
||
|
||
it("the occurrence preview requests the chosen start date", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByTestId("definition-10"));
|
||
const s = sheet();
|
||
await waitFor(() => expect(api.previews()).toHaveLength(1));
|
||
|
||
fireEvent.change(startDateInput(s), { target: { value: "2027-03-01" } });
|
||
await settleDebounce();
|
||
await waitFor(() => expect(api.previews()).toHaveLength(2));
|
||
expect((api.previews()[1].body as { rule: DefinitionRule }).rule.start_date).toBe(
|
||
"2027-03-01",
|
||
);
|
||
});
|
||
|
||
it("a cleared start date is not submitted", async () => {
|
||
await renderReady();
|
||
fireEvent.click(screen.getByTestId("definition-10"));
|
||
const s = sheet();
|
||
fireEvent.change(startDateInput(s), { target: { value: "" } });
|
||
await act(async () => {
|
||
fireEvent.click(within(s).getByRole("button", { name: "Save changes" }));
|
||
});
|
||
expect(api.writes()).toHaveLength(0);
|
||
expect(within(s).getByText("Pick a start date.")).toBeTruthy();
|
||
});
|
||
});
|
||
|
||
describe("DefinitionsTab start date in the stored application timezone", () => {
|
||
async function newSheetStartDate(
|
||
timezone: string,
|
||
effective_timezone = timezone,
|
||
): Promise<string> {
|
||
api = fakeApi([BRUSH]);
|
||
vi.stubGlobal(
|
||
"fetch",
|
||
vi.fn((input: RequestInfo | URL, init?: RequestInit) =>
|
||
String(input).endsWith("/api/v1/admin/settings")
|
||
? Promise.resolve(jsonResponse({ timezone, effective_timezone }))
|
||
: api.fetchMock(input, init),
|
||
),
|
||
);
|
||
render(
|
||
<AppTimezoneProvider>
|
||
<DefinitionsTab />
|
||
</AppTimezoneProvider>,
|
||
);
|
||
await screen.findByText("Brush teeth");
|
||
fireEvent.click(screen.getByRole("button", { name: "New" }));
|
||
return startDateInput(sheet()).value;
|
||
}
|
||
|
||
beforeAll(() => {
|
||
vi.stubEnv("TZ", "UTC");
|
||
});
|
||
|
||
afterAll(() => {
|
||
vi.unstubAllEnvs();
|
||
});
|
||
|
||
beforeEach(() => {
|
||
sessionStorage.clear();
|
||
storeTokens({ access_token: "at-123", expires_in: 600 });
|
||
// Wed 23 Sep 13:00 UTC is already Thu 24 Sep 01:00 in Auckland.
|
||
vi.useFakeTimers({ toFake: ["Date"], now: new Date("2026-09-23T13:00:00Z") });
|
||
});
|
||
|
||
afterEach(() => {
|
||
cleanup();
|
||
vi.unstubAllGlobals();
|
||
vi.useRealTimers();
|
||
});
|
||
|
||
it("a new task defaults to today in the stored zone", async () => {
|
||
expect(await newSheetStartDate("Pacific/Auckland")).toBe("2026-09-24");
|
||
});
|
||
|
||
it("an empty stored zone defaults to today in the API host's published zone", async () => {
|
||
expect(await newSheetStartDate("", "Pacific/Auckland")).toBe("2026-09-24");
|
||
});
|
||
});
|