@antelopejs/dms 0.7.0 → 0.7.2

package/frontend-vue/tests/table-actions-search-label.test.ts

@@ -0,0 +1,147 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  provide,
+  ref,
+  shallowRef,
+  watch,
+  type App,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import TableActions from "../layers/dms-ui/app/build/components/table/Actions.vue";
+import { FULL_TABLE_CHROME } from "../layers/dms-ui/app/build/composables/table-view/utils/chrome";
+
+vi.mock("../layers/dms-ui/app/build/components/table/Menu.vue", () => ({
+  default: { render: () => null },
+}));
+
+vi.mock("../layers/dms-ui/app/build/components/form/SearchInput.vue", () => ({
+  default: { render: () => null },
+}));
+
+const PassThrough = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", slots.default?.()),
+});
+
+const ButtonStub = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("button", slots.default?.()),
+});
+
+const InputStub = defineComponent({
+  setup: () => () => h("input"),
+});
+
+let app: App | undefined;
+
+function mountActions(searchPlaceholder: string | undefined, search = "") {
+  const Host = defineComponent({
+    setup() {
+      provide(
+        "tableSharedData",
+        shallowRef({
+          activeCapabilities: ref({
+            search: true,
+            filters: false,
+            sorting: false,
+          }),
+          labeledColumns: ref([]),
+          globalFilterState: ref(search),
+          columnFiltersState: ref([]),
+          paginationState: ref({ pageIndex: 0, pageSize: 10 }),
+          filtersRowOpenState: ref(false),
+          hasCustomSort: ref(false),
+          displays: [],
+          activeDisplayState: ref("table"),
+          kanbanGroupByOptions: [],
+          kanbanGroupByState: ref(undefined),
+          onFiltersCleared: () => undefined,
+          emits: () => undefined,
+        }),
+      );
+      return () =>
+        h(TableActions, {
+          searchPlaceholder,
+          chrome: { ...FULL_TABLE_CHROME, refresh: false, menu: false },
+        });
+    },
+  });
+  app = createApp(Host);
+  for (const [name, stub] of Object.entries({
+    UButton: ButtonStub,
+    UInput: InputStub,
+    UKbd: PassThrough,
+    UPopover: PassThrough,
+    UDropdownMenu: PassThrough,
+    UTooltip: PassThrough,
+    UIcon: PassThrough,
+  })) {
+    app.component(name, stub);
+  }
+  const container = document.createElement("div");
+  app.mount(container);
+  return container;
+}
+
+beforeEach(() => {
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("ref", ref);
+  vi.stubGlobal("watch", watch);
+  vi.stubGlobal("defineShortcuts", () => undefined);
+  vi.stubGlobal("useDmsAppConfig", () => ({
+    ui: { icons: { close: "close", plus: "plus", ellipsis: "ellipsis" } },
+  }));
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (value: string) =>
+      value.startsWith("$") ? `translated:${value.slice(1)}` : value,
+  }));
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  vi.unstubAllGlobals();
+});
+
+describe("table toolbar search", () => {
+  it("names the button opening the search", () => {
+    const container = mountActions(undefined);
+    expect(container.querySelector("button")?.getAttribute("aria-label")).toBe(
+      "dms.table.search_open",
+    );
+  });
+
+  it("uses the configured placeholder, which also names the field", async () => {
+    const container = mountActions("$page.members.search", "ada");
+    await nextTick();
+    const input = container.querySelector("input");
+    expect(input?.getAttribute("placeholder")).toBe(
+      "translated:page.members.search",
+    );
+    expect(input?.getAttribute("aria-label")).toBe(
+      "translated:page.members.search",
+    );
+  });
+
+  it("falls back to the default placeholder as the field's name", async () => {
+    const container = mountActions(undefined, "ada");
+    await nextTick();
+    const input = container.querySelector("input");
+    expect(input?.getAttribute("placeholder")).toBe(
+      "dms.table.search_placeholder",
+    );
+    expect(input?.getAttribute("aria-label")).toBe(
+      "dms.table.search_placeholder",
+    );
+  });
+});

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

@@ -148,6 +148,18 @@ describe("clearTableFilters", () => {
     ).toBe(true);
   });
 
+  it("counts the hidden filters of the page URL as filters", () => {
+    const state = { ...createState(), hiddenFiltersApply: ref(true) };
+    expect(isTableNarrowed(state)).toBe(true);
+    // Nothing the user could clear: no clear action is offered.
+    expect(clearableTableFilters(state)).toEqual({
+      filters: false,
+      search: false,
+    });
+    state.hiddenFiltersApply.value = false;
+    expect(isTableNarrowed(state)).toBe(false);
+  });
+
   it("ignores a search the active display does not apply", () => {
     const state = {
       ...createState({ globalFilter: "a" }),
@@ -244,6 +256,16 @@ describe("table empty state", () => {
     expect(state.globalFilter.value).toBe("");
   });
 
+  it("says no row matches, not that there are none yet, under hidden filters", () => {
+    const container = mountEmpty({
+      ...createState(),
+      hiddenFiltersApply: ref(true),
+    });
+    expect(container.textContent).toContain("dms.table.no_results_title");
+    expect(container.textContent).not.toContain("dms.table.empty_title");
+    expect(container.querySelector("button")).toBeNull();
+  });
+
   it("offers no clear action when only default filters narrow the rows", () => {
     const container = mountEmpty(
       createState({ columnFilters: [pinnedStatus("open")] }),

package/frontend-vue/tests/table-empty-body-viewport.test.ts

@@ -0,0 +1,25 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const tableSource = readFileSync(
+  resolve(__dirname, "../layers/dms-ui/app/build/components/table/Table.vue"),
+  "utf8",
+);
+
+describe("table empty body", () => {
+  it("centres on the visible part of a table wider than its card", () => {
+    expect(tableSource).toMatch(
+      /emptyBody:\s*"sticky start-0 w-\[var\(--dms-table-viewport,auto\)\]"/,
+    );
+    expect(tableSource).toMatch(
+      /<div :class="uiTable\.emptyBody\(\)">\s*<TableEmpty/,
+    );
+  });
+
+  it("knows the visible width of every table, not only expandable ones", () => {
+    expect(tableSource).toMatch(
+      /"--dms-table-viewport":\s*tableViewportWidth\.value > 0/,
+    );
+  });
+});

package/frontend-vue/tests/table-metric-cells.test.ts

@@ -103,6 +103,28 @@ describe("metric cells", () => {
     expect(cell.innerHTML).toContain("text-error");
   });
 
+  it("tones a status pill by the row's tone field before the column's map", () => {
+    const options = { tones: { "404": "info" }, toneField: "statusTone" };
+    const pill = (row: Record<string, unknown>) =>
+      render(formatters.get("status_pill")!(404, "en-GB", options, row))
+        .innerHTML;
+
+    expect(pill({ statusTone: "warning" })).toContain("text-warning");
+    app?.unmount();
+    expect(pill({ statusTone: "not-a-tone" })).toContain("text-info");
+    app?.unmount();
+    expect(
+      render(
+        formatters.get("status_pill")!(
+          503,
+          "en-GB",
+          { toneField: "statusTone" },
+          { statusTone: "error" },
+        ),
+      ).innerHTML,
+    ).toContain("text-error");
+  });
+
   it("draws a progress bar with its figures", () => {
     const cell = render(
       formatters.get("progress")!(

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

@@ -0,0 +1,126 @@
+// @vitest-environment jsdom
+/**
+ * The `pills` cell draws a list of strings and related rows as outline role
+ * pills, and the pill items a server styles per row in their own tone and
+ * variant.
+ */
+import { createApp, defineComponent, h, type App, type VNodeChild } from "vue";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import type { DataType } from "../layers/dms-core/app/composables/data-types/useDataType";
+import { isObject } from "../layers/dms-core/app/utils/type-check";
+
+const stub = { default: { render: () => null } };
+vi.mock("@nuxt/ui/components/Avatar.vue", () => stub);
+vi.mock("@nuxt/ui/components/Badge.vue", () => stub);
+vi.mock("@nuxt/ui/components/Link.vue", () => stub);
+vi.mock("@nuxt/ui/runtime/vue/components/Icon.vue", () => stub);
+vi.mock("../layers/dms-ui/app/composables/useFileReadUrls", () => ({
+  useFileReadUrls: () => ({ getUrl: () => undefined, resolve: () => {} }),
+}));
+
+type Formatter = (
+  value: unknown,
+  locale: string,
+  options?: unknown,
+  row?: Record<string, unknown>,
+) => VNodeChild;
+
+const registered = new Map<string, DataType["formatter"]>();
+
+// Auto-imports of the layer the default types are registered with.
+function stubLayerGlobals() {
+  vi.stubGlobal("h", h);
+  vi.stubGlobal("isObject", isObject);
+  for (const name of [
+    "formatNumber",
+    "formatPrice",
+    "formatPercentage",
+    "formatTimeSpan",
+    "formatDate",
+    "getBooleanLabel",
+  ]) {
+    vi.stubGlobal(name, () => "");
+  }
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string) => text.replace(/^\$/, "i18n:"),
+  }));
+  vi.stubGlobal("useDataTypes", () => ({
+    registerDataType: (dataType: DataType) =>
+      registered.set(dataType.id, dataType.formatter),
+  }));
+}
+
+let app: App | undefined;
+
+function renderPills(value: unknown, options: unknown = {}): HTMLElement {
+  const content = (registered.get("pills")!.default as Formatter)(
+    value,
+    "en",
+    options,
+    {},
+  );
+  const container = document.createElement("div");
+  app = createApp(defineComponent({ setup: () => () => content }));
+  app.component("UIcon", defineComponent({ render: () => h("i") }));
+  app.mount(container);
+  return container;
+}
+
+const pillsOf = (cell: HTMLElement) =>
+  [...cell.firstElementChild!.children].map((pill) => ({
+    label: pill.textContent,
+    className: pill.className,
+  }));
+
+beforeAll(async () => {
+  stubLayerGlobals();
+  const { registerDefaultDataTypes } = await import(
+    "../layers/dms-ui/app/build/composables/data-types/registerDefaults"
+  );
+  registerDefaultDataTypes();
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+});
+
+describe("pills cell", () => {
+  it("draws strings and related rows as outline role pills, as before", () => {
+    const strings = pillsOf(renderPills(["$roles.admin", "Billing"]));
+    expect(strings.map((pill) => pill.label)).toEqual([
+      "i18n:roles.admin",
+      "Billing",
+    ]);
+    expect(strings[0]!.className).toContain("border-accented");
+    app?.unmount();
+
+    const rows = pillsOf(renderPills([{ _id: "r1", name: "Editor" }, "r2"]));
+    expect(rows.map((pill) => pill.label)).toEqual(["Editor"]);
+  });
+
+  it("draws a pill item in its tone and variant, beside plain strings", () => {
+    const pills = pillsOf(
+      renderPills([
+        { label: "EN", tone: "primary", variant: "soft" },
+        { label: "DE", variant: "outline" },
+        { label: "IT", tone: "success" },
+        "ES",
+      ]),
+    );
+
+    expect(pills.map((pill) => pill.label)).toEqual(["EN", "DE", "IT", "ES"]);
+    expect(pills[0]!.className).toContain("text-primary");
+    expect(pills[0]!.className).toContain("bg-(--dms-accent-tint)");
+    expect(pills[1]!.className).toContain("border");
+    expect(pills[1]!.className).toContain("bg-transparent");
+    expect(pills[2]!.className).toContain("bg-success/12");
+    expect(pills[3]!.className).toContain("border-accented");
+  });
+
+  it("draws a pill item without a tone nor a variant as a plain string", () => {
+    const [pill] = pillsOf(renderPills([{ label: "FR" }]));
+    expect(pill!.label).toBe("FR");
+    expect(pill!.className).toContain("border-accented");
+  });
+});

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

@@ -0,0 +1,123 @@
+// @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);
+vi.stubGlobal("useDmsLazyAsyncData", engine.useDmsLazyAsyncData);
+
+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-view-hidden-filters-page.test.ts

@@ -0,0 +1,137 @@
+import { computed, nextTick, readonly, ref, watch, type Ref } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { LocationQuery } from "vue-router";
+import { useAccumulatedPages } from "../layers/dms-ui/app/build/composables/table-view/useAccumulatedPages";
+import { usePersistedPagination } from "../layers/dms-ui/app/build/composables/table-view/usePersistedPagination";
+import { usePreferences } from "../layers/dms-core/app/composables/user/usePreferences";
+
+const PAGE_SIZE = 10;
+const THIRD_PAGE = 2;
+
+// What a table view derives from `queryParamFilters: { status: { field: "status" } }`.
+const hiddenFiltersOf = (query: () => LocationQuery) =>
+  computed(() =>
+    query().status === undefined
+      ? []
+      : [{ accessorKey: "status", mode: "is", value: query().status }],
+  );
+
+const TABLE_KEY = "tables.tasks.query-filters";
+const preferenceKey = (suffix: string) => `${TABLE_KEY}.${suffix}`;
+
+// The `user-preferences` cookie, surviving the remounts of a page.
+let cookie: Ref<Record<string, unknown>>;
+
+// What a table view does on mount: its page, read back from the cookie,
+// under the hidden filters the URL sets.
+const mountTable = (query: Ref<LocationQuery>) => {
+  const hiddenFilters = hiddenFiltersOf(() => query.value);
+  const pagination = usePersistedPagination({
+    preferences: usePreferences(),
+    preferenceKey,
+    defaults: { pageIndex: 0, pageSize: PAGE_SIZE },
+    scope: () => [hiddenFilters.value, []],
+  });
+  return { hiddenFilters, pagination };
+};
+
+beforeEach(() => {
+  cookie = ref({});
+  vi.stubGlobal("useDmsCookie", () => cookie);
+  vi.stubGlobal("ref", ref);
+  vi.stubGlobal("readonly", readonly);
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("watch", watch);
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("a hidden filter changed by the URL", () => {
+  it("sends the pager back to page 1", () => {
+    const query = ref<LocationQuery>({ status: "pending" });
+    const { pagination } = mountTable(query);
+    pagination.value = { pageIndex: THIRD_PAGE, pageSize: PAGE_SIZE };
+
+    query.value = { status: "cancelled" };
+
+    expect(pagination.value).toEqual({ pageIndex: 0, pageSize: PAGE_SIZE });
+  });
+
+  it("keeps the page when another query parameter changes", () => {
+    const query = ref<LocationQuery>({ status: "pending" });
+    const { pagination } = mountTable(query);
+    pagination.value = { pageIndex: THIRD_PAGE, pageSize: PAGE_SIZE };
+
+    query.value = { status: "pending", record: "42" };
+
+    expect(pagination.value.pageIndex).toBe(THIRD_PAGE);
+  });
+
+  it("sends the pager back to page 1 when the filter goes away", () => {
+    const query = ref<LocationQuery>({ status: "pending" });
+    const { pagination } = mountTable(query);
+    pagination.value = { pageIndex: THIRD_PAGE, pageSize: PAGE_SIZE };
+
+    query.value = {};
+
+    expect(pagination.value.pageIndex).toBe(0);
+  });
+
+  it("starts at page 1 when a link remounts the page under another value", async () => {
+    const first = mountTable(ref<LocationQuery>({ status: "pending" }));
+    first.pagination.value = { pageIndex: THIRD_PAGE, pageSize: PAGE_SIZE };
+    await nextTick();
+
+    const other = mountTable(ref<LocationQuery>({ status: "completed" }));
+    expect(other.pagination.value).toEqual({
+      pageIndex: 0,
+      pageSize: PAGE_SIZE,
+    });
+  });
+
+  it("restores the page of a remount under the same value", async () => {
+    const first = mountTable(ref<LocationQuery>({ status: "pending" }));
+    first.pagination.value = { pageIndex: THIRD_PAGE, pageSize: PAGE_SIZE };
+    await nextTick();
+
+    const again = mountTable(ref<LocationQuery>({ status: "pending" }));
+    expect(again.pagination.value.pageIndex).toBe(THIRD_PAGE);
+  });
+
+  it("keeps a page stored before its hidden filters were", () => {
+    cookie.value = {
+      tables: {
+        tasks: {
+          "query-filters": {
+            pagination: { pageIndex: THIRD_PAGE, pageSize: PAGE_SIZE },
+          },
+        },
+      },
+    };
+    const table = mountTable(ref<LocationQuery>({}));
+    expect(table.pagination.value.pageIndex).toBe(THIRD_PAGE);
+  });
+
+  it("starts a load-more list over from one page", async () => {
+    const query = ref<LocationQuery>({ status: "pending" });
+    const hiddenFilters = hiddenFiltersOf(() => query.value);
+    const pagination = ref({ pageIndex: 0, pageSize: PAGE_SIZE });
+    const pages = useAccumulatedPages({
+      mode: "loadMore",
+      pagination,
+      resetOn: [hiddenFilters],
+    });
+    pages.loadNextPage();
+    expect(pages.requestedPagination.value.pageSize).toBe(PAGE_SIZE * 2);
+
+    query.value = { status: "cancelled" };
+    await nextTick();
+
+    expect(pages.requestedPagination.value).toEqual({
+      pageIndex: 0,
+      pageSize: PAGE_SIZE,
+    });
+  });
+});