@antelopejs/dms 0.0.1

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

@@ -0,0 +1,44 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+import { tv } from "tailwind-variants";
+
+const tableSource = readFileSync(
+  new URL(
+    "../layers/dms-ui/app/build/components/table/Table.vue",
+    import.meta.url,
+  ),
+  "utf8",
+);
+const themeSource = tableSource.slice(
+  tableSource.indexOf("const PANEL_MATCH_BG"),
+  tableSource.indexOf("// Grid-like default"),
+);
+const theme = new Function("tv", `${themeSource}; return theme;`)(tv);
+
+describe("Table grid cell layout theme", () => {
+  it.each([undefined, false])("preserves the default for %s", (cellWrap) => {
+    expect(theme().rowSpan({ cellWrap })).toBe("line-clamp-1");
+  });
+
+  it("removes the clamp and inherited nowrap only for opted-in cells", () => {
+    const classes = theme().rowSpan({ cellWrap: true });
+    expect(classes).toContain("line-clamp-none");
+    expect(classes).toContain("whitespace-normal");
+    expect(classes).toContain("[overflow-wrap:anywhere]");
+    expect(classes).not.toContain("line-clamp-1");
+    expect(theme().rowSpan()).toBe("line-clamp-1");
+  });
+
+  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" }),
+    );
+  });
+
+  it("reads each column's policy inside the default slot fallback", () => {
+    expect(tableSource).toMatch(
+      /uiTable\.rowSpan\(\{\s*cellWrap: \(\s*cell\.column\.columnDef as TableColumn<T>\s*\)\.cellWrap[\s,]*\}\)/,
+    );
+  });
+});

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

@@ -0,0 +1,153 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+import { tv } from "tailwind-variants";
+import {
+  resolveRowClickAction,
+  type RowClickActionOptions,
+} from "../layers/dms-ui/app/utils/rowClickAction";
+import type { CustomRowAction } from "../layers/dms-ui/app/types/row-action";
+
+const tableSource = readFileSync(
+  new URL(
+    "../layers/dms-ui/app/build/components/table/Table.vue",
+    import.meta.url,
+  ),
+  "utf8",
+);
+const themeSource = tableSource.slice(
+  tableSource.indexOf("const PANEL_MATCH_BG"),
+  tableSource.indexOf("// Grid-like default"),
+);
+const theme = new Function("tv", `${themeSource}; return theme;`)(tv);
+
+const HOVER_ROW = "hover:bg-elevated";
+const HOVER_CELL = "group-hover:bg-elevated";
+
+const detailsAction: CustomRowAction = {
+  label: "Details",
+  target: { type: "page", url: "/sends/:id" },
+};
+const defaultDetailsAction: CustomRowAction = {
+  ...detailsAction,
+  isDefault: true,
+};
+
+const rowFor = (status: string) => ({ _id: "1", status });
+
+describe("row hover affordance", () => {
+  it.each([true, false])(
+    "gives the row and its pinned cells the same hover for rowClickable=%s",
+    (rowClickable) => {
+      const ui = theme();
+      const rowHasHover = ui
+        .row({ loading: false, rowClickable })
+        .includes(HOVER_ROW);
+      const leftHasHover = ui
+        .rowCell({ pinned: "left", loading: false, rowClickable })
+        .includes(HOVER_CELL);
+      const rightHasHover = ui
+        .rowCell({ pinned: "right", loading: false, rowClickable })
+        .includes(HOVER_CELL);
+
+      expect(rowHasHover).toBe(rowClickable);
+      expect(leftHasHover).toBe(rowClickable);
+      expect(rightHasHover).toBe(rowClickable);
+    },
+  );
+
+  it("treats an unset loading flag like a loaded table", () => {
+    const ui = theme();
+    expect(ui.row({ rowClickable: true })).toContain(HOVER_ROW);
+    expect(ui.rowCell({ pinned: "left", rowClickable: true })).toContain(
+      HOVER_CELL,
+    );
+  });
+
+  it("keeps pinned cells inert while the table is loading", () => {
+    const ui = theme();
+    expect(ui.row({ loading: true, rowClickable: true })).not.toContain(
+      HOVER_ROW,
+    );
+    expect(
+      ui.rowCell({ pinned: "left", loading: true, rowClickable: true }),
+    ).not.toContain(HOVER_CELL);
+  });
+
+  it("never tints unpinned cells, which inherit the row background", () => {
+    expect(
+      theme().rowCell({ loading: false, rowClickable: true }),
+    ).not.toContain(HOVER_CELL);
+  });
+
+  it("keeps the presence tint independent of the hover", () => {
+    const pinned = theme().rowCell({
+      pinned: "left",
+      loading: false,
+      rowClickable: false,
+    });
+    expect(pinned).toContain("group-data-[presence=true]:bg-elevated");
+  });
+
+  it("feeds the same condition to the row, its pinned cells and the rail", () => {
+    expect(tableSource).toMatch(
+      /uiTable\.row\(\{\s*loading,\s*rowClickable: isRowClickable\(row\.original\),/,
+    );
+    expect(tableSource).toMatch(
+      /uiTable\.rowCell\(\{[^}]*rowClickable: isRowClickable\(row\.original\),/,
+    );
+    expect(tableSource).toContain("presenceRailBackground(row.original)");
+  });
+});
+
+describe("resolveRowClickAction", () => {
+  it("leaves a row inert when nothing can open it", () => {
+    expect(resolveRowClickAction(undefined, rowFor("sent"))).toBeUndefined();
+    expect(
+      resolveRowClickAction({ edit: false, details: false }, rowFor("sent")),
+    ).toBeUndefined();
+  });
+
+  it("prefers edit, then details", () => {
+    expect(
+      resolveRowClickAction({ edit: true, details: true }, rowFor("sent")),
+    ).toBe("edit");
+    expect(
+      resolveRowClickAction({ edit: false, details: true }, rowFor("sent")),
+    ).toBe("details");
+  });
+
+  it("ignores custom actions that are not flagged as the row click target", () => {
+    const options: RowClickActionOptions = { custom: [detailsAction] };
+    expect(resolveRowClickAction(options, rowFor("sent"))).toBeUndefined();
+  });
+
+  it("runs a flagged custom action ahead of the built-ins", () => {
+    const options: RowClickActionOptions = {
+      edit: true,
+      details: true,
+      custom: [detailsAction, defaultDetailsAction],
+    };
+    expect(resolveRowClickAction(options, rowFor("sent"))).toBe(
+      defaultDetailsAction,
+    );
+  });
+
+  it("falls back to the built-ins when the flagged action rejects the row", () => {
+    const ruled: CustomRowAction = {
+      ...defaultDetailsAction,
+      rule: { field: "status", equals: "draft" },
+    };
+    const options: RowClickActionOptions = { edit: true, custom: [ruled] };
+    expect(resolveRowClickAction(options, rowFor("sent"))).toBe("edit");
+    expect(resolveRowClickAction(options, rowFor("draft"))).toBe(ruled);
+  });
+
+  it("honours the rules of the built-in actions", () => {
+    const options: RowClickActionOptions = {
+      edit: { rule: { field: "status", equals: "draft" } },
+      details: true,
+    };
+    expect(resolveRowClickAction(options, rowFor("draft"))).toBe("edit");
+    expect(resolveRowClickAction(options, rowFor("sent"))).toBe("details");
+  });
+});

package/frontend-vue/tests/theming-browser.mjs

@@ -0,0 +1,130 @@
+import assert from "node:assert/strict";
+import { execFileSync } from "node:child_process";
+import { mkdirSync } from "node:fs";
+import { resolve } from "node:path";
+
+const [url, theme = "custom", screenshots] = process.argv.slice(2);
+if (!url)
+  throw new Error(
+    "Usage: node tests/theming-browser.mjs URL [custom|default] [screenshots]",
+  );
+const session = "dms-theming-test";
+const transitionWait = "500";
+const browser = (...args) =>
+  execFileSync("agent-browser", ["--session", session, ...args], {
+    encoding: "utf8",
+  }).trim();
+const evaluate = (expression) => JSON.parse(browser("eval", expression));
+
+function inspectTheme() {
+  const root = getComputedStyle(document.documentElement);
+  const probe = document.createElement("span");
+  document.body.append(probe);
+  const colors = ["--ui-primary", "--ui-color-primary-600", "--ui-success"].map(
+    (token) => {
+      probe.style.backgroundColor = `var(${token})`;
+      return getComputedStyle(probe).backgroundColor;
+    },
+  );
+  probe.remove();
+  const background = (selector) =>
+    getComputedStyle(document.querySelector(selector)).backgroundColor;
+  const images = [...document.querySelectorAll("main img")].filter(
+    (image) => image.getClientRects().length,
+  );
+  return {
+    radius: root.getPropertyValue("--ui-radius").trim(),
+    font: root.getPropertyValue("--font-sans"),
+    accent: root.getPropertyValue("--dms-accent").trim(),
+    accentPalette: ["500", "400"].map((shade) =>
+      root.getPropertyValue(`--ui-color-primary-${shade}`).trim(),
+    ),
+    config: document.querySelector("#config").textContent,
+    colors,
+    button: background("#primary"),
+    primary: background("#primary-switch"),
+    success: background("#success-switch"),
+    surface: background(".dms-card"),
+    logosLoaded:
+      images.length === 2 &&
+      images.every((image) => image.complete && image.naturalWidth > 0),
+    logos: images.map((image) => new URL(image.src).pathname),
+  };
+}
+
+function checkLogos(result, mode) {
+  assert.ok(result.logosLoaded, "logos loaded");
+  const logoRoot = theme === "custom" ? "/brand" : "/images/antelope-logo";
+  assert.deepEqual(result.logos, [
+    `${logoRoot}/${mode}.svg`,
+    `${logoRoot}/icon.svg`,
+  ]);
+}
+
+function checkTheme(mode) {
+  const result = evaluate(`(${inspectTheme.toString()})()`);
+  const isCustom = theme === "custom";
+  assert.ok(result.radius.endsWith("rem"), "radius unit");
+  assert.equal(
+    Number.parseFloat(result.radius),
+    isCustom ? 0.5 : 0.25,
+    "radius",
+  );
+  assert.ok(result.font.includes(isCustom ? "Georgia" : "Geist"), "font");
+  assert.ok(
+    result.config.includes(isCustom ? "example" : "dms"),
+    "layer precedence",
+  );
+  assert.equal(result.button, result.colors[0], "primary action");
+  assert.equal(result.primary, result.colors[1], "primary switch shade");
+  assert.equal(
+    result.success,
+    result.colors[2],
+    "success switch semantic color",
+  );
+  const darkSurface = isCustom ? "rgb(36, 21, 54)" : "rgb(16, 17, 25)";
+  assert.equal(
+    result.surface,
+    mode === "dark" ? darkSurface : "rgb(255, 255, 255)",
+  );
+  assert.equal(
+    result.accent,
+    result.accentPalette[Number(mode === "dark")],
+    "glow accent",
+  );
+  checkLogos(result, mode);
+  console.log(`${theme}/${mode}: tokens, switches and logos passed`);
+}
+
+function checkMode(mode) {
+  const modeCondition = `document.documentElement.classList.contains('dark') === ${mode === "dark"}`;
+  if (!evaluate(modeCondition)) browser("click", "#mode");
+  browser("wait", "--fn", modeCondition);
+  browser("wait", transitionWait);
+  checkTheme(mode);
+  browser("click", "#primary-switch");
+  browser(
+    "wait",
+    "--fn",
+    'document.querySelector("#primary-switch").getAttribute("aria-checked") === "false"',
+  );
+  browser("click", "#primary-switch");
+  browser("wait", transitionWait);
+  checkTheme(mode);
+  if (!screenshots) return;
+  mkdirSync(screenshots, { recursive: true });
+  browser("screenshot", resolve(screenshots, `${theme}-${mode}.png`));
+}
+
+try {
+  browser("open", url);
+  browser("set", "viewport", "1280", "900", "2");
+  browser(
+    "wait",
+    "--fn",
+    'document.querySelector("main")?.dataset.ready === "true"',
+  );
+  for (const mode of ["light", "dark"]) checkMode(mode);
+} finally {
+  browser("close");
+}

package/frontend-vue/tests/trailing-deduper.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it, vi } from "vitest";
+import { createTrailingDeduper } from "../layers/dms-core/app/utils/trailingDeduper";
+
+function deferred() {
+  let resolve!: () => void;
+  let reject!: (error: unknown) => void;
+  const promise = new Promise<void>((res, rej) => {
+    resolve = () => res();
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
+describe("createTrailingDeduper", () => {
+  it("runs a trailing pass for a call made while one is in flight", async () => {
+    const first = deferred();
+    const runs = [first.promise, Promise.resolve()];
+    const task = vi.fn(() => runs.shift()!);
+    const deduper = createTrailingDeduper();
+
+    const inFlight = deduper.run(task);
+    // The invalidation lands while the first run is still pending.
+    const queued = deduper.run(task);
+    expect(task).toHaveBeenCalledTimes(1);
+
+    first.resolve();
+    await inFlight;
+    await queued;
+
+    expect(task).toHaveBeenCalledTimes(2);
+  });
+
+  it("collapses a burst into a single trailing pass", async () => {
+    const first = deferred();
+    const runs = [first.promise, Promise.resolve()];
+    const task = vi.fn(() => runs.shift()!);
+    const deduper = createTrailingDeduper();
+
+    const inFlight = deduper.run(task);
+    const queued = [deduper.run(task), deduper.run(task), deduper.run(task)];
+
+    first.resolve();
+    await inFlight;
+    await Promise.all(queued);
+
+    expect(task).toHaveBeenCalledTimes(2);
+  });
+
+  it("still runs the trailing pass when the in-flight one fails", async () => {
+    const first = deferred();
+    const runs = [first.promise, Promise.resolve()];
+    const task = vi.fn(() => runs.shift()!);
+    const deduper = createTrailingDeduper();
+
+    const inFlight = deduper.run(task).catch(() => undefined);
+    const queued = deduper.run(task);
+
+    first.reject(new Error("network down"));
+    await inFlight;
+    await queued;
+
+    expect(task).toHaveBeenCalledTimes(2);
+  });
+
+  it("starts a fresh run once nothing is in flight", async () => {
+    const task = vi.fn(async () => undefined);
+    const deduper = createTrailingDeduper();
+
+    await deduper.run(task);
+    await deduper.run(task);
+
+    expect(task).toHaveBeenCalledTimes(2);
+  });
+});

package/frontend-vue/tests/trend-delta-format.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { formatDeltaPercent } from "../layers/dms-ui/app/composables/chart/formatValue";
+
+describe("formatDeltaPercent", () => {
+  it("uses the French decimal comma and an explicit sign", () => {
+    expect(formatDeltaPercent(12.3, "fr-FR")).toMatch(/^\+12,3\s?%$/);
+  });
+
+  it("uses the English decimal point", () => {
+    expect(formatDeltaPercent(12.3, "en-GB")).toBe("+12.3%");
+  });
+
+  it("keeps the minus sign on a drop", () => {
+    expect(formatDeltaPercent(-6.5, "en-GB")).toBe("-6.5%");
+  });
+
+  it("drops the sign on zero", () => {
+    expect(formatDeltaPercent(0, "en-GB")).toBe("0.0%");
+  });
+
+  it("always shows one fraction digit", () => {
+    expect(formatDeltaPercent(8, "en-GB")).toBe("+8.0%");
+  });
+});

package/frontend-vue/tests/vue-inventory.test.ts

@@ -0,0 +1,92 @@
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const EXPECTED_VUE_FILES = 143;
+
+function walk(directory: string): string[] {
+  return readdirSync(directory).flatMap((name) => {
+    const path = join(directory, name);
+    return statSync(path).isDirectory() ? walk(path) : [path];
+  });
+}
+
+function ownership(path: string): string | undefined {
+  const owners: Array<[RegExp, string]> = [
+    [/\/app\/(?:components|build\/components)\/.*\.vue$/, "component"],
+    [/\/app\/custom-pages\/.*\.vue$/, "custom-page"],
+    [/\/app\/pages\/.*\.vue$/, "dynamic-page"],
+    [/\/app\/custom-layouts\/.*\.vue$/, "layout"],
+    [/\/app\/error\.vue$/, "inertia-error-page"],
+    [/\/app\/emails\/.*\.vue$/, "server-email-template"],
+  ];
+  return owners.find(([pattern]) => pattern.test(path))?.[1];
+}
+
+describe("Vue source inventory", () => {
+  it("contains only Vue frontend source files", () => {
+    const files = walk(join(process.cwd(), "layers"));
+    expect(files.filter((path) => path.includes("/server/"))).toEqual([]);
+  });
+
+  it("assigns every Vue file an explicit runtime owner", () => {
+    const files = walk(join(process.cwd(), "layers"))
+      .filter((path) => path.endsWith(".vue"))
+      .map((path) => relative(process.cwd(), path));
+    expect(files).toHaveLength(EXPECTED_VUE_FILES);
+    expect(files.filter((path) => !ownership(path))).toEqual([]);
+    expect(
+      files.filter((path) => ownership(path) === "server-email-template"),
+    ).toHaveLength(8);
+  });
+
+  it("exposes entries for the frontend adapter", () => {
+    const root = process.cwd();
+    const frontendModule = readFileSync(join(root, "dms.frontend.ts"), "utf8");
+
+    expect(frontendModule).toContain(
+      'import "./layers/dms-layout/app/assets/css/main.css"',
+    );
+    expect(frontendModule).toContain('"./layers/**/app/custom-pages/**/*.vue"');
+    expect(frontendModule).toContain(
+      '"./layers/**/app/custom-layouts/**/*.vue"',
+    );
+    expect(frontendModule).toContain('"./layers/**/app/error.vue"');
+    expect(frontendModule).toContain(
+      "sdk.registerComponent(`Dms${pascalCase(name)}`, component)",
+    );
+    expect(frontendModule).toContain('.replace(/\\/index$/, "")');
+    expect(frontendModule).toContain(
+      "sdk.registerErrorPage(lazyComponent(loader), loader)",
+    );
+
+    const entries = walk(join(root, "layers")).filter(
+      (path) =>
+        path.includes("/app/custom-pages/") || path.endsWith("/app/error.vue"),
+    );
+    expect(entries).not.toHaveLength(0);
+    expect(
+      entries.every((path) => path.endsWith(".vue") && statSync(path).isFile()),
+    ).toBe(true);
+    expect(
+      statSync(
+        join(root, "layers/dms-layout/app/custom-layouts/DefaultLayout.vue"),
+      ).isFile(),
+    ).toBe(true);
+  });
+
+  it("registers lazy components and reports deterministic name collisions", () => {
+    const frontendModule = readFileSync(
+      join(process.cwd(), "dms.frontend.ts"),
+      "utf8",
+    );
+    expect(frontendModule).toContain("defineAsyncComponent");
+    expect(frontendModule).toContain("sortedEntries(components)");
+    expect(frontendModule).toContain(
+      "Duplicate component name ${name}: ${previousPath}, ${path}",
+    );
+    expect(frontendModule).not.toMatch(
+      /components\|build\/components}[\s\S]*eager: true/,
+    );
+  });
+});