@antelopejs/dms 0.5.6 → 0.6.1

package/frontend-vue/tests/table-view-selection-footer-empty.test.ts

@@ -0,0 +1,379 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  provide,
+  ref,
+  shallowRef,
+  type App,
+  type Component,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import TableRowSelection from "../layers/dms-ui/app/build/components/table/RowSelection.vue";
+import TableEmpty from "../layers/dms-ui/app/build/components/table/Empty.vue";
+import TablePagination from "../layers/dms-ui/app/build/components/table/Pagination.vue";
+
+vi.mock(
+  "../layers/dms-ui/app/components/empty-state/EmptyState.vue",
+  async () => {
+    const vue = await import("vue");
+    const Button = vue.defineComponent({
+      props: { label: String, to: String },
+      setup: (props) => () =>
+        vue.h("button", { "data-to": props.to }, props.label),
+    });
+    return {
+      default: vue.defineComponent({
+        props: { title: String, description: String, actions: Array },
+        setup: (props) => () =>
+          vue.h("section", [
+            vue.h("h3", props.title),
+            vue.h("p", props.description),
+            ...(props.actions ?? []).map((action) =>
+              vue.h(Button, action as Record<string, unknown>),
+            ),
+          ]),
+      }),
+    };
+  },
+);
+
+const ButtonStub = defineComponent({
+  props: { label: String, ariaLabel: String, to: String },
+  emits: ["click"],
+  setup:
+    (props, { emit }) =>
+    () =>
+      h(
+        "button",
+        {
+          "aria-label": props.ariaLabel,
+          "data-to": props.to,
+          onClick: () => emit("click"),
+        },
+        props.label,
+      ),
+});
+
+const I18nTStub = defineComponent({
+  props: { keypath: String, plural: Number },
+  setup:
+    (props, { slots }) =>
+    () =>
+      h("span", { "data-keypath": props.keypath }, [
+        slots.count?.(),
+        " ",
+        slots.total?.(),
+      ]),
+});
+
+let app: App | undefined;
+
+function mount(
+  component: Component,
+  props: Record<string, unknown>,
+  shared: Record<string, unknown>,
+) {
+  const emitted: unknown[][] = [];
+  const Host = defineComponent({
+    setup() {
+      // The table shares its state with its parts by injection.
+      provide(
+        "tableSharedData",
+        shallowRef({
+          emits: (...args: unknown[]) => emitted.push(args),
+          ...shared,
+        }),
+      );
+      return () => h(component, props);
+    },
+  });
+  app = createApp(Host);
+  for (const [name, stub] of Object.entries({
+    UButton: ButtonStub,
+    UCheckbox: defineComponent({ render: () => h("input") }),
+    UIcon: defineComponent({ render: () => h("i") }),
+    USkeleton: defineComponent({
+      render: () => h("span", { "data-skeleton": "" }),
+    }),
+    USelect: defineComponent({ render: () => h("select") }),
+    I18nT: I18nTStub,
+  })) {
+    app.component(name, stub);
+  }
+  const container = document.createElement("div");
+  app.mount(container);
+  return { container, emitted };
+}
+
+beforeEach(() => {
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("useI18n", () => ({
+    t: (key: string, params?: Record<string, unknown>) =>
+      params ? `${key}:${JSON.stringify(params)}` : key,
+    te: () => false,
+    locale: ref("en-GB"),
+  }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string, params?: Record<string, unknown>) =>
+      text.startsWith("$")
+        ? `${text.slice(1)}${params ? JSON.stringify(params) : ""}`
+        : text,
+  }));
+  vi.stubGlobal("useDmsAppConfig", () => ({
+    ui: { icons: { close: "i-x", arrowLeft: "i-left" } },
+  }));
+  vi.stubGlobal("resolveDmsComponent", () => undefined);
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  vi.unstubAllGlobals();
+});
+
+describe("selection bar", () => {
+  const rerun = {
+    label: "Re-run",
+    bulk: { allMatching: true as const },
+    target: { type: "api" as const, url: "/rerun", successMessage: "ok" },
+  };
+  const tag = {
+    label: "Tag",
+    bulk: true as const,
+    target: { type: "api" as const, url: "/tag", successMessage: "ok" },
+  };
+  const pageOf = (count: number) => ({
+    table: {
+      getRowModel: () => ({
+        rows: Array.from({ length: count }, (_, index) => ({
+          id: `r${index}`,
+        })),
+      }),
+      getIsAllPageRowsSelected: () => true,
+      toggleAllPageRowsSelected: vi.fn(),
+    },
+  });
+
+  it("offers every matching row once the page is selected, then only the actions reaching them", async () => {
+    const allMatching = ref(false);
+    const { container, emitted } = mount(
+      defineComponent({
+        setup: () => () =>
+          h(TableRowSelection, {
+            rowSelection: { r0: true, r1: true },
+            allMatching: allMatching.value,
+            "onUpdate:allMatching": (value: boolean) => {
+              allMatching.value = value;
+            },
+            rowActions: { delete: true },
+            bulkActions: [rerun, tag],
+            total: 40,
+            canExport: true,
+          }),
+      }),
+      {},
+      pageOf(2),
+    );
+    const labels = () =>
+      [...container.querySelectorAll("button")].map(
+        (button) =>
+          button.textContent?.trim() || button.getAttribute("aria-label"),
+      );
+    expect(labels()).toContain('dms.table.select_all_matching:{"count":"40"}');
+    expect(labels()).toEqual(
+      expect.arrayContaining(["Re-run", "Tag", "dms.button.delete"]),
+    );
+
+    const selectAll = [...container.querySelectorAll("button")].find((button) =>
+      button.textContent?.includes("select_all_matching"),
+    );
+    selectAll!.click();
+    await nextTick();
+    expect(allMatching.value).toBe(true);
+    expect(
+      container.querySelector(
+        '[data-keypath="dms.table.all_matching_selected"]',
+      ),
+    ).not.toBe(null);
+    expect(labels()).toContain("Re-run");
+    expect(labels()).not.toContain("Tag");
+    expect(labels()).not.toContain("dms.button.delete");
+
+    [...container.querySelectorAll("button")]
+      .find((button) => button.textContent === "Re-run")!
+      .click();
+    [...container.querySelectorAll("button")]
+      .find((button) => button.textContent === "dms.button.export_data")!
+      .click();
+    expect(emitted).toEqual([["bulkAction", rerun], ["exportAll"]]);
+  });
+});
+
+describe("empty body", () => {
+  it("words a filtered table in the module's terms, the clear action first", () => {
+    const { container } = mount(
+      TableEmpty,
+      {
+        emptyStates: {
+          filtered: {
+            title: "$runs.none_for",
+            description: "Try another name.",
+            actions: [{ label: "Docs", to: "https://docs.example" }],
+          },
+        },
+      },
+      {
+        isFiltered: computed(() => true),
+        clearableFilters: computed(() => ({ search: true, filters: false })),
+        globalFilterState: ref("zzz"),
+        resetFilters: vi.fn(),
+      },
+    );
+    expect(container.querySelector("h3")?.textContent).toBe(
+      'runs.none_for{"search":"zzz"}',
+    );
+    expect(container.querySelector("p")?.textContent).toBe("Try another name.");
+    expect(
+      [...container.querySelectorAll("button")].map((button) => [
+        button.textContent,
+        button.getAttribute("data-to"),
+      ]),
+    ).toEqual([
+      ["dms.table.clear_search", null],
+      ["Docs", "https://docs.example"],
+    ]);
+  });
+
+  it("fills {search} in a literal text too", () => {
+    const { container } = mount(
+      TableEmpty,
+      {
+        emptyStates: {
+          filtered: {
+            title: "No run matches “{search}”",
+            description: "{other} stays as written.",
+          },
+        },
+      },
+      {
+        isFiltered: computed(() => true),
+        clearableFilters: computed(() => ({ search: true, filters: false })),
+        globalFilterState: ref("zzz"),
+        resetFilters: vi.fn(),
+      },
+    );
+    expect(container.querySelector("h3")?.textContent).toBe(
+      "No run matches “zzz”",
+    );
+    expect(container.querySelector("p")?.textContent).toBe(
+      "{other} stays as written.",
+    );
+  });
+
+  it("keeps the built-in words for a reason the module left out", () => {
+    const { container } = mount(
+      TableEmpty,
+      { loadError: "error.500", emptyStates: { filtered: { title: "x" } } },
+      {
+        isFiltered: computed(() => false),
+        clearableFilters: computed(() => ({})),
+        globalFilterState: ref(""),
+      },
+    );
+    expect(container.querySelector("h3")?.textContent).toBe(
+      "dms.table.load_error_title",
+    );
+  });
+  it("says the table's words in a custom display's empty body too", () => {
+    const { container } = mount(
+      TableEmpty,
+      {},
+      {
+        isFiltered: computed(() => false),
+        clearableFilters: computed(() => ({})),
+        globalFilterState: ref(""),
+        emptyStates: { firstRun: { title: "$inbox.caught_up" } },
+      },
+    );
+    expect(container.querySelector("h3")?.textContent).toBe(
+      'inbox.caught_up{"search":""}',
+    );
+  });
+});
+
+describe("footer figures", () => {
+  it("draws the summaries after the count and the legend's colored values", () => {
+    const { container } = mount(
+      TablePagination,
+      {},
+      {
+        rowCount: 32,
+        firstPageLoading: false,
+        paginationState: ref({ pageIndex: 0, pageSize: 10 }),
+        chrome: computed(() => ({ pageSize: true })),
+        table: {
+          getCanPreviousPage: () => false,
+          getCanNextPage: () => true,
+        },
+        footer: {
+          summaries: [
+            { id: "0", label: "Output", value: "354 MB" },
+            { id: "1", label: "Failing" },
+          ],
+          legend: [
+            { label: "Healthy", color: "success" },
+            { label: "Paused", color: "neutral" },
+          ],
+        },
+      },
+    );
+    const text = container.textContent ?? "";
+    expect(text).toContain("Output");
+    expect(text).toContain("354 MB");
+    expect(text).toContain("Failing");
+    expect(container.querySelectorAll("[data-skeleton]")).toHaveLength(1);
+    const dots = [...container.querySelectorAll("span.rounded-full")].map(
+      (dot) => dot.className,
+    );
+    expect(dots.some((name) => name.includes("text-success"))).toBe(true);
+    expect(dots.some((name) => name.includes("text-muted"))).toBe(true);
+  });
+
+  it("shows how far a list growing by pages got, and loads the next page", () => {
+    const load = vi.fn();
+    const { container } = mount(
+      TablePagination,
+      {},
+      {
+        rowCount: 28,
+        firstPageLoading: false,
+        paginationState: ref({ pageIndex: 0, pageSize: 10 }),
+        chrome: computed(() => ({ pageSize: true })),
+        table: {
+          getCanPreviousPage: () => false,
+          getCanNextPage: () => true,
+        },
+        accumulation: {
+          mode: "loadMore",
+          shown: 20,
+          hasMore: true,
+          loading: false,
+          load,
+        },
+      },
+    );
+    expect(
+      container.querySelector('[data-keypath="dms.pagination.shown_of"]'),
+    ).not.toBeNull();
+    expect(container.querySelector("select")).toBeNull();
+    const more = [...container.querySelectorAll("button")].find(
+      (button) => button.textContent === "dms.pagination.load_more",
+    );
+    more!.click();
+    expect(load).toHaveBeenCalledTimes(1);
+  });
+});

package/frontend-vue/tests/table-view-sortable-columns.test.ts

@@ -0,0 +1,293 @@
+import { describe, expect, it, vi } from "vitest";
+import enGB from "../layers/dms-ui/i18n/locales/ui-en-GB.json";
+import frFR from "../layers/dms-ui/i18n/locales/ui-fr-FR.json";
+import {
+  defaultSortingState,
+  headerSortCue,
+  isColumnSortable,
+  isDefaultSorting,
+  isSameSorting,
+  isUnsortableFieldError,
+  resolveDefaultSort,
+  resolveDefaultSortConfig,
+  sanitizeSorting,
+  sortableColumnIds,
+  sortDirectionLabelKey,
+  sortValueKind,
+} from "../layers/dms-ui/app/build/composables/table-view/utils/sortableColumns";
+
+// The Drawer demo's task columns: only `due_date` and
+// `completion_percentage` are `@Sortable()` on `/api/task`.
+const columns = [
+  { id: "name", accessorKey: "name", enableSorting: false },
+  { id: "email", accessorKey: "email", enableSorting: false },
+  { id: "due_date", accessorKey: "due_date", enableSorting: true },
+  { id: "price", accessorKey: "price", enableSorting: false },
+  {
+    id: "completion_percentage",
+    accessorKey: "completion_percentage",
+    enableSorting: true,
+  },
+];
+const sortable = sortableColumnIds(columns);
+
+describe("sortable column gating", () => {
+  it("keeps only the columns the backend marks sortable", () => {
+    expect([...sortable]).toEqual(["due_date", "completion_percentage"]);
+  });
+
+  it("treats a hand-built column without the flag as sortable", () => {
+    expect(isColumnSortable({ id: "x" })).toBe(true);
+    expect(isColumnSortable({ id: "x", enableSorting: false })).toBe(false);
+    expect([...sortableColumnIds([{ accessorKey: "x" }])]).toEqual(["x"]);
+  });
+});
+
+describe("sanitizeSorting", () => {
+  it("keeps a sort on a sortable column", () => {
+    expect(sanitizeSorting([{ id: "due_date", desc: true }], sortable)).toEqual(
+      [{ id: "due_date", desc: true }],
+    );
+  });
+
+  it("drops a saved or pasted sort on a non-sortable column", () => {
+    expect(sanitizeSorting([{ id: "price", desc: false }], sortable)).toEqual(
+      [],
+    );
+    expect(sanitizeSorting([{ id: "gone", desc: false }], sortable)).toEqual(
+      [],
+    );
+  });
+
+  it("sends a single column: the route sorts on one key", () => {
+    expect(
+      sanitizeSorting(
+        [
+          { id: "completion_percentage", desc: false },
+          { id: "due_date", desc: true },
+        ],
+        sortable,
+      ),
+    ).toEqual([{ id: "completion_percentage", desc: false }]);
+  });
+
+  it("survives malformed preferences", () => {
+    expect(sanitizeSorting(undefined, sortable)).toEqual([]);
+    expect(sanitizeSorting(null, sortable)).toEqual([]);
+    expect(sanitizeSorting("due_date" as unknown as never[], sortable)).toEqual(
+      [],
+    );
+    expect(sanitizeSorting([{ id: 3 } as unknown as never], sortable)).toEqual(
+      [],
+    );
+  });
+
+  it("drops a sort on a column the route refused since", () => {
+    const afterRefusal = new Set(
+      [...sortable].filter((id) => id !== "due_date"),
+    );
+    expect(
+      sanitizeSorting([{ id: "due_date", desc: false }], afterRefusal),
+    ).toEqual([]);
+  });
+});
+
+describe("resolveDefaultSort", () => {
+  it("uses a sortable default sort", () => {
+    expect(
+      resolveDefaultSort({ field: "due_date", desc: true }, sortable),
+    ).toEqual([{ id: "due_date", desc: true }]);
+    expect(resolveDefaultSort({ field: "due_date" }, sortable)).toEqual([
+      { id: "due_date", desc: false },
+    ]);
+  });
+
+  it("ignores a non-sortable default sort with a warning", () => {
+    const warn = vi.fn();
+    expect(resolveDefaultSort({ field: "name" }, sortable, warn)).toEqual([]);
+    expect(warn).toHaveBeenCalledOnce();
+    expect(warn.mock.calls[0]?.[0]).toContain('"name"');
+  });
+
+  it("has nothing to resolve without a default sort", () => {
+    expect(resolveDefaultSort(undefined, sortable)).toEqual([]);
+  });
+});
+
+describe("isSameSorting", () => {
+  it("compares column and direction", () => {
+    expect(
+      isSameSorting([{ id: "a", desc: false }], [{ id: "a", desc: false }]),
+    ).toBe(true);
+    expect(
+      isSameSorting([{ id: "a", desc: false }], [{ id: "a", desc: true }]),
+    ).toBe(false);
+    expect(isSameSorting([], [{ id: "a", desc: false }])).toBe(false);
+    expect(isSameSorting([], [])).toBe(true);
+  });
+});
+
+describe("isUnsortableFieldError (recovery trigger)", () => {
+  it("recognises the data API's refusal of a sort key", () => {
+    expect(
+      isUnsortableFieldError({
+        name: "FetchError",
+        statusCode: 400,
+        data: "Field is not sortable.",
+      }),
+    ).toBe(true);
+    expect(
+      isUnsortableFieldError({
+        statusCode: 400,
+        data: { message: "Field is not sortable." },
+      }),
+    ).toBe(true);
+    expect(
+      isUnsortableFieldError({
+        response: { status: 400 },
+        message: '[GET] "/api/task/list": 400 Field is not sortable.',
+      }),
+    ).toBe(true);
+  });
+
+  it("leaves every other failure to the error panel", () => {
+    expect(
+      isUnsortableFieldError({ statusCode: 400, data: "Invalid filter." }),
+    ).toBe(false);
+    expect(
+      isUnsortableFieldError({
+        statusCode: 500,
+        data: "Field is not sortable.",
+      }),
+    ).toBe(false);
+    expect(isUnsortableFieldError({ statusCode: 403, data: "Forbidden" })).toBe(
+      false,
+    );
+    expect(isUnsortableFieldError(undefined)).toBe(false);
+    expect(isUnsortableFieldError("Field is not sortable.")).toBe(false);
+  });
+});
+
+describe("stable default sort", () => {
+  it("falls back to a sortable creation date, newest first", () => {
+    const withCreated = new Set(["createdAt", "due_date"]);
+    expect(resolveDefaultSortConfig(undefined, withCreated)).toEqual({
+      field: "createdAt",
+      desc: true,
+    });
+    expect(
+      resolveDefaultSortConfig(undefined, new Set(["created_at"])),
+    ).toEqual({ field: "created_at", desc: true });
+  });
+
+  it("invents nothing without a sortable creation date", () => {
+    // The task demos list `created_at`, but not as @Sortable.
+    expect(resolveDefaultSortConfig(undefined, sortable)).toBeUndefined();
+  });
+
+  it("never replaces a declared default sort, even an ignored one", () => {
+    const warn = vi.fn();
+    expect(
+      resolveDefaultSortConfig({ field: "name" }, new Set(["createdAt"]), warn),
+    ).toBeUndefined();
+    expect(warn).toHaveBeenCalledOnce();
+  });
+});
+
+describe("header sort cue", () => {
+  it("draws nothing on a column that cannot be sorted", () => {
+    expect(
+      headerSortCue({ canSort: false, sorted: false, isDefaultSorting: false }),
+    ).toBe("none");
+    // Even a stale sort state on it never shows.
+    expect(
+      headerSortCue({ canSort: false, sorted: "asc", isDefaultSorting: true }),
+    ).toBe("none");
+  });
+
+  it("draws the neutral cue on an unsorted sortable column", () => {
+    expect(
+      headerSortCue({ canSort: true, sorted: false, isDefaultSorting: true }),
+    ).toBe("idle");
+  });
+
+  it("tells the default sort from the user's", () => {
+    expect(
+      headerSortCue({ canSort: true, sorted: "desc", isDefaultSorting: true }),
+    ).toBe("default");
+    expect(
+      headerSortCue({ canSort: true, sorted: "desc", isDefaultSorting: false }),
+    ).toBe("active");
+  });
+});
+
+describe("default sort indicator", () => {
+  const defaultSort = { field: "due_date", desc: true };
+
+  it("is on while the list keeps its default sort", () => {
+    expect(
+      isDefaultSorting([{ id: "due_date", desc: true }], defaultSort),
+    ).toBe(true);
+  });
+
+  it("is off once the user sorts, reverses or clears the sort", () => {
+    expect(
+      isDefaultSorting(
+        [{ id: "completion_percentage", desc: false }],
+        defaultSort,
+      ),
+    ).toBe(false);
+    expect(
+      isDefaultSorting([{ id: "due_date", desc: false }], defaultSort),
+    ).toBe(false);
+    expect(isDefaultSorting([], defaultSort)).toBe(false);
+  });
+
+  it("never shows without a default sort", () => {
+    expect(isDefaultSorting([], undefined)).toBe(false);
+    expect(isDefaultSorting([{ id: "due_date", desc: true }], undefined)).toBe(
+      false,
+    );
+  });
+
+  it("resets to the default sort, or to none without one", () => {
+    expect(defaultSortingState(defaultSort)).toEqual([
+      { id: "due_date", desc: true },
+    ]);
+    expect(defaultSortingState({ field: "name" })).toEqual([
+      { id: "name", desc: false },
+    ]);
+    expect(defaultSortingState(undefined)).toEqual([]);
+  });
+});
+
+describe("sort direction labels", () => {
+  it("fit the column's data type", () => {
+    expect(sortValueKind("percentage")).toBe("number");
+    expect(sortValueKind("price")).toBe("number");
+    expect(sortValueKind("date")).toBe("date");
+    expect(sortValueKind("string")).toBe("text");
+    expect(sortValueKind(undefined)).toBe("text");
+  });
+
+  it("are translated in English and French", () => {
+    const lookup = (messages: unknown, key: string) =>
+      key
+        .split(".")
+        .reduce<unknown>(
+          (node, part) => (node as Record<string, unknown>)?.[part],
+          messages,
+        );
+    for (const kind of ["number", "date", "text"] as const) {
+      for (const desc of [false, true]) {
+        const key = sortDirectionLabelKey(kind, desc);
+        expect(typeof lookup(enGB, key), key).toBe("string");
+        expect(typeof lookup(frFR, key), key).toBe("string");
+      }
+    }
+    expect(lookup(enGB, "dms.sort.direction.date.desc")).toBe(
+      "newest → oldest",
+    );
+    expect(lookup(frFR, "dms.sort.default_sort")).toBe("Tri par défaut");
+  });
+});