@antelopejs/dms 0.7.15 → 0.7.17

package/frontend-vue/layers/dms-ui/app/composables/table-view/types/action-target.ts

@@ -25,6 +25,18 @@ export interface SidePanelTargetOptions {
   notFound?: SidePanelNotFoundTexts;
 }
 
+/**
+ * Fetches a file with the user's session and saves it (backend
+ * `DownloadActionTarget`).
+ */
+export interface DownloadActionTarget {
+  type: "download";
+  /** Takes the `{field}` and `{{params.X}}` / `{{query.X}}` tokens. */
+  url: string;
+  /** Saved under; the response's `Content-Disposition` name, else the URL's. */
+  filename?: string;
+}
+
 export type ActionTarget =
   | {
       type: "drawer";
@@ -45,6 +57,7 @@ export type ActionTarget =
   | ({ type: "sidePanel"; component: ComponentInfo } & SidePanelTargetOptions)
   | { type: "page"; url: string }
   | { type: "external"; url: string; newTab?: boolean }
+  | DownloadActionTarget
   /** Runs a quick action, by its `category:id` key or bare id. */
   | { type: "quickAction"; id: string }
   | {

package/frontend-vue/tests/confirm-secondary-action.test.ts

@@ -12,10 +12,8 @@ import {
 import { createI18n } from "vue-i18n";
 import ConfirmModal from "../layers/dms-ui/app/components/confirm/ConfirmModal.vue";
 import { resolveConfirmDialog } from "../layers/dms-ui/app/build/composables/confirm/confirmDialogTexts";
-import {
-  downloadFilename,
-  secondaryTargetRunner,
-} from "../layers/dms-ui/app/build/composables/confirm/secondaryTarget";
+import { secondaryTargetRunner } from "../layers/dms-ui/app/build/composables/confirm/secondaryTarget";
+import { downloadFilename } from "../layers/dms-ui/app/build/utils/fileDownload";
 
 vi.mock("reka-ui", async () => {
   const { defineComponent: define, h: render } = await import("vue");

package/frontend-vue/tests/download-action-target.test.ts

@@ -0,0 +1,172 @@
+// @vitest-environment jsdom
+/**
+ * A `download` action target fetches its file with the user's session and
+ * saves it: its URL and file name take the page's `{{params.X}}` /
+ * `{{query.X}}` and the row's `{field}`, and a refusal is toasted.
+ */
+import { createApp, defineComponent, h, reactive, 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 { interpolateUrl } from "../layers/dms-core/app/utils/url-interpolation";
+import type { CustomButton } from "../layers/dms-ui/app/composables/table-view/types/custom-button";
+import type { CustomRowAction } from "../layers/dms-ui/app/types/row-action";
+
+const route = reactive<{ path: string; query: Record<string, unknown> }>({
+  path: "/modules/lang/queue/de",
+  query: {},
+});
+const fetchRaw = vi.fn();
+const handleApiError = vi.fn();
+const saved: string[] = [];
+let app: App | undefined;
+
+function mountTargets() {
+  let targets: ReturnType<typeof useActionTargets> | undefined;
+  app = createApp(
+    defineComponent({
+      setup() {
+        targets = useActionTargets({
+          api: vi.fn() as never,
+          pageId: "queue-page",
+          componentId: "page-header",
+          handleApiError,
+        });
+        return () => h("div");
+      },
+    }),
+  );
+  app.mount(document.createElement("div"));
+  return targets!;
+}
+
+const downloadButton = (filename?: string): CustomButton => ({
+  id: "download-language",
+  label: "Download",
+  target: {
+    type: "download",
+    url: "/api/lang/translations/export?workspace={{query.workspace}}&locale={{query.locale}}",
+    filename,
+  },
+});
+
+const served = (disposition?: string) =>
+  fetchRaw.mockResolvedValue({
+    _data: new Blob(["{}"]),
+    headers: new Headers(
+      disposition ? { "content-disposition": disposition } : {},
+    ),
+  });
+
+beforeEach(() => {
+  route.query = { workspace: "web", locale: "pt BR" };
+  fetchRaw.mockReset();
+  handleApiError.mockReset();
+  saved.length = 0;
+  vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string) => text,
+    processApiMessage: (text: string) => text,
+  }));
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useModal", () => ({ open: vi.fn() }));
+  vi.stubGlobal("useDrawer", () => ({ open: vi.fn() }));
+  vi.stubGlobal("useExportJob", () => ({ runJob: vi.fn() }));
+  vi.stubGlobal("useConfirm", () => ({ confirm: vi.fn(async () => true) }));
+  vi.stubGlobal("useAuthFetch", () => ({
+    $authFetch: Object.assign(vi.fn(), { raw: fetchRaw }),
+  }));
+  vi.stubGlobal("interpolateUrl", interpolateUrl);
+  vi.stubGlobal("useDmsRoute", () => route);
+  vi.stubGlobal("useSiteLayout", () => ({
+    findMatchingRoute: () => ({ params: { locale: "de" } }),
+  }));
+  vi.stubGlobal(
+    "URL",
+    Object.assign(URL, {
+      createObjectURL: vi.fn(() => "blob:file"),
+      revokeObjectURL: vi.fn(),
+    }),
+  );
+  vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(function (
+    this: HTMLAnchorElement,
+  ) {
+    saved.push(this.download);
+  });
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+describe("a download action target", () => {
+  it("fetches the page's file with the session, under the declared name", async () => {
+    served('attachment; filename="served.json"');
+    mountTargets().handleCustomButton(downloadButton("{{query.locale}}.json"));
+    await vi.waitFor(() => expect(saved).toEqual(["pt BR.json"]));
+    expect(fetchRaw).toHaveBeenCalledWith(
+      "/api/lang/translations/export?workspace=web&locale=pt%20BR",
+      { responseType: "blob" },
+    );
+  });
+
+  it("leaves out a query pair the page has no value for", async () => {
+    route.query = { locale: "fr" };
+    served();
+    mountTargets().handleCustomButton(downloadButton());
+    await vi.waitFor(() => expect(saved).toHaveLength(1));
+    expect(fetchRaw).toHaveBeenCalledWith(
+      "/api/lang/translations/export?locale=fr",
+      { responseType: "blob" },
+    );
+  });
+
+  it("is saved under the server's name, else the URL's, without one declared", async () => {
+    served('attachment; filename="fr.json"');
+    mountTargets().handleCustomButton(downloadButton());
+    await vi.waitFor(() => expect(saved).toEqual(["fr.json"]));
+
+    served();
+    mountTargets().handleCustomButton(downloadButton());
+    await vi.waitFor(() => expect(saved).toEqual(["fr.json", "export"]));
+  });
+
+  it("falls back to the server's name while a name token has no value", async () => {
+    route.query = { workspace: "web" };
+    served('attachment; filename="web.json"');
+    mountTargets().handleCustomButton(downloadButton("{{query.locale}}.json"));
+    await vi.waitFor(() => expect(saved).toEqual(["web.json"]));
+  });
+
+  it("fills a row action's URL and name with the row's fields", async () => {
+    served();
+    const action: CustomRowAction = {
+      label: "Download",
+      target: {
+        type: "download",
+        url: "/api/files/{_id}?workspace={{query.workspace}}",
+        filename: "{name}",
+      },
+    };
+    mountTargets().handleCustomRowAction(action, {
+      _id: "f 1",
+      name: "report.csv",
+    });
+    await vi.waitFor(() => expect(saved).toEqual(["report.csv"]));
+    expect(fetchRaw).toHaveBeenCalledWith("/api/files/f%201?workspace=web", {
+      responseType: "blob",
+    });
+  });
+
+  it("toasts a refused download under the button's label", async () => {
+    const refusal = new Error("Forbidden");
+    fetchRaw.mockRejectedValue(refusal);
+    mountTargets().handleCustomButton(downloadButton());
+    await vi.waitFor(() =>
+      expect(handleApiError).toHaveBeenCalledWith(refusal, "Download"),
+    );
+    expect(saved).toEqual([]);
+  });
+});

package/frontend-vue/tests/header-action-page-query.test.ts

@@ -3,7 +3,8 @@
  * A page header's buttons follow the page URL: a target URL takes the
  * `{{params.X}}` / `{{query.X}}` tokens of a block's `fetchUrl`, and a
  * button whose availability reads the query is asked for again when the
- * query changes.
+ * query changes. The served buttons and a page's own actions
+ * (`usePageHeaderActions`) share one order.
  */
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
@@ -23,6 +24,11 @@ import {
   layoutUrlWithQuery,
   pageQueryValues,
 } from "../layers/dms-layout/app/utils/pageQuery";
+import {
+  providePageHeaderActions,
+  usePageHeaderActions,
+  type PageHeaderActionsOptions,
+} from "../layers/dms-layout/app/composables/layout/usePageHeaderActions";
 
 const handleCustomButton = vi.fn();
 vi.mock("#dms-ui/app/build/composables/actions/useActionTargets", () => ({
@@ -106,6 +112,7 @@ const mountBar = (actions: unknown[]) =>
   );
 
 const buttons = () => [...host.querySelectorAll("button")];
+const labels = () => buttons().map((button) => button.textContent);
 
 describe("resolveLinkVariables", () => {
   const context = {
@@ -237,6 +244,30 @@ describe("a header button's target URL", () => {
       }),
     );
   });
+  it("runs a download target on the page's scope, as a button", async () => {
+    await mountBar([
+      {
+        id: "download-language",
+        label: "Download",
+        target: {
+          type: "download",
+          url: "/api/lang/translations/export?workspace={{query.workspace}}&locale={{params.locale}}",
+          filename: "{{params.locale}}.json",
+        },
+      },
+    ]);
+    expect(buttons()[0]?.dataset.to).toBeUndefined();
+    buttons()[0]?.click();
+    expect(handleCustomButton).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: {
+          type: "download",
+          url: "/api/lang/translations/export?workspace=web&locale=de",
+          filename: "{{params.locale}}.json",
+        },
+      }),
+    );
+  });
 });
 
 describe("a header button's availability", () => {
@@ -277,6 +308,33 @@ describe("a header button's availability", () => {
     expect(buttons()[0]?.disabled).toBe(false);
   });
 
+  it("shows a button it hides only for the queries it does not hide it for", async () => {
+    const addKey = {
+      id: "add-key",
+      label: "Add key",
+      target: download(false).target,
+    };
+    authFetch.mockResolvedValue({
+      components: {},
+      layout: { options: { headerActions: [download(false)] } },
+    });
+    await mount(
+      "../layers/dms-layout/app/build/components/layout/PageHeaderActionsOutlet.vue",
+      { actions: [download(false), addKey], servedQuery: { workspace: "web" } },
+    );
+    expect(labels()).toEqual(["Download", "Add key"]);
+
+    route.query = { workspace: "modules" };
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve));
+    expect(authFetch).toHaveBeenCalledWith(`${LAYOUT_URL}?workspace=modules`);
+    expect(labels()).toEqual(["Download"]);
+
+    route.query = { workspace: "web" };
+    await nextTick();
+    expect(labels()).toEqual(["Download", "Add key"]);
+  });
+
   it("is never asked again when no button declares one", async () => {
     await mountOutlet(undefined);
     route.query = { workspace: "gone" };
@@ -284,3 +342,64 @@ describe("a header button's availability", () => {
     expect(authFetch).not.toHaveBeenCalled();
   });
 });
+
+describe("the order of the header's buttons", () => {
+  const served = (id: string, order?: number) => ({
+    id,
+    label: id,
+    target: { type: "page", url: `/${id}` },
+    order,
+  });
+
+  // A layout's page body: the outlet, then the page calling
+  // usePageHeaderActions, then the marker saying the page has rendered.
+  async function mountPage(
+    actions: unknown[],
+    options?: PageHeaderActionsOptions,
+  ) {
+    const { default: Outlet } = await import(
+      "../layers/dms-layout/app/build/components/layout/PageHeaderActionsOutlet.vue"
+    );
+    const Page = defineComponent({
+      setup() {
+        usePageHeaderActions(() => h("button", "Export"), options);
+        return () => null;
+      },
+    });
+    const Body = defineComponent({
+      setup() {
+        const pageHost = providePageHeaderActions();
+        const Rendered = defineComponent({
+          setup() {
+            pageHost.markSlotRendered();
+            return () => null;
+          },
+        });
+        return () => [h(Outlet, { actions }), h(Page), h(Rendered)];
+      },
+    });
+    app = createApp(Body);
+    app.component("UButton", ButtonStub);
+    app.component("UTooltip", SlotStub);
+    app.mount(host);
+    await nextTick();
+  }
+
+  it("puts the page's actions after the served buttons by default", async () => {
+    await mountPage([served("add-key"), served("add-language")]);
+    expect(labels()).toEqual(["add-key", "add-language", "Export"]);
+  });
+
+  it("puts them before the served buttons of a greater order", async () => {
+    await mountPage([served("add-key")], { order: -1 });
+    expect(labels()).toEqual(["Export", "add-key"]);
+  });
+
+  it("sorts the served buttons by order, the declared order breaking ties", async () => {
+    await mountPage(
+      [served("last", 2), served("first"), served("second"), served("mid", 1)],
+      { order: 1 },
+    );
+    expect(labels()).toEqual(["first", "second", "mid", "Export", "last"]);
+  });
+});

package/frontend-vue/tests/period-day-rollover.test.ts

@@ -0,0 +1,80 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ref } from "vue";
+import { usePeriod } from "../layers/dms-core/app/composables/period/usePeriod";
+import {
+  isCalendarPreset,
+  msUntilNextMidnight,
+} from "../layers/dms-core/app/composables/period/presetResolvers";
+
+const MS_PER_MINUTE = 60000;
+const MS_PER_DAY = 24 * 60 * MS_PER_MINUTE;
+const LATE_EVENING = new Date(2026, 9, 12, 23, 58);
+const NEXT_DAY = new Date(2026, 9, 13);
+
+describe("calendar presets at midnight", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(LATE_EVENING);
+    vi.stubGlobal("window", globalThis);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  it("classifies the day-bound presets as calendar presets", () => {
+    expect(isCalendarPreset("today")).toBe(true);
+    expect(isCalendarPreset("last-7-days")).toBe(true);
+    expect(isCalendarPreset("this-month")).toBe(true);
+    expect(isCalendarPreset("last-hour")).toBe(false);
+    expect(isCalendarPreset("custom")).toBe(false);
+    expect(isCalendarPreset("all")).toBe(false);
+  });
+
+  it("measures the time left until the next local midnight", () => {
+    expect(msUntilNextMidnight(LATE_EVENING)).toBe(2 * MS_PER_MINUTE);
+  });
+
+  it("moves `today` onto the new day once midnight passes", () => {
+    const period = usePeriod({ defaultPreset: "today" });
+    const initialKey = period.state.value.key;
+    vi.advanceTimersByTime(MS_PER_MINUTE);
+    expect(period.state.value.key).toBe(initialKey);
+    vi.advanceTimersByTime(MS_PER_MINUTE);
+    expect(period.state.value.range?.from).toEqual(NEXT_DAY);
+  });
+
+  it("keeps moving on the following midnights", () => {
+    const period = usePeriod({ defaultPreset: "last-7-days" });
+    vi.advanceTimersByTime(2 * MS_PER_MINUTE);
+    expect(period.state.value.range?.to.getDate()).toBe(13);
+    vi.advanceTimersByTime(MS_PER_DAY);
+    expect(period.state.value.range?.to.getDate()).toBe(14);
+  });
+
+  it("waits for the hold to end before moving", async () => {
+    const isHeld = ref(true);
+    const period = usePeriod({
+      defaultPreset: "today",
+      holdClock: () => isHeld.value,
+    });
+    const initialKey = period.state.value.key;
+    await vi.advanceTimersByTimeAsync(3 * MS_PER_MINUTE);
+    expect(period.state.value.key).toBe(initialKey);
+    isHeld.value = false;
+    await vi.advanceTimersByTimeAsync(0);
+    expect(period.state.value.range?.from).toEqual(NEXT_DAY);
+  });
+
+  it("leaves a custom range alone", async () => {
+    const period = usePeriod({ defaultPreset: "today" });
+    period.setCustomRange({
+      from: new Date(2026, 9, 1),
+      to: new Date(2026, 9, 2),
+    });
+    const initialKey = period.state.value.key;
+    await vi.advanceTimersByTimeAsync(3 * MS_PER_MINUTE);
+    expect(period.state.value.key).toBe(initialKey);
+  });
+});

package/frontend-vue/tests/period-max-days.test.ts

@@ -0,0 +1,128 @@
+// @vitest-environment jsdom
+/**
+ * `maxDays` caps the custom range a PeriodSelector lets the user pick: the
+ * calendar disables the days past it once a start day is picked, and a range
+ * from the date fields or a long preset is cut to it.
+ */
+import { CalendarDate } from "@internationalized/date";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { createApp, defineComponent, h, nextTick, type App } from "vue";
+import { afterEach, describe, expect, it } from "vitest";
+import PeriodRangeCalendar from "../layers/dms-ui/app/build/components/period/PeriodRangeCalendar.vue";
+import {
+  calendarRangeDays,
+  isBeyondMaxDays,
+  limitCalendarRange,
+} from "../layers/dms-ui/app/build/composables/period/periodDisplay";
+
+const OCTOBER_FIRST = new CalendarDate(2026, 10, 1);
+const OCTOBER_LAST = new CalendarDate(2026, 10, 31);
+
+describe("limitCalendarRange", () => {
+  const october = { start: OCTOBER_FIRST, end: OCTOBER_LAST };
+
+  it("keeps a range within the limit", () => {
+    expect(limitCalendarRange(october, 31, "start")).toBe(october);
+    expect(limitCalendarRange(october, undefined, "start")).toBe(october);
+  });
+
+  it("moves the end when the start is kept", () => {
+    const limited = limitCalendarRange(october, 7, "start");
+    expect(limited.start.toString()).toBe("2026-10-01");
+    expect(limited.end.toString()).toBe("2026-10-07");
+    expect(calendarRangeDays(limited)).toBe(7);
+  });
+
+  it("moves the start when the end is kept", () => {
+    const limited = limitCalendarRange(october, 7, "end");
+    expect(limited.start.toString()).toBe("2026-10-25");
+    expect(limited.end.toString()).toBe("2026-10-31");
+  });
+});
+
+describe("isBeyondMaxDays", () => {
+  it("allows exactly maxDays days on either side of the picked day", () => {
+    const picked = new CalendarDate(2026, 10, 10);
+    expect(isBeyondMaxDays(picked.add({ days: 6 }), picked, 7)).toBe(false);
+    expect(isBeyondMaxDays(picked.add({ days: 7 }), picked, 7)).toBe(true);
+    expect(isBeyondMaxDays(picked.subtract({ days: 6 }), picked, 7)).toBe(
+      false,
+    );
+    expect(isBeyondMaxDays(picked.subtract({ days: 7 }), picked, 7)).toBe(true);
+    expect(isBeyondMaxDays(picked.add({ days: 400 }), picked, undefined)).toBe(
+      false,
+    );
+  });
+});
+
+describe("the range calendar with maxDays", () => {
+  let app: App | undefined;
+
+  afterEach(() => {
+    app?.unmount();
+    app = undefined;
+  });
+
+  function mountCalendar(maxDays?: number): HTMLElement {
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    app = createApp(
+      defineComponent({
+        setup: () => () =>
+          h(PeriodRangeCalendar, {
+            modelValue: {
+              start: new CalendarDate(2026, 9, 1),
+              end: new CalendarDate(2026, 9, 2),
+            },
+            locale: "en-US",
+            numberOfMonths: 1,
+            maxDays,
+          }),
+      }),
+    );
+    app.config.globalProperties.$t = (_key: string, fallback: string) =>
+      fallback;
+    app.component(
+      "UButton",
+      defineComponent({ setup: () => () => h("button") }),
+    );
+    app.mount(host);
+    return host;
+  }
+
+  function day(host: HTMLElement, value: string): HTMLElement {
+    const cell = host.querySelector<HTMLElement>(`[data-value="${value}"]`);
+    if (!cell) throw new Error(`No day ${value}`);
+    return cell;
+  }
+
+  it("disables the days past the limit once a start day is picked", async () => {
+    const host = mountCalendar(7);
+    expect(day(host, "2026-09-20").hasAttribute("data-disabled")).toBe(false);
+    day(host, "2026-09-10").click();
+    await nextTick();
+    expect(day(host, "2026-09-16").hasAttribute("data-disabled")).toBe(false);
+    expect(day(host, "2026-09-17").hasAttribute("data-disabled")).toBe(true);
+    expect(day(host, "2026-09-03").hasAttribute("data-disabled")).toBe(true);
+  });
+
+  it("leaves every day enabled without a limit", async () => {
+    const host = mountCalendar();
+    day(host, "2026-09-10").click();
+    await nextTick();
+    expect(day(host, "2026-09-30").hasAttribute("data-disabled")).toBe(false);
+  });
+});
+
+it("hands maxDays to the calendar and cuts the date fields to it", () => {
+  const source = readFileSync(
+    resolve(
+      __dirname,
+      "../layers/dms-ui/app/components/period/PeriodSelector.vue",
+    ),
+    "utf8",
+  );
+  expect(source).toContain(':max-days="maxDays"');
+  expect(source).toContain("limitCalendarRange(range, props.maxDays, anchor)");
+});

package/frontend-vue/tests/period-selector-url.test.ts

@@ -25,12 +25,13 @@ const preferences = new Map<string, unknown>();
 vi.stubGlobal("useDmsRoute", () => route);
 // Inertia's client-side replace moves its page URL, which the DMS route
 // follows: the route then holds the query the browser shows.
+function followInertiaPage({ url }: { url: string }): void {
+  route.query = Object.fromEntries(
+    new URL(url, "http://dms.local").searchParams,
+  );
+}
 const { inertiaReplace } = vi.hoisted(() => ({
-  inertiaReplace: vi.fn(({ url }: { url: string }) => {
-    route.query = Object.fromEntries(
-      new URL(url, "http://dms.local").searchParams,
-    );
-  }),
+  inertiaReplace: vi.fn(),
 }));
 vi.mock("@inertiajs/vue3", () => ({ router: { replace: inertiaReplace } }));
 vi.stubGlobal("usePreferences", () => ({
@@ -116,13 +117,24 @@ function mount(...ids: string[]): void {
 
 const search = () => new URLSearchParams(window.location.search);
 
+/** A navigation from outside: the browser's URL moves, then the route. */
+function navigate(query: Record<string, string>): void {
+  window.history.replaceState(
+    null,
+    "",
+    `${PAGE_PATH}?${new URLSearchParams(query)}`,
+  );
+  route.query = query;
+}
+
 const remember = (query: Record<string, string>) =>
   preferences.set(PERIOD_PREFERENCE_KEY, { [`${PAGE_ID}#page`]: query });
 
 beforeEach(() => {
   route.query = {};
   preferences.clear();
-  inertiaReplace.mockClear();
+  inertiaReplace.mockReset();
+  inertiaReplace.mockImplementation(followInertiaPage);
   window.history.replaceState(null, "", PAGE_PATH);
 });
 
@@ -272,10 +284,34 @@ describe("a change of period", () => {
   });
 });
 
+describe("the route while Inertia catches up", () => {
+  it("holds the new period at once", async () => {
+    inertiaReplace.mockImplementation(() => {});
+    mount("page");
+    handles.page!.setPreset("last-7-days");
+    await nextTick();
+    expect(route.query["page.period"]).toBe("last-7-days");
+    expect(search().get("page.period")).toBe("last-7-days");
+  });
+
+  it("does not move the period back when it reports the old URL late", async () => {
+    inertiaReplace.mockImplementation(() => {});
+    mount("page");
+    await nextTick();
+    const before = { ...route.query };
+    handles.page!.setPreset("last-7-days");
+    await nextTick();
+    route.query = before;
+    await nextTick();
+    expect(handles.page!.preset.value).toBe("last-7-days");
+    expect(search().get("page.period")).toBe("last-7-days");
+  });
+});
+
 describe("a route changed from outside", () => {
   it("moves the period of the selector it names", async () => {
     mount("sales", "traffic");
-    route.query = { "sales.period": "last-30-days" };
+    navigate({ "sales.period": "last-30-days" });
     await nextTick();
     expect(handles.sales!.preset.value).toBe("last-30-days");
     expect(handles.traffic!.preset.value).toBe("this-month");
@@ -285,7 +321,7 @@ describe("a route changed from outside", () => {
     mount("page");
     handles.page!.setPreset("last-7-days");
     await nextTick();
-    route.query = { "page.period": "last-decade" };
+    navigate({ "page.period": "last-decade" });
     await nextTick();
     expect(handles.page!.preset.value).toBe("last-7-days");
   });