@antelopejs/dms 0.8.3 → 0.9.1

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([]);
+});