@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/tests/table-view-bulk-actions.test.ts

@@ -0,0 +1,154 @@
+import { getQuery, withQuery } from "ufo";
+import { describe, expect, it } from "vitest";
+import { createI18n } from "vue-i18n";
+import {
+  BULK_CONFIRM_TONES,
+  bulkActionConfirm,
+  bulkActionOutcome,
+  bulkActionQuery,
+  type PluralTranslate,
+  selectedRowIds,
+} from "../layers/dms-ui/app/build/composables/table-view/utils/bulkActions";
+import en from "../layers/dms-ui/i18n/locales/ui-en-GB.json";
+import fr from "../layers/dms-ui/i18n/locales/ui-fr-FR.json";
+
+function translator(locale: "en" | "fr"): PluralTranslate {
+  const i18n = createI18n({
+    legacy: false,
+    locale,
+    messages: { en, fr },
+  });
+  return (key, named, plural) => i18n.global.t(key, named, plural);
+}
+
+const IDS = ["17", "21", "23"];
+
+describe("TableView bulk actions", () => {
+  it("maps the selection to every selected row id, other pages included", () => {
+    expect(
+      selectedRowIds({ "17": true, "21": true, "5": false, "23": true }),
+    ).toEqual(IDS);
+    expect(selectedRowIds({})).toEqual([]);
+  });
+
+  it("sends every id as one repeated query key", () => {
+    const url = withQuery("/api/task/archive", bulkActionQuery("ids", IDS));
+    expect(url).toBe("/api/task/archive?ids=17&ids=21&ids=23");
+    expect(getQuery(url).ids).toEqual(IDS);
+    // A single selected row still goes as a list.
+    expect(withQuery("/api/task/delete", bulkActionQuery("id", ["17"]))).toBe(
+      "/api/task/delete?id=17",
+    );
+  });
+
+  it("counts what each bulk route changed and what it skipped", () => {
+    expect(bulkActionOutcome({ success: true, archivedCount: 3 }, 3)).toEqual({
+      processed: 3,
+      skipped: 0,
+    });
+    expect(bulkActionOutcome({ success: true, restoredCount: 2 }, 3)).toEqual({
+      processed: 2,
+      skipped: 1,
+    });
+    // Delete answers with the number of deleted rows, or `{ deleted: 0 }`
+    // when a row rule refused every id.
+    expect(bulkActionOutcome(1, 3)).toEqual({ processed: 1, skipped: 2 });
+    expect(bulkActionOutcome({ deleted: 0 }, 3)).toEqual({
+      processed: 0,
+      skipped: 3,
+    });
+  });
+
+  it("takes a response without a count as a full success", () => {
+    expect(bulkActionOutcome(undefined, 3)).toEqual({
+      processed: 3,
+      skipped: 0,
+    });
+    expect(bulkActionOutcome({ success: true }, 2)).toEqual({
+      processed: 2,
+      skipped: 0,
+    });
+    // A count above the request never reports negative skips.
+    expect(bulkActionOutcome(5, 3)).toEqual({ processed: 3, skipped: 0 });
+  });
+});
+
+describe("TableView bulk action confirmations", () => {
+  it("warns before archiving and alarms before deleting", () => {
+    expect(BULK_CONFIRM_TONES).toEqual({
+      archive: "warning",
+      delete: "error",
+      deletePermanently: "error",
+    });
+    const t = translator("en");
+    expect(bulkActionConfirm("archive", 2, t)).toMatchObject({
+      color: "warning",
+      icon: "i-ph-archive",
+    });
+    expect(bulkActionConfirm("delete", 2, t)).toMatchObject({
+      color: "error",
+      icon: "i-ph-trash",
+    });
+    expect(bulkActionConfirm("deletePermanently", 2, t)).toMatchObject({
+      color: "error",
+      icon: "i-ph-trash",
+    });
+  });
+
+  it("counts the rows, in the singular or the plural (en-GB)", () => {
+    const t = translator("en");
+    expect(bulkActionConfirm("delete", 1, t)).toMatchObject({
+      title: "Delete this item?",
+      confirmLabel: "Delete",
+    });
+    expect(bulkActionConfirm("delete", 3, t)).toMatchObject({
+      title: "Delete 3 items?",
+      description:
+        "The 3 selected items will be deleted. This action cannot be undone.",
+      confirmLabel: "Delete 3 items",
+    });
+    expect(bulkActionConfirm("deletePermanently", 3, t).title).toBe(
+      "Permanently delete 3 archived items?",
+    );
+    expect(bulkActionConfirm("deletePermanently", 1, t).confirmLabel).toBe(
+      "Delete permanently",
+    );
+    expect(bulkActionConfirm("archive", 1, t).title).toBe("Archive this item?");
+    expect(bulkActionConfirm("archive", 2, t).title).toBe("Archive 2 items?");
+    expect(t("dms.table.archive_rows", { count: 1 }, 1)).toBe(
+      "1 item archived",
+    );
+    expect(t("dms.table.delete_rows", { count: 3 }, 3)).toBe("3 items deleted");
+    expect(t("dms.table.restore_rows", { count: 0 }, 0)).toBe(
+      "0 items restored",
+    );
+  });
+
+  it("counts the rows, in the singular or the plural (fr-FR)", () => {
+    const t = translator("fr");
+    expect(bulkActionConfirm("delete", 1, t).title).toBe(
+      "Supprimer cet élément ?",
+    );
+    expect(bulkActionConfirm("delete", 4, t).title).toBe(
+      "Supprimer 4 éléments ?",
+    );
+    expect(bulkActionConfirm("deletePermanently", 2, t).title).toBe(
+      "Supprimer définitivement 2 éléments archivés ?",
+    );
+    expect(bulkActionConfirm("archive", 1, t).confirmLabel).toBe("Archiver");
+    expect(t("dms.table.archive_rows", { count: 1 }, 1)).toBe(
+      "1 élément archivé",
+    );
+    expect(t("dms.table.archive_rows", { count: 2 }, 2)).toBe(
+      "2 éléments archivés",
+    );
+  });
+
+  it("keeps the same keys in both locales", () => {
+    const keys = (messages: typeof en) =>
+      Object.keys(messages.dms.table).filter((key) =>
+        /_confirm_|_rows$|row_selection_count/.test(key),
+      );
+    expect(keys(fr as typeof en).sort()).toEqual(keys(en).sort());
+  });
+});

package/frontend-vue/tests/table-view-bulk-drawer.test.ts

@@ -0,0 +1,311 @@
+// @vitest-environment jsdom
+import { createApp, defineComponent, h, nextTick, ref, type App } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useActionTargets } from "../layers/dms-ui/app/build/composables/actions/useActionTargets";
+import {
+  bulkSelectionQuery,
+  isAllMatchingAction,
+  targetWithSelection,
+  withQuery,
+} from "../layers/dms-ui/app/build/composables/actions/bulkSelection";
+import {
+  listenRowSteps,
+  rowNavigation,
+} from "../layers/dms-ui/app/build/composables/actions/rowNavigation";
+import {
+  readRecordId,
+  recordUrlKey,
+  writeRecordId,
+} from "../layers/dms-ui/app/build/composables/table-view/utils/recordLink";
+import type { CustomRowAction } from "../layers/dms-ui/app/types/row-action";
+
+describe("bulk selection requests", () => {
+  it("sends the ids, or the filters of every matching row", () => {
+    expect(bulkSelectionQuery({ ids: ["a", "b"], count: 2 })).toEqual({
+      ids: ["a", "b"],
+    });
+    expect(
+      bulkSelectionQuery({
+        matching: { filter_status: "is:open", search: "", showArchived: false },
+        count: 40,
+      }),
+    ).toEqual({
+      allMatching: "true",
+      filter_status: "is:open",
+      showArchived: "false",
+    });
+  });
+
+  it("appends the selection to a URL target, a repeated key per id", () => {
+    expect(withQuery("/api/runs/rerun?force=1", { ids: ["a", "b"] })).toBe(
+      "/api/runs/rerun?force=1&ids=a&ids=b",
+    );
+    expect(
+      targetWithSelection(
+        { type: "api", url: "/rerun", successMessage: "ok" },
+        { ids: ["a"] },
+      ),
+    ).toEqual({ type: "api", url: "/rerun?ids=a", successMessage: "ok" });
+    const drawer = {
+      type: "drawer" as const,
+      component: { componentName: "RunDrawer" },
+    };
+    expect(targetWithSelection(drawer, { ids: ["a"] })).toBe(drawer);
+  });
+
+  it("tells actions reaching every matching row", () => {
+    const target = { type: "page" as const, url: "/x" };
+    expect(isAllMatchingAction({ label: "a", target, bulk: true })).toBe(false);
+    expect(
+      isAllMatchingAction({ label: "a", target, bulk: { allMatching: true } }),
+    ).toBe(true);
+  });
+});
+
+describe("row navigation", () => {
+  const rows = [{ _id: "r1" }, { _id: "r2" }, { _id: "r3" }];
+  const source = { rows: () => rows, rowIdKey: "_id" };
+
+  it("places a row among the rows shown and steps to its neighbours", () => {
+    const opened: unknown[] = [];
+    const navigation = rowNavigation(source, rows[1]!, (row) =>
+      opened.push(row),
+    );
+    expect(navigation).toMatchObject({
+      index: 1,
+      total: 3,
+      hasPrev: true,
+      hasNext: true,
+    });
+    navigation!.next();
+    navigation!.prev();
+    expect(opened).toEqual([rows[2], rows[0]]);
+    expect(rowNavigation(source, { _id: "gone" }, () => {})).toBe(undefined);
+  });
+
+  it("steps with J and K, never while the user types", () => {
+    const next = vi.fn();
+    const prev = vi.fn();
+    const stop = listenRowSteps(() => ({
+      index: 0,
+      total: 2,
+      hasPrev: false,
+      hasNext: true,
+      next,
+      prev,
+    }));
+    window.dispatchEvent(new KeyboardEvent("keydown", { key: "j" }));
+    window.dispatchEvent(new KeyboardEvent("keydown", { key: "K" }));
+    const input = document.createElement("input");
+    document.body.append(input);
+    input.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "j", bubbles: true }),
+    );
+    input.remove();
+    stop();
+    window.dispatchEvent(new KeyboardEvent("keydown", { key: "j" }));
+    expect(next).toHaveBeenCalledTimes(1);
+    expect(prev).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("record deep links", () => {
+  it("keys the open row by table on a page with several tables", () => {
+    expect(recordUrlKey({ tableId: "runs", isSoleTableView: true })).toBe(
+      "record",
+    );
+    expect(recordUrlKey({ tableId: "runs", isSoleTableView: false })).toBe(
+      "runs.record",
+    );
+    expect(readRecordId({ "runs.record": "r2" }, { tableId: "runs" })).toBe(
+      "r2",
+    );
+    expect(readRecordId({ record: "r2" }, { tableId: "runs" })).toBe(undefined);
+  });
+
+  it("writes and removes the open row in the URL in place", () => {
+    window.history.replaceState(null, "", "/runs?tab=open");
+    writeRecordId({ tableId: "runs", isSoleTableView: true }, "r7");
+    expect(window.location.search).toBe("?tab=open&record=r7");
+    writeRecordId({ tableId: "runs", isSoleTableView: true });
+    expect(window.location.search).toBe("?tab=open");
+  });
+});
+
+describe("action targets on a selection and on a listed row", () => {
+  let app: App | undefined;
+  const api = vi.fn(async () => ({}));
+  const toasts: Array<{ title?: string }> = [];
+  const drawers: Array<{
+    options: Record<string, unknown>;
+    patches: Array<Record<string, unknown>>;
+    settle: () => void;
+  }> = [];
+
+  const mountTargets = (config: Record<string, unknown> = {}) => {
+    let targets: ReturnType<typeof useActionTargets> | undefined;
+    app = createApp(
+      defineComponent({
+        setup() {
+          targets = useActionTargets({
+            api: api as never,
+            pageId: "runs-page",
+            componentId: "runs",
+            handleApiError: vi.fn(),
+            ...config,
+          });
+          return () => h("div");
+        },
+      }),
+    );
+    app.mount(document.createElement("div"));
+    return targets!;
+  };
+
+  beforeEach(() => {
+    api.mockClear();
+    toasts.length = 0;
+    drawers.length = 0;
+    vi.stubGlobal("Color", { success: "success" });
+    vi.stubGlobal("HttpMethod", { post: "POST" });
+    vi.stubGlobal("useToast", () => ({
+      add: (toast: never) => toasts.push(toast),
+    }));
+    vi.stubGlobal("useTranslation", () => ({
+      processI18n: (text: string) => text,
+      processApiMessage: (text: string) => text,
+    }));
+    vi.stubGlobal("useI18n", () => ({
+      t: (key: string, params: Record<string, unknown>, plural?: number) =>
+        `${key}(${String(params.count)}|${String(plural)})`,
+    }));
+    vi.stubGlobal("useModal", () => ({ open: vi.fn() }));
+    vi.stubGlobal("useDrawer", () => ({
+      open: (options: Record<string, unknown>) => {
+        let settle!: () => void;
+        const result = new Promise<void>((resolve) => {
+          settle = resolve;
+        });
+        const drawer = {
+          options,
+          patches: [] as Array<Record<string, unknown>>,
+          settle,
+        };
+        drawers.push(drawer);
+        return {
+          result,
+          close: () => settle(),
+          patch: (patch: Record<string, unknown>) => drawer.patches.push(patch),
+        };
+      },
+    }));
+    vi.stubGlobal("useExportJob", () => ({ runJob: vi.fn() }));
+    vi.stubGlobal("useConfirm", () => ({ confirm: vi.fn(async () => true) }));
+    vi.stubGlobal("useAuthFetch", () => ({ $authFetch: vi.fn() }));
+    vi.stubGlobal("interpolateUrl", (url: string) => url);
+    vi.stubGlobal("resolveDmsComponent", () =>
+      defineComponent({ render: () => null }),
+    );
+    vi.stubGlobal("markRaw", <T>(value: T) => value);
+    vi.stubGlobal("ref", ref);
+  });
+
+  afterEach(() => {
+    app?.unmount();
+    app = undefined;
+    vi.unstubAllGlobals();
+  });
+
+  it("calls an api bulk action with the selection, its toast counting the rows", async () => {
+    const targets = mountTargets();
+    const action: CustomRowAction = {
+      label: "Re-run",
+      bulk: { allMatching: true },
+      target: {
+        type: "api",
+        url: "/api/runs/rerun",
+        successMessage: "$runs.done",
+      },
+    };
+    targets.handleBulkCustomAction(action, { ids: ["a", "b"], count: 2 });
+    await vi.waitFor(() => expect(api).toHaveBeenCalledTimes(1));
+    expect(api).toHaveBeenCalledWith("/api/runs/rerun?ids=a&ids=b", {
+      method: "POST",
+    });
+    await vi.waitFor(() => expect(toasts).toHaveLength(1));
+    expect(toasts[0]?.title).toBe("runs.done(2|2)");
+
+    targets.handleBulkCustomAction(action, {
+      matching: { filter_status: "is:open" },
+      count: 40,
+    });
+    await vi.waitFor(() => expect(api).toHaveBeenCalledTimes(2));
+    expect(api.mock.calls[1]?.[0]).toBe(
+      "/api/runs/rerun?allMatching=true&filter_status=is%3Aopen",
+    );
+  });
+
+  it("steps a row's drawer through the rows shown and keeps it in the URL", async () => {
+    window.history.replaceState(null, "", "/runs");
+    const rows = [{ _id: "r1" }, { _id: "r2" }];
+    const targets = mountTargets({
+      rowNavigation: { rows: () => rows, rowIdKey: "_id" },
+      recordScope: { tableId: "runs", isSoleTableView: true },
+    });
+    targets.handleCustomRowAction(
+      {
+        label: "Details",
+        deepLink: true,
+        target: { type: "drawer", component: { componentName: "RunDrawer" } },
+      },
+      rows[0],
+    );
+    await vi.waitFor(() => expect(drawers).toHaveLength(1));
+    const [drawer] = drawers;
+    const options = drawer!.options.componentOptions as Record<string, unknown>;
+    expect(options.rowData).toBe(rows[0]);
+    expect(options.navigation).toMatchObject({
+      index: 0,
+      total: 2,
+      hasNext: true,
+    });
+    expect(window.location.search).toBe("?record=r1");
+
+    window.dispatchEvent(new KeyboardEvent("keydown", { key: "j" }));
+    expect(drawer!.patches).toHaveLength(1);
+    expect(drawer!.patches[0]).toMatchObject({ componentKey: "r2" });
+    expect(
+      (drawer!.patches[0]!.componentOptions as Record<string, unknown>).rowData,
+    ).toBe(rows[1]);
+    expect(window.location.search).toBe("?record=r2");
+
+    drawer!.settle();
+    await nextTick();
+    await Promise.resolve();
+    expect(window.location.search).toBe("");
+    window.dispatchEvent(new KeyboardEvent("keydown", { key: "k" }));
+    expect(drawer!.patches).toHaveLength(1);
+  });
+
+  it("hands a bulk drawer the selection instead of a row", async () => {
+    const targets = mountTargets();
+    targets.handleBulkCustomAction(
+      {
+        label: "Assign",
+        bulk: true,
+        target: {
+          type: "drawer",
+          component: { componentName: "AssignDrawer" },
+        },
+      },
+      { ids: ["a"], count: 1 },
+    );
+    await vi.waitFor(() => expect(drawers).toHaveLength(1));
+    const options = drawers[0]!.options.componentOptions as Record<
+      string,
+      unknown
+    >;
+    expect(options.rowData).toBe(undefined);
+    expect(options.selection).toEqual({ ids: ["a"], count: 1 });
+  });
+});

package/frontend-vue/tests/table-view-card-props.test.ts

@@ -0,0 +1,226 @@
+// @vitest-environment jsdom
+import { computed, createApp, defineComponent, h, ref, type App } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import CardsDisplay from "../layers/dms-ui/app/build/components/table-view/CardsDisplay.vue";
+import {
+  buildCardProps,
+  cardFieldColumns,
+} from "../layers/dms-ui/app/build/composables/table-view/utils/card";
+import type { TableViewColumn } from "../layers/dms-ui/app/composables/table-view/types/column";
+import type {
+  TableViewCardProps,
+  TableViewDisplayContext,
+} from "../layers/dms-ui/app/composables/table-view/types/display";
+
+vi.mock("../layers/dms-ui/app/build/components/table/Pagination.vue", () => ({
+  default: { render: () => null },
+}));
+vi.mock("../layers/dms-ui/app/build/components/table/Empty.vue", () => ({
+  default: { render: () => null },
+}));
+
+const kanbanBoardSource = readFileSync(
+  resolve(
+    __dirname,
+    "../layers/dms-ui/app/components/table-view/KanbanBoard.vue",
+  ),
+  "utf8",
+);
+
+const rows = [
+  { _id: "t1", name: "Write the docs" },
+  { _id: "t2", name: "Ship it" },
+];
+
+function createContext() {
+  const selected = ref<string[]>(["t2"]);
+  const opened: unknown[] = [];
+  const context = {
+    items: rows,
+    columns: [],
+    loading: false,
+    rowIdKey: "_id",
+    labelKey: "name",
+    options: { card: { component: { componentName: "TaskCard" } } },
+    pagination: { pageIndex: 0, pageSize: 10, total: 2 },
+    selection: {
+      ids: selected.value,
+      isSelected: (id: string) => selected.value.includes(id),
+      toggle: (id: string, value?: boolean) => {
+        const on = value ?? !selected.value.includes(id);
+        selected.value = on
+          ? [...selected.value, id]
+          : selected.value.filter((entry) => entry !== id);
+      },
+    },
+    actions: {
+      canAdd: false,
+      open: (item: unknown) => opened.push(item),
+    },
+  } as unknown as TableViewDisplayContext<(typeof rows)[number]>;
+  return { context, selected, opened };
+}
+
+describe("table view card props", () => {
+  it("hands a card its row, selection and default action", () => {
+    const { context, selected, opened } = createContext();
+    const props = buildCardProps(rows[0]!, context);
+    expect(props).toMatchObject({
+      row: rows[0],
+      rowId: "t1",
+      labelKey: "name",
+      selected: false,
+    });
+    props.select(true);
+    expect(selected.value).toContain("t1");
+    props.open();
+    expect(opened).toEqual([rows[0]]);
+    expect(buildCardProps(rows[1]!, context).selected).toBe(true);
+  });
+
+  it("gives a kanban card the same props, plus its column's value", () => {
+    expect(kanbanBoardSource).toMatch(
+      /buildCardProps\(item, props\.cardContext\)/,
+    );
+    expect(kanbanBoardSource).toMatch(/groupValue,\n\s*\}\);/);
+  });
+});
+
+describe("cards display with a custom card", () => {
+  let app: App | undefined;
+  const received: TableViewCardProps[] = [];
+
+  const TaskCard = defineComponent({
+    props: {
+      row: Object,
+      rowId: String,
+      columns: Array,
+      labelKey: String,
+      actions: Object,
+      selected: Boolean,
+      select: Function,
+      open: Function,
+    },
+    setup: (props) => () => {
+      received.push({ ...props } as unknown as TableViewCardProps);
+      return h("button", { onClick: () => props.open?.() }, props.rowId);
+    },
+  });
+
+  beforeEach(() => {
+    received.length = 0;
+    vi.stubGlobal("computed", computed);
+    vi.stubGlobal("h", h);
+    vi.stubGlobal("useI18n", () => ({ locale: ref("en") }));
+    vi.stubGlobal("useTranslation", () => ({ processI18n: (t: string) => t }));
+    vi.stubGlobal("useDataTypes", () => ({ getDataType: () => undefined }));
+    vi.stubGlobal("resolveDmsComponent", (name: string) =>
+      name === "TaskCard" ? TaskCard : undefined,
+    );
+  });
+
+  afterEach(() => {
+    app?.unmount();
+    app = undefined;
+    vi.unstubAllGlobals();
+  });
+
+  it("draws every row with the card component and its props", () => {
+    const { context, opened } = createContext();
+    app = createApp({ render: () => h(CardsDisplay, { context }) });
+    const container = document.createElement("div");
+    app.mount(container);
+
+    const buttons = [...container.querySelectorAll("button")];
+    expect(buttons.map((button) => button.textContent)).toEqual(["t1", "t2"]);
+    expect(received.map((props) => props.selected)).toEqual([false, true]);
+    buttons[0]!.click();
+    expect(opened).toEqual([rows[0]]);
+  });
+});
+
+describe("the default cards", () => {
+  let app: App | undefined;
+
+  beforeEach(() => {
+    vi.stubGlobal("computed", computed);
+    vi.stubGlobal("useI18n", () => ({ locale: ref("en") }));
+    vi.stubGlobal("useTranslation", () => ({ processI18n: (t: string) => t }));
+    vi.stubGlobal("useDataTypes", () => ({ getDataType: () => undefined }));
+  });
+
+  afterEach(() => {
+    app?.unmount();
+    app = undefined;
+    vi.unstubAllGlobals();
+  });
+
+  it("open from the keyboard, but not through their checkbox", () => {
+    const { context, opened } = createContext();
+    context.options = {};
+    app = createApp({ render: () => h(CardsDisplay, { context }) });
+    app.component(
+      "UCheckbox",
+      defineComponent({ render: () => h("button", { type: "button" }) }),
+    );
+    const container = document.createElement("div");
+    app.mount(container);
+
+    const cards = [...container.querySelectorAll("article")];
+    expect(cards.map((card) => card.tabIndex)).toEqual([0, 0]);
+    const enter = () =>
+      new KeyboardEvent("keydown", { key: "Enter", bubbles: true });
+    cards[1]!.dispatchEvent(enter());
+    expect(opened).toEqual([rows[1]]);
+    cards[0]!.querySelector("button")!.dispatchEvent(enter());
+    expect(opened).toEqual([rows[1]]);
+  });
+});
+
+describe("card fields", () => {
+  const columns = [
+    "_id",
+    "name",
+    "status",
+    "owner",
+    "due",
+    "hidden",
+    "size",
+    "tags",
+  ].map(
+    (key) =>
+      ({
+        id: key,
+        accessorKey: key,
+        listable: key !== "hidden",
+      }) as TableViewColumn,
+  );
+  const keys = (picked: TableViewColumn[]) =>
+    picked.map((column) => column.accessorKey);
+
+  it("shows the declared fields, in their order", () => {
+    expect(
+      keys(
+        cardFieldColumns(columns, ["due", "name", "gone"], { rowIdKey: "_id" }),
+      ),
+    ).toEqual(["due", "name"]);
+  });
+
+  it("falls back to the first listable columns besides the title and the id, on the board too", () => {
+    const shown = { labelKey: "name", rowIdKey: "_id" };
+    expect(keys(cardFieldColumns(columns, undefined, shown))).toEqual([
+      "status",
+      "owner",
+      "due",
+      "size",
+    ]);
+    // A kanban card sits in its group's column: the group is not repeated.
+    expect(
+      keys(
+        cardFieldColumns(columns, undefined, { ...shown, others: ["status"] }),
+      ),
+    ).toEqual(["owner", "due", "size", "tags"]);
+  });
+});