@antelopejs/dms 0.7.4 → 0.7.6

package/frontend-vue/tests/field-suffix-count.test.ts

@@ -0,0 +1,120 @@
+// @vitest-environment jsdom
+/**
+ * A number field writes its unit after the box ("30 days"), and a text field
+ * or a text area asked for it counts the characters typed, out of its
+ * `maxLength` ("4 / 60"). Without either option, the control is unchanged.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  type App,
+  type Component,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+} from "vue";
+import { characterCountText } from "../layers/dms-ui/app/build/utils/characterCount";
+
+let app: App | undefined;
+let host: HTMLDivElement;
+
+const Control = (tag: string) =>
+  defineComponent({
+    inheritAttrs: false,
+    setup:
+      (_, { slots, attrs }) =>
+      () =>
+        h("div", { "data-control": tag }, [
+          h(tag, { ...attrs }),
+          slots.trailing?.(),
+        ]),
+  });
+
+async function mount(component: Component, props: Record<string, unknown>) {
+  app = createApp({ render: () => h(component, props) });
+  app.component("UInput", Control("input"));
+  app.component("UTextarea", Control("textarea"));
+  app.component("UInputNumber", Control("input"));
+  app.mount(host);
+  await nextTick();
+}
+
+const load = async (name: string) =>
+  (await import(`../layers/dms-ui/app/components/form/components/${name}.vue`))
+    .default as Component;
+
+beforeEach(() => {
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string) => (text.startsWith("$") ? `t(${text})` : text),
+  }));
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+describe("characterCountText", () => {
+  it("counts out of the limit, or alone", () => {
+    expect(characterCountText("Acme", 60)).toBe("4 / 60");
+    expect(characterCountText("Acme")).toBe("4");
+    expect(characterCountText(undefined, 60)).toBe("0 / 60");
+    expect(characterCountText("👋🏽", 10)).toBe("2 / 10");
+  });
+});
+
+describe("a text field's counter", () => {
+  it("shows the count in the field when asked", async () => {
+    await mount(await load("InputText"), {
+      modelValue: "Acme",
+      maxLength: 60,
+      showCount: true,
+    });
+    expect(
+      host.querySelector("[data-character-count]")?.textContent?.trim(),
+    ).toBe("4 / 60");
+    const input = host.querySelector("input")!;
+    expect(input.getAttribute("maxlength")).toBe("60");
+    expect(input.hasAttribute("showcount")).toBe(false);
+  });
+
+  it("draws no counter by default", async () => {
+    await mount(await load("InputText"), { modelValue: "Acme", maxLength: 60 });
+    expect(host.querySelector("[data-character-count]")).toBeNull();
+    expect(host.querySelector("input")!.getAttribute("maxlength")).toBe("60");
+  });
+
+  it("counts under a text area", async () => {
+    await mount(await load("Textarea"), {
+      modelValue: "Hello",
+      maxLength: 280,
+      showCount: true,
+    });
+    expect(
+      host.querySelector("[data-character-count]")?.textContent?.trim(),
+    ).toBe("5 / 280");
+    expect(host.querySelector("textarea")!.hasAttribute("showcount")).toBe(
+      false,
+    );
+  });
+});
+
+describe("a number field's unit", () => {
+  it("writes the unit after the field, translated", async () => {
+    await mount(await load("InputNumber"), {
+      modelValue: 30,
+      suffix: "$billing.days",
+    });
+    const suffix = host.querySelector("[data-field-suffix]");
+    expect(suffix?.textContent?.trim()).toBe("t($billing.days)");
+    expect(host.querySelector("input")!.hasAttribute("suffix")).toBe(false);
+  });
+
+  it("draws no unit by default", async () => {
+    await mount(await load("InputNumber"), { modelValue: 30 });
+    expect(host.querySelector("[data-field-suffix]")).toBeNull();
+  });
+});

package/frontend-vue/tests/form-section-nav-groups.test.ts

@@ -0,0 +1,116 @@
+// @vitest-environment jsdom
+/**
+ * A long sectioned form groups its side navigation under headings: the
+ * sections naming the same `navGroup` one after the other share one. The
+ * row of chips lists every section without them.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { type App, createApp, defineComponent, h, nextTick } from "vue";
+import {
+  groupSectionsForNav,
+  layoutSections,
+} from "../layers/dms-ui/app/build/composables/form/formSections";
+import FormSectionNav from "../layers/dms-ui/app/build/components/form/FormSectionNav.vue";
+
+const field = (id: string) => ({
+  id,
+  component: { componentName: "dms-input-text" },
+});
+
+const SECTIONS = [
+  { id: "plan", label: "Plan", fieldIds: ["plan"] },
+  {
+    id: "dunning",
+    label: "Dunning",
+    navGroup: "$billing",
+    fieldIds: ["dunning"],
+  },
+  { id: "tax", label: "Tax", navGroup: "$billing", fieldIds: ["tax"] },
+  { id: "terms", label: "Terms", navGroup: "Legal", fieldIds: ["terms"] },
+];
+
+const layout = layoutSections(
+  ["plan", "dunning", "tax", "terms"].map(field),
+  SECTIONS,
+);
+
+let app: App | undefined;
+let host: HTMLDivElement;
+
+async function mount(variant: "list" | "chips") {
+  app = createApp({
+    render: () =>
+      h(FormSectionNav, {
+        variant,
+        sections: layout.sections,
+        states: {},
+        anchorId: (id: string) => `form-${id}`,
+      }),
+  });
+  app.component("UIcon", defineComponent({ render: () => h("i") }));
+  app.mount(host);
+  await nextTick();
+}
+
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string) => (text.startsWith("$") ? `t(${text})` : text),
+  }));
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+describe("groupSectionsForNav", () => {
+  it("cuts the sections wherever their heading changes", () => {
+    expect(
+      groupSectionsForNav(layout.sections).map((group) => [
+        group.label,
+        group.sections.map((section) => section.id),
+      ]),
+    ).toEqual([
+      [undefined, ["plan"]],
+      ["$billing", ["dunning", "tax"]],
+      ["Legal", ["terms"]],
+    ]);
+  });
+
+  it("keeps a form without groups in one run", () => {
+    const plain = layoutSections(
+      [field("a"), field("b")],
+      [
+        { id: "a", label: "A", fieldIds: ["a"] },
+        { id: "b", label: "B", fieldIds: ["b"] },
+      ],
+    );
+    expect(groupSectionsForNav(plain.sections)).toHaveLength(1);
+  });
+});
+
+describe("the side navigation", () => {
+  it("titles each run, and names its list by it", async () => {
+    await mount("list");
+    const lists = [...host.querySelectorAll("ul")];
+    expect(lists).toHaveLength(3);
+    expect(lists[0]!.hasAttribute("aria-labelledby")).toBe(false);
+    const headings = lists.slice(1).map((list) => {
+      const id = list.getAttribute("aria-labelledby")!;
+      return document.getElementById(id)?.textContent?.trim();
+    });
+    expect(headings).toEqual(["t($billing)", "Legal"]);
+    expect(lists[1]!.querySelectorAll("li")).toHaveLength(2);
+  });
+
+  it("lists the chips in one row, without headings", async () => {
+    await mount("chips");
+    expect(host.querySelectorAll("ul")).toHaveLength(1);
+    expect(host.querySelectorAll("li")).toHaveLength(4);
+    expect(host.querySelector("[aria-labelledby]")).toBeNull();
+  });
+});

package/frontend-vue/tests/nav-card-badge.test.ts

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { createApp, defineComponent, h, type App } from "vue";
-import { afterEach, expect, it } from "vitest";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import NavCard from "../layers/dms-ui/app/components/card/NavCard.vue";
 
 // A nav card of the settings overview carries its page's navigation badge in
@@ -39,6 +39,10 @@ function mountCard(props: Record<string, unknown>): HTMLElement {
 const headRow = (container: HTMLElement) =>
   container.querySelector("h3")?.parentElement as HTMLElement;
 
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+});
+
 afterEach(() => {
   app?.unmount();
   app = undefined;

package/frontend-vue/tests/nuxt-ui-aria-labels.test.ts

@@ -0,0 +1,58 @@
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+import { describe, expect, it } from "vitest";
+import coreEn from "../layers/dms-core/i18n/locales/core-en-GB.json";
+import coreFr from "../layers/dms-core/i18n/locales/core-fr-FR.json";
+
+// Nuxt UI hard-codes these labels in English, and its locales do not carry
+// them: each use has to bind its own, translated.
+const LABELLED_TAGS = {
+  UBreadcrumb: "dms.a11y.breadcrumb",
+  USkeleton: "dms.a11y.loading",
+} as const;
+const LOCALES = { "en-GB": coreEn, "fr-FR": coreFr };
+
+function walk(directory: string): string[] {
+  return readdirSync(directory).flatMap((name) => {
+    const path = join(directory, name);
+    return statSync(path).isDirectory() ? walk(path) : [path];
+  });
+}
+
+function lookup(messages: unknown, key: string): unknown {
+  return key
+    .split(".")
+    .reduce<unknown>(
+      (node, part) => (node as Record<string, unknown> | undefined)?.[part],
+      messages,
+    );
+}
+
+describe("Nuxt UI hard-coded aria-labels", () => {
+  const sources = walk(join(process.cwd(), "layers"))
+    .filter((path) => path.endsWith(".vue"))
+    .map((path) => ({
+      path: relative(process.cwd(), path),
+      text: readFileSync(path, "utf8"),
+    }));
+
+  for (const [tag, key] of Object.entries(LABELLED_TAGS)) {
+    it(`binds a translated aria-label on every ${tag}`, () => {
+      const tagPattern = new RegExp(`<${tag}\\b[^>]*?>`, "gs");
+      const offenders = sources.flatMap(({ path, text }) =>
+        [...text.matchAll(tagPattern)]
+          .filter(([found]) => !found.includes(`:aria-label="t('${key}')"`))
+          .map(() => path),
+      );
+
+      expect(offenders).toEqual([]);
+    });
+
+    it(`translates ${key} in every locale`, () => {
+      for (const messages of Object.values(LOCALES)) {
+        expect(lookup(messages, key)).toBeTypeOf("string");
+      }
+      expect(lookup(coreFr, key)).not.toBe(lookup(coreEn, key));
+    });
+  }
+});

package/frontend-vue/tests/page-fill-height.test.ts

@@ -68,11 +68,11 @@ const pageLayout = ref<PageLayoutFixture | null>(null);
 // is pending after a client navigation, once a short delay passes).
 const PAGE_SKELETON_MARKUP =
   '<div aria-hidden="true" class="dms-page-skeleton space-y-6 hidden [html[data-dms-role-preview=pending]_&amp;]:block"><!--v-if-->' +
-  '<div class="dms-card space-y-4 p-[18px]"><USkeleton class="h-3.5 w-40"></USkeleton><!--[-->' +
+  '<div class="dms-card space-y-4 p-[18px]"><USkeleton aria-label="dms.a11y.loading" class="h-3.5 w-40"></USkeleton><!--[-->' +
   ["72%", "58%", "66%", "44%"]
     .map(
       (width) =>
-        `<USkeleton class="h-2.5" style="width:${width};"></USkeleton>`,
+        `<USkeleton aria-label="dms.a11y.loading" class="h-2.5" style="width:${width};"></USkeleton>`,
     )
     .join("") +
   "<!--]--></div></div>";

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

@@ -104,3 +104,52 @@ it("lists a record form's unsaved changes beside Discard and Save", async () =>
     "dms.save_bar.save",
   ]);
 });
+
+const classesOf = (element: Element | null | undefined) =>
+  (element?.className ?? "").split(/\s+/);
+const anchor = () => host.firstElementChild!;
+const bar = () => anchor().firstElementChild!;
+
+it("takes no space while a clean page form's bar hides", async () => {
+  await mount({ variant: "floating", dirty: false });
+
+  expect(anchor().getAttribute("aria-hidden")).toBe("true");
+  expect(classesOf(anchor())).toEqual(
+    expect.arrayContaining(["sticky", "h-0"]),
+  );
+  expect(classesOf(bar())).toEqual(
+    expect.arrayContaining(["absolute", "invisible"]),
+  );
+});
+
+it("floats over the form when it shows, making room under the last field", async () => {
+  await mount({ variant: "floating", dirty: true, changes: ["Name"] });
+
+  expect(anchor().getAttribute("aria-hidden")).toBeNull();
+  expect(classesOf(anchor())).not.toContain("h-0");
+  expect(classesOf(anchor())).toContain("h-[calc(var(--dms-save-bar-h)+2rem)]");
+  expect(classesOf(bar())).toEqual(
+    expect.arrayContaining(["absolute", "h-(--dms-save-bar-h)"]),
+  );
+  expect(classesOf(bar())).not.toContain("invisible");
+});
+
+it("gives Cancel and Unsaved changes the same fixed height", async () => {
+  await mount({ variant: "floating", dirty: false, cancellable: true });
+  const cancelBar = classesOf(bar());
+  expect(buttons()).toEqual([{ label: "dms.button.cancel", disabled: false }]);
+  app?.unmount();
+
+  await mount({ variant: "floating", dirty: true, changes: ["Name"] });
+  expect(cancelBar).toContain("h-(--dms-save-bar-h)");
+  expect(classesOf(bar())).toContain("h-(--dms-save-bar-h)");
+});
+
+it("keeps a hidden band's place in its footer", async () => {
+  await mount({ variant: "band", kind: "action", dirty: false });
+
+  expect(anchor().getAttribute("aria-hidden")).toBe("true");
+  expect(classesOf(anchor())).toContain("invisible");
+  expect(classesOf(anchor())).not.toContain("h-0");
+  expect(classesOf(anchor())).not.toContain("absolute");
+});

package/frontend-vue/tests/stat-group-detail-lines.test.ts

@@ -0,0 +1,63 @@
+import { createSSRApp, defineComponent, h, ref, type Component } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import StatGroup from "../layers/dms-ui/app/components/stat-group/StatGroup.vue";
+import NavCard from "../layers/dms-ui/app/components/card/NavCard.vue";
+
+// A detail or a title cut on its first line loses what it says: a stat
+// group's details and a nav card's title take two lines before the ellipsis.
+
+const Slot = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", slots.default?.()),
+});
+
+async function render(component: Component, props: Record<string, unknown>) {
+  const app = createSSRApp({ render: () => h(component, props) });
+  for (const name of ["UIcon", "USkeleton", "DmsLink"]) {
+    app.component(name, Slot);
+  }
+  return renderToString(app);
+}
+
+beforeAll(() => {
+  vi.stubGlobal("useI18n", () => ({ locale: ref("en-GB"), t: String }));
+});
+
+const DETAIL = "Next invoice on Nov 1 for the three seats left";
+
+function detailClasses(html: string): string {
+  const element = new RegExp(
+    `<(?:p|small) class="([^"]*)"[^>]*>\\s*${DETAIL}`,
+  ).exec(html);
+  return element?.[1] ?? "";
+}
+
+describe("StatGroup detail", () => {
+  it.each(["joined", "cards"])(
+    "gives a %s cell's detail two lines before its ellipsis",
+    async (layout) => {
+      const html = await render(StatGroup, {
+        layout,
+        items: [{ eyebrow: "Billing", value: "On", detail: DETAIL }],
+      });
+      expect(detailClasses(html)).toContain("line-clamp-2");
+      expect(detailClasses(html)).not.toContain("truncate");
+    },
+  );
+});
+
+describe("NavCard title", () => {
+  it("takes two lines before its ellipsis", async () => {
+    const html = await render(NavCard, {
+      to: "/workspaces?view=past-due",
+      icon: "i-ph-warning",
+      title: "Workspaces past due for more than seven days",
+    });
+    const title = /<h3 class="([^"]*)"/.exec(html)?.[1] ?? "";
+    expect(title).toContain("line-clamp-2");
+    expect(title).not.toContain("truncate");
+  });
+});

package/frontend-vue/tests/tab-fit.test.ts

@@ -0,0 +1,99 @@
+// @vitest-environment jsdom
+/**
+ * `fit` draws a horizontal pill list as wide as its tabs: the list stops
+ * taking the column's width and the triggers stop growing to share it. A
+ * link list, a vertical one and a list without `fit` keep their classes.
+ */
+import * as vue from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { AxeOrientation } from "../layers/dms-core/app/types/orientation";
+import { Color } from "../layers/dms-core/app/types/color";
+import { Size } from "../layers/dms-core/app/types/size";
+import { TabVariant } from "../layers/dms-ui/app/composables/tab/types/props";
+
+vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
+  useChartFetch: () => ({ data: vue.ref(null) }),
+}));
+
+interface TabsUi {
+  list?: unknown;
+  trigger?: unknown;
+}
+
+let received: TabsUi = {};
+let app: vue.App | undefined;
+
+const Tabs = vue.defineComponent({
+  props: { ui: { type: Object, default: () => ({}) } },
+  setup: (props) => () => {
+    received = props.ui as TabsUi;
+    return vue.h("div");
+  },
+});
+
+const classesOf = (value: unknown): string =>
+  [value].flat(Infinity).filter(Boolean).join(" ");
+
+async function mount(props: Record<string, unknown>): Promise<TabsUi> {
+  const { default: Tab } = await import(
+    "../layers/dms-ui/app/components/tab/Tab.vue"
+  );
+  app = vue.createApp({
+    render: () =>
+      vue.h(Tab, {
+        items: [
+          { label: "Activity", slot: "activity" },
+          { label: "Logins", slot: "logins" },
+        ],
+        componentId: "tabs",
+        pageId: "dashboard",
+        ...props,
+      }),
+  });
+  app.component("UTabs", Tabs);
+  app.mount(document.createElement("div"));
+  await vue.nextTick();
+  return received;
+}
+
+beforeEach(() => {
+  for (const name of ["computed", "ref", "useTemplateRef"] as const) {
+    vi.stubGlobal(name, vue[name]);
+  }
+  vi.stubGlobal("AxeOrientation", AxeOrientation);
+  vi.stubGlobal("Color", Color);
+  vi.stubGlobal("Size", Size);
+  vi.stubGlobal("useI18n", () => ({ locale: vue.ref("en-US"), t: String }));
+  vi.stubGlobal("useTranslation", () => ({ processI18n: String }));
+  vi.stubGlobal("useWatch", () => ({ state: vue.ref({}) }));
+  vi.stubGlobal("useTab", () => ({ activeTab: vue.ref("0") }));
+  vi.stubGlobal("useTabShortcuts", () => {});
+});
+
+afterEach(() => {
+  app?.unmount();
+  vi.unstubAllGlobals();
+});
+
+describe("Tab fit", () => {
+  it("hugs a horizontal pill list to its tabs", async () => {
+    const ui = await mount({ fit: true });
+    expect(classesOf(ui.list)).toContain("w-fit");
+    expect(classesOf(ui.trigger)).toContain("grow-0");
+  });
+
+  it("keeps the full width by default", async () => {
+    const ui = await mount({});
+    expect(classesOf(ui.list)).not.toContain("w-fit");
+    expect(classesOf(ui.trigger)).toBe("");
+  });
+
+  it.each([
+    { variant: TabVariant.link },
+    { orientation: AxeOrientation.vertical },
+  ])("leaves %o as it was", async (props) => {
+    const ui = await mount({ fit: true, ...props });
+    expect(classesOf(ui.list)).not.toContain("w-fit");
+    expect(classesOf(ui.trigger)).toBe("");
+  });
+});

package/frontend-vue/tests/table-cell-sublines.test.ts

@@ -448,6 +448,21 @@ describe("identity sub-line", () => {
     expect(sub?.className).toContain("text-muted");
   });
 
+  it("reads each row's tile icon from iconField, falling back to icon", async () => {
+    const identity = await identityFormatter();
+    const options = { iconField: "icon", icon: "i-ph-puzzle-piece" };
+    const tileOf = (row: Record<string, unknown>) =>
+      render(() =>
+        (identity.default as Formatter)("Exports", "en", options, row),
+      )
+        .querySelector("[data-icon]")
+        ?.getAttribute("data-icon");
+
+    expect(tileOf({ icon: "i-ph-export" })).toBe("i-ph-export");
+    expect(tileOf({ icon: "" })).toBe("i-ph-puzzle-piece");
+    expect(tileOf({})).toBe("i-ph-puzzle-piece");
+  });
+
   it("draws an empty issuer as its translated empty label and icon", async () => {
     const identity = await identityFormatter();
     const cell = render(() =>

package/frontend-vue/tests/table-cell-wrap.test.ts

@@ -2,6 +2,7 @@ import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 import { tv } from "tailwind-variants";
 import { EYEBROW_CLASS } from "../layers/dms-ui/app/build/utils/eyebrow";
+import { REORDER_HANDLE_CLASS } from "../layers/dms-ui/app/build/composables/table-view/useReorderHandles";
 
 const tableSource = readFileSync(
   new URL(
@@ -17,8 +18,9 @@ const themeSource = tableSource.slice(
 const theme = new Function(
   "tv",
   "EYEBROW_CLASS",
+  "REORDER_HANDLE_CLASS",
   `${themeSource}; return theme;`,
-)(tv, EYEBROW_CLASS);
+)(tv, EYEBROW_CLASS, REORDER_HANDLE_CLASS);
 
 describe("Table grid cell layout theme", () => {
   it.each([undefined, false])("preserves the default for %s", (cellWrap) => {
@@ -36,8 +38,30 @@ describe("Table grid cell layout theme", () => {
 
   it("preserves pinned cell and table layout classes", () => {
     expect(theme({ cellWrap: true }).table()).toBe(theme().table());
-    expect(theme({ cellWrap: true }).rowCell({ pinned: "left" })).toBe(
-      theme().rowCell({ pinned: "left" }),
+    const pinned = theme().rowCell({ pinned: "left" }).split(" ");
+    const wrapped = theme()
+      .rowCell({ pinned: "left", cellWrap: true })
+      .split(" ");
+    expect(wrapped.filter((name: string) => !pinned.includes(name))).toEqual([
+      "py-2.5",
+    ]);
+    expect(pinned.filter((name: string) => !wrapped.includes(name))).toEqual([
+      "py-0",
+    ]);
+  });
+
+  it("pads only a wrapped cell, so its lines clear the row's hairlines", () => {
+    expect(theme().rowCell({ cellWrap: true })).toContain("py-2.5");
+    expect(theme().rowCell({ cellWrap: true })).toContain("h-11");
+    expect(theme().rowCell({ cellWrap: true })).not.toContain("py-0");
+    for (const cellWrap of [undefined, false]) {
+      expect(theme().rowCell({ cellWrap })).toContain("py-0");
+    }
+  });
+
+  it("reads each column's policy for its cell too", () => {
+    expect(tableSource).toMatch(
+      /uiTable\.rowCell\(\{[^}]*cellWrap: \(cell\.column\.columnDef as TableColumn<T>\)\s*\.cellWrap,?\s*\}\)/,
     );
   });
 

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

@@ -73,6 +73,11 @@ function fetchError(status: number | undefined, data?: unknown) {
   });
 }
 
+const shownRows = [
+  { _id: "t1", name: "Write the report" },
+  { _id: "t2", name: "Review the draft" },
+];
+
 async function rowActions() {
   const { useTableRowActions } = await import(
     "../layers/dms-ui/app/build/composables/table-view/useTableViewRowActions"
@@ -84,6 +89,7 @@ async function rowActions() {
     pageId: "tasks",
     formComponents: {},
     refreshCallback: refresh,
+    rowNavigation: { rows: () => shownRows, rowIdKey: "_id" },
   });
 }
 
@@ -298,6 +304,26 @@ describe("Table row actions: refusals", () => {
     });
   });
 
+  it("words a fixed dialog with the fields of the one row it deletes", async () => {
+    api.mockResolvedValue(1);
+    const { deleteRows } = await rowActions();
+
+    await deleteRows(["t1"], { confirm: { title: "Delete {name}?" } });
+
+    expect(dialogs[0]!.options.title).toBe("Delete Write the report?");
+  });
+
+  it("words a fixed dialog with the count of the rows it deletes", async () => {
+    api.mockResolvedValue(2);
+    const { deleteRows } = await rowActions();
+
+    await deleteRows(["t1", "t2"], {
+      confirm: { title: "Delete {count} tasks?" },
+    });
+
+    expect(dialogs[0]!.options.title).toBe("Delete 2 tasks?");
+  });
+
   it("keeps the generic confirmation for several rows of a `from` dialog", async () => {
     api.mockResolvedValue(2);
     const { deleteRows } = await rowActions();