@antelopejs/dms 0.9.2 → 0.9.3

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

@@ -1,182 +0,0 @@
-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";
-import {
-  resolveRowClickAction,
-  rowCustomActions,
-  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",
-  "EYEBROW_CLASS",
-  "REORDER_HANDLE_CLASS",
-  `${themeSource}; return theme;`,
-)(tv, EYEBROW_CLASS, REORDER_HANDLE_CLASS);
-
-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");
-  });
-});
-
-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");
-  });
-});
-
-describe("rowCustomActions", () => {
-  const stopSelling: CustomRowAction = {
-    id: "stop_selling",
-    label: "Stop selling",
-    target: { type: "api", url: "/plans/{{row._id}}/stop", method: "POST" },
-    rule: { field: "isActive", equals: true },
-  };
-  const remove: CustomRowAction = {
-    id: "delete",
-    label: "Delete",
-    target: { type: "api", url: "/plans/{{row._id}}", method: "DELETE" },
-    rule: { field: "workspaces", equals: 0 },
-  };
-
-  it("lists the actions whose rule accepts the row, in their order", () => {
-    const actions = [detailsAction, stopSelling, remove];
-    expect(
-      rowCustomActions(actions, { isActive: true, workspaces: 0 }),
-    ).toEqual(actions);
-    expect(
-      rowCustomActions(actions, { isActive: false, workspaces: 2 }).map(
-        (action) => action.label,
-      ),
-    ).toEqual(["Details"]);
-  });
-
-  it("lists nothing for a table without custom actions", () => {
-    expect(rowCustomActions(undefined, {})).toEqual([]);
-  });
-});

package/frontend-vue/tests/table-scroll-area.test.ts

@@ -1,37 +0,0 @@
-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(
-    "../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",
-  "EYEBROW_CLASS",
-  "REORDER_HANDLE_CLASS",
-  `${themeSource}; return theme;`,
-)(tv, EYEBROW_CLASS, REORDER_HANDLE_CLASS);
-
-describe("Table scroll area", () => {
-  it("sticks the header band to the top of its own scroll area", () => {
-    const ui = theme({ scrollArea: true });
-    expect(ui.tableRoot()).toContain("overflow-y-auto");
-    expect(ui.headCell()).toContain("sticky");
-    expect(ui.headCell()).toContain("top-0");
-  });
-
-  it("leaves a table without a scroll area unstuck", () => {
-    expect(theme().headCell()).not.toContain("sticky");
-    expect(theme().tableRoot()).not.toContain("overflow-y-auto");
-  });
-});

package/frontend-vue/tests/table-source-navigation.test.ts

@@ -1,122 +0,0 @@
-// @vitest-environment jsdom
-/**
- * A `TableView.fromSource` table whose `fetchUrl` reads the page query lists
- * again when a link changes that query, through the runtime's real async data
- * cache: whether the link keeps the page mounted (the watch) or remounts it
- * (a fresh instance binding to the cached entry of its key).
- */
-import {
-  computed,
-  createApp,
-  defineComponent,
-  h,
-  nextTick,
-  type App,
-} from "vue";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import type { DmsFrontendRuntime } from "#dms/frontend-module";
-import type { TableViewColumn } from "../layers/dms-ui/app/composables/table-view/types";
-
-const engine = await import("#dms/frontend-module");
-vi.stubGlobal("useDmsAsyncData", engine.useDmsAsyncData);
-
-const { useTableRows } = await import(
-  "../layers/dms-ui/app/build/composables/table-view/useTableRows"
-);
-const { useTableCountsData, useTableListData } = await import(
-  "../layers/dms-ui/app/build/composables/table-view/useTableListData"
-);
-
-const FETCH_URL = "/api/log/route?route={{query.route}}";
-const COLUMNS = [{ id: "path", accessorKey: "path" }] as TableViewColumn[];
-const TAB_QUERIES = [{ id: "get", query: { filter_method: "is:GET" } }];
-const ROUTE_VALUE = "GET /api/search?q=shoes&page=2";
-const ENCODED_URL =
-  "/api/log/route?route=GET%20%2Fapi%2Fsearch%3Fq%3Dshoes%26page%3D2";
-
-type Api = Parameters<typeof useTableRows>[0]["api"];
-
-const requests: string[] = [];
-const api = (async (url: string) => {
-  requests.push(url);
-  return { results: [{ _id: "a", path: "/api/search" }], total: 1 };
-}) as unknown as Api;
-
-let runtime: DmsFrontendRuntime;
-const mounted: App[] = [];
-
-const SourceTable = defineComponent({
-  setup() {
-    const route = runtime.route;
-    const rows = useTableRows({
-      api,
-      location: FETCH_URL,
-      source: { fetchUrl: FETCH_URL, capabilities: { filter: true } },
-      columns: COLUMNS,
-      route: () => ({ routeParams: {}, routeQuery: route.query }),
-    });
-    const archiveQuery = computed(() => ({}));
-    const keys = { componentId: "requests", pageId: "sources", rows };
-    void useTableListData({
-      ...keys,
-      query: computed(() => ({ offset: 0, limit: 10 })),
-      archiveQuery,
-      isSelfManaged: computed(() => false),
-    });
-    void useTableCountsData({
-      ...keys,
-      queries: computed(() => TAB_QUERIES),
-      archiveQuery,
-    });
-    return () => h("div");
-  },
-});
-
-function mountTable(): void {
-  const app = createApp(SourceTable);
-  engine.provideDmsFrontendRuntime(app, runtime);
-  app.mount(document.createElement("div"));
-  mounted.push(app);
-}
-
-const settle = async () => {
-  await nextTick();
-  await new Promise((resolve) => setTimeout(resolve, 0));
-};
-
-beforeEach(() => {
-  requests.length = 0;
-  runtime = engine.createDmsFrontendRuntime();
-});
-
-afterEach(() => {
-  mounted.splice(0).forEach((app) => app.unmount());
-});
-
-describe("a source table following the page query", () => {
-  it("requests nothing while the query value is missing", async () => {
-    mountTable();
-    await settle();
-    expect(requests).toEqual([]);
-  });
-
-  it("lists again when the page stays mounted", async () => {
-    mountTable();
-    await settle();
-    runtime.route.query = { route: ROUTE_VALUE };
-    await settle();
-    expect(requests).toEqual([ENCODED_URL, ENCODED_URL]);
-  });
-
-  // An Inertia link without preserveState remounts the page: the new table
-  // reads the new query from its first render, so its URL never changes.
-  it("lists again when the link remounts the page", async () => {
-    mountTable();
-    await settle();
-    mounted.pop()?.unmount();
-    runtime.route.query = { route: ROUTE_VALUE };
-    mountTable();
-    await settle();
-    expect(requests).toEqual([ENCODED_URL, ENCODED_URL]);
-  });
-});

package/frontend-vue/tests/table-source-period-scope.test.ts

@@ -1,171 +0,0 @@
-// @vitest-environment jsdom
-/**
- * A `TableView.fromSource` table with a `periodScope` follows its
- * PeriodSelector like a chart: its route is sent the period, it lists again
- * when the period changes, and it requests nothing (keeping its skeleton)
- * until the selector has registered the scope.
- */
-import {
-  computed,
-  createApp,
-  defineComponent,
-  effectScope,
-  h,
-  nextTick,
-  type App,
-} from "vue";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import type { TableViewColumn } from "../layers/dms-ui/app/composables/table-view/types";
-
-const engine = await import("#dms/frontend-module");
-vi.stubGlobal("useDmsAsyncData", engine.useDmsAsyncData);
-
-const { useTableRows } = await import(
-  "../layers/dms-ui/app/build/composables/table-view/useTableRows"
-);
-const { useTableCountsData, useTableListData } = await import(
-  "../layers/dms-ui/app/build/composables/table-view/useTableListData"
-);
-const { usePeriod } = await import(
-  "../layers/dms-core/app/composables/period/usePeriod"
-);
-const { registerPeriodScope } = await import(
-  "../layers/dms-core/app/composables/period/usePeriodScope"
-);
-
-const SCOPE = "report";
-const FETCH_URL = "/api/report";
-const COLUMNS = [{ id: "name", accessorKey: "name" }] as TableViewColumn[];
-
-type Api = Parameters<typeof useTableRows>[0]["api"];
-
-const requests: string[] = [];
-const api = (async (url: string) => {
-  requests.push(url);
-  return { results: [{ _id: "a", name: "row" }], total: 1 };
-}) as unknown as Api;
-
-const mounted: App[] = [];
-const cleanups: Array<() => void> = [];
-let listed: { value: unknown } | undefined;
-let counted: { value: unknown } | undefined;
-
-const SourceTable = defineComponent({
-  setup() {
-    const rows = useTableRows({
-      api,
-      location: FETCH_URL,
-      source: { fetchUrl: FETCH_URL, capabilities: {}, periodScope: SCOPE },
-      columns: COLUMNS,
-    });
-    void useTableListData({
-      componentId: "report",
-      pageId: "reports",
-      rows,
-      query: computed(() => ({ offset: 0, limit: 10 })),
-      archiveQuery: computed(() => ({})),
-      isSelfManaged: computed(() => false),
-    }).then(({ data }) => {
-      listed = data;
-    });
-    void useTableCountsData({
-      componentId: "report",
-      pageId: "reports",
-      rows,
-      queries: computed(() => [{ id: "all", query: {} }]),
-      archiveQuery: computed(() => ({})),
-    }).then(({ data }) => {
-      counted = data;
-    });
-    return () => h("div");
-  },
-});
-
-function mountTable(): void {
-  const app = createApp(SourceTable);
-  engine.provideDmsFrontendRuntime(app, engine.createDmsFrontendRuntime());
-  app.mount(document.createElement("div"));
-  mounted.push(app);
-}
-
-function registerSelector() {
-  const scope = effectScope();
-  const period = scope.run(() => usePeriod({ defaultPreset: "last-7-days" }))!;
-  cleanups.push(registerPeriodScope(SCOPE, period.state), () => scope.stop());
-  return period;
-}
-
-const settle = async () => {
-  await nextTick();
-  await new Promise((resolve) => setTimeout(resolve, 0));
-  await nextTick();
-};
-
-const periodOf = (url: string) =>
-  Object.fromEntries(new URL(url, "http://dms.local").searchParams);
-
-beforeEach(() => {
-  requests.length = 0;
-  listed = undefined;
-  counted = undefined;
-});
-
-afterEach(() => {
-  mounted.splice(0).forEach((app) => app.unmount());
-  cleanups.splice(0).forEach((cleanup) => cleanup());
-});
-
-describe("a source table bound to a period scope", () => {
-  it("requests nothing and keeps its skeleton until the scope registers", async () => {
-    mountTable();
-    await settle();
-    expect(requests).toEqual([]);
-    expect(listed).toBeDefined();
-    expect(listed!.value).toBeNull();
-  });
-
-  // The server never registers a scope: an empty object there drew the tabs
-  // with no skeleton, where the browser (its key carrying the period) drew
-  // one, and hydration mismatched.
-  it("keeps its tab counters' skeleton too until the scope registers", async () => {
-    mountTable();
-    await settle();
-    expect(counted).toBeDefined();
-    expect(counted!.value).toBeNull();
-  });
-
-  it("counts its tabs with the period once the scope registers", async () => {
-    registerSelector();
-    mountTable();
-    await settle();
-    expect(counted!.value).toEqual({ all: 1 });
-  });
-
-  it("sends the period with its request once the scope registers", async () => {
-    const period = registerSelector();
-    mountTable();
-    await settle();
-    expect(requests).toHaveLength(2);
-    expect(listed!.value).toMatchObject({ total: 1 });
-    const range = period.state.value.range!;
-    expect(periodOf(requests[0]!)).toEqual({
-      from: range.from.toISOString(),
-      to: range.to.toISOString(),
-      preset: "last-7-days",
-      comparison: "none",
-    });
-  });
-
-  it("lists again when the period changes", async () => {
-    const period = registerSelector();
-    mountTable();
-    await settle();
-    period.setPreset("last-30-days");
-    period.setComparison("previous-period");
-    await settle();
-    const last = periodOf(requests.at(-1)!);
-    expect(last.preset).toBe("last-30-days");
-    expect(last.comparison).toBe("previous-period");
-    expect(last.compareFrom).toBeDefined();
-  });
-});

package/frontend-vue/tests/table-url-filters.test.ts

@@ -1,158 +0,0 @@
-// @vitest-environment jsdom
-import {
-  computed,
-  createApp,
-  defineComponent,
-  h,
-  nextTick,
-  provide,
-  ref,
-  shallowRef,
-  type App,
-  type FunctionalComponent,
-} from "vue";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import TableFiltersRow from "../layers/dms-ui/app/build/components/table/FiltersRow.vue";
-import type { TableUrlFilter } from "../layers/dms-ui/app/build/components/table/Table.vue";
-import {
-  visibleUrlFilters,
-  withoutQueryParam,
-} from "../layers/dms-ui/app/build/composables/table-view/utils/urlFilters";
-
-describe("visibleUrlFilters", () => {
-  const declared = {
-    email: { field: "email", visible: true, label: "$app.email" },
-    template: { field: "templateSlug", mode: "is_not", visible: true },
-    tenant: { field: "tenantId" },
-  };
-
-  it("lists the visible filters the URL applies, hidden ones left out", () => {
-    expect(
-      visibleUrlFilters(declared, {
-        email: "a@b.test",
-        tenant: "t1",
-        page: "2",
-      }),
-    ).toEqual([
-      {
-        param: "email",
-        label: "$app.email",
-        accessorKey: "email",
-        mode: "is",
-        value: "a@b.test",
-      },
-    ]);
-    expect(visibleUrlFilters(declared, { template: "welcome" })).toEqual([
-      {
-        param: "template",
-        label: undefined,
-        accessorKey: "templateSlug",
-        mode: "is_not",
-        value: "welcome",
-      },
-    ]);
-    expect(visibleUrlFilters(undefined, { email: "a@b.test" })).toEqual([]);
-  });
-
-  it("removes one parameter from the query", () => {
-    expect(withoutQueryParam({ email: "a", tab: "all" }, "email")).toEqual({
-      tab: "all",
-    });
-  });
-});
-
-describe("filters row URL chips", () => {
-  let app: App | undefined;
-  const emits = vi.fn();
-
-  const mount = (urlFilters: TableUrlFilter[]) => {
-    const Host = defineComponent({
-      setup() {
-        provide(
-          "tableSharedData",
-          shallowRef({
-            columnFiltersState: ref([]),
-            labeledColumns: computed(() => [
-              {
-                column: { id: "templateSlug", columnDef: {} },
-                label: "Template",
-              },
-            ]),
-            clearableFilters: computed(() => ({
-              filters: false,
-              search: false,
-            })),
-            urlFilters,
-            emits,
-          }),
-        );
-        return () => h(TableFiltersRow);
-      },
-    });
-    app = createApp(Host);
-    const passthrough =
-      (tag: string): FunctionalComponent =>
-      (_props, { slots }) =>
-        h(tag, slots.default?.());
-    app.component("UPopover", passthrough("div"));
-    app.component("UButton", passthrough("button"));
-    app.component("UIcon", passthrough("i"));
-    app.component("Suspense", passthrough("div"));
-    const container = document.createElement("div");
-    app.mount(container);
-    return container;
-  };
-
-  beforeEach(() => {
-    emits.mockClear();
-    vi.stubGlobal("computed", computed);
-    vi.stubGlobal("ref", ref);
-    vi.stubGlobal("useI18n", () => ({
-      t: (key: string) => key,
-      locale: ref("en"),
-    }));
-    vi.stubGlobal("useTranslation", () => ({
-      processI18n: (text: string) =>
-        text.startsWith("$") ? `t:${text.slice(1)}` : text,
-    }));
-    vi.stubGlobal("useDmsAppConfig", () => ({
-      ui: { icons: { close: "i-close", plus: "i-plus" } },
-    }));
-    vi.stubGlobal("useDataTypes", () => ({ getDataType: () => undefined }));
-    vi.stubGlobal("isString", (value: unknown) => typeof value === "string");
-    vi.stubGlobal("resolveDmsComponent", () => undefined);
-  });
-
-  afterEach(() => {
-    app?.unmount();
-    app = undefined;
-    vi.unstubAllGlobals();
-  });
-
-  it("draws a chip per URL filter and asks to remove its parameter", async () => {
-    const container = mount([
-      {
-        param: "email",
-        label: "$app.email",
-        accessorKey: "email",
-        mode: "is",
-        value: "a@b.test",
-      },
-      {
-        param: "template",
-        accessorKey: "templateSlug",
-        mode: "is",
-        value: "welcome",
-      },
-    ]);
-    const chips = container.querySelectorAll("[data-dms-url-filter]");
-    expect(chips).toHaveLength(2);
-    expect(chips[0]!.textContent).toContain("t:app.email");
-    expect(chips[0]!.textContent).toContain("a@b.test");
-    expect(chips[1]!.textContent).toContain("Template");
-
-    chips[1]!.querySelector("button")!.click();
-    await nextTick();
-    expect(emits).toHaveBeenCalledWith("removeUrlFilter", "template");
-  });
-});