@antelopejs/dms 0.7.11 → 0.7.13

package/frontend-vue/tests/chart-legend.test.ts

@@ -0,0 +1,133 @@
+/**
+ * A chart names its series in a legend drawn in the dashboard's colours, at
+ * the top of an axis chart or under a circular one unless `legendPosition`
+ * says otherwise. Inside a ChartCard the chart's legend stays off, the card
+ * heading its single series, until the card asks for it with
+ * `showSeriesLegend`: no raw Apex `legend` option is needed for either.
+ */
+import { createSSRApp, defineComponent, h, ref, type PropType } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import ChartCard from "../layers/dms-ui/app/components/chart/ChartCard.vue";
+import Chart from "../layers/dms-ui/app/components/chart/Chart.vue";
+import { useApexChart } from "../layers/dms-ui/app/composables/chart/useApexChart";
+import type { UseApexChartInput } from "../layers/dms-ui/app/composables/chart/useApexChart.types";
+import type { ChartSeries } from "../layers/dms-ui/app/composables/chart/types";
+
+const SERIES: ChartSeries[] = [
+  { name: "Average", data: [{ x: "10:00", y: 42 }] },
+  { name: "p95", data: [{ x: "10:00", y: 96 }] },
+];
+
+vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
+  useChartFetch: () => ({
+    data: ref({ value: 42, series: SERIES }),
+    isLoading: ref(false),
+  }),
+}));
+
+interface LegendOptions {
+  show: boolean;
+  position: string;
+}
+
+const LegendProbe = defineComponent({
+  props: {
+    options: {
+      type: Object as PropType<{ legend: LegendOptions }>,
+      required: true,
+    },
+  },
+  setup: (props) => () =>
+    h("output", {
+      "data-show": String(props.options.legend.show),
+      "data-position": props.options.legend.position,
+    }),
+});
+
+const Slot = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", slots.default?.()),
+});
+
+function legendOf(input: Partial<UseApexChartInput>) {
+  const chart = useApexChart(() => ({
+    type: "line",
+    series: SERIES,
+    ...input,
+  }));
+  return chart.options.value.legend as Record<string, unknown>;
+}
+
+async function renderCard(cardProps: Record<string, unknown>) {
+  vi.stubGlobal("useI18n", () => ({
+    locale: ref("en"),
+    t: (key: string) => key,
+  }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string) => text,
+  }));
+  vi.stubGlobal("useComponentEvent", () => ({}));
+  vi.stubGlobal("useWatch", () => ({ state: ref({}) }));
+  const app = createSSRApp({
+    render: () =>
+      h(
+        ChartCard,
+        {
+          title: "Latency",
+          componentId: "card",
+          pageId: "routes",
+          ...cardProps,
+        },
+        () =>
+          h(Chart, {
+            type: "line",
+            componentId: "plot",
+            pageId: "routes",
+            legendPosition: "bottom",
+          }),
+      ),
+  });
+  for (const name of ["DmsCard", "DmsClientOnly", "UIcon", "USkeleton"])
+    app.component(name, Slot);
+  app.component("DmsApexChartHost", LegendProbe);
+  return renderToString(app);
+}
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe("chart legend", () => {
+  it("sits above an axis chart and under a circular one by default", () => {
+    expect(legendOf({}).position).toBe("top");
+    expect(legendOf({ type: "donut", series: [] }).position).toBe("bottom");
+  });
+
+  it("follows legendPosition", () => {
+    expect(legendOf({ legendPosition: "bottom" }).position).toBe("bottom");
+    expect(
+      legendOf({ type: "donut", series: [], legendPosition: "top" }).position,
+    ).toBe("top");
+  });
+
+  it("is drawn in the dashboard's theme", () => {
+    const legend = legendOf({});
+    expect(legend.show).toBe(true);
+    expect(legend.markers).toMatchObject({ shape: "square", strokeWidth: 0 });
+    expect(legend.labels).toHaveProperty("colors");
+  });
+});
+
+describe("series legend of a ChartCard", () => {
+  it("stays off in a card by default", async () => {
+    const html = await renderCard({});
+    expect(html).toContain('data-show="false"');
+  });
+
+  it("names the series where the chart places it when the card asks", async () => {
+    const html = await renderCard({ showSeriesLegend: true });
+    expect(html).toContain('data-show="true"');
+    expect(html).toContain('data-position="bottom"');
+  });
+});

package/frontend-vue/tests/code-block.test.ts

@@ -94,6 +94,34 @@ describe("DmsCodeSnippet", () => {
     expect(pre().previousElementSibling).toBeNull();
   });
 
+  it("floats the copy button in the code's corner without a title or a language", async () => {
+    await mountSnippet({ code: '{"ok":true}' });
+    expect(host.querySelector("[data-floating-copy]")).toBe(copyButton());
+    expect(host.textContent).not.toContain("Text");
+    expect(pre().className).toContain("pe-10");
+  });
+
+  it("keeps the head of a snippet naming its language", async () => {
+    await mountSnippet({ code: "plain words", language: "text" });
+    expect(host.querySelector("[data-floating-copy]")).toBeNull();
+    expect(copyButton()).not.toBeNull();
+    expect(pre().className).not.toContain("pe-10");
+  });
+
+  it("breaks a word too long for the line with wrap anywhere", async () => {
+    await mountSnippet({ code: "x".repeat(400), wrap: "anywhere" });
+    expect(pre().className).toContain("[overflow-wrap:anywhere]");
+    expect(pre().className).toContain("whitespace-pre-wrap");
+  });
+
+  it("caps the height with a CSS length when no line count is set", async () => {
+    await mountSnippet({ code: "a", maxHeight: "20rem" });
+    expect(pre().style.maxHeight).toBe("20rem");
+    app?.unmount();
+    await mountSnippet({ code: "a\nb", maxHeight: "20rem", maxLines: 1 });
+    expect(pre().style.maxHeight).toBe("35px");
+  });
+
   it("wraps long lines or scrolls them, and caps the height in lines", async () => {
     await mountSnippet({ code: "a\nb\nc", wrap: true, maxLines: 2 });
     expect(pre().className).toContain("whitespace-pre-wrap");

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

@@ -44,6 +44,7 @@ const load = async (name: string) =>
     .default as Component;
 
 beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ locale: { value: "en" } }));
   vi.stubGlobal("useTranslation", () => ({
     processI18n: (text: string) => (text.startsWith("$") ? `t(${text})` : text),
   }));

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);
+});