@antelopejs/dms 0.8.3 → 0.9.0

package/frontend-vue/tests/site-layout-rendered.test.ts

@@ -0,0 +1,103 @@
+// @vitest-environment jsdom
+/**
+ * The site layout of a page that brings none with its props (a custom page)
+ * as the sidebar reads it, through the runtime's real async data: the server
+ * waits for it and renders the menu, and the browser takes it over without
+ * asking again. A page that brought it reads nothing.
+ */
+import {
+  defineComponent,
+  getCurrentInstance,
+  h,
+  nextTick,
+  type App,
+} from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import {
+  engine,
+  hydrate,
+  serverRender,
+  stubApiData,
+} from "./helpers/api-data-runtime";
+import {
+  useRenderedSiteLayout,
+  useSiteLayout,
+} from "../layers/dms-layout/app/composables/page/useSiteLayout";
+
+const RESPONSE = {
+  siteLayout: { pages: { "/orders": { fullId: "orders" } }, categories: {} },
+  siteLayoutTree: { children: {} },
+  quickActions: { actions: [] },
+  modules: {},
+  isOwner: true,
+};
+
+const authFetch = vi.fn();
+const mounted: App[] = [];
+
+// The menu as the header and the sidebar draw it: rendered by the frame, in
+// the persistent layout, outside the page's <Suspense>.
+const Menu = defineComponent({
+  setup() {
+    const { siteLayout } = useSiteLayout();
+    return () =>
+      h("nav", Object.keys(siteLayout.value?.pages ?? {}).join(",") || "-");
+  },
+});
+const Frame = defineComponent({
+  setup() {
+    useRenderedSiteLayout();
+    return () => h("div", [h(Menu), h(Menu)]);
+  },
+});
+const Layout = defineComponent({ setup: () => () => h("main", [h(Frame)]) });
+
+beforeEach(() => {
+  stubApiData(authFetch);
+  // The application holds the in-flight request its callers join.
+  vi.stubGlobal(
+    "useDmsApp",
+    () => getCurrentInstance()!.appContext.config.globalProperties,
+  );
+  vi.stubGlobal("showDmsError", vi.fn());
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+  vi.unstubAllGlobals();
+  vi.resetAllMocks();
+});
+
+it("renders the menu of a page without a site layout, and the browser does not read it again", async () => {
+  authFetch.mockResolvedValue(RESPONSE);
+  const { html, payload } = await serverRender(Layout);
+  expect(html).toBe(
+    "<main><div><nav>/orders</nav><nav>/orders</nav></div></main>",
+  );
+  expect(authFetch).toHaveBeenCalledTimes(1);
+  expect(authFetch).toHaveBeenCalledWith("/dms/sitelayout");
+
+  authFetch.mockClear();
+  const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+  const { app, container } = hydrate(Layout, html, payload);
+  mounted.push(app);
+  await nextTick();
+  await new Promise((done) => setTimeout(done, 0));
+  expect(authFetch).not.toHaveBeenCalled();
+  expect(container.innerHTML).toBe(html);
+  // Taken over before the frame's children render: they hydrate the menu.
+  expect(warn.mock.calls.flat().join(" ")).not.toMatch(/hydration/i);
+});
+
+it("reads nothing when the page brought its site layout", async () => {
+  const { html, payload } = await serverRender(Layout, (app) =>
+    app.runWithContext(() => {
+      engine.useDmsState("dms-siteLayout").value = RESPONSE.siteLayout;
+    }),
+  );
+  expect(html).toBe(
+    "<main><div><nav>/orders</nav><nav>/orders</nav></div></main>",
+  );
+  expect(authFetch).not.toHaveBeenCalled();
+  expect(payload.data).toEqual({});
+});

package/frontend-vue/tests/site-layout-resync.test.ts

@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+import { ref, type Ref } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// What a realtime menu invalidation does: a partial reload of the page on
+// screen through Inertia, which replaces the site layout every visit carries
+// over (a once prop) along with the state.
+const reload = vi.hoisted(() => vi.fn());
+const flushAll = vi.hoisted(() => vi.fn());
+vi.mock("@inertiajs/vue3", () => ({ router: { reload, flushAll } }));
+
+const { useSiteLayout } = await import(
+  "../layers/dms-layout/app/composables/page/useSiteLayout"
+);
+
+type ReloadOptions = {
+  only: string[];
+  onHttpException: (response: { status: number }) => boolean | void;
+  onNetworkError: (error: Error) => boolean | void;
+  onFinish: () => void;
+};
+
+const state = new Map<string, Ref>();
+
+beforeEach(() => {
+  state.clear();
+  const app = {};
+  vi.stubGlobal("useDmsApp", () => app);
+  vi.stubGlobal("useDmsState", (key: string, initial: () => unknown) => {
+    if (!state.has(key)) state.set(key, ref(initial()));
+    return state.get(key);
+  });
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: vi.fn() }));
+  window.history.replaceState(null, "", "/projects");
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  reload.mockReset();
+  flushAll.mockReset();
+});
+
+describe("useSiteLayout resync", () => {
+  it("reloads the site layout and the page through Inertia", async () => {
+    reload.mockImplementation((options: ReloadOptions) => options.onFinish());
+    await useSiteLayout().resync();
+    expect(reload).toHaveBeenCalledTimes(1);
+    expect(reload.mock.calls[0]![0].only).toEqual(["shared", "page"]);
+  });
+
+  it("drops the pages prefetched with the previous menu before reloading", async () => {
+    reload.mockImplementation((options: ReloadOptions) => options.onFinish());
+    await useSiteLayout().resync();
+    expect(flushAll).toHaveBeenCalledOnce();
+    expect(flushAll.mock.invocationCallOrder[0]).toBeLessThan(
+      reload.mock.invocationCallOrder[0]!,
+    );
+  });
+
+  it("rejects a failed reload and keeps the page on screen", async () => {
+    let swapsPage: boolean | void = true;
+    reload.mockImplementation((options: ReloadOptions) => {
+      swapsPage = options.onHttpException({ status: 502 });
+      options.onFinish();
+    });
+    await expect(useSiteLayout().resync()).rejects.toThrow("502");
+    expect(swapsPage).toBe(false);
+
+    reload.mockImplementation((options: ReloadOptions) => {
+      swapsPage = options.onNetworkError(new Error("offline"));
+      options.onFinish();
+    });
+    await expect(useSiteLayout().resync()).rejects.toThrow("offline");
+    expect(swapsPage).toBe(false);
+  });
+
+  it("reloads the page a navigation opened while the reload was in flight", async () => {
+    reload.mockImplementationOnce((options: ReloadOptions) => {
+      // Inertia drops an async answer for a page the user has left.
+      window.history.replaceState(null, "", "/tasks");
+      options.onFinish();
+    });
+    reload.mockImplementation((options: ReloadOptions) => options.onFinish());
+    await useSiteLayout().resync();
+    expect(reload).toHaveBeenCalledTimes(2);
+  });
+});

package/frontend-vue/tests/ssr-guard-preload.test.ts

@@ -0,0 +1,188 @@
+// @vitest-environment jsdom
+/**
+ * A server render of a protected page waits on two requests made by its
+ * middlewares, one after the other: the onboarding status (`onboarding`),
+ * then the permission set (`auth`). Both start with the app instead, through
+ * the real renderer runtime, middlewares and composables, and each middleware
+ * joins the request already in flight.
+ */
+import { createSSRApp, defineComponent, h, nextTick, type App } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { DmsAppContext, DmsFrontendRuntime } from "#dms/frontend-module";
+
+const engine = await import("#dms/frontend-module");
+const { createTrailingDeduper } = await import(
+  "../layers/dms-core/app/utils/trailingDeduper"
+);
+for (const name of [
+  "useDmsState",
+  "useDmsApp",
+  "useDmsRoute",
+  "defineDmsMiddleware",
+  "defineDmsPlugin",
+  "useDmsError",
+  "abortDmsNavigation",
+  "navigateDms",
+] as const) {
+  vi.stubGlobal(name, engine[name]);
+}
+vi.stubGlobal("createTrailingDeduper", createTrailingDeduper);
+vi.stubGlobal("useDmsRuntimeConfig", () => ({ public: { dms: {} } }));
+vi.stubGlobal("useHomepage", () => "/home");
+
+const session = { loggedIn: { value: true } };
+vi.stubGlobal("useDmsUserSession", () => ({
+  ...session,
+  user: { value: { isValidated: true } },
+}));
+let pagePublic = false;
+vi.stubGlobal("useSiteLayout", () => ({
+  siteLayout: { value: {} },
+  findMatchingRoute: (path: string) =>
+    path === "/orders" ? { metadata: { publicAccess: pagePublic } } : null,
+}));
+
+const { useTrailingDeduper } = await import(
+  "../layers/dms-core/app/composables/useTrailingDeduper"
+);
+vi.stubGlobal("useTrailingDeduper", useTrailingDeduper);
+const { usePermissions } = await import(
+  "../layers/dms-core/app/composables/auth/usePermissions"
+);
+vi.stubGlobal("usePermissions", usePermissions);
+const { useOnboarding } = await import(
+  "../layers/dms-onboarding/app/composables/onboarding/useOnboarding"
+);
+vi.stubGlobal("useOnboarding", useOnboarding);
+const { default: onboardingMiddleware } = await import(
+  "../layers/dms-onboarding/app/middleware/onboarding.global"
+);
+const { default: authMiddleware } = await import(
+  "../layers/dms-auth/app/middleware/auth"
+);
+const { default: onboardingPreload } = await import(
+  "../layers/dms-onboarding/app/plugins/onboarding-preload"
+);
+const { default: permissionsPreload } = await import(
+  "../layers/dms-auth/app/plugins/permissions-preload"
+);
+
+const ONBOARDING = "/api/onboarding/informations";
+const PERMISSIONS = "/dms/permissions";
+const ANSWERS: Record<string, unknown> = {
+  [ONBOARDING]: { has_onboarded: true },
+  [PERMISSIONS]: ["orders.read"],
+};
+
+interface PendingRequest {
+  url: string;
+  resolve: (value: unknown) => void;
+}
+
+const pending: PendingRequest[] = [];
+const asked: string[] = [];
+// Each request waits for the test to answer it.
+const $authFetch = vi.fn(
+  (url: string) =>
+    new Promise((resolve) => {
+      asked.push(url);
+      pending.push({ url, resolve });
+    }),
+);
+vi.stubGlobal("useAuthFetch", () => ({ $authFetch }));
+
+const settle = async () => {
+  await nextTick();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+};
+
+/** The requests waiting at once, each round, until none is left. */
+async function answerRounds(): Promise<string[][]> {
+  const rounds: string[][] = [];
+  for (let round = 0; round < 6; round++) {
+    await settle();
+    const waiting = pending.splice(0);
+    if (waiting.length === 0) continue;
+    rounds.push(waiting.map((request) => request.url).sort());
+    for (const request of waiting) request.resolve(ANSWERS[request.url]);
+  }
+  return rounds;
+}
+
+const Page = defineComponent({
+  setup() {
+    engine.defineDmsPageMeta({ auth: true });
+    const { hasPermission } = usePermissions();
+    return () =>
+      h("p", hasPermission("orders.read") ? "can read" : "cannot read");
+  },
+});
+
+/** A server runtime, its app set up the way the DMS module registers it. */
+function serverRender(path: string): { app: App; html: Promise<string> } {
+  const runtime = engine.createDmsFrontendRuntime(undefined, {}, true);
+  const app = createSSRApp(Page);
+  const context = {
+    runWithContext: (callback: () => unknown) => app.runWithContext(callback),
+  } as unknown as DmsAppContext;
+  app.config.globalProperties.$dms = context;
+  runtime.appContext = context;
+  runtime.route.path = path;
+  runtime.route.fullPath = path;
+  runtime.route.matched = [{}];
+  engine.provideDmsFrontendRuntime(app, runtime as DmsFrontendRuntime);
+  // The plugins run before the page renders, as `installDmsPlugins` does.
+  for (const plugin of [onboardingPreload, permissionsPreload])
+    app.runWithContext(() => plugin(context));
+  return { app, html: renderToString(app) };
+}
+
+beforeEach(async () => {
+  pending.length = 0;
+  asked.length = 0;
+  $authFetch.mockClear();
+  session.loggedIn.value = true;
+  pagePublic = false;
+  await engine.setupFrontendModules([
+    {
+      options: { public: {} },
+      module: {
+        setup(sdk) {
+          sdk.registerMiddleware("auth", authMiddleware);
+          sdk.registerMiddleware("onboarding", onboardingMiddleware, {
+            global: true,
+          });
+        },
+      },
+    },
+  ]);
+});
+
+describe("the requests a server render's middlewares wait on", () => {
+  it("start together, and each middleware joins its own", async () => {
+    const { html } = serverRender("/orders");
+    const rounds = await answerRounds();
+
+    expect(rounds).toEqual([[PERMISSIONS, ONBOARDING].sort()]);
+    expect(asked.sort()).toEqual([PERMISSIONS, ONBOARDING].sort());
+    expect(await html).toContain("can read");
+  });
+
+  it("ask for no permission set the middleware would not load", async () => {
+    pagePublic = true;
+    const { html } = serverRender("/orders");
+    await answerRounds();
+    expect(asked).toEqual([ONBOARDING]);
+    expect(await html).toContain("cannot read");
+
+    pending.length = 0;
+    asked.length = 0;
+    pagePublic = false;
+    session.loggedIn.value = false;
+    const signedOut = serverRender("/orders");
+    await answerRounds();
+    expect(asked).toEqual([ONBOARDING]);
+    await signedOut.html.catch(() => undefined);
+  });
+});

package/frontend-vue/tests/table-cell-tones.test.ts

@@ -5,7 +5,15 @@
  * one keeps the default look. A duration may also be written in milliseconds
  * whatever its size (`format: "ms"`).
  */
-import { createApp, defineComponent, h, type App, type VNodeChild } from "vue";
+import {
+  createApp,
+  createSSRApp,
+  defineComponent,
+  h,
+  type App,
+  type VNodeChild,
+} from "vue";
+import { renderToString } from "vue/server-renderer";
 import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
 import type { DataType } from "../layers/dms-core/app/composables/data-types/useDataType";
 import { isObject } from "../layers/dms-core/app/utils/type-check";
@@ -174,3 +182,30 @@ describe("plain text cell", () => {
     }
   });
 });
+
+describe("empty plain text cell", () => {
+  it("renders nothing, with or without a tone field", () => {
+    expect(cell("string", "", undefined)).toBeNull();
+    expect(
+      cell("string", "", { toneField: "messageTone" }, { messageTone: "ok" }),
+    ).toBeNull();
+  });
+
+  it("hydrates the server's HTML without a mismatch", async () => {
+    // As Table.vue draws it: the formatter's output is the cell's root.
+    const Cell = defineComponent({
+      setup: () => () => cell("string", "", undefined) as VNodeChild,
+    });
+    const Row = { render: () => h("div", [h("b", "id"), h(Cell)]) };
+    const container = document.createElement("div");
+    container.innerHTML = await renderToString(createSSRApp(Row));
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    app = createSSRApp(Row);
+    app.mount(container);
+    const mismatches = warn.mock.calls.filter((call) =>
+      /hydration/i.test(String(call[0])),
+    );
+    warn.mockRestore();
+    expect(mismatches).toEqual([]);
+  });
+});

package/frontend-vue/tests/table-data-ssr.test.ts

@@ -0,0 +1,195 @@
+// @vitest-environment jsdom
+/**
+ * A table view's list, tab counters and footer figures, through the runtime's
+ * real async data: a server render requests them in parallel and renders
+ * them, the browser hydrates with them without asking again and without a
+ * mismatch, and a client navigation does not wait for them.
+ */
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import {
+  computed,
+  createSSRApp,
+  defineComponent,
+  h,
+  nextTick,
+  type App,
+} from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { DmsFrontendRuntime } from "#dms/frontend-module";
+import type { TableViewColumn } from "../layers/dms-ui/app/composables/table-view/types";
+
+const engine = await import("#dms/frontend-module");
+vi.stubGlobal("computed", computed);
+vi.stubGlobal("useDmsAsyncData", engine.useDmsAsyncData);
+vi.stubGlobal("useI18n", () => ({ locale: { value: "en" } }));
+vi.stubGlobal("useTranslation", () => ({
+  processI18n: (text: string) => text,
+}));
+vi.stubGlobal("useDataTypes", () => ({ getDataType: () => undefined }));
+
+const LOCATION = "/api/orders";
+const COLUMNS = [
+  { id: "total", accessorKey: "total" },
+] as unknown as TableViewColumn[];
+const DELAY_MS = 20;
+
+interface Request {
+  url: string;
+  startedAt: number;
+}
+
+const requests: Request[] = [];
+let inFlight = 0;
+let mostInFlight = 0;
+
+async function answer<T>(url: string, value: T): Promise<T> {
+  requests.push({ url, startedAt: performance.now() });
+  inFlight += 1;
+  mostInFlight = Math.max(mostInFlight, inFlight);
+  await new Promise((done) => setTimeout(done, DELAY_MS));
+  inFlight -= 1;
+  return value;
+}
+
+const api = (async (url: string) =>
+  url.endsWith("/count/batch")
+    ? answer(url, { all: 2, open: 1 })
+    : answer(url, { results: [{ _id: "a", total: 3 }], total: 1 })) as never;
+vi.stubGlobal("useAuthFetch", () => ({
+  $authFetch: (url: string) => answer(url, { sum: 42 }),
+}));
+
+const { useApiData } = await import(
+  "../layers/dms-core/app/composables/auth/useApiData"
+);
+vi.stubGlobal("useApiData", useApiData);
+
+const { useTableRows } = await import(
+  "../layers/dms-ui/app/build/composables/table-view/useTableRows"
+);
+const { useTableCountsData, useTableListData } = await import(
+  "../layers/dms-ui/app/build/composables/table-view/useTableListData"
+);
+const { useTableFooter } = await import(
+  "../layers/dms-ui/app/build/composables/table-view/useTableFooter"
+);
+
+const Table = defineComponent({
+  setup() {
+    const rows = useTableRows({ api, location: LOCATION, columns: COLUMNS });
+    const keys = { componentId: "orders", pageId: "sales", rows };
+    const archiveQuery = computed(() => ({}));
+    // As TableView: none of the three is awaited.
+    const list = useTableListData({
+      ...keys,
+      query: computed(() => ({ offset: 0, limit: 10 })),
+      archiveQuery,
+      isSelfManaged: computed(() => false),
+    });
+    const counts = useTableCountsData({
+      ...keys,
+      queries: computed(() => [
+        { id: "all", query: {} },
+        { id: "open", query: { filter_status: "is:open" } },
+      ]),
+      archiveQuery,
+    });
+    const { footer } = useTableFooter({
+      footer: {
+        summary: [{ id: "sum", op: "sum", field: "total", label: "Sum" }],
+      },
+      columns: COLUMNS,
+      location: LOCATION,
+      query: computed(() => ({})),
+      dataKey: "table-view-orders-sales",
+    } as never);
+    return () =>
+      h("p", [
+        `rows:${list.data.value?.total ?? "-"}`,
+        ` counts:${counts.data.value ? counts.data.value.all : "-"}`,
+        ` sum:${footer.value?.summaries[0]?.value ?? "-"}`,
+      ]);
+  },
+});
+
+let runtime: DmsFrontendRuntime;
+const mounted: App[] = [];
+
+beforeEach(() => {
+  requests.length = 0;
+  inFlight = 0;
+  mostInFlight = 0;
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+});
+
+async function serverRender(): Promise<{ html: string; payload: unknown }> {
+  runtime = engine.createDmsFrontendRuntime(undefined, {}, true);
+  const app = createSSRApp(Table);
+  engine.provideDmsFrontendRuntime(app, runtime);
+  const html = await renderToString(app);
+  return { html, payload: engine.serializeDmsPayload(runtime) };
+}
+
+describe("a table view's data in a server render", () => {
+  it("requests the list, the counters and the footer in parallel and renders them", async () => {
+    const { html } = await serverRender();
+
+    expect(html).toBe("<p>rows:1 counts:2 sum:42</p>");
+    expect(requests.map(({ url }) => url).sort()).toEqual([
+      `${LOCATION}/count/batch`,
+      `${LOCATION}/list`,
+      `${LOCATION}/summary`,
+    ]);
+    expect(mostInFlight).toBe(3);
+  });
+
+  it("hands the browser the rendered data: no request, no mismatch", async () => {
+    const { html, payload } = await serverRender();
+    requests.length = 0;
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    const browser = engine.createDmsFrontendRuntime(undefined, {});
+    engine.restoreDmsPayload(
+      browser,
+      structuredClone(payload) as Parameters<
+        typeof engine.restoreDmsPayload
+      >[1],
+    );
+    const container = document.createElement("div");
+    container.innerHTML = html;
+    const app = createSSRApp(Table);
+    engine.provideDmsFrontendRuntime(app, browser);
+    app.mount(container);
+    mounted.push(app);
+    await nextTick();
+    await new Promise((done) => setTimeout(done, DELAY_MS * 2));
+
+    const mismatches = [...warn.mock.calls, ...error.mock.calls].filter(
+      (call) => /hydration/i.test(String(call[0])),
+    );
+    warn.mockRestore();
+    error.mockRestore();
+    expect(mismatches).toEqual([]);
+    expect(requests).toEqual([]);
+    expect(container.textContent).toBe("rows:1 counts:2 sum:42");
+  });
+
+  it("is not awaited by TableView, so the three start together", () => {
+    const tableView = readFileSync(
+      resolve(
+        __dirname,
+        "../layers/dms-ui/app/components/table-view/TableView.vue",
+      ),
+      "utf8",
+    );
+    expect(tableView).not.toMatch(
+      /await\s+(useTableListData|useTableCountsData|useTableFooter)\b/,
+    );
+  });
+});