@antelopejs/dms 0.9.1 → 0.9.3

package/frontend-vue/tests/period-relative-refresh.test.ts

@@ -1,61 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { usePeriod } from "../layers/dms-core/app/composables/period/usePeriod";
-import { isRelativePreset } from "../layers/dms-core/app/composables/period/presetResolvers";
-
-const REFRESH_MS = 60000;
-
-describe("relative preset refresh", () => {
-  beforeEach(() => {
-    vi.useFakeTimers();
-    vi.stubGlobal("window", globalThis);
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-    vi.unstubAllGlobals();
-  });
-
-  it("classifies only the sliding presets as relative", () => {
-    expect(isRelativePreset("last-hour")).toBe(true);
-    expect(isRelativePreset("last-24h")).toBe(true);
-    expect(isRelativePreset("last-90-days")).toBe(false);
-    expect(isRelativePreset("this-month")).toBe(false);
-  });
-
-  it("slides a relative preset's range as time passes", () => {
-    const period = usePeriod({ defaultPreset: "last-hour" });
-    const initialTo = period.state.value.range.to.getTime();
-    vi.advanceTimersByTime(REFRESH_MS);
-    expect(period.state.value.range.to.getTime()).toBe(initialTo + REFRESH_MS);
-  });
-
-  it("changes the state key on each slide so consumers refetch", () => {
-    const period = usePeriod({ defaultPreset: "last-24h" });
-    const initialKey = period.state.value.key;
-    vi.advanceTimersByTime(REFRESH_MS);
-    expect(period.state.value.key).not.toBe(initialKey);
-  });
-
-  it("keeps calendar presets fixed while time passes", () => {
-    const period = usePeriod({ defaultPreset: "this-month" });
-    const initialKey = period.state.value.key;
-    vi.advanceTimersByTime(REFRESH_MS * 3);
-    expect(period.state.value.key).toBe(initialKey);
-  });
-
-  it("starts sliding after switching onto a relative preset", async () => {
-    const period = usePeriod({ defaultPreset: "this-month" });
-    period.setPreset("last-hour");
-    await vi.advanceTimersByTimeAsync(REFRESH_MS);
-    expect(period.state.value.range.to.getTime()).toBe(Date.now());
-  });
-
-  it("stops sliding after switching back to a calendar preset", async () => {
-    const period = usePeriod({ defaultPreset: "last-hour" });
-    period.setPreset("this-month");
-    await vi.advanceTimersByTimeAsync(0);
-    const initialKey = period.state.value.key;
-    await vi.advanceTimersByTimeAsync(REFRESH_MS * 2);
-    expect(period.state.value.key).toBe(initialKey);
-  });
-});

package/frontend-vue/tests/period-scope-first-fetch.test.ts

@@ -1,377 +0,0 @@
-// @vitest-environment jsdom
-/**
- * A period-scoped card must issue exactly one request on mount, before any
- * interaction — see AntelopeJS/dms#365. The failure mode is silent (the card
- * renders an empty value and nothing throws), so only an assertion on the
- * request count catches it, and only a run that covers both mount orders:
- * the selector registers its scope during its own setup, which may run before
- * or after the cards'.
- */
-import {
-  computed,
-  createApp,
-  createSSRApp,
-  defineAsyncComponent,
-  defineComponent,
-  h,
-  nextTick,
-  ref,
-} from "vue";
-import { renderToString } from "vue/server-renderer";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { useRealDataEngine } from "./fixtures/dataEngine";
-import type { PeriodState } from "../layers/dms-core/app/composables/period/types";
-
-const requests: string[] = [];
-
-vi.stubGlobal("useAuthFetch", () => ({
-  $authFetch: async (url: string) => {
-    requests.push(url);
-    return { value: 1 };
-  },
-}));
-vi.stubGlobal("useI18n", () => ({
-  locale: ref("fr-FR"),
-  t: (key: string, fallback?: string) => fallback ?? key,
-}));
-vi.stubGlobal("useTranslation", () => ({
-  processI18n: (text: string) => text,
-}));
-vi.stubGlobal("useComponentEvent", () => ({}));
-vi.stubGlobal("useWatch", () => ({ state: ref({}) }));
-
-const { usePeriod } = await import(
-  "../layers/dms-core/app/composables/period/usePeriod"
-);
-const { registerPeriodScope } = await import(
-  "../layers/dms-core/app/composables/period/usePeriodScope"
-);
-const { useChartFetch, PENDING_SCOPE_TIMEOUT_MS } = await import(
-  "../layers/dms-ui/app/composables/chart/useChartFetch"
-);
-const KpiCard = (
-  await import("../layers/dms-ui/app/components/kpi/KpiCard.vue")
-).default;
-
-const SCOPE = "demo";
-// usePeriodScope warns about a missing scope after this long; a card must not
-// give up on its scope that early (a selector chunk can land later).
-const MISSING_SCOPE_WARN_MS = 250;
-// useChartFetch debounces every refresh past the first by 180ms; settle past
-// that, or a duplicate first fetch lands after the assertions and goes unseen.
-const SETTLE_MS = 300;
-
-/** Same registration shape as PeriodSelector.vue: usePeriod() in setup. */
-const Selector = defineComponent({
-  setup() {
-    const period = usePeriod({ defaultPreset: "last-7-days" });
-    registerPeriodScope(SCOPE, period.state);
-    return () => h("div", { class: "selector" }, period.state.value.key);
-  },
-});
-
-const Card = defineComponent({
-  props: {
-    url: { type: String, required: true },
-    scope: { type: String, default: SCOPE },
-  },
-  setup(props) {
-    const { isLoading } = useChartFetch<{ value: number }>({
-      fetchUrl: props.url,
-      periodScope: props.scope || undefined,
-    });
-    return () => h("div", { class: "card" }, String(isLoading.value));
-  },
-});
-
-const Passthrough = defineComponent({
-  setup:
-    (_, { slots }) =>
-    () =>
-      h("div", slots.default?.() ?? []),
-});
-const Skeleton = defineComponent({ setup: () => () => h("div", "SKELETON") });
-
-/** Defer a component's resolution to mimic a lazily chunked global. */
-function lazy(component: unknown, delayMs: number) {
-  return defineAsyncComponent(
-    () =>
-      new Promise((resolve) =>
-        setTimeout(() => resolve(component as never), delayMs),
-      ),
-  );
-}
-
-function page(selectorDelayMs: number, cardDelayMs: number) {
-  const LazySelector = lazy(Selector, selectorDelayMs);
-  const LazyCard = lazy(Card, cardDelayMs);
-  return defineComponent({
-    setup: () => () =>
-      h("main", [
-        h(LazySelector),
-        h(LazyCard, { url: "/api/metrics/kpi/a" }),
-        h(LazyCard, { url: "/api/metrics/kpi/b" }),
-      ]),
-  });
-}
-
-/**
- * Every component resolved in the same flush, the selector's setup running
- * after the cards'. This is the order measured in the running dashboard: the
- * cards register their watcher with no scope, the selector registers one, the
- * pre-flush watcher fires the first fetch, and only then does onMounted run.
- */
-function sameFlushPage() {
-  return defineComponent({
-    setup: () => () =>
-      h("main", [
-        h(Card, { url: "/api/metrics/kpi/a" }),
-        h(Card, { url: "/api/metrics/kpi/b" }),
-        h(Selector),
-      ]),
-  });
-}
-
-const mounted: Array<{ unmount: () => void }> = [];
-
-async function ssrThenHydrate(
-  root: unknown,
-  components: Record<string, unknown> = {},
-) {
-  const html = await renderToString(
-    withComponents(createSSRApp(root as never), components),
-  );
-  const container = document.createElement("div");
-  container.innerHTML = html;
-  document.body.appendChild(container);
-  // The browser starts from what the page carried, as it does after a server
-  // render: its first mount takes the data over instead of reading it again.
-  const payload = structuredClone(engine.serializeDmsPayload(renderRuntime));
-  const browser = engine.createDmsFrontendRuntime(undefined, {});
-  engine.restoreDmsPayload(browser, payload);
-  const app = withComponents(createSSRApp(root as never), components);
-  engine.provideDmsFrontendRuntime(app, browser);
-  app.mount(container);
-  mounted.push(app);
-  const deadline = Date.now() + SETTLE_MS;
-  while (Date.now() < deadline) {
-    await nextTick();
-    await new Promise((resolve) => setTimeout(resolve, 12));
-  }
-  return { container, html };
-}
-
-function withComponents<
-  A extends { component: (n: string, c: never) => unknown },
->(app: A, components: Record<string, unknown>): A {
-  for (const [name, component] of Object.entries(components)) {
-    app.component(name, component as never);
-  }
-  return app;
-}
-
-const engine = await import("#dms/frontend-module");
-let renderRuntime: ReturnType<typeof useRealDataEngine>;
-
-beforeEach(() => {
-  renderRuntime = useRealDataEngine();
-});
-
-beforeEach(() => {
-  requests.length = 0;
-});
-afterEach(() => {
-  // Unmount, don't just drop the DOM: a live card keeps its watcher and its
-  // debounce timer, and would fetch into the next test's request log.
-  for (const app of mounted.splice(0)) app.unmount();
-  document.body.innerHTML = "";
-});
-
-describe("period-scoped cards on first paint", () => {
-  it.each([
-    ["selector chunk first", 0, 8],
-    ["card chunks first", 8, 0],
-    ["same tick", 0, 0],
-  ])(
-    "issues exactly one request per card (%s)",
-    async (_label, selectorDelay, cardDelay) => {
-      await ssrThenHydrate(page(selectorDelay, cardDelay));
-
-      expect(requests).toHaveLength(2);
-      expect(new Set(requests).size).toBe(2);
-      for (const url of requests) {
-        expect(url).toMatch(/[?&]from=/);
-        expect(url).toMatch(/[?&]to=/);
-        expect(url).toMatch(/[?&]preset=last-7-days/);
-      }
-    },
-  );
-
-  it("does not fetch twice when the scope registers between setup and mount", async () => {
-    await ssrThenHydrate(sameFlushPage());
-
-    expect(requests).toHaveLength(2);
-    expect(new Set(requests).size).toBe(2);
-  });
-
-  it("fetches a pending period after its scope disappears and returns", async () => {
-    const scope = "returning-scope";
-    const state = ref<PeriodState>({
-      key: "initial",
-      preset: "custom",
-      comparison: "none",
-      range: { from: new Date("2026-01-01"), to: new Date("2026-02-01") },
-      compareRange: null,
-    });
-    const period = computed(() => state.value);
-    let unregister = registerPeriodScope(scope, period);
-    try {
-      await ssrThenHydrate(
-        defineComponent({
-          setup: () => () => h(Card, { url: "/api/metrics/returning", scope }),
-        }),
-      );
-      expect(requests).toHaveLength(1);
-      state.value = {
-        ...state.value,
-        key: "next",
-        range: { from: new Date("2026-02-01"), to: new Date("2026-03-01") },
-      };
-      await nextTick();
-      unregister();
-      await nextTick();
-      unregister = registerPeriodScope(scope, period);
-      await nextTick();
-      await new Promise((resolve) => setTimeout(resolve, SETTLE_MS));
-      expect(requests).toHaveLength(2);
-      const query = new URL(requests[1]!, "https://example.test").searchParams;
-      expect(query.get("from")).toBe("2026-02-01T00:00:00.000Z");
-      expect(query.get("to")).toBe("2026-03-01T00:00:00.000Z");
-    } finally {
-      unregister();
-    }
-  });
-
-  // Its period unknown to the server (no selector registered it before the
-  // card set up), a card renders its placeholder, never an empty value.
-  it("shows a loading placeholder server-side rather than an empty value", async () => {
-    const app = createSSRApp({
-      render: () =>
-        h(KpiCard as never, {
-          title: "Revenue",
-          componentId: "card",
-          pageId: "page",
-          fetchUrl: "/api/metrics/kpi/revenue",
-          periodScope: "unregistered-scope",
-        }),
-    });
-    withComponents(app, {
-      DmsCard: Passthrough,
-      UIcon: Passthrough,
-      USkeleton: Skeleton,
-      DmsTrendBadge: Passthrough,
-      DmsSparkline: Passthrough,
-      ClientOnly: Passthrough,
-    });
-
-    const html = await renderToString(app);
-
-    expect(html).toContain("SKELETON");
-    expect(html).not.toContain("<span>0</span>");
-  });
-
-  it("keeps loading while a late selector may still register the scope", async () => {
-    const Late = defineComponent({
-      setup: () => () =>
-        h(Card, { url: "/api/metrics/kpi/late", scope: "late-scope" }),
-    });
-    const { container } = await ssrThenHydrate(Late);
-    await new Promise((resolve) =>
-      setTimeout(resolve, MISSING_SCOPE_WARN_MS + 50),
-    );
-    await nextTick();
-
-    expect(requests).toHaveLength(0);
-    expect(container.querySelector(".card")?.textContent).toBe("true");
-  });
-
-  it("stops loading when no selector ever registers the scope", async () => {
-    vi.useFakeTimers({ shouldAdvanceTime: true });
-    try {
-      const Orphan = defineComponent({
-        setup: () => () =>
-          h(Card, {
-            url: "/api/metrics/kpi/orphan",
-            scope: "never-registered",
-          }),
-      });
-      const { container } = await ssrThenHydrate(Orphan);
-      vi.advanceTimersByTime(PENDING_SCOPE_TIMEOUT_MS + 50);
-      await nextTick();
-
-      expect(requests).toHaveLength(0);
-      expect(container.querySelector(".card")?.textContent).toBe("false");
-    } finally {
-      vi.useRealTimers();
-    }
-  });
-});
-
-describe("chart fetch loading state", () => {
-  it("stays loading when an aborted request settles after a newer one started", async () => {
-    const pending: Array<{
-      url: string;
-      resolve: (value: unknown) => void;
-      reject: (error: unknown) => void;
-    }> = [];
-    vi.stubGlobal("useAuthFetch", () => ({
-      $authFetch: (url: string, opts: { signal: AbortSignal }) =>
-        new Promise((resolve, reject) => {
-          pending.push({ url, resolve, reject });
-          opts.signal.addEventListener("abort", () =>
-            reject(Object.assign(new Error("aborted"), { name: "AbortError" })),
-          );
-        }),
-    }));
-    const watched = ref(0);
-    let loading: { value: boolean } | undefined;
-    let refresh: (() => Promise<void>) | undefined;
-    const Probe = defineComponent({
-      setup() {
-        const fetch = useChartFetch<{ value: number }>({
-          fetchUrl: "/api/metrics/kpi/race",
-          watchSource: () => watched.value,
-        });
-        loading = fetch.isLoading;
-        refresh = fetch.refresh;
-        return () => h("div");
-      },
-    });
-    const app = createApp(Probe);
-    app.mount(document.createElement("div"));
-    mounted.push(app);
-    await nextTick();
-    expect(pending).toHaveLength(1);
-
-    // A second request supersedes the first, whose abort settles meanwhile.
-    void refresh?.();
-    await new Promise((resolve) => setTimeout(resolve, 0));
-    expect(pending).toHaveLength(2);
-    expect(loading?.value).toBe(true);
-
-    pending[1]!.resolve({ value: 2 });
-    await new Promise((resolve) => setTimeout(resolve, 0));
-    expect(loading?.value).toBe(false);
-
-    // New inputs: loading from the change on, through the debounce.
-    watched.value = 1;
-    await nextTick();
-    expect(loading?.value).toBe(true);
-    vi.stubGlobal("useAuthFetch", () => ({
-      $authFetch: async (url: string) => {
-        requests.push(url);
-        return { value: 1 };
-      },
-    }));
-  });
-});

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

@@ -1,138 +0,0 @@
-/**
- * What a PeriodSelector offers besides its presets: every period (`all`, no
- * bounds sent), a window labelled relative to now ("since yesterday 11:52"),
- * and a comparison drawn as a menu, a toggle or nothing.
- */
-import { effectScope } from "vue";
-import { describe, expect, it } from "vitest";
-import { resolvePresetRange } from "../layers/dms-core/app/composables/period/presetResolvers";
-import { resolveComparisonRange } from "../layers/dms-core/app/composables/period/compareResolvers";
-import { usePeriod } from "../layers/dms-core/app/composables/period/usePeriod";
-import { appendPeriodToUrl } from "../layers/dms-core/app/composables/period/usePeriodScope";
-import { usePeriodDraft } from "../layers/dms-ui/app/build/composables/period/usePeriodDraft";
-import { formatRelativeInstant } from "../layers/dms-ui/app/build/composables/period/periodDisplay";
-import { resolveComparisonControl } from "../layers/dms-ui/app/build/composables/period/periodComparisonControl";
-
-const NOW = new Date(2026, 9, 11, 19, 54);
-const FALLBACK = { from: new Date(2026, 0, 1), to: new Date(2026, 0, 31) };
-
-function allTimePeriod() {
-  const scope = effectScope();
-  const result = scope.run(() => {
-    const period = usePeriod({
-      defaultPreset: "all",
-      defaultComparison: "previous-period",
-      presets: ["last-24h", "all", "custom"],
-    });
-    return { period, draft: usePeriodDraft(period) };
-  });
-  if (!result) throw new Error("scope did not run");
-  return { ...result, stop: () => scope.stop() };
-}
-
-describe("every period", () => {
-  it("resolves to no bounds, and nothing to compare with", () => {
-    expect(resolvePresetRange("all", NOW, FALLBACK)).toBeNull();
-    expect(resolveComparisonRange("previous-period", null, null)).toBeNull();
-  });
-
-  it("is published with no range, and sends no from / to", () => {
-    const { period, stop } = allTimePeriod();
-    const { state } = period;
-    expect(state.value.range).toBeNull();
-    expect(state.value.compareRange).toBeNull();
-
-    const url = appendPeriodToUrl("/api/requests?route=1", state.value)!;
-    const params = new URL(url, "http://dms.local").searchParams;
-    expect(params.has("from")).toBe(false);
-    expect(params.has("to")).toBe(false);
-    expect(params.has("compareFrom")).toBe(false);
-    expect(params.get("preset")).toBe("all");
-    expect(params.get("route")).toBe("1");
-    stop();
-  });
-
-  it("starts a custom range from today in the popover", () => {
-    const { draft, stop } = allTimePeriod();
-    expect(draft.range.value).toBeNull();
-    draft.selectPreset("custom");
-    const today = new Date();
-    expect(draft.range.value!.from.getDate()).toBe(today.getDate());
-    expect(draft.range.value!.to.getHours()).toBe(23);
-    stop();
-  });
-});
-
-describe("a window labelled relative to now", () => {
-  it("gives the time alone today", () => {
-    const start = new Date(2026, 9, 11, 11, 52);
-    expect(formatRelativeInstant(start, NOW, "en-GB")).toBe("11:52");
-  });
-
-  it("says yesterday in the reader's language", () => {
-    const start = new Date(2026, 9, 10, 11, 52);
-    expect(formatRelativeInstant(start, NOW, "en-GB")).toBe("yesterday 11:52");
-    expect(formatRelativeInstant(start, NOW, "fr-FR")).toBe("hier 11:52");
-  });
-
-  it("gives the weekday within a week", () => {
-    const start = new Date(2026, 9, 7, 11, 52);
-    expect(formatRelativeInstant(start, NOW, "en-GB")).toMatch(/^Wed 11:52$/);
-  });
-
-  it("gives the date beyond a week, and its year when not this one's", () => {
-    expect(
-      formatRelativeInstant(new Date(2026, 9, 4, 11, 52), NOW, "en-US"),
-    ).toBe("Oct 4, 11:52 AM");
-    expect(
-      formatRelativeInstant(new Date(2025, 9, 4, 11, 52), NOW, "en-US"),
-    ).toContain("2025");
-  });
-});
-
-describe("the comparison control", () => {
-  it("is a menu of several comparisons by default", () => {
-    expect(resolveComparisonControl({}).control).toBe("menu");
-  });
-
-  it("is a toggle when a single comparison is offered, none accepted too", () => {
-    const resolved = resolveComparisonControl({
-      comparisons: ["previous-period"],
-    });
-    expect(resolved).toMatchObject({
-      control: "toggle",
-      toggled: "previous-period",
-      comparisons: ["none", "previous-period"],
-    });
-  });
-
-  it("toggles the default comparison when asked for a toggle among several", () => {
-    const resolved = resolveComparisonControl({
-      comparisonControl: "toggle",
-      defaultComparison: "previous-year",
-    });
-    expect(resolved.toggled).toBe("previous-year");
-  });
-
-  it("keeps the comparison on when hidden", () => {
-    const resolved = resolveComparisonControl({
-      comparisonControl: "hidden",
-      comparisons: ["previous-period"],
-    });
-    expect(resolved).toMatchObject({
-      control: "hidden",
-      toggled: null,
-      defaultComparison: "previous-period",
-      comparisons: ["previous-period"],
-    });
-  });
-
-  it("draws nothing when nothing but none is offered", () => {
-    expect(
-      resolveComparisonControl({
-        comparisons: ["none"],
-        comparisonControl: "menu",
-      }).control,
-    ).toBe("hidden");
-  });
-});