@antelopejs/dms 0.9.2 → 0.9.3

package/frontend-vue/tests/use-api-data.test.ts

@@ -1,410 +0,0 @@
-// @vitest-environment jsdom
-/**
- * `useApiData` through the runtime's real async data and the real
- * `$authFetch`: a server render reads, renders and hands over the data, the
- * browser hydrates with it and follows reactive requests, and every request
- * keeps `$authFetch`'s headers and session retry.
- */
-import {
-  createApp,
-  createSSRApp,
-  defineComponent,
-  h,
-  nextTick,
-  ref,
-  type App,
-  type Component,
-} from "vue";
-import { renderToString } from "vue/server-renderer";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import type { DmsFrontendRuntime, DmsPayload } from "#dms/frontend-module";
-
-const engine = await import("#dms/frontend-module");
-vi.stubGlobal("$fetch", engine.$fetch);
-vi.stubGlobal("useDmsFetch", engine.useDmsFetch);
-vi.stubGlobal("useDmsAsyncData", engine.useDmsAsyncData);
-vi.stubGlobal("useDmsState", engine.useDmsState);
-vi.stubGlobal("useDmsRuntimeConfig", () => ({
-  public: { dms: { baseURL: "" } },
-}));
-// The app's language, which a test may switch.
-const appLocale = ref("fr");
-vi.stubGlobal("useDmsApp", () => ({ $i18n: { locale: appLocale } }));
-vi.stubGlobal("HTTP_UNAUTHORIZED", 401);
-vi.stubGlobal("useDmsUserSession", () => ({ loggedIn: { value: true } }));
-const refreshSession = vi.fn(async () => true);
-vi.stubGlobal("useSessionRecovery", () => ({
-  refreshSession,
-  reconcileSession: vi.fn(),
-  redirectToAuth: vi.fn(),
-}));
-const { useAuthFetch } = await import(
-  "../layers/dms-core/app/composables/auth/useAuthFetch"
-);
-vi.stubGlobal("useAuthFetch", useAuthFetch);
-const { useApiData, useApiPagedData } = await import(
-  "../layers/dms-core/app/composables/auth/useApiData"
-);
-vi.stubGlobal("useApiData", useApiData);
-vi.stubGlobal("useDmsPagedData", engine.useDmsPagedData);
-
-interface Sent {
-  url: string;
-  query?: Record<string, unknown>;
-  headers: Headers;
-  signal?: AbortSignal;
-}
-
-const sent: Sent[] = [];
-let failNextWith: number | undefined;
-
-/** The transport under `$fetch`: what reaches the backend. */
-const transport = (async (
-  url: string,
-  options: {
-    query?: Record<string, unknown>;
-    headers?: HeadersInit;
-    signal?: AbortSignal;
-    onRequest?: (context: { options: { headers: Headers } }) => void;
-  } = {},
-) => {
-  const headers = new Headers(options.headers);
-  options.onRequest?.({ options: { headers } });
-  sent.push({ url, query: options.query, headers, signal: options.signal });
-  if (failNextWith) {
-    const status = failNextWith;
-    failNextWith = undefined;
-    throw Object.assign(new Error("Unauthorized"), {
-      statusCode: status,
-      response: { status },
-    });
-  }
-  return { url, page: options.query?.page ?? null };
-}) as never;
-
-const mounted: App[] = [];
-
-beforeEach(() => {
-  sent.length = 0;
-  failNextWith = undefined;
-  refreshSession.mockClear();
-});
-
-afterEach(() => {
-  mounted.splice(0).forEach((app) => app.unmount());
-});
-
-async function serverRender(
-  root: Component,
-): Promise<{ html: string; payload: DmsPayload }> {
-  const runtime = engine.createDmsFrontendRuntime(transport, {}, true);
-  const app = createSSRApp(root);
-  engine.provideDmsFrontendRuntime(app, runtime);
-  const html = await renderToString(app);
-  return { html, payload: engine.serializeDmsPayload(runtime) };
-}
-
-function hydrate(root: Component, html: string, payload: DmsPayload) {
-  const runtime: DmsFrontendRuntime = engine.createDmsFrontendRuntime(
-    transport,
-    {},
-  );
-  engine.restoreDmsPayload(runtime, structuredClone(payload));
-  const container = document.createElement("div");
-  container.innerHTML = html;
-  const app = createSSRApp(root);
-  engine.provideDmsFrontendRuntime(app, runtime);
-  app.mount(container);
-  mounted.push(app);
-  return container;
-}
-
-const settle = async () => {
-  await nextTick();
-  await new Promise((done) => setTimeout(done, 0));
-  await nextTick();
-};
-
-describe("useApiData", () => {
-  it("reads in the server render, and the browser hydrates without asking again", async () => {
-    const page = ref(1);
-    const Orders = defineComponent({
-      setup() {
-        const { data } = useApiData<{ page: number }>("/api/orders", {
-          query: () => ({ page: page.value }),
-        });
-        return () => h("p", `page:${data.value?.page}`);
-      },
-    });
-
-    const { html, payload } = await serverRender(Orders);
-    expect(html).toBe("<p>page:1</p>");
-    expect(sent).toHaveLength(1);
-    expect(sent[0]!.headers.get("x-content-language")).toBe("fr");
-    expect(sent[0]!.signal).toBeInstanceOf(AbortSignal);
-    expect(payload.data).toEqual({
-      [engine.dmsRequestKey("/api/orders", { query: { page: 1 } })!]: {
-        url: "/api/orders",
-        page: 1,
-      },
-    });
-
-    sent.length = 0;
-    const container = hydrate(Orders, html, payload);
-    await settle();
-    expect(sent).toEqual([]);
-
-    page.value = 2;
-    await settle();
-    expect(sent.map(({ query }) => query)).toEqual([{ page: 2 }]);
-    expect(container.textContent).toBe("page:2");
-  });
-
-  it("reads nothing while its URL is null", async () => {
-    const id = ref<string | null>(null);
-    const Detail = defineComponent({
-      setup() {
-        const { data } = useApiData<{ url: string }>(() =>
-          id.value ? `/api/orders/${id.value}` : null,
-        );
-        return () => h("p", data.value?.url ?? "none");
-      },
-    });
-
-    const { html, payload } = await serverRender(Detail);
-    expect(html).toBe("<p>none</p>");
-    const container = hydrate(Detail, html, payload);
-    await settle();
-    expect(sent).toEqual([]);
-
-    id.value = "7";
-    await settle();
-    expect(container.textContent).toBe("/api/orders/7");
-  });
-
-  it("loads data made of several requests under one key", async () => {
-    const Summary = defineComponent({
-      setup() {
-        const { data } = useApiData(
-          "orders-summary",
-          async ({ $authFetch, signal }) => {
-            const [orders, stats] = await Promise.all([
-              $authFetch<{ url: string }>("/api/orders", { signal }),
-              $authFetch<{ url: string }>("/api/stats", { signal }),
-            ]);
-            return `${orders.url}+${stats.url}`;
-          },
-        );
-        return () => h("p", String(data.value));
-      },
-    });
-
-    const { html, payload } = await serverRender(Summary);
-    expect(html).toBe("<p>/api/orders+/api/stats</p>");
-    expect(payload.data["orders-summary"]).toBe("/api/orders+/api/stats");
-    expect(sent.every(({ signal }) => signal instanceof AbortSignal)).toBe(
-      true,
-    );
-  });
-
-  it("refreshes an expired session and reads again", async () => {
-    failNextWith = 401;
-    const Orders = defineComponent({
-      setup() {
-        const { data } = useApiData<{ url: string }>("/api/orders");
-        return () => h("p", data.value?.url ?? "none");
-      },
-    });
-
-    const { html } = await serverRender(Orders);
-    expect(html).toBe("<p>/api/orders</p>");
-    expect(refreshSession).toHaveBeenCalledTimes(1);
-    expect(sent.map(({ headers }) => headers.get("x-auth-retry"))).toEqual([
-      null,
-      "1",
-    ]);
-  });
-
-  it("waits for execute() with immediate: false, as a dialog does", async () => {
-    let execute: (() => Promise<void>) | undefined;
-    const Dialog = defineComponent({
-      setup() {
-        const result = useApiData<{ url: string }>("/api/invoice", {
-          immediate: false,
-        });
-        execute = () => result.execute();
-        return () => h("p", result.data.value?.url ?? "closed");
-      },
-    });
-    const container = document.createElement("div");
-    const runtime = engine.createDmsFrontendRuntime(transport);
-    const dialog = createApp(Dialog);
-    engine.provideDmsFrontendRuntime(dialog, runtime);
-    dialog.mount(container);
-    mounted.push(dialog);
-    await settle();
-    expect(sent).toEqual([]);
-    expect(container.textContent).toBe("closed");
-
-    await execute!();
-    await settle();
-    expect(sent.map(({ url }) => url)).toEqual(["/api/invoice"]);
-    expect(container.textContent).toBe("/api/invoice");
-  });
-
-  it("polls with refreshInterval while a component shows the data", async () => {
-    const Status = defineComponent({
-      setup() {
-        const { data } = useApiData<{ url: string }>("/api/status", {
-          refreshInterval: 20,
-        });
-        return () => h("p", data.value?.url ?? "none");
-      },
-    });
-    const runtime = engine.createDmsFrontendRuntime(transport);
-    const app = createApp(Status);
-    engine.provideDmsFrontendRuntime(app, runtime);
-    app.mount(document.createElement("div"));
-    await settle();
-    expect(sent).toHaveLength(1);
-    await new Promise((done) => setTimeout(done, 70));
-    expect(sent.length).toBeGreaterThan(1);
-
-    app.unmount();
-    const afterUnmount = sent.length;
-    await new Promise((done) => setTimeout(done, 70));
-    expect(sent).toHaveLength(afterUnmount);
-  });
-
-  it("follows a reactive refreshInterval, and stops at 0", async () => {
-    const interval = ref(20);
-    const Install = defineComponent({
-      setup() {
-        useApiData("/api/install-check", { refreshInterval: interval });
-        return () => h("p");
-      },
-    });
-    const runtime = engine.createDmsFrontendRuntime(transport);
-    const app = createApp(Install);
-    engine.provideDmsFrontendRuntime(app, runtime);
-    app.mount(document.createElement("div"));
-    mounted.push(app);
-    await new Promise((done) => setTimeout(done, 70));
-    expect(sent.length).toBeGreaterThan(1);
-
-    interval.value = 0;
-    await settle();
-    const stopped = sent.length;
-    await new Promise((done) => setTimeout(done, 70));
-    expect(sent).toHaveLength(stopped);
-  });
-
-  it("polls from a plugin, outside any component", async () => {
-    const runtime = engine.createDmsFrontendRuntime(transport);
-    const app = createApp({ render: () => null });
-    engine.provideDmsFrontendRuntime(app, runtime);
-    const polling = ref(true);
-    await settle();
-    app.runWithContext(() =>
-      useApiData("/api/_ai/status", {
-        refreshInterval: () => (polling.value ? 20 : null),
-      }),
-    );
-    await new Promise((done) => setTimeout(done, 70));
-    expect(sent.length).toBeGreaterThan(1);
-
-    polling.value = false;
-    await settle();
-    const stopped = sent.length;
-    await new Promise((done) => setTimeout(done, 70));
-    expect(sent).toHaveLength(stopped);
-    runtime.scope.stop();
-  });
-
-  it("asks in the language current when each request leaves", async () => {
-    const runtime = engine.createDmsFrontendRuntime(transport);
-    const app = createApp({ render: () => null });
-    engine.provideDmsFrontendRuntime(app, runtime);
-    const { $authFetch } = app.runWithContext(() => useAuthFetch());
-    try {
-      appLocale.value = "de";
-      await app.runWithContext(() => $authFetch("/api/orders"));
-      expect(sent[0]!.headers.get("x-content-language")).toBe("de");
-    } finally {
-      appLocale.value = "fr";
-      runtime.scope.stop();
-    }
-  });
-
-  it("is the one read helper: useAuthFetch returns $authFetch alone", () => {
-    expect(Object.keys(useAuthFetch())).toEqual(["$authFetch"]);
-  });
-});
-
-describe("useApiPagedData", () => {
-  interface Listing {
-    url: string;
-    page: number | null;
-  }
-  const LAST_PAGE = 3;
-
-  function listing() {
-    let list: ReturnType<typeof useApiPagedData<Listing, number>> | undefined;
-    const Explorer = defineComponent({
-      setup() {
-        list = useApiPagedData<Listing, number>(
-          "media:root",
-          ({ $authFetch, cursor, signal }) =>
-            $authFetch<Listing>("/api/media", {
-              query: { page: cursor },
-              signal,
-            }),
-          {
-            initialCursor: 1,
-            nextCursor: (page) =>
-              (page.page ?? LAST_PAGE) < LAST_PAGE ? page.page! + 1 : null,
-          },
-        );
-        return () =>
-          h("p", list!.pages.value.map((page) => page.page).join(","));
-      },
-    });
-    return { Explorer, list: () => list! };
-  }
-
-  it("renders the first page on the server, then loads more in the browser", async () => {
-    const server = listing();
-    const { html, payload } = await serverRender(server.Explorer);
-    expect(html).toBe("<p>1</p>");
-    expect(sent[0]!.headers.get("x-content-language")).toBe("fr");
-
-    sent.length = 0;
-    const browser = listing();
-    const container = hydrate(browser.Explorer, html, payload);
-    await settle();
-    expect(sent).toEqual([]);
-
-    await browser.list().loadMore();
-    await browser.list().loadMore();
-    await settle();
-    expect(sent.map(({ query }) => query)).toEqual([{ page: 2 }, { page: 3 }]);
-    expect(container.textContent).toBe("1,2,3");
-    expect(browser.list().hasMore.value).toBe(false);
-  });
-
-  it("reads every loaded page again on a refresh", async () => {
-    const { Explorer, list } = listing();
-    const runtime = engine.createDmsFrontendRuntime(transport);
-    const app = createApp(Explorer);
-    engine.provideDmsFrontendRuntime(app, runtime);
-    app.mount(document.createElement("div"));
-    mounted.push(app);
-    await settle();
-    await list().loadMore();
-    sent.length = 0;
-
-    await list().refresh();
-    expect(sent.map(({ query }) => query)).toEqual([{ page: 1 }, { page: 2 }]);
-    expect(list().pages.value).toHaveLength(2);
-  });
-});

package/frontend-vue/tests/user-language.test.ts

@@ -1,61 +0,0 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { useUserLanguage } from "../layers/dms-layout/app/composables/profile/useUserLanguage";
-
-interface LanguageHarness {
-  setLocale: ReturnType<typeof vi.fn>;
-  authFetch: ReturnType<typeof vi.fn>;
-  refreshUser: ReturnType<typeof vi.fn>;
-}
-
-function stubComposables(authFetch = vi.fn(async () => ({}))): LanguageHarness {
-  const harness: LanguageHarness = {
-    setLocale: vi.fn(async () => {}),
-    authFetch,
-    refreshUser: vi.fn(async () => {}),
-  };
-  vi.stubGlobal("useDmsApp", () => ({
-    $i18n: { setLocale: harness.setLocale },
-  }));
-  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: harness.authFetch }));
-  vi.stubGlobal("useDmsUserSession", () => ({
-    user: { value: { name: "Ada", email: "ada@example.com", language: "en" } },
-    fetch: harness.refreshUser,
-  }));
-  return harness;
-}
-
-afterEach(() => {
-  vi.unstubAllGlobals();
-});
-
-describe("useUserLanguage", () => {
-  it("applies the language and stores it on the user's profile", async () => {
-    const harness = stubComposables();
-
-    await useUserLanguage().changeLanguage("fr");
-
-    expect(harness.setLocale).toHaveBeenCalledWith("fr");
-    expect(harness.authFetch).toHaveBeenCalledWith(
-      "/dms/pages/settings/user/profile",
-      {
-        method: "POST",
-        body: { name: "Ada", email: "ada@example.com", language: "fr" },
-      },
-    );
-    expect(harness.refreshUser).toHaveBeenCalled();
-  });
-
-  it("keeps the applied language when the profile update fails", async () => {
-    const harness = stubComposables(
-      vi.fn(async () => {
-        throw new Error("offline");
-      }),
-    );
-
-    await expect(useUserLanguage().changeLanguage("fr")).resolves.toBe(
-      undefined,
-    );
-    expect(harness.setLocale).toHaveBeenCalledWith("fr");
-    expect(harness.refreshUser).not.toHaveBeenCalled();
-  });
-});

package/frontend-vue/tests/widget-label-i18n.test.ts

@@ -1,182 +0,0 @@
-import { createSSRApp, defineComponent, h, ref, type PropType } from "vue";
-import { renderToString } from "vue/server-renderer";
-import { beforeEach, afterEach, describe, expect, it, vi } from "vitest";
-import { useRealDataEngine } from "./fixtures/dataEngine";
-import Chart from "../layers/dms-ui/app/components/chart/Chart.vue";
-import ChartCard from "../layers/dms-ui/app/components/chart/ChartCard.vue";
-import TopListCard from "../layers/dms-ui/app/components/top-list/TopListCard.vue";
-import TopListRow from "../layers/dms-ui/app/components/top-list/internal/TopListRow.vue";
-import { resolveI18nKey } from "../layers/dms-core/app/composables/translation/useTranslation";
-import { CHART_EVENT_NAMES } from "../layers/dms-ui/app/composables/chart/events";
-import type { ChartClickPayload } from "../layers/dms-ui/app/composables/chart/events";
-import type { ChartSeries } from "../layers/dms-ui/app/composables/chart/types";
-
-const MESSAGES: Record<string, string> = {
-  "my_module.sends": "Sends",
-  "my_module.sends_before": "Sends, previous period",
-  "my_module.domain": "Top domain",
-  "my_module.domain_sends": "Sends to this domain",
-};
-
-const LITERAL_TITLE = "example.test";
-const CHART_ID = "plot";
-
-vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
-  useChartFetch: () => ({
-    data: ref({
-      value: 1,
-      series: [{ name: "$my_module.sends", data: [1] }],
-      comparisonSeries: [{ name: "$my_module.sends_before", data: [1] }],
-      items: [
-        {
-          id: "ranked",
-          title: "$my_module.domain",
-          description: "$my_module.domain_sends",
-          sparkline: [1, 2],
-          value: 1,
-          to: "/domains/ranked",
-        },
-        { id: "literal", title: "example.test", value: 0 },
-      ],
-    }),
-    isLoading: ref(false),
-  }),
-}));
-
-const sendComponentEvent = vi.fn();
-
-function stubNuxt() {
-  const translate = (key: string) => MESSAGES[key] ?? key;
-  vi.stubGlobal("useI18n", () => ({ locale: ref("en-US"), t: translate }));
-  vi.stubGlobal("useTranslation", () => ({
-    processI18n: (key: string) => resolveI18nKey(translate, key),
-  }));
-  vi.stubGlobal("useComponentEvent", () => ({ sendComponentEvent }));
-  vi.stubGlobal("useWatch", () => ({ state: ref({}) }));
-}
-
-interface ApexClickOptions {
-  dataPointIndex: number;
-  seriesIndex: number;
-}
-interface ApexProbeOptions {
-  chart: {
-    events?: { dataPointSelection?: (...args: unknown[]) => void };
-  };
-}
-
-/** Renders each series name and fires Apex's click hook so the payload is observable. */
-const SeriesProbe = defineComponent({
-  props: {
-    options: { type: Object as PropType<ApexProbeOptions>, required: true },
-    series: { type: Array as PropType<ChartSeries[]>, required: true },
-  },
-  setup: (props) => () => {
-    const click: ApexClickOptions = { dataPointIndex: 0, seriesIndex: 0 };
-    props.options.chart.events?.dataPointSelection?.(null, null, click);
-    return h(
-      "output",
-      props.series.map((entry) => h("span", { class: "series" }, entry.name)),
-    );
-  },
-});
-
-const Slot = defineComponent({
-  setup:
-    (_, { slots }) =>
-    () =>
-      h("div", slots.default?.()),
-});
-const Link = defineComponent({
-  props: ["to"],
-  setup: () => () => h("a"),
-});
-
-const SLOT_COMPONENTS = [
-  "DmsCard",
-  "DmsClientOnly",
-  "UAvatar",
-  "UBadge",
-  "UIcon",
-  "USkeleton",
-  "DmsSparkline",
-  "DmsTrendBadge",
-];
-
-function mountWidgets(widget: () => ReturnType<typeof h>) {
-  stubNuxt();
-  const app = createSSRApp({ render: widget });
-  for (const name of SLOT_COMPONENTS) app.component(name, Slot);
-  app.component("DmsApexChartHost", SeriesProbe);
-  app.component("DmsTopListRow", TopListRow);
-  app.component("DmsLink", Link);
-  return renderToString(app);
-}
-
-function renderTopList() {
-  return mountWidgets(() =>
-    h(TopListCard, {
-      title: "$my_module.domain",
-      componentId: "list",
-      pageId: "i18n",
-      showSparkline: true,
-    }),
-  );
-}
-
-function renderChartCard(onPointClick: (payload: ChartClickPayload) => void) {
-  return mountWidgets(() =>
-    h(
-      ChartCard,
-      { title: "$my_module.sends", componentId: "card", pageId: "i18n" },
-      () =>
-        h(Chart, {
-          type: "line",
-          componentId: CHART_ID,
-          pageId: "i18n",
-          onPointClick,
-        }),
-    ),
-  );
-}
-
-afterEach(() => {
-  vi.unstubAllGlobals();
-  sendComponentEvent.mockClear();
-});
-
-beforeEach(() => useRealDataEngine());
-
-describe("module-supplied widget strings and the $ convention", () => {
-  it("resolves top list row titles, descriptions and aria-labels", async () => {
-    const html = await renderTopList();
-
-    expect(html).toContain("Top domain");
-    expect(html).toContain("Sends to this domain");
-    expect(html).toContain(LITERAL_TITLE);
-    expect(html).not.toContain("$my_module.");
-    expect(html.split('aria-label="Top domain"')).toHaveLength(3);
-  });
-
-  it("resolves chart series names before Apex renders legend and tooltip", async () => {
-    const html = await renderChartCard(() => {});
-
-    expect(html).toContain('class="series">Sends</span>');
-    expect(html).toContain('class="series">Sends, previous period</span>');
-    expect(html).not.toContain("$my_module.");
-  });
-
-  it("carries the resolved series name in the click payload", async () => {
-    let clicked: ChartClickPayload | null = null;
-    await renderChartCard((payload) => {
-      clicked = payload;
-    });
-
-    expect(clicked).toMatchObject({ seriesName: "Sends" });
-    expect(sendComponentEvent).toHaveBeenCalledWith(
-      CHART_EVENT_NAMES.pointClick,
-      CHART_ID,
-      expect.objectContaining({ seriesName: "Sends" }),
-    );
-  });
-});

package/frontend-vue/vitest.config.ts

@@ -1,36 +0,0 @@
-import { defineConfig } from "vitest/config";
-import { resolve } from "node:path";
-import vue from "@vitejs/plugin-vue";
-
-export default defineConfig({
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      "#dms-core": resolve(__dirname, "layers/dms-core"),
-      "#dms-ui": resolve(__dirname, "layers/dms-ui"),
-      "#dms-layout": resolve(__dirname, "layers/dms-layout"),
-      // Mocked by the tests that reach it: the engine runs in the generated
-      // application, not under Vitest.
-      "#dms/frontend-module": resolve(
-        __dirname,
-        "node_modules/@antelopejs/dms-frontend/templates/vue/frontend-module.ts",
-      ),
-      // The server routes run under Vitest through the renderer's own router
-      // (`module-testing.mjs`), so their import resolves to its definitions.
-      "#dms/server": resolve(
-        __dirname,
-        "node_modules/@antelopejs/dms-frontend/templates/vue/server-module.ts",
-      ),
-      "#shortcuts-aggregated": resolve(
-        __dirname,
-        "layers/dms-ui/app/config/shortcuts-registry.ts",
-      ),
-    },
-  },
-  esbuild: {
-    tsconfigRaw: "{}",
-  },
-  test: {
-    include: ["tests/**/*.test.ts"],
-  },
-});