@antelopejs/dms 0.7.20 → 0.8.0

package/frontend-vue/tests/form-entry-order.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { orderFormEntries } from "../layers/dms-ui/app/build/composables/form/formEntryOrder";
+import type { FormFieldOrGroup } from "../layers/dms-ui/app/composables/form/types/field";
+
+const field = (id: string) => ({
+  id,
+  component: { componentName: "dms-input-text" },
+});
+
+const group = (id: string, order?: number) => ({
+  id,
+  order,
+  fields: [field(`${id}Member`)],
+});
+
+const ids = (entries: FormFieldOrGroup[]) => entries.map((entry) => entry.id);
+
+describe("orderFormEntries", () => {
+  it("moves the groups giving an order into their places, lowest first", () => {
+    const entries: FormFieldOrGroup[] = [
+      field("username"),
+      group("contact"),
+      field("bio"),
+      group("social", 2),
+      group("address", 1),
+    ];
+    expect(ids(orderFormEntries(entries))).toEqual([
+      "username",
+      "contact",
+      "bio",
+      "address",
+      "social",
+    ]);
+  });
+
+  it("keeps the declaration order of equal orders and of no order at all", () => {
+    const entries: FormFieldOrGroup[] = [
+      group("first", 1),
+      field("name"),
+      group("second", 1),
+      group("loose"),
+    ];
+    expect(ids(orderFormEntries(entries))).toEqual(ids(entries));
+  });
+});

package/frontend-vue/tests/form-footer-kind.test.ts

@@ -69,23 +69,28 @@ describe("saveBarState of an action form", () => {
     });
   });
 
-  it("shows nothing on a page while untouched", () => {
-    expect(action({}).isHidden).toBe(true);
+  it("shows its submit alone, ready, on a page while untouched", () => {
+    // A pre-filled form sends its defaults as they are.
+    expect(action({})).toEqual({
+      showsStatus: false,
+      showsSubmit: true,
+      isSubmitHeld: false,
+      isHidden: false,
+    });
   });
 
-  it("offers Cancel beside its held submit in a drawer or a modal", () => {
-    // The invite modal: empty, it still shows the way out and its "Invite".
+  it("offers Cancel beside its ready submit in a drawer or a modal", () => {
     expect(action({ cancellable: true })).toEqual({
       showsStatus: false,
       secondary: "cancel",
       showsSubmit: true,
-      isSubmitHeld: true,
+      isSubmitHeld: false,
       isHidden: false,
     });
   });
 
   it("shows its submit alone, ready, when nothing in it can be changed", () => {
-    const bar = action({ resettable: false });
+    const bar = action({ resettable: false, dirty: true });
     expect(bar.secondary).toBeUndefined();
     expect(bar).toMatchObject({
       showsSubmit: true,

package/frontend-vue/tests/form-load-error.test.ts

@@ -4,7 +4,9 @@ import { renderToString } from "vue/server-renderer";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import FormLoadError from "../layers/dms-ui/app/build/components/form/FormLoadError.vue";
 import {
+  type FormLoadFailure,
   type FormLoadSource,
+  missingRecordFailure,
   trackFormRecordLoad,
 } from "../layers/dms-ui/app/build/composables/form/formRecordLoad";
 
@@ -72,6 +74,32 @@ describe("a form's record load", () => {
   });
 });
 
+describe("a form about a record its address names none of", () => {
+  const FETCH_URL = "/api/tasks/get?id={{query.id}}";
+
+  it("reports the record missing while the id is not in the address", () => {
+    expect(
+      missingRecordFailure({ requiresRecord: true, fetchUrl: FETCH_URL }),
+    ).toBe("missing");
+  });
+
+  it("reports nothing once the address names the record", () => {
+    expect(
+      missingRecordFailure({
+        requiresRecord: true,
+        fetchUrl: FETCH_URL,
+        resolvedFetchUrl: "/api/tasks/get?id=1",
+      }),
+    ).toBe(null);
+  });
+
+  it("leaves a form that may open without a record to its defaults", () => {
+    // A create form seeded by `?duplicate=` when there is one.
+    expect(missingRecordFailure({ fetchUrl: FETCH_URL })).toBe(null);
+    expect(missingRecordFailure({ requiresRecord: true })).toBe(null);
+  });
+});
+
 describe("the load error a form shows", () => {
   const Slot = defineComponent({
     props: {
@@ -91,7 +119,7 @@ describe("the load error a form shows", () => {
         ]),
   });
 
-  async function render(failure: "forbidden" | "error"): Promise<string> {
+  async function render(failure: FormLoadFailure): Promise<string> {
     const app = createSSRApp({
       render: () => h(FormLoadError, { failure }),
     });
@@ -118,6 +146,13 @@ describe("the load error a form shows", () => {
     expect(html).toContain("dms.form.load_error.retry");
   });
 
+  it("says no entry is selected, with nothing to retry", async () => {
+    const html = await render("missing");
+    expect(html).toContain("dms.form.load_error.missing_title");
+    expect(html).toContain("dms.form.load_error.missing_description");
+    expect(html).not.toContain("dms.form.load_error.retry");
+  });
+
   it("has its texts in English and French", () => {
     for (const file of ["ui-en-GB.json", "ui-fr-FR.json"]) {
       const locale = JSON.parse(
@@ -131,6 +166,8 @@ describe("the load error a form shows", () => {
         "error_title",
         "forbidden_description",
         "forbidden_title",
+        "missing_description",
+        "missing_title",
         "retry",
       ]);
     }

package/frontend-vue/tests/grid-responsive-columns.test.ts

@@ -87,6 +87,15 @@ describe("grid column template", () => {
     expect(gridColumnsTemplate(1, GAP, MIN)).toContain("(100% - 0 * 1rem)");
   });
 
+  it("reads a unitless gap or minimum as pixels, which calc() requires", () => {
+    const template = gridColumnsTemplate(2, "0", "160");
+    expect(template).toContain("(100% - 1 * 0px)");
+    expect(template).toContain("max(160px,");
+    expect(resolveColumnCount(template, 553, 0)).toBe(2);
+    const css = gridResponsiveStyles(gridScopeId("nested"), 2, "0", MIN);
+    expect(css).toContain(`calc(2 * ${MIN} + 1 * 0px)`);
+  });
+
   it("honours a caller-supplied minimum", () => {
     expect(gridColumnsTemplate(4, GAP, "120px")).toContain("120px");
     expect(

package/frontend-vue/tests/header-actions.test.ts

@@ -2,6 +2,7 @@
 import {
   computed,
   createApp,
+  createSSRApp,
   defineComponent,
   h,
   nextTick,
@@ -10,6 +11,7 @@ import {
   type App,
   type Ref,
 } from "vue";
+import { renderToString } from "vue/server-renderer";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import DashboardHeader from "../layers/dms-layout/app/build/components/layout/DashboardHeader.vue";
 import {
@@ -97,18 +99,44 @@ function installRuntime(): void {
   );
 }
 
-function mountHeader(): HTMLElement {
-  const host = document.createElement("div");
-  document.body.append(host);
-  app = createApp(DashboardHeader);
-  app.component("UButton", ButtonStub);
+function createHeaderApp(create: typeof createApp): App {
+  const header = create(DashboardHeader);
+  header.component("UButton", ButtonStub);
   ["UDashboardNavbar", "UTooltip", "UBreadcrumb", "UDropdownMenu"].forEach(
-    (name) => app?.component(name, SlotsStub),
+    (name) => header.component(name, SlotsStub),
   );
+  return header;
+}
+
+async function mountHeader(): Promise<HTMLElement> {
+  const host = document.createElement("div");
+  document.body.append(host);
+  app = createHeaderApp(createApp);
+  app.mount(host);
+  await nextTick();
+  return host;
+}
+
+/**
+ * Renders the header on the "server", runs what only the client runs (a
+ * `.client` plugin), then hydrates the server markup.
+ */
+async function hydrateHeader(runOnClient: () => void): Promise<HTMLElement> {
+  const host = document.createElement("div");
+  host.innerHTML = await renderToString(createHeaderApp(createSSRApp));
+  document.body.append(host);
+  runOnClient();
+  app = createHeaderApp(createSSRApp);
   app.mount(host);
   return host;
 }
 
+function hydrationWarnings(spies: ReturnType<typeof vi.spyOn>[]): string[] {
+  return spies
+    .flatMap((spy) => spy.mock.calls.map((call) => String(call[0])))
+    .filter((message) => message.includes("Hydration"));
+}
+
 function button(host: HTMLElement, label: string): HTMLButtonElement | null {
   return host.querySelector(`button[aria-label="${label}"]`);
 }
@@ -145,7 +173,7 @@ describe("header action buttons", () => {
       action("toggle", { onSelect: vi.fn(), isActive: () => isOn.value }),
     );
     registerHeaderAction(action("plain", { onSelect: vi.fn() }));
-    const host = mountHeader();
+    const host = await mountHeader();
     const toggle = button(host, "toggle");
     expect(toggle?.dataset.color).toBe(IDLE_COLOR);
     expect(toggle?.getAttribute("aria-pressed")).toBe("false");
@@ -160,7 +188,7 @@ describe("header action buttons", () => {
     registerHeaderAction(
       action("panel", { label: "$panel.toggle", sidePanelId: PANEL_ID }),
     );
-    const host = mountHeader();
+    const host = await mountHeader();
     const toggle = button(host, "t:panel.toggle");
     const { isOpen } = useSidePanel(PANEL_ID);
     toggle?.click();
@@ -182,10 +210,28 @@ describe("header action buttons", () => {
         isActive: () => true,
       }),
     );
-    const host = mountHeader();
+    const host = await mountHeader();
     const builder = button(host, "Edit");
     builder?.click();
     expect(onSelect).toHaveBeenCalledOnce();
     expect(builder?.dataset.color).toBe(ACTIVE_COLOR);
   });
 });
+
+describe("header action hydration", () => {
+  it("draws a client-only action once mounted, not over the server markup", async () => {
+    const spies = [
+      vi.spyOn(console, "warn").mockImplementation(() => undefined),
+      vi.spyOn(console, "error").mockImplementation(() => undefined),
+    ];
+    registerHeaderAction(action("panel", { sidePanelId: PANEL_ID }));
+    const host = await hydrateHeader(() =>
+      registerHeaderAction(action("client", { onSelect: vi.fn() })),
+    );
+    expect(hydrationWarnings(spies)).toEqual([]);
+    expect(button(host, "panel")).not.toBeNull();
+    await nextTick();
+    expect(button(host, "client")).not.toBeNull();
+    spies.forEach((spy) => spy.mockRestore());
+  });
+});

package/frontend-vue/tests/instant-save-badge.test.ts

@@ -51,13 +51,20 @@ afterEach(() => {
 });
 
 describe("DmsInstantSaveBadge", () => {
-  it("reads exactly 'Saved instantly' in en-GB, whatever the save state", async () => {
+  it("says what the save state is, in en-GB", async () => {
     const { default: InstantSaveBadge } = await import(
       "../layers/dms-ui/app/components/save-bar/InstantSaveBadge.vue"
     );
-    for (const state of [undefined, "idle", "saving", "saved"] as const) {
+    const labels = [
+      [undefined, "Saved instantly"],
+      ["idle", "Saved instantly"],
+      ["saving", "Saving"],
+      ["saved", "Saved instantly"],
+      ["error", "Not saved"],
+    ] as const;
+    for (const [state, label] of labels) {
       await mount({ render: () => h(InstantSaveBadge, { state }) });
-      expect(badge()?.textContent?.trim()).toBe("Saved instantly");
+      expect(badge()?.textContent?.trim()).toBe(label);
       expect(badge()?.dataset.state).toBe(state ?? "idle");
       expect(badge()?.title).toBeTruthy();
       app?.unmount();
@@ -82,7 +89,7 @@ describe("DmsInstantSaveBadge", () => {
     }
   });
 
-  it("uses one key, translated in French", async () => {
+  it("is translated in French", async () => {
     vi.stubGlobal("useI18n", () => ({ t: translator(uiFr) }));
     const { default: InstantSaveBadge } = await import(
       "../layers/dms-ui/app/components/save-bar/InstantSaveBadge.vue"

package/frontend-vue/tests/list-row-truncate.test.ts

@@ -0,0 +1,46 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createApp, h, nextTick, type App } from "vue";
+import ListRow from "../layers/dms-ui/app/components/list-row/ListRow.vue";
+
+const LONG_TITLE = "Safari on iPhone 15 with a very long device name";
+
+let app: App | undefined;
+let host: HTMLDivElement;
+
+async function mount(truncate: boolean) {
+  app = createApp({ render: () => h(ListRow, { title: LONG_TITLE, truncate }) });
+  app.mount(host);
+  await nextTick();
+}
+
+const titleText = () =>
+  [...host.querySelectorAll("span")].find(
+    (span) => span.textContent?.trim() === LONG_TITLE,
+  );
+
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+describe("DmsListRow truncate", () => {
+  it("puts the ellipsis on the title text, not on its flex container", async () => {
+    await mount(true);
+    expect(titleText()?.classList.contains("truncate")).toBe(true);
+    expect(titleText()?.parentElement?.title).toBe(LONG_TITLE);
+  });
+
+  it("leaves the title text alone without truncate", async () => {
+    await mount(false);
+    expect(titleText()?.classList.contains("truncate")).toBe(false);
+  });
+});

package/frontend-vue/tests/roles-name-errors.test.ts

@@ -1,4 +1,5 @@
 // @vitest-environment jsdom
+import { interpolateUrl } from "../layers/dms-core/app/utils/url-interpolation";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import {
   type App,
@@ -203,9 +204,7 @@ beforeEach(() => {
   vi.stubGlobal("useToast", () => ({ add: addToast }));
   vi.stubGlobal("useConfirm", () => ({ confirm }));
   vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
-  vi.stubGlobal("interpolateUrl", (url: string, data: Record<string, string>) =>
-    url.replace(/\{(\w+)\}/g, (_, key: string) => data[key] ?? ""),
-  );
+  vi.stubGlobal("interpolateUrl", interpolateUrl);
   vi.stubGlobal("useTranslation", () => ({
     processApiMessage: (message: string) => `t(${message})`,
   }));

package/frontend-vue/tests/row-side-panel.test.ts

@@ -188,7 +188,12 @@ interface Mounted {
   showTable: Ref<boolean>;
 }
 
-function mountPanel(shownRows: Ref<Row[]> = ref(rows)): Mounted {
+type ReadRow = (id: string) => Promise<Row | undefined>;
+
+function mountPanel(
+  shownRows: Ref<Row[]> = ref(rows),
+  getRow?: ReadRow,
+): Mounted {
   let targets: ReturnType<typeof useActionTargets> | undefined;
   const showTable = ref(true);
   const Table = defineComponent({
@@ -201,7 +206,11 @@ function mountPanel(shownRows: Ref<Row[]> = ref(rows)): Mounted {
         refreshCallback: () => {
           refreshes += 1;
         },
-        rowNavigation: { rows: () => shownRows.value, rowIdKey: "_id" },
+        rowNavigation: {
+          rows: () => shownRows.value,
+          rowIdKey: "_id",
+          getRow,
+        },
         recordScope: { tableId: "requests", isSoleTableView: true },
       });
       return () => h("table");
@@ -480,6 +489,88 @@ describe("deep link to a row the table does not list", () => {
   });
 });
 
+describe("showing another row from the panel", () => {
+  const older: Row = { _id: "r9", name: "Older" };
+  const notFoundError = () =>
+    Object.assign(new Error("Not Found"), { statusCode: 404 });
+  const showRow = (rowOrId: Row | string) =>
+    (
+      useRowSidePanelContent().value?.componentOptions.showRow as (
+        rowOrId: Row | string,
+      ) => Promise<void>
+    )(rowOrId);
+
+  it("moves the highlight, the position and ?record= onto a listed row", async () => {
+    const { host, targets } = mountPanel();
+    targets.handleCustomRowAction(panelAction(), rows[0]);
+    await settle();
+    await showRow("r3");
+    await settle();
+    expect(shownName(host)).toBe("Third");
+    expect(position(host)).toBe("side_panel.position(3/3)");
+    expect(useRowSidePanelContent().value?.rowKey).toBe("r3");
+    expect(window.location.search).toBe("?record=r3");
+    await showRow(rows[1]!);
+    await settle();
+    expect(position(host)).toBe("side_panel.position(2/3)");
+  });
+
+  it("reads an unlisted row by id, shown without a position", async () => {
+    const getRow = vi.fn(async () => older);
+    const { host, targets } = mountPanel(ref(rows), getRow);
+    targets.handleCustomRowAction(panelAction(), rows[0]);
+    await settle();
+    await showRow("r9");
+    await settle();
+    expect(getRow).toHaveBeenCalledWith("r9");
+    expect(shownName(host)).toBe("Older");
+    expect(position(host)).toBeUndefined();
+    expect(useRowSidePanelContent().value?.rowKey).toBe("r9");
+    expect(window.location.search).toBe("?record=r9");
+  });
+
+  it("says a row its route answers 404 for is gone", async () => {
+    const { host, targets } = mountPanel(ref(rows), async () => {
+      throw notFoundError();
+    });
+    targets.handleCustomRowAction(panelAction(), rows[0]);
+    await settle();
+    await showRow("gone");
+    await settle();
+    expect(query(host, "[data-dms-row-side-panel-not-found]")).not.toBeNull();
+    expect(useRowSidePanelContent().value?.rowKey).toBeUndefined();
+    expect(window.location.search).toBe("?record=gone");
+  });
+
+  it("rejects a row it cannot read, keeping the row it shows", async () => {
+    const { host, targets } = mountPanel();
+    targets.handleCustomRowAction(panelAction(), rows[0]);
+    await settle();
+    await expect(showRow("r9")).rejects.toThrow("r9");
+    await settle();
+    expect(shownName(host)).toBe("First");
+    expect(window.location.search).toBe("?record=r1");
+  });
+
+  it("leaves the panel shut when it closed while the row was read", async () => {
+    let answer!: (row: Row) => void;
+    const { host, targets } = mountPanel(
+      ref(rows),
+      () => new Promise((resolve) => (answer = resolve)),
+    );
+    targets.handleCustomRowAction(panelAction(), rows[0]);
+    await settle();
+    const shown = showRow("r9");
+    closeRowSidePanel();
+    answer(older);
+    await shown;
+    await settle();
+    expect(useRowSidePanelContent().value).toBeNull();
+    expect(query(host, "[data-dms-side-panel]")).toBeNull();
+    expect(window.location.search).toBe("");
+  });
+});
+
 describe("side panel on a missing row", () => {
   const notFound = (host: ParentNode) =>
     query(host, "[data-dms-row-side-panel-not-found]");

package/frontend-vue/tests/save-bar.test.ts

@@ -61,7 +61,7 @@ afterEach(() => {
   vi.unstubAllGlobals();
 });
 
-it("shows an empty modal action form's way out and its held submit", async () => {
+it("shows a modal action form's way out and its ready submit", async () => {
   const { onCancel } = await mount({
     variant: "band",
     kind: "action",
@@ -73,12 +73,24 @@ it("shows an empty modal action form's way out and its held submit", async () =>
   expect(host.firstElementChild!.getAttribute("aria-hidden")).toBeNull();
   expect(buttons()).toEqual([
     { label: "dms.button.cancel", disabled: false },
-    { label: "Invite", disabled: true },
+    { label: "Invite", disabled: false },
   ]);
   host.querySelector("button")!.click();
   expect(onCancel).toHaveBeenCalledOnce();
 });
 
+it("sends an untouched page action form as it is, its submit alone", async () => {
+  await mount({
+    variant: "band",
+    kind: "action",
+    dirty: false,
+    saveLabel: "Send",
+  });
+
+  expect(host.firstElementChild!.getAttribute("aria-hidden")).toBeNull();
+  expect(buttons()).toEqual([{ label: "Send", disabled: false }]);
+});
+
 it("resets an action form once a value changed, and sends it", async () => {
   await mount({
     variant: "band",
@@ -146,7 +158,7 @@ it("gives Cancel and Unsaved changes the same fixed height", async () => {
 });
 
 it("keeps a hidden band's place in its footer", async () => {
-  await mount({ variant: "band", kind: "action", dirty: false });
+  await mount({ variant: "band", kind: "record", dirty: false });
 
   expect(anchor().getAttribute("aria-hidden")).toBe("true");
   expect(classesOf(anchor())).toContain("invisible");

package/frontend-vue/tests/save-status-error.test.ts

@@ -56,11 +56,11 @@ describe("DmsSaveStatus: a failed save", () => {
     expect(onRetry).toHaveBeenCalledOnce();
   });
 
-  it("turns the header pill red, its wording unchanged", async () => {
+  it("turns the header pill red and says it was not saved", async () => {
     await mount(() => h(InstantSaveBadge, { state: "error" }));
     const pill = host.querySelector<HTMLElement>("[data-instant-save-badge]")!;
 
-    expect(pill.textContent?.trim()).toBe("Saved instantly");
+    expect(pill.textContent?.trim()).toBe("Not saved");
     expect(pill.className).toContain("text-error");
   });
 });

package/frontend-vue/tests/table-row-action-errors.test.ts

@@ -140,7 +140,7 @@ describe("Table row actions: refusals", () => {
         label: "Resend",
         target: {
           type: "api",
-          url: "/api/invites/{_id}/resend",
+          url: "/api/invites/{{row._id}}/resend",
           successMessage: "Sent",
         },
         confirm: { title: "Resend?", description: "" },
@@ -170,7 +170,7 @@ describe("Table row actions: refusals", () => {
         target: {
           type: "api",
           method: "GET",
-          url: "/api/invites/{_id}/link",
+          url: "/api/invites/{{row._id}}/link",
           successMessage: "Copied",
           copy: "url",
         },
@@ -267,7 +267,7 @@ describe("Table row actions: refusals", () => {
         label: "Ban",
         target: {
           type: "api",
-          url: "/api/users/{_id}/ban",
+          url: "/api/users/{{row._id}}/ban",
           body: { notify: true, scope: "all" },
           successMessage: "Banned",
         },
@@ -293,7 +293,7 @@ describe("Table row actions: refusals", () => {
     const { deleteRows } = await rowActions();
 
     const done = await deleteRows(["t1"], {
-      confirm: { from: "/api/task/{id}/delete-confirm" },
+      confirm: { from: "/api/task/{{row.id}}/delete-confirm" },
     });
 
     expect(done).toBe(true);
@@ -329,7 +329,7 @@ describe("Table row actions: refusals", () => {
     const { deleteRows } = await rowActions();
 
     await deleteRows(["t1", "t2"], {
-      confirm: { from: "/api/task/{id}/delete-confirm" },
+      confirm: { from: "/api/task/{{row.id}}/delete-confirm" },
     });
 
     expect(api).not.toHaveBeenCalledWith("/api/task/t1/delete-confirm");

package/frontend-vue/tests/table-row-hover.test.ts

@@ -164,13 +164,13 @@ describe("rowCustomActions", () => {
   const stopSelling: CustomRowAction = {
     id: "stop_selling",
     label: "Stop selling",
-    target: { type: "api", url: "/plans/{_id}/stop", method: "POST" },
+    target: { type: "api", url: "/plans/{{row._id}}/stop", method: "POST" },
     rule: { field: "isActive", equals: true },
   };
   const remove: CustomRowAction = {
     id: "delete",
     label: "Delete",
-    target: { type: "api", url: "/plans/{_id}", method: "DELETE" },
+    target: { type: "api", url: "/plans/{{row._id}}", method: "DELETE" },
     rule: { field: "workspaces", equals: 0 },
   };