@antelopejs/dms 0.7.6 → 0.7.8

package/frontend-vue/tests/field-row.test.ts

@@ -74,6 +74,20 @@ describe("FieldRow", () => {
     expect(body().className).toContain("py-4");
   });
 
+  it("spans both form columns with its control when it has no label", async () => {
+    await mount({ layout: "form" }, { default: () => h("input") });
+    expect(body().children).toHaveLength(1);
+    expect(body().firstElementChild!.className).toContain("col-span-full");
+  });
+
+  it("keeps a labelled control in the form's control column", async () => {
+    await mount(
+      { label: "Name", layout: "form" },
+      { default: () => h("input") },
+    );
+    expect(body().lastElementChild!.className).not.toContain("col-span-full");
+  });
+
   it("leaves the spacing to the list of a stacked form", async () => {
     await mount({
       label: "Name",

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

@@ -1,8 +1,8 @@
 // @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.
+ * A long sectioned form groups its navigation under headings: the sections
+ * naming the same `navGroup` one after the other share one, in the side list
+ * and in the row of chips alike. Without a group, the chips stay one row.
  */
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { type App, createApp, defineComponent, h, nextTick } from "vue";
@@ -37,7 +37,17 @@ const layout = layoutSections(
 let app: App | undefined;
 let host: HTMLDivElement;
 
-async function mount(variant: "list" | "chips") {
+const plainLayout = layoutSections(
+  [field("a"), field("b")],
+  [
+    { id: "a", label: "A", fieldIds: ["a"] },
+    { id: "b", label: "B", fieldIds: ["b"] },
+  ],
+);
+
+type NavProps = Record<string, unknown>;
+
+async function mount(variant: "list" | "chips", props: NavProps = {}) {
   app = createApp({
     render: () =>
       h(FormSectionNav, {
@@ -45,6 +55,7 @@ async function mount(variant: "list" | "chips") {
         sections: layout.sections,
         states: {},
         anchorId: (id: string) => `form-${id}`,
+        ...props,
       }),
   });
   app.component("UIcon", defineComponent({ render: () => h("i") }));
@@ -82,14 +93,7 @@ describe("groupSectionsForNav", () => {
   });
 
   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);
+    expect(groupSectionsForNav(plainLayout.sections)).toHaveLength(1);
   });
 });
 
@@ -106,11 +110,68 @@ describe("the side navigation", () => {
     expect(headings).toEqual(["t($billing)", "Legal"]);
     expect(lists[1]!.querySelectorAll("li")).toHaveLength(2);
   });
+});
 
-  it("lists the chips in one row, without headings", async () => {
+function labelledRuns(): [string | undefined, string[]][] {
+  return [...host.querySelectorAll("ul")].map((list) => {
+    const id = list.getAttribute("aria-labelledby");
+    const label = id
+      ? document.getElementById(id)?.textContent?.trim()
+      : undefined;
+    const chips = [...list.querySelectorAll("a")].map(
+      (chip) => chip.textContent?.trim() ?? "",
+    );
+    return [label, chips];
+  });
+}
+
+describe("the row of chips", () => {
+  it("leads each run of chips with its group's label", async () => {
     await mount("chips");
+    expect(labelledRuns()).toEqual([
+      [undefined, ["Plan"]],
+      ["t($billing)", ["Dunning", "Tax"]],
+      ["Legal", ["Terms"]],
+    ]);
+  });
+
+  it("wraps the runs instead of scrolling one line", async () => {
+    await mount("chips");
+    const nav = host.querySelector("nav")!;
+    expect(nav.classList.contains("flex-wrap")).toBe(true);
+    for (const list of host.querySelectorAll("ul")) {
+      expect(list.classList.contains("overflow-x-auto")).toBe(false);
+    }
+  });
+
+  it("keeps a form without groups in one scrolling row", async () => {
+    await mount("chips", { sections: plainLayout.sections });
     expect(host.querySelectorAll("ul")).toHaveLength(1);
-    expect(host.querySelectorAll("li")).toHaveLength(4);
+    expect(host.querySelectorAll("li")).toHaveLength(2);
     expect(host.querySelector("[aria-labelledby]")).toBeNull();
+    expect(host.querySelector("p")).toBeNull();
+    expect(host.querySelector("ul")!.className).toBe(
+      "flex gap-1.5 overflow-x-auto pb-1",
+    );
+  });
+
+  it("links each chip to its section and reports the one chosen", async () => {
+    const selected: string[] = [];
+    await mount("chips", {
+      activeId: "tax",
+      onSelect: (id: string) => selected.push(id),
+    });
+    const chips = [...host.querySelectorAll("a")];
+    expect(chips.map((chip) => chip.getAttribute("href"))).toEqual([
+      "#form-plan",
+      "#form-dunning",
+      "#form-tax",
+      "#form-terms",
+    ]);
+    expect(
+      host.querySelector("[aria-current='location']")?.textContent?.trim(),
+    ).toBe("Tax");
+    chips[3]!.click();
+    expect(selected).toEqual(["terms"]);
   });
 });

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

@@ -0,0 +1,37 @@
+// @vitest-environment jsdom
+/**
+ * The strip of a held table: "N new · Show", Show reading the rows again.
+ */
+import { createApp, h, type App } from "vue";
+import { afterEach, expect, it, vi } from "vitest";
+
+let app: App | undefined;
+
+afterEach(() => {
+  app?.unmount();
+  vi.unstubAllGlobals();
+});
+
+it("draws the banner and reads the rows on Show", async () => {
+  vi.stubGlobal("useI18n", () => ({
+    t: (key: string, params?: { count?: number }) =>
+      params ? `${key}:${params.count}` : key,
+  }));
+  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.component("UIcon", () => h("i"));
+  app.component("UButton", (props: { label: string }, { attrs }) =>
+    h("button", attrs, props.label),
+  );
+  app.mount(host);
+
+  expect(host.textContent).toContain("dms.live.new_rows:3");
+  host.querySelector("button")?.click();
+  expect(onShow).toHaveBeenCalledTimes(1);
+});

package/frontend-vue/tests/live-toggle.test.ts

@@ -0,0 +1,162 @@
+// @vitest-environment jsdom
+/**
+ * The LiveToggle block: Direct / Pause as a two-segment toggle, "updated N s
+ * ago" counted every second in the browser, L switching the page outside a
+ * text field, and nothing at all on a page without `live`.
+ */
+import { createApp, h, nextTick, type App } from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { defineShortcuts } from "@nuxt/ui/runtime/composables/defineShortcuts.js";
+import {
+  createPageLiveController,
+  type PageLiveController,
+} from "../layers/dms-ui/app/build/composables/live/pageLiveController";
+import { setCurrentPageLive } from "../layers/dms-ui/app/build/composables/live/currentPageLive";
+import { formatElapsed } from "../layers/dms-ui/app/build/composables/live/formatElapsed";
+
+let app: App | undefined;
+let host: HTMLDivElement;
+let live: PageLiveController | undefined;
+
+const t = (key: string, params?: { count?: number }) =>
+  params?.count === undefined ? key : `${key}:${params.count}`;
+
+async function createToggle(
+  target: HTMLElement,
+  props: Record<string, unknown> = {},
+): Promise<App> {
+  const { default: LiveToggleBlock } = await import(
+    "../layers/dms-ui/app/components/blocks/LiveToggleBlock.vue"
+  );
+  const toggle = createApp({
+    render: () =>
+      h(LiveToggleBlock, { componentId: "live", pageId: "api.logs", ...props }),
+  });
+  toggle.component("UIcon", () => h("i"));
+  toggle.mount(target);
+  await nextTick();
+  return toggle;
+}
+
+async function mountToggle(props: Record<string, unknown> = {}) {
+  app = await createToggle(host, props);
+}
+
+const segment = (value: string) =>
+  host.querySelector<HTMLButtonElement>(
+    `[role="radio"][data-value="${value}"]`,
+  ) ??
+  [...host.querySelectorAll<HTMLButtonElement>('[role="radio"]')].find(
+    (button) => button.textContent?.includes(`dms.live.${value}`),
+  );
+
+const pressL = (target: EventTarget = document) =>
+  target.dispatchEvent(
+    new KeyboardEvent("keydown", { key: "l", bubbles: true }),
+  );
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  vi.stubGlobal("useI18n", () => ({ t }));
+  vi.stubGlobal("defineShortcuts", defineShortcuts);
+  host = document.createElement("div");
+  document.body.append(host);
+  window.localStorage.clear();
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  host.remove();
+  live?.dispose();
+  live = undefined;
+  setCurrentPageLive(null);
+  vi.unstubAllGlobals();
+  vi.useRealTimers();
+});
+
+function installLive() {
+  live = createPageLiveController("api.logs", { maxRate: 2 });
+  setCurrentPageLive(live);
+  return live;
+}
+
+it("renders nothing on a page without live", async () => {
+  await mountToggle();
+  expect(host.querySelector(".dms-live-toggle")).toBeNull();
+});
+
+it("shows the page's state and switches it", async () => {
+  const controller = installLive();
+  await mountToggle();
+  expect(segment("direct")?.getAttribute("aria-checked")).toBe("true");
+
+  segment("pause")?.click();
+  await nextTick();
+  expect(controller.isPaused.value).toBe(true);
+  expect(segment("pause")?.getAttribute("aria-checked")).toBe("true");
+
+  segment("direct")?.click();
+  await nextTick();
+  expect(controller.isPaused.value).toBe(false);
+});
+
+it("counts the seconds since the last update, every second", async () => {
+  installLive();
+  await mountToggle();
+  expect(host.textContent).toContain("dms.live.updated_seconds:0");
+
+  vi.advanceTimersByTime(3000);
+  await nextTick();
+  expect(host.textContent).toContain("dms.live.updated_seconds:3");
+
+  vi.advanceTimersByTime(60_000);
+  await nextTick();
+  expect(host.textContent).toContain("dms.live.updated_minutes:1");
+});
+
+it("hides the time when asked to", async () => {
+  installLive();
+  await mountToggle({ showUpdatedAt: false });
+  expect(host.textContent).not.toContain("dms.live.updated");
+});
+
+it("switches on L, but not while typing", async () => {
+  const controller = installLive();
+  await mountToggle();
+
+  pressL();
+  expect(controller.isPaused.value).toBe(true);
+  pressL();
+  expect(controller.isPaused.value).toBe(false);
+
+  const field = document.createElement("input");
+  document.body.append(field);
+  field.focus();
+  await nextTick();
+  pressL(field);
+  expect(controller.isPaused.value).toBe(false);
+  field.remove();
+});
+
+it("reads elapsed times in seconds, minutes, then hours", () => {
+  expect(formatElapsed(-5)).toEqual({ unit: "seconds", count: 0 });
+  expect(formatElapsed(59_999)).toEqual({ unit: "seconds", count: 59 });
+  expect(formatElapsed(60_000)).toEqual({ unit: "minutes", count: 1 });
+  expect(formatElapsed(2 * 3_600_000 + 1)).toEqual({ unit: "hours", count: 2 });
+});
+
+it("switches once per L with two toggles on the page", async () => {
+  const controller = installLive();
+  await mountToggle();
+  const second = await createToggle(document.createElement("div"));
+
+  pressL();
+  expect(controller.isPaused.value).toBe(true);
+
+  app?.unmount();
+  app = undefined;
+  pressL();
+  expect(controller.isPaused.value).toBe(false);
+  second.unmount();
+});

package/frontend-vue/tests/page-live-gate.test.ts

@@ -0,0 +1,241 @@
+// @vitest-environment jsdom
+/**
+ * The Direct / Pause valve of a page declared with `live`: in Direct a block
+ * refetches on its events at most once per `maxRate` (the last event of a
+ * burst included), paused it requests nothing and counts what it missed, and
+ * resuming refetches once each block that missed something. The choice is
+ * kept per page in the browser, and a page without `live` is untouched.
+ */
+import { createApp, defineComponent, h } from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import type { RealtimeTopicHandler } from "../layers/dms-core/app/composables/realtime/useUserRealtime";
+import {
+  refreshLivePageBlocks,
+  refreshPageBlocks,
+} from "../layers/dms-ui/app/utils/blockRefresh";
+import {
+  createPageLiveController,
+  type PageLiveController,
+} from "../layers/dms-ui/app/build/composables/live/pageLiveController";
+import { setCurrentPageLive } from "../layers/dms-ui/app/build/composables/live/currentPageLive";
+import { usePageLive } from "../layers/dms-ui/app/composables/live/usePageLive";
+
+const topicHandlers = new Map<string, RealtimeTopicHandler[]>();
+
+vi.mock("../layers/dms-core/app/composables/realtime/useRealtimeTopic", () => ({
+  useRealtimeTopic: (topic: string, handler: RealtimeTopicHandler) => {
+    topicHandlers.set(topic, [...(topicHandlers.get(topic) ?? []), handler]);
+  },
+}));
+
+const { useRefreshTriggers } = await import(
+  "../layers/dms-ui/app/build/composables/blocks/useRefreshTriggers"
+);
+
+const PAGE = "monitoring.logs";
+const TOPIC = "api:requests";
+const MAX_RATE_SECONDS = 5;
+const MAX_RATE_MS = MAX_RATE_SECONDS * 1000;
+const mounted: Array<{ unmount: () => void }> = [];
+const controllers: PageLiveController[] = [];
+
+function publish(topic = TOPIC) {
+  const event = { topic, type: "request", ts: Date.now() };
+  for (const handler of topicHandlers.get(topic) ?? []) handler(event);
+}
+
+function mountBlock(topic: string | undefined = TOPIC) {
+  const onRefresh = vi.fn();
+  const app = createApp(
+    defineComponent({
+      setup() {
+        useRefreshTriggers(topic, onRefresh);
+        return () => h("div");
+      },
+    }),
+  );
+  app.mount(document.createElement("div"));
+  mounted.push(app);
+  return onRefresh;
+}
+
+function installLive(maxRate?: number): PageLiveController {
+  const controller = createPageLiveController(PAGE, { maxRate });
+  controllers.push(controller);
+  setCurrentPageLive(controller);
+  return controller;
+}
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  topicHandlers.clear();
+  window.localStorage.clear();
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+  controllers.splice(0).forEach((controller) => controller.dispose());
+  setCurrentPageLive(null);
+  vi.useRealTimers();
+});
+
+it("leaves a page without live as it was: every event refetches", () => {
+  const onRefresh = mountBlock();
+  publish();
+  publish();
+  refreshPageBlocks();
+  refreshLivePageBlocks();
+  expect(onRefresh).toHaveBeenCalledTimes(4);
+  expect(usePageLive().isEnabled.value).toBe(false);
+  expect(usePageLive().isLive.value).toBe(true);
+});
+
+it("refetches on each event in Direct when no maxRate is set", () => {
+  installLive();
+  const onRefresh = mountBlock();
+  publish();
+  publish();
+  expect(onRefresh).toHaveBeenCalledTimes(2);
+});
+
+it("in Direct, refetches at most once per maxRate, the last event trailing", () => {
+  installLive(MAX_RATE_SECONDS);
+  const onRefresh = mountBlock();
+
+  publish();
+  expect(onRefresh).toHaveBeenCalledTimes(1);
+
+  vi.advanceTimersByTime(1000);
+  publish();
+  vi.advanceTimersByTime(1000);
+  publish();
+  expect(onRefresh).toHaveBeenCalledTimes(1);
+
+  vi.advanceTimersByTime(MAX_RATE_MS - 2000);
+  expect(onRefresh).toHaveBeenCalledTimes(2);
+
+  vi.advanceTimersByTime(MAX_RATE_MS * 2);
+  expect(onRefresh).toHaveBeenCalledTimes(2);
+});
+
+it("caps each block on its own", () => {
+  installLive(MAX_RATE_SECONDS);
+  const first = mountBlock();
+  const second = mountBlock("api:routes");
+  publish();
+  publish("api:routes");
+  expect(first).toHaveBeenCalledTimes(1);
+  expect(second).toHaveBeenCalledTimes(1);
+});
+
+it("in Pause, requests nothing and counts the events per block", () => {
+  const live = installLive();
+  const logs = mountBlock();
+  const chart = mountBlock();
+  const routes = mountBlock("api:routes");
+  live.pause();
+
+  publish();
+  publish();
+  refreshLivePageBlocks();
+  vi.advanceTimersByTime(60_000);
+
+  expect(logs).not.toHaveBeenCalled();
+  expect(chart).not.toHaveBeenCalled();
+  expect(routes).not.toHaveBeenCalled();
+  // Two events and a live refresh, each counted once for the page although
+  // two blocks (three for the refresh) received them.
+  expect(live.missedCount.value).toBe(3);
+  expect(usePageLive().isPaused.value).toBe(true);
+});
+
+it("refreshes on a user's refreshPageBlocks even while paused", () => {
+  const live = installLive(MAX_RATE_SECONDS);
+  const onRefresh = mountBlock();
+  live.pause();
+  publish();
+  expect(live.missedCount.value).toBe(1);
+
+  refreshPageBlocks();
+  expect(onRefresh).toHaveBeenCalledTimes(1);
+  expect(live.isPaused.value).toBe(true);
+
+  // Read by the user, the block has nothing left to read on resume.
+  live.resume();
+  expect(onRefresh).toHaveBeenCalledTimes(1);
+});
+
+it("caps a live refresh like a realtime event in Direct", () => {
+  installLive(MAX_RATE_SECONDS);
+  const onRefresh = mountBlock(undefined);
+  refreshLivePageBlocks();
+  refreshLivePageBlocks();
+  expect(onRefresh).toHaveBeenCalledTimes(1);
+  vi.advanceTimersByTime(MAX_RATE_MS);
+  expect(onRefresh).toHaveBeenCalledTimes(2);
+});
+
+it("on resume, refetches once each block that missed an event", () => {
+  const live = installLive(MAX_RATE_SECONDS);
+  const logs = mountBlock();
+  const routes = mountBlock("api:routes");
+  publish("api:routes");
+  routes.mockClear();
+  live.pause();
+
+  publish();
+  publish();
+  publish();
+  live.resume();
+
+  expect(logs).toHaveBeenCalledTimes(1);
+  expect(routes).not.toHaveBeenCalled();
+  expect(live.missedCount.value).toBe(0);
+  vi.advanceTimersByTime(MAX_RATE_MS);
+  expect(logs).toHaveBeenCalledTimes(1);
+});
+
+it("keeps a trailing refetch the pause interrupted for the resume", () => {
+  const live = installLive(MAX_RATE_SECONDS);
+  const onRefresh = mountBlock();
+  publish();
+  publish();
+  live.pause();
+  vi.advanceTimersByTime(MAX_RATE_MS);
+  expect(onRefresh).toHaveBeenCalledTimes(1);
+  expect(live.missedCount.value).toBe(1);
+
+  live.resume();
+  expect(onRefresh).toHaveBeenCalledTimes(2);
+});
+
+it("dates the page's last update from its refetches", () => {
+  const live = installLive();
+  mountBlock();
+  const before = live.lastUpdatedAt.value;
+  vi.advanceTimersByTime(4000);
+  publish();
+  expect(live.lastUpdatedAt.value).toBe(before + 4000);
+});
+
+it("remembers the choice per page in the browser", () => {
+  installLive().pause();
+  expect(createPageLiveController(PAGE, {}).isPaused.value).toBe(true);
+  expect(createPageLiveController("monitoring.routes", {}).isPaused.value).toBe(
+    false,
+  );
+
+  createPageLiveController(PAGE, {}).resume();
+  expect(createPageLiveController(PAGE, {}).isPaused.value).toBe(false);
+});
+
+it("follows the page through usePageLive", () => {
+  installLive();
+  const state = usePageLive();
+  expect(state.isEnabled.value).toBe(true);
+  state.pause();
+  expect(state.isPaused.value).toBe(true);
+  expect(state.isLive.value).toBe(false);
+  state.toggle();
+  expect(state.isPaused.value).toBe(false);
+});