@antelopejs/dms 0.7.10 → 0.7.12

package/frontend-vue/tests/form-enclosing-form.test.ts

@@ -0,0 +1,141 @@
+// @vitest-environment jsdom
+/**
+ * What a `Form` offers a custom field through `useEnclosingForm`: submitting
+ * the form as its save button does, a validator that can stop a submit and
+ * leaves with its component, and focusing a field by id. A page opened on a
+ * field's anchor focuses that field.
+ */
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { createApp, defineComponent, h } from "vue";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  FORM_HANDLE_KEY,
+  type FormHandle,
+  linkedFieldId,
+} from "../layers/dms-ui/app/build/composables/form/enclosingForm";
+import {
+  type EnclosingForm,
+  useEnclosingForm,
+} from "../layers/dms-ui/app/composables/form/useEnclosingForm";
+import type { FormValidator } from "../layers/dms-ui/app/composables/form/types/validation";
+
+const FIELD_IDS = ["retentionDays", "requestLogMaxBodyKb"];
+const mounted: Array<{ unmount: () => void }> = [];
+
+afterEach(() => mounted.splice(0).forEach((app) => app.unmount()));
+
+interface FakeForm {
+  handle: FormHandle;
+  validators: Set<FormValidator>;
+}
+
+function fakeForm(): FakeForm {
+  const validators = new Set<FormValidator>();
+  return {
+    validators,
+    handle: {
+      submit: vi.fn(async () => {}),
+      registerValidator: (validator) => {
+        validators.add(validator);
+        return () => validators.delete(validator);
+      },
+      revealField: vi.fn(async () => {}),
+    },
+  };
+}
+
+function mountField(
+  handle: FormHandle | null,
+  setup: (form: EnclosingForm | null) => void,
+) {
+  const app = createApp(
+    defineComponent({
+      setup() {
+        setup(useEnclosingForm());
+        return () => h("div");
+      },
+    }),
+  );
+  if (handle) app.provide(FORM_HANDLE_KEY, handle);
+  app.mount(document.createElement("div"));
+  mounted.push(app);
+  return app;
+}
+
+describe("useEnclosingForm", () => {
+  it("is null outside a Form", () => {
+    let form: EnclosingForm | null | undefined;
+    mountField(null, (enclosing) => (form = enclosing));
+    expect(form).toBeNull();
+  });
+
+  it("submits the form and focuses a field through the form", async () => {
+    const { handle } = fakeForm();
+    let form: EnclosingForm | null = null;
+    mountField(handle, (enclosing) => (form = enclosing));
+
+    await form!.submit();
+    await form!.focusField("retentionDays");
+
+    expect(handle.submit).toHaveBeenCalledOnce();
+    expect(handle.revealField).toHaveBeenCalledWith("retentionDays");
+  });
+
+  it("adds a validator that leaves with its component", () => {
+    const { handle, validators } = fakeForm();
+    const validator = () => false;
+    const app = mountField(handle, (form) => form?.addValidator(validator));
+
+    expect([...validators]).toEqual([validator]);
+
+    app.unmount();
+    mounted.splice(mounted.indexOf(app), 1);
+    expect(validators.size).toBe(0);
+  });
+
+  it("removes a validator on request", () => {
+    const { handle, validators } = fakeForm();
+    let remove: (() => void) | undefined;
+    mountField(handle, (form) => (remove = form?.addValidator(() => true)));
+
+    remove?.();
+    expect(validators.size).toBe(0);
+  });
+});
+
+describe("a field's anchor", () => {
+  it("names a field of the form by its id", () => {
+    expect(linkedFieldId("#retentionDays", FIELD_IDS)).toBe("retentionDays");
+    expect(
+      linkedFieldId("#request%4CogMaxBodyKb", ["requestLogMaxBodyKb"]),
+    ).toBe("requestLogMaxBodyKb");
+  });
+
+  it("names nothing for another anchor, none, or a broken one", () => {
+    expect(linkedFieldId("#dms-form-settings-section-logs", FIELD_IDS)).toBe(
+      undefined,
+    );
+    expect(linkedFieldId("", FIELD_IDS)).toBe(undefined);
+    expect(linkedFieldId("#%E0%A4%A", FIELD_IDS)).toBe(undefined);
+  });
+});
+
+describe("the Form", () => {
+  const formSource = readFileSync(
+    resolve(__dirname, "../layers/dms-ui/app/components/form/Form.vue"),
+    "utf8",
+  );
+
+  it("offers its fields the submit, its validators and the focus", () => {
+    expect(formSource).toMatch(
+      /provide\(FORM_HANDLE_KEY, \{\s*submit: async \(\) => \{\s*await form\.value\?\.submit\(\);\s*\},\s*registerValidator,\s*revealField,\s*\}\);/,
+    );
+  });
+
+  it("follows the anchor of a field once mounted, a page form only", () => {
+    expect(formSource).toMatch(
+      /if \(!inFormContainer && !container\) \{\s*const followFieldAnchor = \(\) => \{\s*const fieldId = linkedFieldId\(window\.location\.hash, allFieldIds\.value\);/,
+    );
+  });
+});

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

@@ -28,7 +28,7 @@ vi.mock(
   "../layers/dms-layout/app/build/components/layout/QuickActionsPopover.vue",
   () => ({ default: () => null }),
 );
-vi.mock("#dms-core/app/build/composables/page/usePageRecordLabel", () => ({
+vi.mock("#dms-core/app/composables/page/usePageRecordLabel", () => ({
   usePageRecordLabel: () => ({ label: ref(null) }),
 }));
 

package/frontend-vue/tests/input-number-adjust.test.ts

@@ -0,0 +1,176 @@
+// @vitest-environment jsdom
+/**
+ * A number field keeps a typed value within its bounds and on its steps when
+ * it is left or on Enter. It says so with `adjust` — 1020 typed in a field of
+ * steps of 50 kept as 1,000 — and draws the kept value again, so a module
+ * shows "1020 → 1,000" without remounting the field.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  type App,
+  type Component,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+} from "vue";
+import {
+  numberAdjustment,
+  parseTypedNumber,
+} from "../layers/dms-ui/app/build/utils/numberAdjustment";
+import type { InputNumberAdjustment } from "../layers/dms-ui/app/types/input-number";
+
+let app: App | undefined;
+let host: HTMLDivElement;
+
+// The Nuxt UI field as far as the wrapper sees it: it applies the typed text
+// on blur or Enter, kept within `min` / `max` and on `step`, then emits blur.
+const NumberField = defineComponent({
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: Number, default: undefined },
+    min: { type: Number, default: undefined },
+    max: { type: Number, default: undefined },
+    step: { type: Number, default: 1 },
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(props, { emit }) {
+    const apply = (input: HTMLInputElement) => {
+      const typed = Number(input.value.replace(/,/g, ""));
+      const bounded = Math.min(
+        props.max ?? Infinity,
+        Math.max(props.min ?? -Infinity, typed),
+      );
+      emit("update:modelValue", Math.round(bounded / props.step) * props.step);
+    };
+    return () =>
+      h("input", {
+        onBlur: (event: FocusEvent) => {
+          apply(event.target as HTMLInputElement);
+          emit("blur", event);
+        },
+        onKeydown: (event: KeyboardEvent) => {
+          if (event.key === "Enter") apply(event.target as HTMLInputElement);
+        },
+      });
+  },
+});
+
+async function mount(props: Record<string, unknown>) {
+  const value = ref<number | undefined>(props.modelValue as number);
+  const adjustments: InputNumberAdjustment[] = [];
+  const field = (
+    await import(
+      "../layers/dms-ui/app/components/form/components/InputNumber.vue"
+    )
+  ).default as Component;
+  app = createApp({
+    render: () =>
+      h(field, {
+        ...props,
+        modelValue: value.value,
+        "onUpdate:modelValue": (next: number) => (value.value = next),
+        onAdjust: (adjustment: InputNumberAdjustment) =>
+          adjustments.push(adjustment),
+      }),
+  });
+  app.component("UInputNumber", NumberField);
+  app.mount(host);
+  await nextTick();
+  return { value, adjustments, input: host.querySelector("input")! };
+}
+
+async function type(input: HTMLInputElement, text: string) {
+  input.value = text;
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+async function settled() {
+  await nextTick();
+  await nextTick();
+}
+
+beforeEach(() => {
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string) => text,
+  }));
+  vi.stubGlobal("useI18n", () => ({ locale: ref("en") }));
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+describe("parseTypedNumber", () => {
+  it("reads a number as the locale writes it", () => {
+    expect(parseTypedNumber("1,020", "en")).toBe(1020);
+    expect(parseTypedNumber(" -100 ", "en")).toBe(-100);
+    expect(parseTypedNumber("1 020,5", "fr")).toBe(1020.5);
+    expect(parseTypedNumber("", "en")).toBeNull();
+    expect(parseTypedNumber("abc", "en")).toBeNull();
+  });
+});
+
+describe("numberAdjustment", () => {
+  it("names the bound or the step the value was kept on", () => {
+    const bounds = { min: 0, max: 5000 };
+    expect(numberAdjustment(9000, 5000, bounds)?.reason).toBe("max");
+    expect(numberAdjustment(-3, 0, bounds)?.reason).toBe("min");
+    expect(numberAdjustment(1020, 1000, bounds)).toEqual({
+      typed: 1020,
+      value: 1000,
+      reason: "step",
+    });
+    expect(numberAdjustment(1000, 1000, bounds)).toBeNull();
+    expect(numberAdjustment(null, 1000, bounds)).toBeNull();
+  });
+});
+
+describe("DmsInputNumber adjust", () => {
+  it("says the field kept a typed value on its steps when it is left", async () => {
+    const { input, adjustments, value } = await mount({
+      modelValue: 1000,
+      step: 50,
+      min: 0,
+    });
+    await type(input, "1020");
+    input.dispatchEvent(new FocusEvent("blur"));
+    await settled();
+    expect(value.value).toBe(1000);
+    expect(adjustments).toEqual([{ typed: 1020, value: 1000, reason: "step" }]);
+  });
+
+  it("says the field kept a typed value within its maximum on Enter", async () => {
+    const { input, adjustments } = await mount({ modelValue: 10, max: 100 });
+    await type(input, "250");
+    input.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
+    );
+    await settled();
+    expect(adjustments).toEqual([{ typed: 250, value: 100, reason: "max" }]);
+  });
+
+  it("redraws the kept value through the field's change handler", async () => {
+    const { input } = await mount({ modelValue: 1000, step: 50 });
+    const changes = vi.fn();
+    input.addEventListener("change", changes);
+    await type(input, "1020");
+    input.dispatchEvent(new FocusEvent("blur"));
+    await settled();
+    expect(changes).toHaveBeenCalledTimes(1);
+  });
+
+  it("stays quiet when the field keeps what was typed, or nothing was typed", async () => {
+    const { input, adjustments } = await mount({ modelValue: 10, step: 5 });
+    input.dispatchEvent(new FocusEvent("blur"));
+    await type(input, "15");
+    input.dispatchEvent(new FocusEvent("blur"));
+    await settled();
+    expect(adjustments).toEqual([]);
+  });
+});

package/frontend-vue/tests/live-hold-banner.test.ts

@@ -1,7 +1,10 @@
 // @vitest-environment jsdom
 /**
- * The strip of a held table: "N new · Show", Show reading the rows again.
+ * The strip of a held table: "N new · Show", Show reading the rows again,
+ * led by why the table holds by itself ("Table on hold · search active").
  */
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
 import { createApp, h, type App } from "vue";
 import { afterEach, expect, it, vi } from "vitest";
 
@@ -12,7 +15,7 @@ afterEach(() => {
   vi.unstubAllGlobals();
 });
 
-it("draws the banner and reads the rows on Show", async () => {
+async function mountBanner(props: Record<string, unknown>) {
   vi.stubGlobal("useI18n", () => ({
     t: (key: string, params?: { count?: number }) =>
       params ? `${key}:${params.count}` : key,
@@ -20,18 +23,73 @@ it("draws the banner and reads the rows on Show", async () => {
   const { default: LiveHoldBanner } = await import(
     "../layers/dms-ui/app/build/components/table-view/LiveHoldBanner.vue"
   );
-  const onShow = vi.fn();
   const host = document.createElement("div");
-  app = createApp({
-    render: () => h(LiveHoldBanner, { count: 3, onShow }),
-  });
+  app = createApp({ render: () => h(LiveHoldBanner, props) });
   app.component("UIcon", () => h("i"));
-  app.component("UButton", (props: { label: string }, { attrs }) =>
-    h("button", attrs, props.label),
+  app.component("UButton", (buttonProps: { label: string }, { attrs }) =>
+    h("button", attrs, buttonProps.label),
   );
   app.mount(host);
+  return host;
+}
+
+it("draws the banner and reads the rows on Show", async () => {
+  const onShow = vi.fn();
+  const host = await mountBanner({ count: 3, onShow });
 
   expect(host.textContent).toContain("dms.live.new_rows:3");
   host.querySelector("button")?.click();
   expect(onShow).toHaveBeenCalledTimes(1);
 });
+
+it("says why the table holds, with no count nor Show before anything came in", async () => {
+  const host = await mountBanner({ count: 0, reason: "searching" });
+
+  expect(host.textContent).toContain(
+    "dms.live.table_held · dms.live.held_searching",
+  );
+  expect(host.textContent).not.toContain("dms.live.new_rows");
+  expect(host.querySelector("button")).toBeNull();
+});
+
+it("adds the count and Show after the reason", async () => {
+  const host = await mountBanner({ count: 2, reason: "rowOpen" });
+
+  expect(host.textContent).toContain("dms.live.held_row_open");
+  expect(host.textContent).toContain("dms.live.new_rows:2");
+  expect(host.querySelector("button")).not.toBeNull();
+});
+
+it("has every reason in English and French", () => {
+  for (const file of ["ui-en-GB.json", "ui-fr-FR.json"]) {
+    const live = JSON.parse(
+      readFileSync(
+        resolve(__dirname, `../layers/dms-ui/i18n/locales/${file}`),
+        "utf8",
+      ),
+    ).dms.live;
+    for (const key of [
+      "table_held",
+      "held_row_open",
+      "held_searching",
+      "held_sorted",
+      "held_scrolled",
+    ]) {
+      expect(live[key], `${file} ${key}`).toBeTruthy();
+    }
+  }
+});
+
+it("words the count with missedLabel and adds the paused page's breakdown", async () => {
+  const host = await mountBanner({
+    count: 12,
+    missedLabel: "$api.live.new_requests",
+    detail: { text: "$api.live.in_5xx", params: { count: 2 }, tone: "error" },
+  });
+
+  expect(host.textContent).toContain("api.live.new_requests:12");
+  expect(host.textContent).not.toContain("dms.live.new_rows");
+  const detail = host.querySelector(".dms-live-hold-banner__detail");
+  expect(detail?.textContent?.trim()).toBe("api.live.in_5xx:2");
+  expect(detail?.classList.contains("text-error")).toBe(true);
+});

package/frontend-vue/tests/module-routing.test.ts

@@ -0,0 +1,139 @@
+/**
+ * A module's own address (`/modules/<id>`) has no page: the navigation that
+ * enters it goes to the module's landing page instead — its `landingPage`
+ * when the caller may open it, else its first page — keeping the query and
+ * the hash it was entered with. The middleware answers the landing page
+ * rather than navigating to it, so the module's address never renders and,
+ * in a server render, becomes the response's redirect.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ref } from "vue";
+import { MODULE_URL_PREFIX } from "../layers/dms-layout/app/types/page";
+
+interface TreeNode {
+  id: string;
+  fullSlug: string;
+  layoutUrl?: string;
+  hasAccess?: boolean;
+  isModuleRoot?: boolean;
+  children: Record<string, TreeNode>;
+  childrenOrders: string[];
+}
+
+type Middleware = (to: { path: string; fullPath: string }) => Promise<unknown>;
+
+const navigateDms = vi.fn();
+
+function node(
+  id: string,
+  fullSlug: string,
+  children: TreeNode[] = [],
+  page: Partial<TreeNode> = {},
+): TreeNode {
+  return {
+    id,
+    fullSlug,
+    children: Object.fromEntries(children.map((child) => [child.id, child])),
+    childrenOrders: children.map((child) => child.id),
+    ...page,
+  };
+}
+
+const PAGE = { layoutUrl: "/layout" };
+
+function treeOf(moduleRoot: TreeNode): TreeNode {
+  return node("", "/", [node("modules", "/modules", [moduleRoot])]);
+}
+
+const apiModule = (pages: Partial<Record<string, Partial<TreeNode>>> = {}) =>
+  node(
+    "api",
+    "/modules/api",
+    [
+      node("monitor", "/modules/api", [
+        node("routes", "/modules/api/routes", [], { ...PAGE, ...pages.routes }),
+        node("overview", "/modules/api/overview", [], {
+          ...PAGE,
+          ...pages.overview,
+        }),
+      ]),
+    ],
+    { isModuleRoot: true },
+  );
+
+function stubSiteLayout(moduleRoot: TreeNode, landingPage?: string) {
+  vi.stubGlobal("useSiteLayout", () => ({
+    siteLayout: ref({}),
+    siteLayoutTree: ref(treeOf(moduleRoot)),
+    modules: ref({ api: { id: "api", hasAccess: true, landingPage } }),
+    findMatchingRoute: (path: string) =>
+      path.startsWith("/modules/api/") ? { metadata: {} } : null,
+    loadSiteLayout: vi.fn(),
+  }));
+}
+
+async function enter(fullPath: string): Promise<unknown> {
+  const middleware = (
+    await import("../layers/dms-layout/app/middleware/module-routing.global")
+  ).default as unknown as Middleware;
+  const path = fullPath.replace(/[?#].*$/, "");
+  return middleware({ path, fullPath });
+}
+
+beforeEach(() => {
+  vi.resetModules();
+  vi.stubGlobal("defineDmsMiddleware", (handler: Middleware) => handler);
+  vi.stubGlobal("MODULE_URL_PREFIX", MODULE_URL_PREFIX);
+  vi.stubGlobal("navigateDms", navigateDms);
+  vi.stubGlobal("useHomepage", () => "/dashboard");
+  vi.stubGlobal("useModuleHistory", () => ({ record: vi.fn() }));
+  vi.stubGlobal("createError", (error: unknown) => error);
+});
+
+afterEach(() => {
+  navigateDms.mockReset();
+  vi.unstubAllGlobals();
+});
+
+describe("entering a module", () => {
+  it("goes to the module's landingPage", async () => {
+    stubSiteLayout(apiModule(), "overview");
+    expect(await enter("/modules/api")).toBe("/modules/api/overview");
+    expect(navigateDms).not.toHaveBeenCalled();
+  });
+
+  it("keeps the query and the hash it was entered with", async () => {
+    stubSiteLayout(apiModule(), "overview");
+    expect(await enter("/modules/api?live=0#errors")).toBe(
+      "/modules/api/overview?live=0#errors",
+    );
+  });
+
+  it("goes to the first page when there is no landingPage", async () => {
+    stubSiteLayout(apiModule());
+    expect(await enter("/modules/api")).toBe("/modules/api/routes");
+  });
+
+  it("goes to the first page the caller may open when the landingPage is closed to them", async () => {
+    stubSiteLayout(apiModule({ overview: { hasAccess: false } }), "overview");
+    expect(await enter("/modules/api")).toBe("/modules/api/routes");
+  });
+
+  it("sends to the homepage a caller who may open none of its pages", async () => {
+    stubSiteLayout(
+      apiModule({
+        routes: { hasAccess: false },
+        overview: { hasAccess: false },
+      }),
+      "overview",
+    );
+    await enter("/modules/api");
+    expect(navigateDms).toHaveBeenCalledWith("/dashboard", { replace: true });
+  });
+
+  it("leaves a module page alone", async () => {
+    stubSiteLayout(apiModule(), "overview");
+    expect(await enter("/modules/api/routes?tab=tester")).toBeUndefined();
+    expect(navigateDms).not.toHaveBeenCalled();
+  });
+});