@antelopejs/dms 0.8.3 → 0.9.0

package/frontend-vue/tests/module-routing.test.ts

@@ -79,10 +79,7 @@ function stubSiteLayout(moduleRoot: TreeNode, landingPage?: string) {
   }));
 }
 
-async function enter(
-  fullPath: string,
-  drawnThere = false,
-): Promise<unknown> {
+async function enter(fullPath: string, drawnThere = false): Promise<unknown> {
   const middleware = (
     await import("../layers/dms-layout/app/middleware/module-routing.global")
   ).default as unknown as Middleware;
@@ -98,7 +95,7 @@ beforeEach(() => {
   vi.stubGlobal("navigateDms", navigateDms);
   vi.stubGlobal("useHomepage", () => "/dashboard");
   vi.stubGlobal("useModuleHistory", () => ({ record: vi.fn() }));
-  vi.stubGlobal("createError", (error: unknown) => error);
+  vi.stubGlobal("createDmsError", (error: unknown) => error);
 });
 
 afterEach(() => {

package/frontend-vue/tests/modules-catalog.test.ts

@@ -117,7 +117,7 @@ describe("findModulePageMatch", () => {
     "/modules/saas/billing/invoices": page("/modules/saas/billing/invoices", {
       displayName: "Invoices",
       module: "saas",
-      category: { displayName: "Billing" },
+      categoryId: "saas.billing",
     }),
     "/modules/saas/invoice/:id": page("/modules/saas/invoice/:id", {
       displayName: "Invoice detail",
@@ -130,9 +130,22 @@ describe("findModulePageMatch", () => {
     }),
   };
 
+  // Every category once, by full id: a page names its own.
+  const layout = {
+    pages,
+    categories: {
+      "saas.billing": {
+        id: "billing",
+        fullId: "saas.billing",
+        fullSlug: "/modules/saas/billing",
+        displayName: "Billing",
+      },
+    },
+  };
+
   it("finds an openable page of an installed module and its section", () => {
     expect(
-      findModulePageMatch(pages, "invoice", new Set(["saas"]), resolve),
+      findModulePageMatch(layout, "invoice", new Set(["saas"]), resolve),
     ).toEqual({
       moduleId: "saas",
       path: "/modules/saas/billing/invoices",
@@ -143,10 +156,10 @@ describe("findModulePageMatch", () => {
 
   it("ignores hidden pages, parameterised pages and other modules", () => {
     expect(
-      findModulePageMatch(pages, "detail", new Set(["saas"]), resolve),
+      findModulePageMatch(layout, "detail", new Set(["saas"]), resolve),
     ).toBeNull();
     expect(
-      findModulePageMatch(pages, "invoices", new Set(["hidden"]), resolve),
+      findModulePageMatch(layout, "invoices", new Set(["hidden"]), resolve),
     ).toBeNull();
   });
 });

package/frontend-vue/tests/modules-listing-transfer.test.ts

@@ -0,0 +1,95 @@
+// @vitest-environment jsdom
+/**
+ * The modules catalog through the runtime's real async data: a server render
+ * reads it for a platform owner and hands it to the browser, which does not
+ * ask again (its live readouts would no longer match the markup); a member
+ * reads nothing; two renders in flight at once each render their own.
+ */
+import { computed, defineComponent, h, nextTick, ref, type App } from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { hydrate, serverRender, stubApiData } from "./helpers/api-data-runtime";
+import { useModulesListing } from "../layers/dms-layout/app/composables/page/useModulesListing";
+
+const ordersModule = { id: "orders", title: "Orders", hasAccess: true };
+const billingModule = { id: "billing", title: "Billing", hasAccess: true };
+
+const authFetch = vi.fn();
+const isOwner = ref(true);
+const mounted: App[] = [];
+
+const Catalog = defineComponent({
+  async setup() {
+    const listing = useModulesListing();
+    await listing.loadModulesListing();
+    return () =>
+      h(
+        "p",
+        listing.loadingError.value?.kind ??
+          (listing.modules.value ?? []).map((entry) => entry.id).join(","),
+      );
+  },
+});
+const Page = defineComponent({
+  setup: () => () => h("main", [h(Catalog)]),
+});
+
+beforeEach(() => {
+  isOwner.value = true;
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("HTTP_FORBIDDEN", 403);
+  vi.stubGlobal("useIsOwner", () => computed(() => isOwner.value));
+  stubApiData(authFetch);
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+  vi.unstubAllGlobals();
+  vi.resetAllMocks();
+});
+
+it("hands the listing the server rendered to the browser, which does not ask again", async () => {
+  authFetch.mockResolvedValue([ordersModule]);
+  const { html, payload } = await serverRender(Page);
+  expect(html).toBe("<main><p>orders</p></main>");
+  expect(authFetch).toHaveBeenCalledTimes(1);
+
+  authFetch.mockClear();
+  const { app, container } = hydrate(Page, html, payload);
+  mounted.push(app);
+  await nextTick();
+  await new Promise((done) => setTimeout(done, 0));
+  expect(authFetch).not.toHaveBeenCalled();
+  expect(container.innerHTML).toBe(html);
+});
+
+it("reads nothing for a member", async () => {
+  isOwner.value = false;
+  const { html } = await serverRender(Page);
+  expect(html).toBe("<main><p></p></main>");
+  expect(authFetch).not.toHaveBeenCalled();
+});
+
+it("shows a refused listing as forbidden", async () => {
+  authFetch.mockRejectedValue(
+    Object.assign(new Error("Forbidden"), { statusCode: 403 }),
+  );
+  const { html } = await serverRender(Page);
+  expect(html).toBe("<main><p>forbidden</p></main>");
+});
+
+it("renders each request's own listing when two renders are in flight at once", async () => {
+  let answerFirst!: (value: unknown) => void;
+  authFetch
+    .mockReturnValueOnce(
+      new Promise((resolve) => {
+        answerFirst = resolve;
+      }),
+    )
+    .mockResolvedValueOnce([billingModule]);
+  const first = serverRender(Page);
+  const second = serverRender(Page);
+  await new Promise((done) => setTimeout(done, 0));
+  answerFirst([ordersModule]);
+  expect((await first).html).toBe("<main><p>orders</p></main>");
+  expect((await second).html).toBe("<main><p>billing</p></main>");
+});

package/frontend-vue/tests/multi-account-validate.test.ts

@@ -1,5 +1,8 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { validateAccount } from "../layers/dms-core/app/composables/auth/useMultiAccount";
+import {
+  refreshSessionSurfaces,
+  validateAccount,
+} from "../layers/dms-core/app/composables/auth/useMultiAccount";
 import type { StoredAccount } from "../layers/dms-core/app/types/auth";
 
 function makeAccount(overrides: Partial<StoredAccount> = {}): StoredAccount {
@@ -97,3 +100,22 @@ describe("validateAccount", () => {
     expect(account).not.toHaveProperty("refreshToken");
   });
 });
+
+describe("refreshSessionSurfaces", () => {
+  afterEach(() => vi.unstubAllGlobals());
+
+  it("reads the session again, then reloads the site layout through Inertia", async () => {
+    const calls: string[] = [];
+    vi.stubGlobal("useSiteLayout", () => ({
+      resync: vi.fn(async () => calls.push("inertia reload")),
+      refresh: vi.fn(async () => calls.push("site layout fetch")),
+    }));
+    vi.stubGlobal("usePermissions", () => ({
+      clear: () => calls.push("permissions cleared"),
+    }));
+
+    await refreshSessionSurfaces(async () => calls.push("session"));
+
+    expect(calls).toEqual(["session", "permissions cleared", "inertia reload"]);
+  });
+});

package/frontend-vue/tests/nav-badge-tones.test.ts

@@ -3,6 +3,7 @@ import {
   computed,
   createApp,
   defineComponent,
+  effectScope,
   h,
   onMounted,
   ref,
@@ -51,8 +52,6 @@ beforeEach(() => {
   vi.stubGlobal("useTranslation", () => ({
     processI18n: (value: string) => value,
   }));
-  vi.stubGlobal("usePrefetch", () => ({ prefetchPageLayout: vi.fn() }));
-  vi.stubGlobal("stripQueryAndHash", (path: string) => path);
   vi.stubGlobal("MENU_STATUS_TEXT_CLASSES", MENU_STATUS_TEXT_CLASSES);
   host = document.createElement("div");
   document.body.append(host);
@@ -86,6 +85,43 @@ describe("useNavBadges", () => {
   });
 });
 
+describe("the counts a page visit carries", () => {
+  it("draws each one, over a static badge", () => {
+    const { navBadgeOf, applyCountedNavBadges } = useNavBadges();
+    applyCountedNavBadges({
+      "settings.user.notifications": { badge: "4", tone: "error" },
+    });
+    expect(
+      navBadgeOf({ fullId: "settings.user.notifications", badge: "new" }),
+    ).toEqual({ label: "4", tone: "error" });
+  });
+
+  it("drops the badge of an entry the next visit no longer counts", () => {
+    const { navBadgeOf, applyCountedNavBadges } = useNavBadges();
+    applyCountedNavBadges({
+      "settings.user.notifications": { badge: "4" },
+      "settings.workspace.invites": { badge: "2" },
+    });
+    applyCountedNavBadges({ "settings.workspace.invites": { badge: "1" } });
+
+    expect(
+      navBadgeOf({ fullId: "settings.user.notifications" }),
+    ).toBeUndefined();
+    expect(navBadgeOf({ fullId: "settings.workspace.invites" })).toEqual({
+      label: "1",
+    });
+  });
+
+  it("leaves the badges alone when a visit carries none, such as a frontend page", () => {
+    const { navBadgeOf, applyCountedNavBadges } = useNavBadges();
+    applyCountedNavBadges({ "settings.user.notifications": { badge: "4" } });
+    applyCountedNavBadges(undefined);
+    expect(navBadgeOf({ fullId: "settings.user.notifications" })).toEqual({
+      label: "4",
+    });
+  });
+});
+
 describe("NavigationMenu badges", () => {
   // Renders each entry's badge the way UNavigationMenu hands it over.
   const MenuStub = defineComponent({
@@ -102,6 +138,7 @@ describe("NavigationMenu badges", () => {
           "data-badge": item.badge?.label,
           "data-color": item.badge?.color,
           "data-variant": item.badge?.variant,
+          "data-prefetch": String(item.prefetch),
         });
       return () => h("nav", props.items.flat().map(renderItem));
     },
@@ -150,6 +187,19 @@ describe("NavigationMenu badges", () => {
     expect(badgeOf("settings.user.notifications").color).toBe("primary");
   });
 
+  it("lets Inertia prefetch each linked page on hover, with no fetch of its own", () => {
+    const fetch = vi.fn();
+    vi.stubGlobal("fetch", fetch);
+    vi.stubGlobal("$fetch", fetch);
+    mount();
+    for (const item of ITEMS)
+      expect(badgeOf(item.fullId as string).prefetch).toBe("true");
+    host
+      .querySelector("nav")!
+      .dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
+    expect(fetch).not.toHaveBeenCalled();
+  });
+
   it("follows the live count and tone, and hides the badge at zero", async () => {
     mount();
     const { setNavBadge } = useNavBadges();
@@ -259,13 +309,26 @@ describe("Security page badge", () => {
     const { useSecurityOverview } = await import(
       "../layers/dms-layout/app/build/composables/settings/security/useSecurityOverview"
     );
+    const { engine, browserRuntime } = await import(
+      "./helpers/api-data-runtime"
+    );
+    const { useApiData } = await import(
+      "../layers/dms-core/app/composables/auth/useApiData"
+    );
+    vi.stubGlobal("useDmsAsyncData", engine.useDmsAsyncData);
+    vi.stubGlobal("useDmsFetch", engine.useDmsFetch);
+    vi.stubGlobal("useApiData", useApiData);
     vi.stubGlobal("useAuthFetch", () => ({
       $authFetch: vi.fn(async () => ({
         attention: ["backup_codes_low", "backup_codes_unsaved"],
         attentionTone: "error",
       })),
     }));
-    await useSecurityOverview().refresh();
+    browserRuntime();
+    const scope = effectScope();
+    const overview = scope.run(() => useSecurityOverview())!;
+    await overview.refresh();
+    scope.stop();
     expect(liveBadges()?.value["settings.user.security"]).toEqual({
       label: "2",
       tone: "error",

package/frontend-vue/tests/notification-counts-from-writes.test.ts

@@ -0,0 +1,223 @@
+// @vitest-environment jsdom
+/**
+ * The bell's counts after a change of the feed: a write (mark read or
+ * unread, delete) answers them and its realtime event carries them, so the
+ * tab that wrote and every other tab of the user take them as they are. The
+ * write's own event, which comes before or after its answer, changes
+ * nothing and reads nothing. Through the real composable, its stream plugin
+ * and the runtime's state, over a fake feed.
+ */
+import { defineComponent, h, nextTick, ref, type App } from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { mountInBrowser, stubApiData } from "./helpers/api-data-runtime";
+
+type Tone = "neutral" | "primary" | "warning" | "error";
+interface Row {
+  _id: string;
+  isRead: boolean;
+  tone: Tone;
+}
+interface Counts {
+  all: number;
+  unread: number;
+  unreadTone?: Tone;
+}
+type StreamEvent = { type: string; payload?: Record<string, unknown> };
+
+const TONE_ORDER: Tone[] = ["error", "warning", "primary", "neutral"];
+const feed: Row[] = [];
+
+/** The whole feed's counts, as `countFeedWithUnreadTone` gives them. */
+function countsOf(): Counts {
+  const unread = feed.filter((row) => !row.isRead);
+  const tone = TONE_ORDER.find((t) => unread.some((row) => row.tone === t));
+  return tone
+    ? { all: feed.length, unread: unread.length, unreadTone: tone }
+    : { all: feed.length, unread: unread.length };
+}
+
+const requests: string[] = [];
+// A write's answer can be held, to deliver its echo first.
+let holdWrites: Promise<void> | undefined;
+let failWrites = false;
+const authFetch = vi.fn(async (url: string, options?: { method?: string }) => {
+  const method = options?.method ?? "GET";
+  requests.push(`${method} ${url}`);
+  if (method === "GET" && url.endsWith("/counts")) return countsOf();
+  if (failWrites) throw new Error("refused");
+  const id = url.split("/").pop();
+  const row = feed.find((entry) => entry._id === id);
+  if (url.includes("/mark-read/")) row!.isRead = true;
+  else if (url.includes("/mark-unread/")) row!.isRead = false;
+  else if (url.includes("/delete/")) feed.splice(feed.indexOf(row!), 1);
+  const counts = countsOf();
+  await holdWrites;
+  return { success: true, counts };
+});
+
+let streamHandler: ((event: unknown) => void) | undefined;
+stubApiData(authFetch as never);
+vi.stubGlobal("useComponentEvent", () => ({ sendComponentEvent: vi.fn() }));
+vi.stubGlobal("useDmsUserSession", () => ({
+  user: ref({ _id: "u1" }),
+  loggedIn: ref(true),
+}));
+vi.stubGlobal("useUserRealtime", () => ({
+  subscribe: (_topic: string, handler: (event: unknown) => void) => {
+    streamHandler = handler;
+    return () => {
+      streamHandler = undefined;
+    };
+  },
+}));
+vi.stubGlobal("defineDmsPlugin", (setup: () => void) => setup);
+vi.stubGlobal("watch", (await import("vue")).watch);
+const { useNotifications } = await import(
+  "../layers/dms-layout/app/composables/notification/useNotifications"
+);
+vi.stubGlobal("useNotifications", useNotifications);
+const { default: notificationStream } = await import(
+  "../layers/dms-layout/app/plugins/notification-stream.client"
+);
+
+const mounted: App[] = [];
+let bell: ReturnType<typeof useNotifications>;
+
+/** A tab: the bell's state and the stream plugin, on one runtime. */
+function openTab(): HTMLElement {
+  const Tab = defineComponent({
+    setup() {
+      bell = useNotifications();
+      (notificationStream as unknown as () => void)();
+      return () =>
+        h("span", `${bell.unreadCount.value}:${bell.unreadTone.value ?? "-"}`);
+    },
+  });
+  const { app, container } = mountInBrowser(Tab);
+  mounted.push(app);
+  return container;
+}
+
+/** The server's event for a read state change, with the counts after it. */
+const echo = (type: string, ids: string[]): StreamEvent => ({
+  type,
+  payload: { ids, counts: countsOf() },
+});
+
+async function settle(): Promise<void> {
+  await nextTick();
+  await new Promise((done) => setTimeout(done, 0));
+}
+
+beforeEach(async () => {
+  feed.splice(
+    0,
+    feed.length,
+    { _id: "risk", isRead: false, tone: "error" },
+    { _id: "check", isRead: false, tone: "warning" },
+    { _id: "old", isRead: true, tone: "neutral" },
+  );
+  requests.length = 0;
+  holdWrites = undefined;
+  failWrites = false;
+  const tab = openTab();
+  await bell.fetchBellCounts();
+  await settle();
+  expect(tab.textContent).toBe("2:error");
+  requests.length = 0;
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+});
+
+it("takes the counts a write answers, and reads nothing for its echo after the answer", async () => {
+  await bell.markAsRead("risk");
+  await settle();
+  expect(bell.unreadCount.value).toBe(1);
+  // The next most important unread one gives the tone: only the server knows it.
+  expect(bell.unreadTone.value).toBe("warning");
+
+  streamHandler!(echo("notification:read", ["risk"]));
+  await settle();
+  expect(requests).toEqual([
+    "PUT /dms/pages/settings/user/notifications/mark-read/risk",
+  ]);
+  expect(bell.unreadCount.value).toBe(1);
+
+  await bell.markAsUnread("risk");
+  await bell.deleteNotification("check");
+  await settle();
+  expect(requests).toEqual([
+    "PUT /dms/pages/settings/user/notifications/mark-read/risk",
+    "PUT /dms/pages/settings/user/notifications/mark-unread/risk",
+    "DELETE /dms/pages/settings/user/notifications/delete/check",
+  ]);
+  expect([bell.unreadCount.value, bell.unreadTone.value]).toEqual([1, "error"]);
+});
+
+it("reads nothing when the write's echo comes before its answer", async () => {
+  let release!: () => void;
+  holdWrites = new Promise((done) => {
+    release = done;
+  });
+  const writing = bell.markAsRead("check");
+  await settle();
+  streamHandler!(echo("notification:read", ["check"]));
+  await settle();
+  expect([bell.unreadCount.value, bell.unreadTone.value]).toEqual([1, "error"]);
+  release();
+  await writing;
+  await settle();
+  expect(requests).toEqual([
+    "PUT /dms/pages/settings/user/notifications/mark-read/check",
+  ]);
+  expect(bell.unreadCount.value).toBe(1);
+});
+
+it("takes another tab's changes from their events, without reading", async () => {
+  feed[0]!.isRead = true;
+  streamHandler!(echo("notification:read", ["risk"]));
+  await settle();
+  expect([bell.unreadCount.value, bell.unreadTone.value]).toEqual([
+    1,
+    "warning",
+  ]);
+
+  feed[0]!.isRead = false;
+  streamHandler!(echo("notification:unread", ["risk"]));
+  await settle();
+  expect(bell.unreadTone.value).toBe("error");
+
+  for (const row of feed) row.isRead = true;
+  streamHandler!({
+    type: "notification:all-read",
+    payload: { counts: countsOf() },
+  });
+  await settle();
+  expect([bell.unreadCount.value, bell.unreadTone.value]).toEqual([
+    0,
+    undefined,
+  ]);
+  expect(requests).toEqual([]);
+});
+
+it("reads the counts when an event carries none", async () => {
+  feed[0]!.isRead = true;
+  streamHandler!({ type: "notification:read", payload: { ids: ["risk"] } });
+  await settle();
+  expect(requests).toEqual([
+    "GET /dms/pages/settings/user/notifications/counts",
+  ]);
+  expect(bell.unreadCount.value).toBe(1);
+});
+
+it("keeps the counts when a write fails", async () => {
+  failWrites = true;
+  await expect(bell.markAsRead("risk")).rejects.toThrow("refused");
+  await settle();
+  expect(requests).toEqual([
+    "PUT /dms/pages/settings/user/notifications/mark-read/risk",
+  ]);
+  expect([bell.unreadCount.value, bell.unreadTone.value]).toEqual([2, "error"]);
+});

package/frontend-vue/tests/notification-counts-transfer.test.ts

@@ -0,0 +1,88 @@
+// @vitest-environment jsdom
+/**
+ * The header bell's counts as the dashboard frame reads them with the page,
+ * through the runtime's real async data: a server render shows the badge,
+ * and the browser's bell, and whatever else shows the counts, start from the
+ * same counts without asking again. A signed-out visit reads nothing.
+ */
+import { defineComponent, h, nextTick, ref, type App } from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import {
+  hydrate,
+  mountInBrowser,
+  serverRender,
+  stubApiData,
+} from "./helpers/api-data-runtime";
+
+const COUNTS = { all: 5, unread: 3, unreadTone: "warning" };
+const authFetch = vi.fn(async () => structuredClone(COUNTS));
+const loggedIn = ref(true);
+const mounted: App[] = [];
+
+stubApiData(authFetch as never);
+vi.stubGlobal("useDmsUserSession", () => ({ loggedIn }));
+vi.stubGlobal("useComponentEvent", () => ({ sendComponentEvent: vi.fn() }));
+const { useNotifications, useRenderedBellCounts } = await import(
+  "../layers/dms-layout/app/composables/notification/useNotifications"
+);
+vi.stubGlobal("useNotifications", useNotifications);
+
+/** The bell's badge, or the profile's summary: the shared counts. */
+const Counts = defineComponent({
+  setup() {
+    const { unreadCount, unreadTone, areCountsLoaded } = useNotifications();
+    return () =>
+      h(
+        "span",
+        areCountsLoaded.value
+          ? `${unreadCount.value}:${unreadTone.value}`
+          : "unknown",
+      );
+  },
+});
+// As the dashboard frame: in the persistent layout, outside the page's
+// <Suspense>, around the header and the page.
+const Frame = defineComponent({
+  setup() {
+    useRenderedBellCounts();
+    return () => h("div", [h(Counts), h(Counts)]);
+  },
+});
+
+beforeEach(() => {
+  loggedIn.value = true;
+  authFetch.mockClear();
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+  vi.unstubAllEnvs();
+});
+
+it("renders the bell's counts on the server, and the browser starts from them without asking", async () => {
+  vi.stubEnv("SSR", true);
+  const { html, payload } = await serverRender(Frame);
+  vi.stubEnv("SSR", false);
+  expect(html).toBe("<div><span>3:warning</span><span>3:warning</span></div>");
+  expect(authFetch).toHaveBeenCalledTimes(1);
+
+  authFetch.mockClear();
+  const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+  const { app, container } = hydrate(Frame, html, payload);
+  mounted.push(app);
+  await nextTick();
+  await new Promise((done) => setTimeout(done, 0));
+  expect(authFetch).not.toHaveBeenCalled();
+  expect(container.innerHTML).toBe(html);
+  expect(warn.mock.calls.flat().join(" ")).not.toMatch(/hydration/i);
+  warn.mockRestore();
+});
+
+it("reads nothing for a signed-out visit", async () => {
+  loggedIn.value = false;
+  const { app, container } = mountInBrowser(Frame);
+  mounted.push(app);
+  await nextTick();
+  expect(authFetch).not.toHaveBeenCalled();
+  expect(container.textContent).toBe("unknownunknown");
+});