@antelopejs/dms 0.6.1 → 0.7.0

package/frontend-vue/tests/notification-preferences-groups.test.ts

@@ -0,0 +1,268 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  onMounted,
+  ref,
+  type App,
+  type Component,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import NotificationPreferencesForm from "../layers/dms-layout/app/build/components/pages/settings/notification/NotificationPreferencesForm.vue";
+import { NOTIFICATION_GROUP_STORAGE_PREFIX } from "../layers/dms-layout/app/build/composables/notification/useNotificationGroupsOpen";
+
+const preferences = vi.hoisted(() => ({
+  toggleCategory: vi.fn(),
+  toggleSubject: vi.fn(),
+}));
+
+vi.mock(
+  "../layers/dms-layout/app/build/composables/notification/useNotificationPreferences",
+  async () => {
+    const vue = await import("vue");
+    const system = { id: "system", labelKey: "System", icon: "i-ph-gear" };
+    const security = {
+      id: "security",
+      labelKey: "Security",
+      icon: "i-ph-shield",
+    };
+    const subjects = {
+      system: [
+        { id: "general", category: system, labelKey: "General" },
+        { id: "account", category: system, labelKey: "Account" },
+      ],
+      security: [
+        { id: "alerts", category: security, labelKey: "Security alerts" },
+      ],
+    } as Record<string, { id: string; labelKey: string }[]>;
+    return {
+      useNotificationPreferences: () => ({
+        ...preferences,
+        categories: vue.ref([system, security]),
+        subjectsOf: (id: string) => subjects[id] ?? [],
+        failedChanges: vue.ref(undefined),
+        saveState: vue.ref("idle"),
+        isLoading: vue.ref(false),
+        loadFailed: vue.ref(false),
+        isEnabled: () => true,
+        rowState: () => "idle",
+        toggleableSubjectsOf: (category: { id: string }) =>
+          subjects[category.id] ?? [],
+        retry: vi.fn(),
+        load: vi.fn(),
+      }),
+    };
+  },
+);
+
+vi.mock(
+  "../layers/dms-layout/app/composables/layout/useInstantSaveHeader",
+  () => ({
+    useInstantSaveHeader: vi.fn(),
+  }),
+);
+
+vi.mock("#dms-ui/app/build/components/skeleton/RowSkeleton.vue", async () => {
+  const vue = await import("vue");
+  return { default: vue.defineComponent({ render: () => vue.h("span") }) };
+});
+
+let app: App | undefined;
+
+function mount(component: Component) {
+  app = createApp(defineComponent({ setup: () => () => h(component) }));
+  const passThrough = defineComponent({
+    setup:
+      (_props, { slots }) =>
+      () =>
+        h("div", [slots.default?.(), slots.footer?.()]),
+  });
+  for (const [name, stub] of Object.entries({
+    DmsSection: passThrough,
+    DmsEmptyState: passThrough,
+    DmsIconWell: defineComponent({ render: () => h("span") }),
+    UBadge: defineComponent({ render: () => h("span") }),
+    UIcon: defineComponent({ render: () => h("span") }),
+    // Attributes (aria-*) fall through to the native button.
+    UButton: defineComponent({
+      props: { label: String, icon: String },
+      emits: ["click"],
+      setup:
+        (props, { emit }) =>
+        () =>
+          h(
+            "button",
+            {
+              type: "button",
+              "data-icon": props.icon,
+              onClick: () => emit("click"),
+            },
+            props.label,
+          ),
+    }),
+    USwitch: defineComponent({
+      props: { modelValue: Boolean, disabled: Boolean },
+      emits: ["update:modelValue"],
+      setup:
+        (props, { emit }) =>
+        () =>
+          h("button", {
+            type: "button",
+            role: "switch",
+            "aria-checked": String(props.modelValue),
+            onClick: () => emit("update:modelValue", !props.modelValue),
+          }),
+    }),
+    // Shows its content while open, as Reka's collapsible does.
+    UCollapsible: defineComponent({
+      props: { open: Boolean },
+      setup:
+        (props, { slots }) =>
+        () =>
+          h("div", props.open ? slots.content?.() : []),
+    }),
+  })) {
+    app.component(name, stub);
+  }
+  const container = document.createElement("div");
+  document.body.append(container);
+  app.mount(container);
+  return container;
+}
+
+const chevronOf = (container: HTMLElement, categoryId: string) =>
+  container.querySelector<HTMLButtonElement>(
+    `button[aria-controls="notification-category-subjects-${categoryId}"]`,
+  )!;
+
+const subjectNames = (container: HTMLElement) =>
+  [...container.querySelectorAll('[role="rowgroup"] [role="rowheader"]')].map(
+    (cell) => cell.textContent?.trim(),
+  );
+
+const rowOf = (container: HTMLElement, categoryId: string) =>
+  chevronOf(container, categoryId).closest<HTMLElement>('[role="row"]')!;
+
+beforeEach(() => {
+  localStorage.clear();
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("ref", ref);
+  vi.stubGlobal("onMounted", onMounted);
+  vi.stubGlobal("useI18n", () => ({
+    t: (key: string, params?: Record<string, unknown>) =>
+      params?.name ? `${key}:${String(params.name)}` : key,
+  }));
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  document.body.innerHTML = "";
+  vi.unstubAllGlobals();
+  vi.clearAllMocks();
+});
+
+describe("notification preferences groups", () => {
+  it("starts every group folded, with its count on the group row", () => {
+    const container = mount(NotificationPreferencesForm as Component);
+
+    expect(subjectNames(container)).toEqual([]);
+    const chevron = chevronOf(container, "system");
+    expect(chevron.getAttribute("aria-expanded")).toBe("false");
+    expect(chevron.getAttribute("aria-label")).toBe(
+      "page.settings.notifications.category_expand:System",
+    );
+    expect(chevron.dataset.icon).toBe("i-ph-caret-right");
+    expect(rowOf(container, "system").textContent).toContain(
+      "page.settings.notifications.category_count",
+    );
+  });
+
+  it("unfolds and folds a group's subjects from its chevron", async () => {
+    const container = mount(NotificationPreferencesForm as Component);
+    const chevron = chevronOf(container, "system");
+
+    chevron.click();
+    await nextTick();
+    expect(chevron.getAttribute("aria-expanded")).toBe("true");
+    expect(chevron.dataset.icon).toBe("i-ph-caret-down");
+    expect(chevron.getAttribute("aria-label")).toBe(
+      "page.settings.notifications.category_collapse:System",
+    );
+    expect(subjectNames(container)).toEqual(["General", "Account"]);
+    expect(
+      container.querySelector("#notification-category-subjects-system"),
+    ).not.toBeNull();
+
+    chevron.click();
+    await nextTick();
+    expect(subjectNames(container)).toEqual([]);
+  });
+
+  it("unfolds a group from its title area too", async () => {
+    const container = mount(NotificationPreferencesForm as Component);
+
+    rowOf(container, "security")
+      .querySelector<HTMLElement>("[data-category-title]")!
+      .click();
+    await nextTick();
+    expect(subjectNames(container)).toEqual(["Security alerts"]);
+  });
+
+  it("keeps the master switch working on a folded group without unfolding it", async () => {
+    const container = mount(NotificationPreferencesForm as Component);
+
+    rowOf(container, "system")
+      .querySelector<HTMLButtonElement>('[role="switch"]')!
+      .click();
+    await nextTick();
+
+    expect(preferences.toggleCategory).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "system" }),
+      false,
+    );
+    expect(chevronOf(container, "system").getAttribute("aria-expanded")).toBe(
+      "false",
+    );
+    expect(subjectNames(container)).toEqual([]);
+  });
+
+  it("remembers the open groups in the browser", async () => {
+    const first = mount(NotificationPreferencesForm as Component);
+    chevronOf(first, "security").click();
+    await nextTick();
+    expect(
+      localStorage.getItem(`${NOTIFICATION_GROUP_STORAGE_PREFIX}security`),
+    ).toBe("open");
+    app?.unmount();
+    document.body.innerHTML = "";
+
+    const second = mount(NotificationPreferencesForm as Component);
+    expect(chevronOf(second, "security").getAttribute("aria-expanded")).toBe(
+      "true",
+    );
+    expect(chevronOf(second, "system").getAttribute("aria-expanded")).toBe(
+      "false",
+    );
+    expect(subjectNames(second)).toEqual(["Security alerts"]);
+  });
+
+  it("folds every group when the browser storage is unavailable", async () => {
+    vi.spyOn(Storage.prototype, "getItem").mockImplementation(() => {
+      throw new Error("blocked");
+    });
+    vi.spyOn(Storage.prototype, "setItem").mockImplementation(() => {
+      throw new Error("blocked");
+    });
+    const container = mount(NotificationPreferencesForm as Component);
+    expect(subjectNames(container)).toEqual([]);
+
+    chevronOf(container, "system").click();
+    await nextTick();
+    expect(subjectNames(container)).toEqual(["General", "Account"]);
+    vi.restoreAllMocks();
+  });
+});

package/frontend-vue/tests/notification-tone-contract.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+import { resolveNotificationTone as resolveOnServer } from "../../src/utils/notification-tones";
+import {
+  resolveNotificationTone as resolveInInbox,
+  unreadToneWith,
+} from "../layers/dms-layout/app/build/components/pages/settings/notification/notificationDisplay";
+import type {
+  NotificationTone,
+  UserNotification,
+} from "../layers/dms-layout/app/composables/notification/useNotifications";
+
+// The server weighs the unread badge (the bell, the Notifications entry) with
+// the tone the inbox draws each notification in: the two never disagree.
+
+const STORED_TONES: Array<NotificationTone | null> = [
+  null,
+  "neutral",
+  "primary",
+  "success",
+  "warning",
+  "error",
+];
+
+const row = (
+  tone: NotificationTone | null,
+  isRead: boolean,
+): UserNotification => ({
+  _id: "n1",
+  userId: "u1",
+  icon: "i-ph-bell",
+  title: "",
+  description: "",
+  params: null,
+  linkTo: null,
+  isRead,
+  categoryId: "system",
+  tone,
+  createdAt: "2026-10-09T10:00:00.000Z",
+  updatedAt: "2026-10-09T10:00:00.000Z",
+});
+
+it("resolves every stored tone, read or not, as the server does", () => {
+  for (const tone of STORED_TONES) {
+    for (const isRead of [false, true]) {
+      expect(resolveInInbox(row(tone, isRead)), `${tone}/${isRead}`).toBe(
+        resolveOnServer(tone, isRead),
+      );
+    }
+  }
+});
+
+it("draws an untoned unread notification in primary", () => {
+  expect(resolveInInbox(row(null, false))).toBe("primary");
+});
+
+describe("the unread badge's tone when a notification arrives", () => {
+  it("takes the stronger of the current tone and the new notification's", () => {
+    expect(unreadToneWith("warning", row("error", false))).toBe("error");
+    expect(unreadToneWith("error", row("success", false))).toBe("error");
+    expect(unreadToneWith("success", row(null, false))).toBe("primary");
+  });
+
+  it("takes the new notification's tone when nothing was unread", () => {
+    expect(unreadToneWith(undefined, row("warning", false))).toBe("warning");
+  });
+
+  it("keeps the current tone for a notification that arrives read", () => {
+    expect(unreadToneWith("success", row("error", true))).toBe("success");
+  });
+});

package/frontend-vue/tests/page-fill-height.test.ts

@@ -44,6 +44,10 @@ vi.mock(
   "../layers/dms-layout/app/build/components/layout/RolePreviewBar.vue",
   () => ({ default: () => null }),
 );
+vi.mock(
+  "../layers/dms-layout/app/build/components/layout/GithubStarPrompt.vue",
+  () => ({ default: () => null }),
+);
 vi.mock(
   "../layers/dms-layout/app/build/composables/dev-reload/useDevReloadHolder",
   async () => {
@@ -91,7 +95,7 @@ const FLOW_PAGE_MARKUP =
   '<div class="">' +
   '<section data-component="explorer" page-id="tools.explorer" layout-path="explorer"></section></div></div><!----><!--]--><!--]--><!--]--></div>' +
   PAGE_SKELETON_MARKUP +
-  "<!----><!--]--><!--]--><!--]--></div></div><!--[--><!----><!--]--></div></div>";
+  "<!----><!--]--><!--]--><!--]--></div></div><!--[--><!----><!--]--></div><!----></div>";
 
 function withComponents(...ids: string[]): PageLayoutFixture {
   return {
@@ -154,6 +158,8 @@ function installRuntime(): void {
     showError: vi.fn(),
     validateRequiredQueryParams: vi.fn(),
     useDefinedFunctions: () => ({ getFunction: () => undefined }),
+    useDmsCookie: <T>(_name: string, options: { default?: () => T } = {}) =>
+      ref(options.default?.()),
     useDmsPageLoading: () => pageLoading,
     useDmsRoute: () => route,
     useDmsState: <T>(_key: string, init?: () => T) => ref(init?.()),
@@ -185,7 +191,9 @@ function installRuntime(): void {
         params: {},
       }),
     }),
+    useI18n: () => ({ t: (key: string) => key }),
     useTranslation: () => ({ processI18n: (value: string) => value }),
+    useUserSession: () => ({ loggedIn: ref(true) }),
   };
   Object.entries(runtime).forEach(([name, value]) =>
     vi.stubGlobal(name, value),

package/frontend-vue/tests/page-no-visible-blocks.test.ts

@@ -0,0 +1,202 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createSSRApp,
+  h,
+  inject,
+  onMounted,
+  onUnmounted,
+  provide,
+  ref,
+  toRef,
+  watch,
+  type FunctionalComponent,
+} from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import CatchAllPage from "../layers/dms-layout/app/pages/[...slug].vue";
+import {
+  PAGE_FILL_HEIGHT_CLASSES,
+  providePageFillHeight,
+  usePageFillHeight,
+} from "../layers/dms-layout/app/composables/layout/usePageFillHeight";
+
+vi.mock(
+  "../layers/dms-layout/app/build/composables/dev-reload/useDevReloadHolder",
+  async () => {
+    const { ref } = await import("vue");
+    return { useDevReloading: () => ref(false) };
+  },
+);
+
+interface PageLayoutFixture {
+  components: Record<string, { componentName: string }>;
+  allComponentsHidden?: boolean;
+}
+
+const EMPTY_TITLE_KEY = "page.no_visible_blocks.title";
+const EMPTY_DESCRIPTION_KEY = "page.no_visible_blocks.description";
+
+const pageLayout = ref<PageLayoutFixture | null>(null);
+const siteLayoutTree = ref<Record<string, unknown> | undefined>(undefined);
+const navigateDms = vi.fn();
+
+const EmptyState: FunctionalComponent<{
+  title: string;
+  description: string;
+  variant: string;
+}> = (props) =>
+  h("aside", { "data-variant": props.variant }, [
+    h("p", props.title),
+    h("p", props.description),
+  ]);
+EmptyState.props = ["title", "description", "variant"];
+
+const PageComponent: FunctionalComponent<{ componentId: string }> = (props) =>
+  h("section", { "data-component": props.componentId });
+PageComponent.props = ["componentId"];
+
+function installRuntime(): void {
+  const metadata = { fullId: "examples.overview", hasAccess: true };
+  const runtime: Record<string, unknown> = {
+    computed,
+    inject,
+    onMounted,
+    onUnmounted,
+    provide,
+    ref,
+    toRef,
+    watch,
+    HTTP_FORBIDDEN: 403,
+    HTTP_INTERNAL_SERVER_ERROR: 500,
+    HTTP_NOT_FOUND: 404,
+    PAGE_FILL_HEIGHT_CLASSES,
+    providePageFillHeight,
+    usePageFillHeight,
+    createError: vi.fn(),
+    defineDmsPageMeta: vi.fn(),
+    firstAccessiblePagePath: vi.fn(),
+    navigateDms,
+    preloadPageLayoutComponents: vi.fn(),
+    providePageRealtime: vi.fn(),
+    resolveDmsComponent: () => "div",
+    runCustomValidation: vi.fn(),
+    showError: vi.fn(),
+    validateRequiredQueryParams: vi.fn(),
+    useDefinedFunctions: () => ({ getFunction: () => undefined }),
+    useDmsRoute: () => ({ path: "/examples/overview", query: {} }),
+    useHomepage: () => "/",
+    useI18n: () => ({ t: (key: string) => key }),
+    usePageLayout: async () => ({ pageLayout }),
+    usePageRealtime: () => ({}),
+    usePermissions: () => ({
+      permissions: ref([]),
+      refreshIfStale: async () => {},
+    }),
+    useSessionRecovery: () => ({
+      loggedIn: ref(true),
+      reconcileSession: async () => {},
+      redirectToAuth: async () => {},
+    }),
+    useSiteLayout: () => ({
+      siteLayout: ref({ pages: {} }),
+      siteLayoutTree,
+      loadingError: ref(null),
+      loadSiteLayout: async () => {},
+      refreshIfStale: async () => {},
+      findMatchingRoute: () => ({ metadata, params: {} }),
+    }),
+  };
+  Object.entries(runtime).forEach(([name, value]) =>
+    vi.stubGlobal(name, value),
+  );
+}
+
+async function renderPage(): Promise<HTMLElement> {
+  const app = createSSRApp(() => h(CatchAllPage));
+  app.component("DmsEmptyState", EmptyState);
+  app.component("DmsRecursiveComponent", PageComponent);
+  const host = document.createElement("div");
+  host.innerHTML = await renderToString(app);
+  return host;
+}
+
+beforeEach(() => {
+  siteLayoutTree.value = undefined;
+  navigateDms.mockClear();
+  installRuntime();
+});
+
+/** The menu tree with the page, and a page nested under it. */
+function treeWithNestedPage(nestedHasAccess: boolean) {
+  const nested = {
+    id: "invites",
+    fullId: "examples.overview.invites",
+    fullSlug: "/examples/overview/invites",
+    layoutUrl: "/examples/overview/invites/pagelayout",
+    hasAccess: nestedHasAccess,
+    children: {},
+    childrenOrders: [],
+  };
+  const overview = {
+    id: "overview",
+    fullId: "examples.overview",
+    fullSlug: "/examples/overview",
+    layoutUrl: "/examples/overview/pagelayout",
+    hasAccess: false,
+    children: { invites: nested },
+    childrenOrders: ["invites"],
+  };
+  const examples = {
+    id: "examples",
+    fullId: "examples",
+    children: { overview },
+    childrenOrders: ["overview"],
+  };
+  return { children: { examples }, childrenOrders: ["examples"] };
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("a page served without any of its blocks", () => {
+  it("says there is nothing to show and who to ask", async () => {
+    pageLayout.value = { components: {}, allComponentsHidden: true };
+    const host = await renderPage();
+    const empty = host.querySelector("aside");
+    expect(empty?.getAttribute("data-variant")).toBe("no-access");
+    expect(empty?.textContent).toContain(EMPTY_TITLE_KEY);
+    expect(empty?.textContent).toContain(EMPTY_DESCRIPTION_KEY);
+    expect(host.querySelector(".dms-page-stack")).toBeNull();
+  });
+
+  it("stays put, even with a page nested under it the viewer can open", async () => {
+    pageLayout.value = { components: {}, allComponentsHidden: true };
+    siteLayoutTree.value = treeWithNestedPage(true);
+    const host = await renderPage();
+    expect(navigateDms).not.toHaveBeenCalled();
+    expect(host.querySelector("aside")).not.toBeNull();
+  });
+
+  it("draws the blocks it was served instead", async () => {
+    pageLayout.value = {
+      components: { stats: { componentName: "StatGroup" } },
+    };
+    const host = await renderPage();
+    expect(host.querySelector("aside")).toBeNull();
+    expect(host.querySelector("[data-component]")).not.toBeNull();
+  });
+
+  it("leaves a page that declares no block as it is", async () => {
+    pageLayout.value = { components: {} };
+    const host = await renderPage();
+    expect(host.querySelector("aside")).toBeNull();
+  });
+
+  it("stays quiet while the layout is still loading", async () => {
+    pageLayout.value = null;
+    const host = await renderPage();
+    expect(host.querySelector("aside")).toBeNull();
+  });
+});

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

@@ -214,6 +214,7 @@ describe("access gating", () => {
 // The section itself: its composable with every data source stubbed.
 const navPages = ref<{ fullId: string; to: string }[]>([]);
 const unreadCount = ref(0);
+const unreadTone = ref<string | undefined>(undefined);
 const bellPending = ref(true);
 const preferencesLoading = ref(true);
 const colorMode = ref<"light" | "dark" | "system">("dark");
@@ -278,6 +279,7 @@ vi.mock(
   () => ({
     useNotifications: () => ({
       unreadCount,
+      unreadTone,
       areCountsLoaded: {
         get value() {
           return !bellPending.value;
@@ -396,6 +398,7 @@ beforeEach(() => {
     { fullId: "settings.user.appearance", to: "/settings/user/appearance" },
   ];
   unreadCount.value = 0;
+  unreadTone.value = undefined;
   bellPending.value = true;
   preferencesLoading.value = true;
   colorMode.value = "dark";
@@ -445,6 +448,7 @@ describe("Preferences & access section", () => {
     expect(skeletonRows()).toBe(2);
 
     unreadCount.value = 3;
+    unreadTone.value = "error";
     bellPending.value = false;
     resolveAccess({
       roles: ["Admin"],
@@ -465,12 +469,32 @@ describe("Preferences & access section", () => {
         "Dark theme · normal density · increased contrast on",
       ),
     ]);
-    // Unread notifications turn the bell amber.
+    // The bell takes the unread badge's tone, as the server weighs it.
     expect(
       host
         .querySelector("[data-icon='i-ph-bell-ringing']")
         ?.getAttribute("data-tone"),
-    ).toBe("warning");
+    ).toBe("error");
+  });
+
+  it("colours the notifications row with the unread badge's tone, quiet without unread", async () => {
+    preferencesLoading.value = false;
+    bellPending.value = false;
+    unreadCount.value = 2;
+    unreadTone.value = "warning";
+    await mountSection();
+    const bellTone = () =>
+      host.querySelector("[data-icon^='i-ph-bell']")?.getAttribute("data-tone");
+    expect(bellTone()).toBe("warning");
+
+    unreadTone.value = "neutral";
+    await flush();
+    expect(bellTone()).toBe("muted");
+
+    unreadCount.value = 0;
+    unreadTone.value = undefined;
+    await flush();
+    expect(bellTone()).toBe("muted");
   });
 
   it("hides the rows of pages the user cannot open and keeps Your access informative", async () => {