@antelopejs/dms 0.8.2 → 0.9.0

package/frontend-vue/tests/settings-reads-ssr.test.ts

@@ -0,0 +1,232 @@
+// @vitest-environment jsdom
+/**
+ * The reads of the settings pages through the runtime's real async data: a
+ * server render reads what the page shows and hands it to the browser, which
+ * hydrates without asking again; the blocks of a page showing one request
+ * share it, and a change still reads it again.
+ */
+import {
+  computed,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+  watch,
+  type App,
+  type Component,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { hydrate, serverRender, stubApiData } from "./helpers/api-data-runtime";
+import { useSecurityOverview } from "../layers/dms-layout/app/build/composables/settings/security/useSecurityOverview";
+import { useNotificationPreferences } from "../layers/dms-layout/app/build/composables/notification/useNotificationPreferences";
+import { useNotificationCatalog } from "../layers/dms-layout/app/build/composables/notification/useNotificationCatalog";
+
+vi.mock(
+  "../layers/dms-layout/app/build/composables/security/useSessionHandoff",
+  () => ({ useSessionHandoff: () => async () => {} }),
+);
+
+const NOW = new Date("2026-10-15T12:00:00Z").getTime();
+const MINUTE = 60_000;
+
+const ANSWERS: Record<string, unknown> = {
+  "/dms/pages/settings/user/security": {
+    activeSessions: 2,
+    attention: ["two_factor_off"],
+    attentionTone: "warning",
+    attentionTones: { two_factor_off: "warning" },
+  },
+  "/dms/pages/settings/user/security/sessions": [
+    {
+      _id: "other",
+      browser: "Firefox",
+      os: "Linux",
+      // Half a minute short of 5: rounded to 4 minutes, to 5 a second later.
+      lastActiveAt: new Date(NOW - 4.5 * MINUTE + 1000).toISOString(),
+      isCurrent: false,
+    },
+  ],
+  "/dms/pages/settings/user/notifications/categories": {
+    categories: [{ id: "core", labelKey: "Core", icon: "i-ph-bell" }],
+    subjects: [
+      { id: "login", labelKey: "Login", category: { id: "core" } },
+      { id: "mention", labelKey: "Mention", category: { id: "core" } },
+    ],
+  },
+  "/dms/pages/settings/user/notifications/preferences": { "core:mention": false },
+};
+
+const authFetch = vi.fn(async (url: string, options?: { method?: string }) => {
+  if (options?.method === "PATCH") return undefined;
+  return structuredClone(ANSWERS[url]);
+});
+const reads = () =>
+  authFetch.mock.calls.filter(([, options]) => !options?.method).map(([url]) => url);
+const mounted: App[] = [];
+
+/** Renders `root` on the server, then hydrates it: the reads of each side. */
+async function renderAndHydrate(root: Component) {
+  vi.stubEnv("SSR", true);
+  const { html, payload } = await serverRender(root);
+  vi.stubEnv("SSR", false);
+  const server = reads();
+  authFetch.mockClear();
+  const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+  const { app, container } = hydrate(root, html, payload);
+  mounted.push(app);
+  await nextTick();
+  await new Promise((done) => setTimeout(done, 0));
+  const hydrationWarnings = warn.mock.calls
+    .flat()
+    .filter((message) => /hydration/i.test(String(message)));
+  warn.mockRestore();
+  return { html, container, server, browser: reads(), hydrationWarnings };
+}
+
+beforeEach(() => {
+  vi.useFakeTimers({ toFake: ["Date"] });
+  vi.setSystemTime(NOW);
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("ref", ref);
+  vi.stubGlobal("watch", watch);
+  vi.stubGlobal("useI18n", () => ({
+    locale: ref("en"),
+    t: (key: string) => key,
+    te: () => false,
+  }));
+  stubApiData(authFetch as never);
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+  vi.useRealTimers();
+  vi.unstubAllEnvs();
+  vi.unstubAllGlobals();
+  authFetch.mockClear();
+});
+
+describe("Security", () => {
+  it("renders the summary every block shares from one read, and the browser does not read it again", async () => {
+    const Block = defineComponent({
+      setup() {
+        const { overview, attention } = useSecurityOverview();
+        return () =>
+          h("p", `${overview.value?.activeSessions}:${attention.value.join()}`);
+      },
+    });
+    const Page = defineComponent({
+      setup: () => () => h("div", [h(Block), h(Block)]),
+    });
+
+    const { html, server, browser, hydrationWarnings } =
+      await renderAndHydrate(Page);
+    expect(html).toBe("<div><p>2:two_factor_off</p><p>2:two_factor_off</p></div>");
+    expect(server).toEqual(["/dms/pages/settings/user/security"]);
+    expect(browser).toEqual([]);
+    expect(hydrationWarnings).toEqual([]);
+  });
+
+  it("says when a session was last active as of the read, the same in the hydrating browser", async () => {
+    const { default: SecuritySessions } = await import(
+      "../layers/dms-layout/app/build/components/pages/settings/security/SecuritySessions.vue"
+    );
+    vi.stubGlobal("useI18n", () => ({
+      locale: ref("en"),
+      t: (key: string, named?: Record<string, unknown>) =>
+        named ? `${key}(${Object.values(named).join()})` : key,
+      te: () => false,
+    }));
+    vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
+    const slotted = (tag: string) =>
+      defineComponent({
+        setup:
+          (_, { slots }) =>
+          () =>
+            h(tag, [slots.badge?.(), slots.default?.(), slots.meta?.()]),
+      });
+    const register = (app: App) => {
+      for (const name of ["DmsSection", "DmsListRow"])
+        app.component(name, slotted("div"));
+      for (const name of [
+        "DmsEmptyState",
+        "USkeleton",
+        "UButton",
+        "UBadge",
+        "DmsStatusPill",
+        "UModal",
+      ])
+        app.component(name, () => null);
+    };
+
+    vi.stubEnv("SSR", true);
+    const { html, payload } = await serverRender(SecuritySessions, register);
+    vi.stubEnv("SSR", false);
+    expect(html).toContain("active_ago(4 minutes ago)");
+    // The browser hydrates two seconds later: "5 minutes ago" from now.
+    vi.setSystemTime(NOW + 2000);
+    authFetch.mockClear();
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const { app, container } = hydrate(SecuritySessions, html, payload, register);
+    mounted.push(app);
+    await nextTick();
+    await new Promise((done) => setTimeout(done, 0));
+    expect(reads()).toEqual([]);
+    expect(container.innerHTML).toBe(html);
+    expect(warn.mock.calls.flat().join(" ")).not.toMatch(/hydration/i);
+    warn.mockRestore();
+  });
+});
+
+describe("Notification preferences", () => {
+  it("renders the preferences and the catalog the inbox shares, read once on the server", async () => {
+    const Preferences = defineComponent({
+      setup() {
+        const { isLoading, isEnabled, categories, subjectsOf } =
+          useNotificationPreferences();
+        return () =>
+          h(
+            "ul",
+            isLoading.value
+              ? "loading"
+              : categories.value.flatMap((category) =>
+                  subjectsOf(category.id).map((subject) =>
+                    h("li", `${subject.id}:${isEnabled(subject)}`),
+                  ),
+                ),
+          );
+      },
+    });
+    const Inbox = defineComponent({
+      setup() {
+        const { findCategory } = useNotificationCatalog();
+        return () => h("p", findCategory("core")?.labelKey ?? "-");
+      },
+    });
+    const Page = defineComponent({
+      setup: () => () => h("div", [h(Preferences), h(Inbox)]),
+    });
+
+    const { html, server, browser, hydrationWarnings } =
+      await renderAndHydrate(Page);
+    expect(html).toBe(
+      "<div><ul><li>login:true</li><li>mention:false</li></ul><p>Core</p></div>",
+    );
+    expect(server.sort()).toEqual([
+      "/dms/pages/settings/user/notifications/categories",
+      "/dms/pages/settings/user/notifications/preferences",
+    ]);
+    expect(browser).toEqual([]);
+    expect(hydrationWarnings).toEqual([]);
+  });
+
+  it("reads nothing while the page does not show them", async () => {
+    const Hidden = defineComponent({
+      setup() {
+        const { isLoading } = useNotificationPreferences(() => false);
+        return () => h("p", String(isLoading.value));
+      },
+    });
+    await serverRender(Hidden);
+    expect(reads()).toEqual([]);
+  });
+});

package/frontend-vue/tests/side-panels.test.ts

@@ -40,6 +40,10 @@ import {
   providePageFillHeight,
 } from "../layers/dms-layout/app/composables/layout/usePageFillHeight";
 
+vi.mock(
+  "../layers/dms-layout/app/build/composables/navigation/useVisitNavBadges",
+  () => ({ useVisitNavBadges: () => {} }),
+);
 vi.mock(
   "../layers/dms-layout/app/build/components/layout/DashboardSidebar.vue",
   () => ({ default: () => null }),
@@ -136,7 +140,10 @@ function installRuntime(): void {
     useDmsState,
     useI18n: () => ({ t: (key: string) => key }),
     useTranslation: () => ({ processI18n: (value: string) => value }),
-    useUserSession: () => ({ loggedIn }),
+    useDmsUserSession: () => ({ loggedIn }),
+    // The page brought its site layout.
+    useRenderedSiteLayout: () => {},
+    useRenderedBellCounts: () => {},
   };
   Object.entries(runtime).forEach(([name, value]) =>
     vi.stubGlobal(name, value),

package/frontend-vue/tests/sign-in-exit-history.test.ts

@@ -0,0 +1,219 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+  watchEffect,
+  type App,
+  type Component,
+} from "vue";
+import { usePostLoginRedirect } from "../layers/dms-auth/app/composables/usePostLoginRedirect";
+
+// The pages that end a sign-in by spending a one-time token in their URL: the
+// OAuth completion and the second factor (code or backup code). Each leaves
+// for the destination in its own place in the history, so Back never lands on
+// a spent token, or on a completion page that sends the user forward again.
+
+vi.mock("#dms-ui/app/build/components/form/OtpInput.vue", async () => {
+  const { defineComponent: define, h: render } = await import("vue");
+  return {
+    default: define({
+      props: { modelValue: Array },
+      emits: ["update:modelValue"],
+      setup: (_, { emit, expose }) => {
+        expose({ focus: () => undefined });
+        return () =>
+          render("input", {
+            "data-testid": "code",
+            onInput: (event: Event) =>
+              emit(
+                "update:modelValue",
+                (event.target as HTMLInputElement).value.split(""),
+              ),
+          });
+      },
+    }),
+  };
+});
+const stub = vi.hoisted(() => async () => {
+  const { defineComponent: define, h: render } = await import("vue");
+  return {
+    default: define({
+      setup:
+        (_: unknown, { slots }: { slots: Record<string, () => unknown> }) =>
+        () =>
+          render("section", slots.default?.() as never),
+    }),
+  };
+});
+vi.mock("../layers/dms-layout/app/build/components/layout/StageCard.vue", stub);
+vi.mock("../layers/dms-auth/app/build/components/AuthBackLink.vue", stub);
+vi.mock("../layers/dms-auth/app/build/components/AuthFormAlert.vue", stub);
+
+const { default: OAuthCompletePage } = await import(
+  "../layers/dms-auth/app/custom-pages/auth/oauth-complete.vue"
+);
+const { default: TwoFactorPage } = await import(
+  "../layers/dms-auth/app/custom-pages/auth/2fa.vue"
+);
+const { default: BackupCodePage } = await import(
+  "../layers/dms-auth/app/custom-pages/auth/backup.vue"
+);
+
+const HOMEPAGE = "/home";
+const navigate = vi.fn();
+const fetchApi = vi.fn();
+let route: { path: string; query: Record<string, string> };
+let app: App;
+let host: HTMLDivElement;
+
+const Form = defineComponent({
+  props: { state: { type: Object, required: true } },
+  emits: ["submit"],
+  setup: (props, { emit, expose, slots }) => {
+    expose({ setErrors: () => undefined, getErrors: () => [] });
+    return () =>
+      h(
+        "form",
+        {
+          onSubmit: (event: Event) => {
+            event.preventDefault();
+            emit("submit", { data: props.state });
+          },
+        },
+        slots.default?.(),
+      );
+  },
+});
+const Passthrough = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("span", slots.default?.()),
+});
+
+function installRuntime() {
+  Object.entries({
+    computed,
+    ref,
+    reactive,
+    watch,
+    watchEffect,
+    onMounted,
+  }).forEach(([key, value]) => vi.stubGlobal(key, value));
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useTranslation", () => ({
+    processApiMessage: (message: string) => message,
+  }));
+  vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
+  vi.stubGlobal("useDmsRoute", () => route);
+  vi.stubGlobal("useHomepage", () => HOMEPAGE);
+  vi.stubGlobal("useDmsApp", () => ({
+    runWithContext: (fn: () => unknown) => fn(),
+    $i18n: { setLocale: vi.fn() },
+  }));
+  vi.stubGlobal("useDmsUserSession", () => ({
+    fetch: async () => undefined,
+    user: ref({ _id: "user" }),
+  }));
+  vi.stubGlobal("useMultiAccount", () => ({ addCurrentAccount: vi.fn() }));
+  vi.stubGlobal("useSiteLayout", () => ({ refresh: async () => undefined }));
+  vi.stubGlobal("withAccountsFlag", (_query: unknown, extra = {}) => extra);
+  vi.stubGlobal("usePostLoginRedirect", usePostLoginRedirect);
+  vi.stubGlobal("navigateDms", navigate);
+  vi.stubGlobal("$fetch", fetchApi);
+}
+
+function mountPage(page: Component) {
+  app = createApp(page);
+  app.config.globalProperties.$t = (key: string) => key;
+  for (const name of ["UButton", "UFormField", "UInput", "UIcon", "DmsLink"])
+    app.component(name, Passthrough);
+  app.component("UForm", Form);
+  app.mount(host);
+}
+
+async function settle() {
+  for (let tick = 0; tick < 10; tick++) {
+    await Promise.resolve();
+    await nextTick();
+  }
+}
+
+async function submit(code: string) {
+  const input = host.querySelector<HTMLInputElement>('[data-testid="code"]');
+  if (input) {
+    input.value = code;
+    input.dispatchEvent(new Event("input"));
+    await settle();
+  }
+  host.querySelector("form")!.dispatchEvent(new Event("submit"));
+  await settle();
+}
+
+beforeEach(() => {
+  navigate.mockReset();
+  fetchApi.mockReset();
+  installRuntime();
+  host = document.createElement("div");
+  document.body.append(host);
+});
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+it("replaces the OAuth completion page with the destination", async () => {
+  route = { path: "/auth/oauth/complete", query: { redirect: "/settings" } };
+  fetchApi.mockResolvedValueOnce({ kind: "none" });
+  mountPage(OAuthCompletePage);
+  await settle();
+
+  expect(fetchApi).toHaveBeenCalledWith("/auth/oauth/handoff", {
+    method: "POST",
+  });
+  expect(navigate).toHaveBeenCalledTimes(1);
+  expect(navigate).toHaveBeenCalledWith("/settings", { replace: true });
+});
+
+it("replaces the second-factor page with the destination", async () => {
+  route = {
+    path: "/auth/2fa",
+    query: { token: "spent-token", methods: "totp" },
+  };
+  fetchApi.mockResolvedValueOnce(undefined);
+  mountPage(TwoFactorPage);
+  await settle();
+  await submit("123456");
+
+  expect(fetchApi).toHaveBeenCalledWith("/auth/verify-2fa", {
+    method: "POST",
+    body: { token: "spent-token", code: "123456", method: "totp" },
+  });
+  expect(navigate).toHaveBeenCalledWith(HOMEPAGE, { replace: true });
+});
+
+it("replaces the backup code page with the destination", async () => {
+  route = { path: "/auth/backup", query: { token: "spent-token" } };
+  fetchApi.mockResolvedValueOnce(undefined);
+  mountPage(BackupCodePage);
+  await settle();
+  (host.querySelector("form") as HTMLFormElement).dispatchEvent(
+    new Event("submit"),
+  );
+  await settle();
+
+  expect(fetchApi).toHaveBeenCalledWith(
+    "/auth/verify-2fa",
+    expect.objectContaining({ method: "POST" }),
+  );
+  expect(navigate).toHaveBeenCalledWith(HOMEPAGE, { replace: true });
+});

package/frontend-vue/tests/signup-invitation-link.test.ts

@@ -13,6 +13,12 @@ import {
 } from "vue";
 import * as z from "zod";
 import SignupPage from "../layers/dms-auth/app/custom-pages/auth/signup.vue";
+import {
+  browserRuntime,
+  hydrate,
+  serverRender,
+  stubApiData,
+} from "./helpers/api-data-runtime";
 
 const route = reactive<{ query: Record<string, unknown> }>({ query: {} });
 let app: App;
@@ -54,7 +60,7 @@ function installRuntime() {
     runWithContext: (fn: () => unknown) => fn(),
   }));
   vi.stubGlobal("useDmsRoute", () => route);
-  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
+  stubApiData(authFetch);
   vi.stubGlobal("passwordSchema", z.string());
   vi.stubGlobal("usePasswordStrength", () => ({
     strength: ref([]),
@@ -66,6 +72,7 @@ function installRuntime() {
 function mountSignup(query: Record<string, unknown>) {
   route.query = query;
   app = createApp(SignupPage);
+  browserRuntime(app);
   app.config.globalProperties.$t = (key: string) => key;
   for (const name of [
     "DmsCard",
@@ -83,10 +90,10 @@ function mountSignup(query: Record<string, unknown>) {
   app.mount(host);
 }
 
-/** Let the invitation check the page starts on mount settle. */
+/** Let the invitation check the page starts settle. */
 async function settle() {
-  await Promise.resolve();
-  await nextTick();
+  for (let tick = 0; tick < 4; tick++) await nextTick();
+  await new Promise((done) => setTimeout(done, 0));
 }
 
 function refusal(code: string) {
@@ -132,10 +139,13 @@ it("shows the signup form once the server accepts the invitation", async () => {
 
   await settle();
 
-  expect(authFetch).toHaveBeenCalledWith("/api/auth/validate-invite-token", {
-    method: "POST",
-    body: { token: "invite-token", email: "new@local.test" },
-  });
+  expect(authFetch).toHaveBeenCalledWith(
+    "/api/auth/validate-invite-token",
+    expect.objectContaining({
+      method: "POST",
+      body: { token: "invite-token", email: "new@local.test" },
+    }),
+  );
   expect(host.querySelector('[data-testid="signup-invalid-invitation"]')).toBe(
     null,
   );
@@ -197,3 +207,41 @@ it.each([{}, { lang: "en" }, { lang: "de" }, { lang: ["fr", "en"] }])(
     expect(locale.value).toBe("en");
   },
 );
+
+// Checked with the page: the server renders the notice, and the browser
+// hydrates it without asking again (no form flashing first).
+it("renders a refused invitation's notice on the server, and the browser does not check it again", async () => {
+  authFetch.mockRejectedValue(refusal("error.invite_revoked"));
+  route.query = { token: "stale-token", email: "new@local.test" };
+  const register = (application: App) => {
+    application.config.globalProperties.$t = (key: string) => key;
+    for (const name of [
+      "DmsCard",
+      "UIcon",
+      "UForm",
+      "UFormField",
+      "UInput",
+      "DmsOAuthButtons",
+      "DmsPasswordStrength",
+      "DmsLink",
+    ])
+      application.component(name, Passthrough);
+    application.component("UButton", LinkButton);
+  };
+  vi.stubEnv("SSR", true);
+  const { html, payload } = await serverRender(SignupPage, register);
+  vi.stubEnv("SSR", false);
+  expect(html).toContain("page.signup.invitation_revoked_title");
+  expect(html).not.toContain("page.signup.submit");
+  expect(authFetch).toHaveBeenCalledTimes(1);
+
+  authFetch.mockClear();
+  const hydrated = hydrate(SignupPage, html, payload, register);
+  app = hydrated.app;
+  await settle();
+  expect(authFetch).not.toHaveBeenCalled();
+  expect(hydrated.container.textContent).toContain(
+    "page.signup.invitation_revoked_title",
+  );
+  vi.unstubAllEnvs();
+});

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

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+import { findNavigableCategory } from "../layers/dms-layout/app/composables/page/useSiteLayout";
+import type { SiteLayout } from "../layers/dms-layout/app/types/page";
+
+// The site layout lists every category once, by full id, and its pages name
+// theirs by id. A URL resolves against the categories that own a slug: a
+// `urlTransparent` one answers at its parent's, and is never a URL's target.
+
+const layout = {
+  pages: {},
+  categories: {
+    projects: {
+      id: "projects",
+      fullId: "projects",
+      fullSlug: "/projects",
+      displayName: "Projects",
+    },
+    "projects.reports": {
+      id: "reports",
+      fullId: "projects.reports",
+      fullSlug: "/projects",
+      displayName: "Reports",
+      categoryId: "projects",
+      urlTransparent: true,
+    },
+  },
+} as unknown as SiteLayout;
+
+describe("the category a URL resolves to", () => {
+  it("is the one owning the slug, by its full slug", () => {
+    expect(findNavigableCategory(layout, "/projects")?.fullId).toBe("projects");
+  });
+
+  it("is never a transparent category, nor an unknown slug", () => {
+    expect(findNavigableCategory(layout, "/reports")).toBeUndefined();
+    const transparentOnly = {
+      pages: {},
+      categories: { "projects.reports": layout.categories["projects.reports"] },
+    } as unknown as SiteLayout;
+    expect(findNavigableCategory(transparentOnly, "/projects")).toBeUndefined();
+  });
+});

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

@@ -70,13 +70,13 @@ it("does not show a stale request error after successful Inertia navigation", as
       fail = reject;
     }),
   );
-  const showError = vi.fn();
-  vi.stubGlobal("showError", showError);
+  const showDmsError = vi.fn();
+  vi.stubGlobal("showDmsError", showDmsError);
   const layout = useSiteLayout();
   const request = layout.loadSiteLayout();
   state.get("dms-siteLayout")!.value = { pages: { fresh: {} }, categories: {} };
   fail(new Error("old account request"));
   await expect(request).rejects.toThrow("old account request");
-  expect(showError).not.toHaveBeenCalled();
+  expect(showDmsError).not.toHaveBeenCalled();
   expect(layout.loadingError.value).toBeNull();
 });