@antelopejs/dms 0.8.2 → 0.9.0

package/frontend-vue/tests/permission-preview-partial.test.ts

@@ -198,8 +198,6 @@ describe("NavigationMenu in a role preview", () => {
       if (!state.has(key)) state.set(key, ref(initial()));
       return state.get(key);
     });
-    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);

package/frontend-vue/tests/permissions-transfer.test.ts

@@ -0,0 +1,194 @@
+// @vitest-environment jsdom
+/**
+ * The permission set the `auth` middleware preloads while a server renders a
+ * page reaches the browser with the page, through the runtime's real state
+ * transfer: the browser's run of the middleware finds it and asks nothing.
+ * A caller that only needs a set joins a load in flight.
+ */
+import {
+  createApp,
+  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";
+
+const engine = await import("#dms/frontend-module");
+const { createTrailingDeduper } = await import(
+  "../layers/dms-core/app/utils/trailingDeduper"
+);
+vi.stubGlobal("useDmsState", engine.useDmsState);
+vi.stubGlobal("useDmsApp", engine.useDmsApp);
+vi.stubGlobal("defineDmsMiddleware", engine.defineDmsMiddleware);
+vi.stubGlobal("useDmsError", engine.useDmsError);
+vi.stubGlobal("abortDmsNavigation", engine.abortDmsNavigation);
+vi.stubGlobal("navigateDms", engine.navigateDms);
+vi.stubGlobal("createTrailingDeduper", createTrailingDeduper);
+vi.stubGlobal("useDmsRuntimeConfig", () => ({ public: { dms: {} } }));
+vi.stubGlobal("useSiteLayout", () => ({
+  siteLayout: { value: {} },
+  findMatchingRoute: () => ({ metadata: {} }),
+}));
+vi.stubGlobal("useDmsUserSession", () => ({
+  loggedIn: { value: true },
+  user: { value: { isValidated: true } },
+}));
+
+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 { default: authMiddleware } = await import(
+  "../layers/dms-auth/app/middleware/auth"
+);
+
+const PERMISSION = "orders.read";
+
+interface PendingRequest {
+  resolve: (ids: string[]) => void;
+}
+
+const requests: PendingRequest[] = [];
+// Answers each request once the test releases it, in order.
+const $authFetch = vi.fn(
+  () =>
+    new Promise<string[]>((resolve) => {
+      requests.push({ resolve });
+    }),
+);
+vi.stubGlobal("useAuthFetch", () => ({ $authFetch }));
+
+const mounted: App[] = [];
+
+const settle = async () => {
+  await nextTick();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+};
+
+async function answerRequests(): Promise<void> {
+  for (let round = 0; round < 3; round++) {
+    await settle();
+    for (const request of requests.splice(0)) request.resolve([PERMISSION]);
+  }
+}
+
+const Page = defineComponent({
+  setup() {
+    defineDmsPageMeta({ auth: true });
+    const { hasPermission } = usePermissions();
+    return () => h("p", hasPermission(PERMISSION) ? "can read" : "cannot read");
+  },
+});
+const { defineDmsPageMeta } = engine;
+
+/** A runtime whose app carries the DMS app context, as the real app's does. */
+function attach(app: App, runtime: DmsFrontendRuntime): void {
+  const context = {} as DmsFrontendRuntime["appContext"];
+  app.config.globalProperties.$dms = context;
+  runtime.appContext = context;
+  runtime.route.matched = [{}];
+  engine.provideDmsFrontendRuntime(app, runtime);
+}
+
+beforeEach(async () => {
+  requests.length = 0;
+  $authFetch.mockClear();
+  await engine.setupFrontendModules([
+    {
+      options: { public: {} },
+      module: {
+        setup(sdk) {
+          sdk.registerMiddleware("auth", authMiddleware);
+        },
+      },
+    },
+  ]);
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+});
+
+describe("permissions handed to the browser", () => {
+  it("renders the page with the set the server loaded, and the browser asks nothing", async () => {
+    const server = engine.createDmsFrontendRuntime(undefined, {}, true);
+    const serverApp = createSSRApp(Page);
+    attach(serverApp, server);
+    const rendering = renderToString(serverApp);
+    await answerRequests();
+    expect(await rendering).toContain("can read");
+    expect($authFetch).toHaveBeenCalledTimes(1);
+
+    const payload = structuredClone(engine.serializeDmsPayload(server));
+    expect(payload.state["dms-user-permissions"]).toEqual(
+      new Set([PERMISSION]),
+    );
+
+    $authFetch.mockClear();
+    const browser = engine.createDmsFrontendRuntime(undefined, {});
+    engine.restoreDmsPayload(browser, payload);
+    const browserApp = createApp(Page);
+    attach(browserApp, browser);
+    const host = document.createElement("div");
+    browserApp.mount(host);
+    mounted.push(browserApp);
+    await answerRequests();
+
+    expect($authFetch).not.toHaveBeenCalled();
+    expect(host.textContent).toBe("can read");
+  });
+});
+
+describe("loading the permission set", () => {
+  function browserPermissions() {
+    const runtime = engine.createDmsFrontendRuntime();
+    const app = createApp({ render: () => null });
+    attach(app, runtime);
+    return app.runWithContext(() => usePermissions());
+  }
+
+  it("joins a first load in flight instead of loading twice", async () => {
+    const permissions = browserPermissions();
+    const loads = Promise.all([
+      permissions.loadPermissions(),
+      permissions.loadPermissions(),
+    ]);
+    await answerRequests();
+    await loads;
+
+    expect($authFetch).toHaveBeenCalledTimes(1);
+    expect(permissions.hasPermission(PERMISSION)).toBe(true);
+  });
+
+  it("still gives a refresh asked during a load its own pass", async () => {
+    const permissions = browserPermissions();
+    const runs = Promise.all([
+      permissions.loadPermissions(),
+      permissions.fetchPermissions(),
+    ]);
+    await answerRequests();
+    await runs;
+
+    expect($authFetch).toHaveBeenCalledTimes(2);
+  });
+
+  it("loads again when the load it joined was cleared meanwhile", async () => {
+    const permissions = browserPermissions();
+    const first = permissions.loadPermissions();
+    permissions.clear();
+    const second = permissions.loadPermissions();
+    await answerRequests();
+    await Promise.all([first, second]);
+
+    expect($authFetch).toHaveBeenCalledTimes(2);
+    expect(permissions.isLoaded.value).toBe(true);
+  });
+});

package/frontend-vue/tests/post-login-redirect.test.ts

@@ -9,7 +9,7 @@ const navigateTo = vi.fn();
 
 beforeEach(() => {
   vi.stubGlobal("useDmsApp", () => ({ $i18n: { setLocale } }));
-  vi.stubGlobal("useUserSession", () => ({
+  vi.stubGlobal("useDmsUserSession", () => ({
     fetch: refreshUser,
     user: { value: { language: "fr" } },
   }));
@@ -37,7 +37,7 @@ describe("post-login redirect", () => {
     await usePostLoginRedirect(resolveDestination);
 
     expect(resolveDestination).toHaveBeenCalledOnce();
-    expect(navigateTo).toHaveBeenCalledWith("/dashboard");
+    expect(navigateTo).toHaveBeenCalledWith("/dashboard", {});
     expect(refreshUser.mock.invocationCallOrder[0]).toBeLessThan(
       refreshLayout.mock.invocationCallOrder[0]!,
     );
@@ -45,12 +45,17 @@ describe("post-login redirect", () => {
 
   it("preserves explicit login destinations", async () => {
     await usePostLoginRedirect("/reports");
-    expect(navigateTo).toHaveBeenCalledWith("/reports");
+    expect(navigateTo).toHaveBeenCalledWith("/reports", {});
+  });
+
+  it("opens the destination in place of the current page when asked", async () => {
+    await usePostLoginRedirect("/reports", { replace: true });
+    expect(navigateTo).toHaveBeenCalledWith("/reports", { replace: true });
   });
 
   it("falls back to the homepage when no page is accessible", async () => {
     await usePostLoginRedirect(() => undefined);
-    expect(navigateTo).toHaveBeenCalledWith("/");
+    expect(navigateTo).toHaveBeenCalledWith("/", {});
   });
 
   it("does not navigate when session refresh fails", async () => {
@@ -61,7 +66,7 @@ describe("post-login redirect", () => {
   });
 
   it("rejects a session refresh that resolves without an authenticated user", async () => {
-    vi.stubGlobal("useUserSession", () => ({
+    vi.stubGlobal("useDmsUserSession", () => ({
       fetch: refreshUser,
       user: { value: null },
     }));

package/frontend-vue/tests/profile-personal-info-ssr.test.ts

@@ -0,0 +1,150 @@
+// @vitest-environment jsdom
+/**
+ * The profile's personal information through the runtime's real async data:
+ * a server render reads the profile and the picture's URL and renders the
+ * name, the address with its verification and the picture; the browser
+ * hydrates with them without asking again, and the form edits a copy.
+ */
+import {
+  computed,
+  defineComponent,
+  h,
+  inject,
+  nextTick,
+  onScopeDispose,
+  ref,
+  shallowReactive,
+  Suspense,
+  watch,
+  type App,
+} from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { hydrate, serverRender, stubApiData } from "./helpers/api-data-runtime";
+import { useFileReadUrls } from "../layers/dms-ui/app/composables/useFileReadUrls";
+
+vi.mock("#dms-core/app/composables/useFieldErrors", () => ({
+  useFieldErrors: () => ({
+    errors: {},
+    aria: () => ({}),
+    errorId: (field: string) => `${field}-error`,
+    clear: () => {},
+    setError: async () => {},
+    handleApiError: async () => {},
+  }),
+  fieldErrorId: (id: string) => `${id}-error`,
+}));
+vi.mock("#dms-ui/app/composables/unsaved-changes/useUnsavedChanges", () => ({
+  useUnsavedChanges: () => {},
+}));
+
+const ENDPOINT = "/settings/user/profile";
+const PROFILE = {
+  name: "Bea Owner",
+  email: "bea@example.test",
+  avatar: { key: "avatars/bea.png" },
+  isValidated: true,
+};
+
+const authFetch = vi.fn(async (url: string) =>
+  url === ENDPOINT
+    ? structuredClone(PROFILE)
+    : { url: "https://files.test/bea.png", filename: "bea.png" },
+);
+const mounted: App[] = [];
+
+const Input = defineComponent({
+  props: { modelValue: String, id: String },
+  setup: (props) => () => h("input", { id: props.id, value: props.modelValue }),
+});
+const Avatar = defineComponent({
+  props: { src: String, name: String },
+  setup: (props) => () => h("img", { src: props.src ?? "", alt: props.name }),
+});
+const Badge = defineComponent({
+  props: { label: String },
+  setup: (props) => () => h("span", props.label),
+});
+const Slots = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", [slots.label?.(), slots.default?.()]),
+});
+
+function register(app: App): void {
+  for (const name of ["DmsCard", "DmsFieldRow", "DmsLink", "DmsSaveBar"])
+    app.component(name, Slots);
+  for (const name of ["UButton", "UIcon", "USkeleton", "DmsFieldError"])
+    app.component(name, () => null);
+  app.component("UInput", Input);
+  app.component("UBadge", Badge);
+}
+
+beforeEach(async () => {
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("ref", ref);
+  vi.stubGlobal("watch", watch);
+  vi.stubGlobal("inject", inject);
+  vi.stubGlobal("onScopeDispose", onScopeDispose);
+  vi.stubGlobal("shallowReactive", shallowReactive);
+  vi.stubGlobal("useTemplateRef", () => ref(null));
+  vi.stubGlobal("CONTENT_LANGUAGE_HEADER", "x-content-language");
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
+  vi.stubGlobal("useTranslation", () => ({
+    processApiMessage: (key: string) => key,
+  }));
+  vi.stubGlobal("useCurrentUser", () => ({
+    user: ref({ name: "Session name", email: "bea@example.test" }),
+    refresh: async () => {},
+  }));
+  vi.stubGlobal("useProfileAvatar", () => ({ upload: vi.fn() }));
+  vi.stubGlobal("useUploadWithProgress", () => ({}));
+  vi.stubGlobal("useFileReadUrls", useFileReadUrls);
+  stubApiData(authFetch as never);
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+  vi.unstubAllEnvs();
+  vi.unstubAllGlobals();
+  authFetch.mockClear();
+});
+
+it("renders the saved profile and its picture on the server, and the browser does not read them again", async () => {
+  vi.doMock(
+    "../layers/dms-layout/app/build/components/pages/settings/profile/ProfileAvatar.vue",
+    () => ({ default: Avatar }),
+  );
+  const { default: ProfilePersonalInfo } = await import(
+    "../layers/dms-layout/app/build/components/pages/settings/profile/ProfilePersonalInfo.vue"
+  );
+  // As the page renders it: inside the page's <Suspense>.
+  const Page = defineComponent({
+    setup: () => () =>
+      h(Suspense, null, {
+        default: () => h(ProfilePersonalInfo, { endpoint: ENDPOINT }),
+      }),
+  });
+
+  vi.stubEnv("SSR", true);
+  const { html, payload } = await serverRender(Page, register);
+  vi.stubEnv("SSR", false);
+  expect(html).toContain('value="Bea Owner"');
+  expect(html).toContain('src="https://files.test/bea.png"');
+  expect(html).toContain("page.settings.security.verified");
+  expect(authFetch.mock.calls.map(([url]) => url)).toEqual([
+    ENDPOINT,
+    "/api/files/metadata",
+  ]);
+
+  authFetch.mockClear();
+  const { app, container } = hydrate(Page, html, payload, register);
+  mounted.push(app);
+  await nextTick();
+  await new Promise((done) => setTimeout(done, 0));
+  expect(authFetch).not.toHaveBeenCalled();
+  expect(
+    container.querySelector<HTMLInputElement>("#profile-name")?.value,
+  ).toBe("Bea Owner");
+});

package/frontend-vue/tests/profile-preferences-summary.test.ts

@@ -13,6 +13,7 @@ import {
 } from "../layers/dms-layout/app/build/composables/settings/profile/preferencesSummary";
 import type { NotificationSubject } from "../layers/dms-layout/app/build/composables/notification/useNotificationCatalog";
 import { DEFAULT_ACCESSIBILITY_PREFERENCES } from "../layers/dms-ui/app/build/utils/accessibilityPreferences";
+import { browserRuntime, stubApiData } from "./helpers/api-data-runtime";
 
 const KEY = "page.settings.profile.preferences";
 
@@ -221,7 +222,8 @@ const colorMode = ref<"light" | "dark" | "system">("dark");
 const prefersDark = ref(false);
 let authFetch: ReturnType<typeof vi.fn>;
 let resolveAccess: (value: unknown) => void;
-const loadPreferences = vi.fn(async () => {});
+// Whether the section reads the notification preferences (its row shows).
+let readsPreferences: () => boolean = () => false;
 
 vi.mock("@vueuse/core", () => ({ usePreferredDark: () => prefersDark }));
 vi.mock("#dms-ui/app/components/icon-well/IconWell.vue", async () => {
@@ -308,12 +310,14 @@ vi.mock(
   async () => {
     const { ref } = await import("vue");
     return {
-      useNotificationPreferences: () => ({
-        isLoading: preferencesLoading,
-        loadFailed: ref(false),
-        isEnabled: (s: { id: string }) => s.id !== "c",
-        load: loadPreferences,
-      }),
+      useNotificationPreferences: (enabled: () => boolean) => {
+        readsPreferences = enabled;
+        return {
+          isLoading: preferencesLoading,
+          loadFailed: ref(false),
+          isEnabled: (s: { id: string }) => s.id !== "c",
+        };
+      },
     };
   },
 );
@@ -357,6 +361,7 @@ async function mountSection(): Promise<void> {
     "../layers/dms-layout/app/build/components/pages/settings/profile/ProfilePreferencesSummary.vue"
   );
   app = createApp(ProfilePreferencesSummary);
+  browserRuntime(app);
   app.component(
     "USkeleton",
     defineComponent({
@@ -403,7 +408,6 @@ beforeEach(() => {
   preferencesLoading.value = true;
   colorMode.value = "dark";
   prefersDark.value = false;
-  loadPreferences.mockClear();
   authFetch = vi.fn(
     () =>
       new Promise((resolve) => {
@@ -411,7 +415,7 @@ beforeEach(() => {
       }),
   );
   vi.stubGlobal("useI18n", () => ({ t, locale: ref("en-GB") }));
-  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
+  stubApiData((...args: unknown[]) => authFetch(...(args as [])));
   host = document.createElement("div");
   document.body.append(host);
 });
@@ -440,7 +444,7 @@ describe("Preferences & access section", () => {
       "/settings/user/notifications",
       "/settings/user/appearance",
     ]);
-    expect(loadPreferences).toHaveBeenCalledOnce();
+    expect(readsPreferences()).toBe(true);
 
     // The preferences answer first: still a skeleton until the bell's count.
     preferencesLoading.value = false;
@@ -502,7 +506,7 @@ describe("Preferences & access section", () => {
     await mountSection();
     expect(host.querySelectorAll(":scope > div > div")).toHaveLength(1);
     expect(buttons()).toEqual([]);
-    expect(loadPreferences).not.toHaveBeenCalled();
+    expect(readsPreferences()).toBe(false);
 
     resolveAccess({ roles: [], workspaceOwner: false, platformOwner: false });
     await flush();

package/frontend-vue/tests/realtime-reconnect.test.ts

@@ -74,11 +74,16 @@ const installFetch = (server: FakeServer): void => {
       return openUserStream(server, init!.signal!);
     }
     const headers = init?.headers as Record<string, string>;
+    const pageId = url.slice(SUBSCRIBE_URL_PREFIX.length);
     server.subscriptions.push({
-      pageId: url.slice(SUBSCRIBE_URL_PREFIX.length),
+      pageId,
       sessionId: headers[SESSION_HEADER]!,
     });
-    return { ok: true, status: 200 };
+    return {
+      ok: true,
+      status: 200,
+      json: async () => ({ ok: true, topics: [`table:${pageId}`] }),
+    };
   }) as unknown as typeof fetch;
 };
 
@@ -113,7 +118,7 @@ beforeEach(() => {
   vi.stubGlobal("useDmsRuntimeConfig", () => ({
     public: { dms: { baseURL: BASE_URL } },
   }));
-  vi.stubGlobal("useUserSession", () => ({ loggedIn }));
+  vi.stubGlobal("useDmsUserSession", () => ({ loggedIn }));
   vi.stubGlobal("useSessionRecovery", () => ({
     refreshSession: async () => true,
     redirectToAuth: async () => {},
@@ -159,6 +164,20 @@ describe("useUserRealtime reconnection", () => {
     ]);
   });
 
+  it("holds the page's topics its subscription answered, until the stream drops", async () => {
+    const api = await loadApi();
+    await settle();
+    await api.setPage(PAGE_ID);
+    expect(api.pageTopics.value).toEqual([`table:${PAGE_ID}`]);
+
+    lastStream().end();
+    await settle();
+    expect(api.pageTopics.value).toEqual([]);
+    await vi.advanceTimersByTimeAsync(INITIAL_DELAY_MS);
+    await settle();
+    expect(api.pageTopics.value).toEqual([`table:${PAGE_ID}`]);
+  });
+
   it("backs off further while the server stays unreachable", async () => {
     await loadApi();
     await settle();

package/frontend-vue/tests/roles-name-errors.test.ts

@@ -282,7 +282,7 @@ it("asks the delete dialog the server words, then deletes with the picked role",
   await flush();
 
   expect(authFetch).toHaveBeenCalledWith(
-    "/settings/workspace/roles/role-1/delete-confirm",
+    "/dms/pages/settings/workspace/roles/role-1/delete-confirm",
   );
   expect(api.deleteRole).toHaveBeenCalledWith("role-1", {
     reassignTo: "role-2",

package/frontend-vue/tests/row-side-panel.test.ts

@@ -142,7 +142,7 @@ function installRuntime(): void {
         params ? `${value}(${params.index}/${params.total})` : value,
       processApiMessage: (value: string) => value,
     }),
-    useUserSession: () => ({ loggedIn: ref(true) }),
+    useDmsUserSession: () => ({ loggedIn: ref(true) }),
     useToast: () => ({ add: vi.fn() }),
     useModal: () => ({ open: vi.fn() }),
     useDrawer: () => ({ open: vi.fn() }),

package/frontend-vue/tests/security-sessions-load-error.test.ts

@@ -11,6 +11,7 @@ import {
   watch,
   type App,
 } from "vue";
+import { browserRuntime, stubApiData } from "./helpers/api-data-runtime";
 
 const overview = ref({ activeSessions: 1 });
 const authFetch = vi.fn();
@@ -77,6 +78,7 @@ async function mount(): Promise<void> {
     "../layers/dms-layout/app/build/components/pages/settings/security/SecuritySessions.vue"
   );
   app = createApp(SecuritySessions);
+  browserRuntime(app);
   app.component("DmsSection", Passthrough);
   app.component("DmsEmptyState", EmptyState);
   for (const name of ["USkeleton", "UButton", "DmsListRow", "UModal"]) {
@@ -93,7 +95,7 @@ beforeEach(() => {
   vi.stubGlobal("onMounted", onMounted);
   vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
   vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
-  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
+  stubApiData(authFetch);
   authFetch.mockReset();
   host = document.createElement("div");
   document.body.append(host);

package/frontend-vue/tests/server-routes-vs-pages.test.ts

@@ -0,0 +1,26 @@
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { expect, it } from "vitest";
+
+// A module route owns its path for every method: one on a page's path makes
+// the page unreachable (the invite link `GET /auth/signup` answered 405).
+const serverEntry = readFileSync(join(__dirname, "../dms.server.ts"), "utf8");
+const routePaths = [
+  ...serverEntry.matchAll(/registerRoute\(\s*"[A-Z]+",\s*"([^"]+)"/g),
+].map((match) => match[1]);
+
+function pageSlugs(dir: string): string[] {
+  return readdirSync(dir).flatMap((name) => {
+    const path = join(dir, name);
+    if (statSync(path).isDirectory()) return pageSlugs(path);
+    const slug = /urlSlug:\s*"([^"]+)"/.exec(readFileSync(path, "utf8"));
+    return slug ? [`/${slug[1]}`] : [];
+  });
+}
+
+it("serves no module route on the path of a public page", () => {
+  const pages = pageSlugs(join(__dirname, "../../src/pages/public"));
+  expect(routePaths.length).toBeGreaterThan(0);
+  expect(pages).toContain("/auth/signup");
+  expect(routePaths.filter((path) => pages.includes(path))).toEqual([]);
+});