@antelopejs/dms 0.7.8 → 0.7.10

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

@@ -12,6 +12,7 @@ import {
   type App,
 } from "vue";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { defineShortcuts } from "@nuxt/ui/runtime/composables/defineShortcuts.js";
 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";
 
@@ -48,7 +49,11 @@ const InputStub = defineComponent({
 
 let app: App | undefined;
 
-function mountActions(searchPlaceholder: string | undefined, search = "") {
+function mountActions(
+  searchPlaceholder: string | undefined,
+  search = "",
+  searchShortcut?: string,
+) {
   const Host = defineComponent({
     setup() {
       provide(
@@ -76,6 +81,7 @@ function mountActions(searchPlaceholder: string | undefined, search = "") {
       return () =>
         h(TableActions, {
           searchPlaceholder,
+          searchShortcut,
           chrome: { ...FULL_TABLE_CHROME, refresh: false, menu: false },
         });
     },
@@ -166,3 +172,53 @@ describe("table toolbar search", () => {
     );
   });
 });
+
+describe("table search shortcut", () => {
+  const press = (
+    key: string,
+    init: KeyboardEventInit = {},
+    target: EventTarget = document.body,
+  ) =>
+    target.dispatchEvent(
+      new KeyboardEvent("keydown", { key, bubbles: true, ...init }),
+    );
+  const settle = async () => {
+    await nextTick();
+    await nextTick();
+  };
+
+  beforeEach(() => {
+    vi.stubGlobal("defineShortcuts", defineShortcuts);
+    vi.stubGlobal("nextTick", nextTick);
+  });
+
+  it("opens and focuses the search on ⇧F by default", async () => {
+    const container = mountActions(undefined);
+    press("F", { shiftKey: true });
+    await settle();
+    const input = container.querySelector("input");
+    expect(input).not.toBeNull();
+    expect(document.activeElement).toBe(input);
+  });
+
+  it("opens it on the table's own key, ⇧F no longer bound", async () => {
+    const container = mountActions(undefined, "", "/");
+    press("F", { shiftKey: true });
+    await settle();
+    expect(container.querySelector("input")).toBeNull();
+    press("/");
+    await settle();
+    expect(document.activeElement).toBe(container.querySelector("input"));
+  });
+
+  it("leaves / to a field the user types in", async () => {
+    const container = mountActions(undefined, "", "/");
+    const field = document.createElement("input");
+    document.body.append(field);
+    field.focus();
+    press("/", {}, field);
+    await settle();
+    expect(container.querySelector("input")).toBeNull();
+    expect(document.activeElement).toBe(field);
+  });
+});

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

@@ -15,14 +15,18 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { PaginationState } from "@tanstack/vue-table";
 import type { TableFilter } from "../layers/dms-ui/app/build/components/table/Table.vue";
 import {
+  clearTableColumnFilters,
   clearTableFilters,
   clearTableFiltersLabelKey,
+  clearTableSearch,
   clearableTableFilters,
   isTableNarrowed,
   resetColumnFilters,
   type TableNarrowingState,
 } from "../layers/dms-ui/app/build/composables/table/utils/clearTableFilters";
 import TableEmpty from "../layers/dms-ui/app/build/components/table/Empty.vue";
+import { useTableViewEmptyState } from "../layers/dms-ui/app/composables/table-view/useTableViewEmptyState";
+import type { TableViewEmptyStatesConfig } from "../layers/dms-ui/app/composables/table-view/types";
 
 const pinnedStatus = (value: unknown): TableFilter => ({
   accessorKey: "status",
@@ -173,12 +177,45 @@ describe("clearTableFilters", () => {
   });
 });
 
+describe("clearing the search or the filters alone", () => {
+  it("empties the search, the chips kept, back to page 1", () => {
+    const state = createState({
+      columnFilters: [dueDate],
+      globalFilter: "late",
+      pageIndex: 2,
+    });
+    clearTableSearch(state);
+    expect(state.globalFilter.value).toBe("");
+    expect(state.columnFilters.value).toEqual([dueDate]);
+    expect(state.pagination.value.pageIndex).toBe(0);
+  });
+
+  it("clears the chips, the search kept, back to page 1", () => {
+    const state = createState({
+      columnFilters: [pinnedStatus("closed"), dueDate],
+      globalFilter: "late",
+      pageIndex: 2,
+    });
+    clearTableColumnFilters(state);
+    expect(state.globalFilter.value).toBe("late");
+    expect(state.columnFilters.value).toEqual([pinnedStatus("open")]);
+    expect(state.pagination.value.pageIndex).toBe(0);
+  });
+});
+
 describe("table empty state", () => {
   let app: App | undefined;
 
-  const mountEmpty = (state: Harness) => {
+  const mountEmpty = (
+    state: Harness,
+    emptyStates?: TableViewEmptyStatesConfig,
+  ) => {
     const sharedData = shallowRef({
       resetFilters: () => clearTableFilters(state),
+      clearSearch: () => clearTableSearch(state),
+      clearFilters: () => clearTableColumnFilters(state),
+      globalFilterState: state.globalFilter,
+      emptyStates,
       clearableFilters: computed(() => clearableTableFilters(state)),
       isFiltered: computed(() => isTableNarrowed(state)),
       showArchivedState: ref(false),
@@ -266,6 +303,67 @@ describe("table empty state", () => {
     expect(container.querySelector("button")).toBeNull();
   });
 
+  it("hands a custom state a clear for the search and one for the filters", async () => {
+    const received: Record<string, unknown>[] = [];
+    vi.stubGlobal("resolveDmsComponent", () =>
+      defineComponent({
+        props: {
+          state: String,
+          clearSearch: Function,
+          clearFilters: Function,
+        },
+        setup: (props) => () => {
+          received.push({ ...props });
+          return h("p", "custom");
+        },
+      }),
+    );
+    const state = createState({
+      columnFilters: [dueDate],
+      globalFilter: "late",
+    });
+    mountEmpty(state, {
+      filtered: { title: "", component: { componentName: "LogsEmpty" } },
+    });
+    const props = received.at(-1)!;
+    expect(props.state).toBe("filtered");
+    (props.clearSearch as () => void)();
+    await nextTick();
+    expect(state.globalFilter.value).toBe("");
+    expect(state.columnFilters.value).toEqual([dueDate]);
+    expect(received.at(-1)!.clearSearch).toBeUndefined();
+    (received.at(-1)!.clearFilters as () => void)();
+    expect(state.columnFilters.value).toEqual([]);
+  });
+
+  it("lets a component inside the table clear through useTableViewEmptyState", async () => {
+    const state = createState({
+      columnFilters: [dueDate],
+      globalFilter: "late",
+    });
+    let controls: ReturnType<typeof useTableViewEmptyState> | undefined;
+    vi.stubGlobal("resolveDmsComponent", () =>
+      defineComponent({
+        setup: () => {
+          controls = useTableViewEmptyState();
+          return () => h("p");
+        },
+      }),
+    );
+    mountEmpty(state, {
+      filtered: { title: "", component: { componentName: "LogsEmpty" } },
+    });
+    expect(controls!.search.value).toBe("late");
+    expect(controls!.isFiltered.value).toBe(true);
+    expect(controls!.canClearSearch.value).toBe(true);
+    expect(controls!.canClearFilters.value).toBe(true);
+    controls!.clearFilters();
+    expect(controls!.canClearFilters.value).toBe(false);
+    expect(state.globalFilter.value).toBe("late");
+    controls!.clearSearch();
+    expect(controls!.isFiltered.value).toBe(false);
+  });
+
   it("offers no clear action when only default filters narrow the rows", () => {
     const container = mountEmpty(
       createState({ columnFilters: [pinnedStatus("open")] }),

package/frontend-vue/tests/table-density-menu.test.ts

@@ -118,11 +118,12 @@ describe("table density menu", () => {
 
   it("keeps the user's density with the table state, the module's as default", () => {
     expect(tableViewSource).toMatch(
-      /getTablePreferenceKey\("density"\),\s*props\.density \?\? DEFAULT_DENSITY/,
+      /defaultDensity = props\.density \?\? DEFAULT_DENSITY/,
     );
-    expect(tableViewSource).toMatch(
-      /groupedGroupBy,\s*density,\s*\} as const;/,
+    expect(tableViewSource).toContain(
+      'tablePreferences.restore("density", density);',
     );
+    expect(tableViewSource).toMatch(/\["density", density, defaultDensity\]/);
     expect(tableViewSource).toContain('v-model:density="density"');
   });
 });

package/frontend-vue/tests/table-live-hold.test.ts

@@ -8,7 +8,7 @@
  */
 import { readFileSync } from "node:fs";
 import { resolve } from "node:path";
-import { createApp, defineComponent, h, nextTick, type App } from "vue";
+import { createApp, defineComponent, h, nextTick, ref, type App } from "vue";
 import { refreshPageBlocks } from "../layers/dms-ui/app/utils/blockRefresh";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import type { RealtimeTopicHandler } from "../layers/dms-core/app/composables/realtime/useUserRealtime";
@@ -21,7 +21,11 @@ import {
   LIVE_HELD_AT_QUERY_KEY,
   sourceRouteQuery,
 } from "../layers/dms-ui/app/build/composables/table-view/useTableRows";
-import type { TableLiveHold } from "../layers/dms-ui/app/build/composables/table-view/useTableLiveHold";
+import type {
+  TableLiveHold,
+  TableLiveHoldSignals,
+} from "../layers/dms-ui/app/build/composables/table-view/useTableLiveHold";
+import type { TableViewLiveHoldOptions } from "../layers/dms-ui/app/types/live";
 
 const topicHandlers = new Map<string, RealtimeTopicHandler>();
 
@@ -53,7 +57,13 @@ let live: PageLiveController;
 const publish = () =>
   topicHandlers.get(TOPIC)?.({ topic: TOPIC, type: "request", ts: 1 });
 
-function mountTable(options: { liveHold: boolean; isSource?: boolean }) {
+interface MountedTableOptions {
+  liveHold: boolean | TableViewLiveHoldOptions;
+  isSource?: boolean;
+  signals?: TableLiveHoldSignals;
+}
+
+function mountTable(options: MountedTableOptions) {
   const refresh = vi.fn();
   let hold: TableLiveHold | undefined;
   const app = createApp(
@@ -61,9 +71,10 @@ function mountTable(options: { liveHold: boolean; isSource?: boolean }) {
       setup() {
         const gate = useRefreshTriggers(TOPIC, refresh);
         hold = useTableLiveHold({
-          isEnabled: options.liveHold,
+          liveHold: options.liveHold,
           isSource: options.isSource ?? true,
           gate: () => gate,
+          signals: options.signals,
         });
         return () => h("div");
       },
@@ -193,7 +204,13 @@ it("reads on a user's refresh while held, and holds from then", async () => {
 });
 
 it("wires the table view's rows, row events and banner to the hold", () => {
-  expect(tableViewSource).toMatch(/liveHold\?: boolean;/);
+  expect(tableViewSource).toMatch(
+    /liveHold\?: boolean \| TableViewLiveHoldOptions;/,
+  );
+  expect(tableViewSource).toContain(
+    "isRowOpen: () => openRowId.value !== undefined,",
+  );
+  expect(tableViewSource).toContain('ref="tableRoot"');
   expect(tableViewSource).toContain("heldQuery: liveHold.heldQuery,");
   expect(tableViewSource).toContain("refreshCallback: refreshByUser,");
   expect(tableViewSource).toContain('@refresh="refreshByUser"');
@@ -202,3 +219,76 @@ it("wires the table view's rows, row events and banner to the hold", () => {
     /<LiveHoldBanner[\s\S]*@show="liveHold.showNew"/,
   );
 });
+
+it("holds the table alone while a row is open, the page staying live", async () => {
+  const isRowOpen = ref(false);
+  const { refresh, hold } = mountTable({
+    liveHold: { whileRowOpen: true },
+    signals: { isRowOpen: () => isRowOpen.value },
+  });
+
+  isRowOpen.value = true;
+  await nextTick();
+  publish();
+  publish();
+  expect(live.isPaused.value).toBe(false);
+  expect(live.missedCount.value).toBe(0);
+  expect(refresh).not.toHaveBeenCalled();
+  expect(hold.isHolding.value).toBe(true);
+  expect(hold.newCount.value).toBe(2);
+
+  // Closing the panel reads what the table missed, once.
+  isRowOpen.value = false;
+  await nextTick();
+  expect(refresh).toHaveBeenCalledTimes(1);
+  expect(hold.isHolding.value).toBe(false);
+  publish();
+  expect(refresh).toHaveBeenCalledTimes(2);
+});
+
+it("keeps today's hold when liveHold is true: an open row changes nothing", async () => {
+  const { refresh, hold } = mountTable({
+    liveHold: true,
+    signals: { isRowOpen: () => true },
+  });
+  publish();
+  expect(refresh).toHaveBeenCalledTimes(1);
+  expect(hold.isHolding.value).toBe(false);
+});
+
+it("holds the table while its first row is scrolled out of view", async () => {
+  const element = document.createElement("div");
+  element.innerHTML = "<table><tbody><tr><td>1</td></tr></tbody></table>";
+  document.body.append(element);
+  const row = element.querySelector("tr")!;
+  const rect = (bottom: number) => ({ bottom, top: bottom - 40 }) as DOMRect;
+  row.getBoundingClientRect = () => rect(120);
+  vi.stubGlobal("requestAnimationFrame", (run: () => void) =>
+    setTimeout(run, 16),
+  );
+  const scroll = async () => {
+    window.dispatchEvent(new Event("scroll"));
+    vi.advanceTimersByTime(16);
+    await nextTick();
+  };
+
+  const { refresh, hold } = mountTable({
+    liveHold: { whileScrolled: true },
+    signals: { tableElement: () => element },
+  });
+  await nextTick();
+  publish();
+  expect(refresh).toHaveBeenCalledTimes(1);
+
+  row.getBoundingClientRect = () => rect(-200);
+  await scroll();
+  publish();
+  expect(hold.isHolding.value).toBe(true);
+  expect(hold.newCount.value).toBe(1);
+  expect(refresh).toHaveBeenCalledTimes(1);
+
+  row.getBoundingClientRect = () => rect(120);
+  await scroll();
+  expect(refresh).toHaveBeenCalledTimes(2);
+  element.remove();
+});

package/frontend-vue/tests/table-row-action-labels.test.ts

@@ -0,0 +1,181 @@
+/**
+ * A row's actions are named after the row: a custom action's label fills its
+ * `{field}` braces from the row ("Translate {name}"), and the ⋯ button opening
+ * the row's menu has an accessible name — "Actions for <label>" by default,
+ * or the table's own `rowActions.menuLabel`.
+ */
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import {
+  computed,
+  h,
+  ref,
+  shallowRef,
+  watch,
+  watchEffect,
+  type VNode,
+} from "vue";
+import { useTableColumns } from "../layers/dms-ui/app/build/composables/table/useTableColumns";
+import * as ruleEvaluator from "../layers/dms-core/app/utils/row-action-rule-evaluator";
+import * as colors from "../layers/dms-core/app/types/color";
+import * as buttons from "../layers/dms-core/app/types/button";
+import * as sizes from "../layers/dms-core/app/types/size";
+
+vi.mock("@nuxt/ui/components/Button.vue", () => ({
+  default: { name: "UButton", render: () => null },
+}));
+vi.mock("@nuxt/ui/components/Checkbox.vue", () => ({
+  default: { render: () => null },
+}));
+vi.mock("@nuxt/ui/components/DropdownMenu.vue", () => ({
+  default: { name: "UDropdownMenu", render: () => null },
+}));
+vi.mock("@nuxt/ui/runtime/utils/index.js", () => ({
+  get: (row: Record<string, unknown>, key: string) => row[key],
+}));
+
+type Row = Record<string, unknown>;
+
+const ROW: Row = { _id: "fr", name: "Français", code: "fr" };
+
+const translateKey = (key: string, params: Record<string, unknown> = {}) =>
+  Object.keys(params).length > 0 ? `${key}(${JSON.stringify(params)})` : key;
+
+beforeEach(() => {
+  for (const [name, value] of Object.entries({
+    ...ruleEvaluator,
+    ...colors,
+    ...buttons,
+    ...sizes,
+  })) {
+    vi.stubGlobal(name, value);
+  }
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("ref", ref);
+  vi.stubGlobal("watch", watch);
+  vi.stubGlobal("watchEffect", watchEffect);
+  vi.stubGlobal("shallowRef", shallowRef);
+  vi.stubGlobal("isFunction", (value: unknown) => typeof value === "function");
+  vi.stubGlobal("h", h);
+  vi.stubGlobal("isString", (value: unknown) => typeof value === "string");
+  vi.stubGlobal("useI18n", () => ({ t: translateKey }));
+  vi.stubGlobal("useDmsRouter", () => ({ push: vi.fn() }));
+  vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
+  vi.stubGlobal("useDmsAppConfig", () => ({
+    ui: { icons: { ellipsis: "i-ellipsis" } },
+  }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (key: string, params?: Record<string, unknown>) =>
+      key.startsWith("$") ? translateKey(key.slice(1), params ?? {}) : key,
+  }));
+  vi.stubGlobal("useConfirm", () => ({ confirm: vi.fn() }));
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: vi.fn() }));
+  vi.stubGlobal("useDataTypes", () => ({ getDataType: () => undefined }));
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+interface ActionsCellOptions {
+  custom: Array<Record<string, unknown>>;
+  menuLabel?: string;
+  labelKey?: string;
+}
+
+function actionsCell({ custom, menuLabel, labelKey }: ActionsCellOptions) {
+  const { columns } = useTableColumns<Row>({
+    data: computed(() => [ROW]),
+    columns: [{ accessorKey: "name", header: "Name" }],
+    rowIdKey: "_id",
+    rowActions: {
+      add: false,
+      copyLink: false,
+      delete: false,
+      details: false,
+      duplicate: false,
+      edit: false,
+      custom: custom as never,
+      menuLabel,
+    },
+    labelKey,
+    emits: (() => undefined) as never,
+    ui: computed(() => ({ rowAction: () => "" }) as never),
+  });
+  const column = columns.value.find((entry) => entry.id === "actions");
+  const cell = column?.cell as (context: unknown) => VNode;
+  return cell({ row: { original: ROW, id: "fr" } });
+}
+
+const childrenOf = (node: VNode) => node.children as VNode[];
+
+function menuButtonProps(cell: VNode): Record<string, unknown> {
+  const menu = childrenOf(cell).find(
+    (child) => (child.type as { name?: string }).name === "UDropdownMenu",
+  );
+  const slots = menu?.children as { default: () => VNode };
+  return slots.default().props ?? {};
+}
+
+const MENU_ACTION = { label: "Remove", target: { type: "api", url: "/x" } };
+
+it("names the ⋯ button after the row's label field by default", () => {
+  const cell = actionsCell({ custom: [MENU_ACTION], labelKey: "name" });
+  expect(menuButtonProps(cell)["aria-label"]).toBe(
+    'dms.table.row_actions_for({"label":"Français"})',
+  );
+});
+
+it("names the ⋯ button generically without a label field", () => {
+  const cell = actionsCell({ custom: [MENU_ACTION] });
+  expect(menuButtonProps(cell)["aria-label"]).toBe("dms.table.row_actions");
+});
+
+it("names the ⋯ button with menuLabel, filled from the row", () => {
+  const literal = actionsCell({
+    custom: [MENU_ACTION],
+    menuLabel: "Actions for {name} ({code})",
+  });
+  expect(menuButtonProps(literal)["aria-label"]).toBe(
+    "Actions for Français (fr)",
+  );
+  const key = actionsCell({
+    custom: [MENU_ACTION],
+    menuLabel: "$dms_lang.languages.menu",
+  });
+  expect(menuButtonProps(key)["aria-label"]).toContain(
+    'dms_lang.languages.menu({"_id":"fr","name":"Français"',
+  );
+});
+
+it("fills a custom action's label from the row, inline and in the menu", () => {
+  const cell = actionsCell({
+    custom: [
+      {
+        label: "Translate {name}",
+        isVisible: true,
+        showLabel: true,
+        target: { type: "page", url: "/lang?locale={code}" },
+      },
+      {
+        label: "$dms_lang.languages.remove",
+        target: { type: "api", url: "/x" },
+      },
+      {
+        label: "Keep {unknown} as written",
+        target: { type: "api", url: "/y" },
+      },
+    ],
+  });
+  const [inline] = childrenOf(cell);
+  expect(inline.props?.label).toBe("Translate Français");
+  expect(inline.props?.["aria-label"]).toBe("Translate Français");
+
+  const menu = childrenOf(cell).find(
+    (child) => (child.type as { name?: string }).name === "UDropdownMenu",
+  );
+  const items = (menu?.props?.items as Array<Array<{ label: string }>>).flat();
+  expect(items.map((item) => item.label)).toEqual([
+    expect.stringContaining('dms_lang.languages.remove({"_id":"fr"'),
+    "Keep {unknown} as written",
+  ]);
+});

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

@@ -5,6 +5,7 @@ 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";
@@ -158,3 +159,34 @@ describe("resolveRowClickAction", () => {
     expect(resolveRowClickAction(options, rowFor("sent"))).toBe("details");
   });
 });
+
+describe("rowCustomActions", () => {
+  const stopSelling: CustomRowAction = {
+    id: "stop_selling",
+    label: "Stop selling",
+    target: { type: "api", url: "/plans/{_id}/stop", method: "POST" },
+    rule: { field: "isActive", equals: true },
+  };
+  const remove: CustomRowAction = {
+    id: "delete",
+    label: "Delete",
+    target: { type: "api", url: "/plans/{_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-source-period-scope.test.ts

@@ -24,7 +24,7 @@ vi.stubGlobal("useDmsLazyAsyncData", engine.useDmsLazyAsyncData);
 const { useTableRows } = await import(
   "../layers/dms-ui/app/build/composables/table-view/useTableRows"
 );
-const { useTableListData } = await import(
+const { useTableCountsData, useTableListData } = await import(
   "../layers/dms-ui/app/build/composables/table-view/useTableListData"
 );
 const { usePeriod } = await import(
@@ -49,6 +49,7 @@ const api = (async (url: string) => {
 const mounted: App[] = [];
 const cleanups: Array<() => void> = [];
 let listed: { value: unknown } | undefined;
+let counted: { value: unknown } | undefined;
 
 const SourceTable = defineComponent({
   setup() {
@@ -68,6 +69,15 @@ const SourceTable = defineComponent({
     }).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");
   },
 });
@@ -98,6 +108,7 @@ const periodOf = (url: string) =>
 beforeEach(() => {
   requests.length = 0;
   listed = undefined;
+  counted = undefined;
 });
 
 afterEach(() => {
@@ -114,13 +125,30 @@ describe("a source table bound to a period scope", () => {
     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(1);
+    expect(requests).toHaveLength(2);
     expect(listed!.value).toMatchObject({ total: 1 });
-    const { range } = period.state.value;
+    const range = period.state.value.range!;
     expect(periodOf(requests[0]!)).toEqual({
       from: range.from.toISOString(),
       to: range.to.toISOString(),