@antelopejs/dms 0.5.6 → 0.6.0

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

@@ -0,0 +1,152 @@
+import { describe, expect, it } from "vitest";
+import type {
+  ModuleCatalogEntry,
+  PageInfo,
+} from "../layers/dms-layout/app/types/page";
+import {
+  MODULE_CATEGORY_ALL,
+  MODULE_CATEGORY_OTHER,
+  filterModules,
+  findModulePageMatch,
+  moduleCategoryOptions,
+  sortModules,
+  summarizeModules,
+} from "../layers/dms-layout/app/build/utils/modules-catalog";
+
+const resolve = (value: string) =>
+  value === MODULE_CATEGORY_OTHER ? "Other" : value;
+
+function entry(
+  id: string,
+  overrides: Partial<ModuleCatalogEntry> = {},
+): ModuleCatalogEntry {
+  return {
+    id,
+    title: id[0].toUpperCase() + id.slice(1),
+    description: `${id} description`,
+    icon: "i-ph-cube",
+    hasAccess: true,
+    landingSlug: `/modules/${id}`,
+    ...overrides,
+  };
+}
+
+const modules = [
+  entry("media", { catalogCategory: "Content", status: "live" }),
+  entry("database", { catalogCategory: "Data", status: "update" }),
+  entry("automation", { catalogCategory: "Operations", status: "attention" }),
+  entry("ai", { status: "beta" }),
+  entry("legacy"),
+];
+
+describe("summarizeModules", () => {
+  it("counts installed modules by status, missing status reading as live", () => {
+    expect(summarizeModules(modules)).toEqual({
+      installed: 5,
+      updates: 1,
+      attention: 1,
+      beta: 1,
+    });
+  });
+});
+
+describe("moduleCategoryOptions", () => {
+  it("lists present categories alphabetically with Other last", () => {
+    expect(
+      moduleCategoryOptions(modules, resolve).map((o) => [o.label, o.count]),
+    ).toEqual([
+      ["Content", 1],
+      ["Data", 1],
+      ["Operations", 1],
+      ["Other", 2],
+    ]);
+  });
+});
+
+describe("filterModules", () => {
+  it("matches the title, description and category, case-insensitively", () => {
+    const ids = (query: string) =>
+      filterModules(modules, {
+        query,
+        category: MODULE_CATEGORY_ALL,
+        resolve,
+      }).map((m) => m.id);
+    expect(ids("DATA")).toEqual(["database"]);
+    expect(ids("operations")).toEqual(["automation"]);
+    expect(ids("  ")).toHaveLength(5);
+  });
+
+  it("narrows to a category, including the Other bucket", () => {
+    expect(
+      filterModules(modules, {
+        query: "",
+        category: MODULE_CATEGORY_OTHER,
+        resolve,
+      }).map((m) => m.id),
+    ).toEqual(["ai", "legacy"]);
+  });
+});
+
+describe("sortModules", () => {
+  it("puts recently opened modules first, then the rest by name", () => {
+    const visitedAt = new Map([
+      ["media", 100],
+      ["automation", 300],
+    ]);
+    expect(
+      sortModules(modules, "recent", visitedAt, resolve).map((m) => m.id),
+    ).toEqual(["automation", "media", "ai", "database", "legacy"]);
+    expect(
+      sortModules(modules, "name", visitedAt, resolve).map((m) => m.id),
+    ).toEqual(["ai", "automation", "database", "legacy", "media"]);
+  });
+});
+
+describe("findModulePageMatch", () => {
+  const page = (slug: string, extra: Record<string, unknown>): PageInfo =>
+    ({
+      id: slug,
+      fullId: slug,
+      fullSlug: slug,
+      layoutUrl: `${slug}/pagelayout`,
+      displayName: "",
+      ...extra,
+    }) as unknown as PageInfo;
+
+  const pages = {
+    "/modules/saas/billing/invoices": page("/modules/saas/billing/invoices", {
+      displayName: "Invoices",
+      module: "saas",
+      category: { displayName: "Billing" },
+    }),
+    "/modules/saas/invoice/:id": page("/modules/saas/invoice/:id", {
+      displayName: "Invoice detail",
+      module: "saas",
+    }),
+    "/modules/hidden/invoices": page("/modules/hidden/invoices", {
+      displayName: "Invoices",
+      module: "hidden",
+      hidden: true,
+    }),
+  };
+
+  it("finds an openable page of an installed module and its section", () => {
+    expect(
+      findModulePageMatch(pages, "invoice", new Set(["saas"]), resolve),
+    ).toEqual({
+      moduleId: "saas",
+      path: "/modules/saas/billing/invoices",
+      pageTitle: "Invoices",
+      sectionTitle: "Billing",
+    });
+  });
+
+  it("ignores hidden pages, parameterised pages and other modules", () => {
+    expect(
+      findModulePageMatch(pages, "detail", new Set(["saas"]), resolve),
+    ).toBeNull();
+    expect(
+      findModulePageMatch(pages, "invoices", new Set(["hidden"]), resolve),
+    ).toBeNull();
+  });
+});

package/frontend-vue/tests/notification-inbox-display.test.ts

@@ -0,0 +1,169 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  onMounted,
+  ref,
+  watch,
+  type App,
+  type Component,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import NotificationInboxDisplay from "../layers/dms-layout/app/build/components/pages/settings/notification/NotificationInboxDisplay.vue";
+
+const notifications = vi.hoisted(() => ({
+  markAsRead: vi.fn(async () => {}),
+  markAsUnread: vi.fn(async () => {}),
+  deleteNotification: vi.fn(async () => {}),
+}));
+
+vi.mock(
+  "../layers/dms-layout/app/composables/notification/useNotifications",
+  async () => {
+    const vue = await import("vue");
+    return {
+      useNotifications: () => ({
+        ...notifications,
+        unreadCount: vue.ref(0),
+        notifications: vue.ref([]),
+      }),
+    };
+  },
+);
+
+vi.mock(
+  "../layers/dms-layout/app/build/composables/notification/useNotificationCatalog",
+  async () => {
+    const vue = await import("vue");
+    return {
+      useNotificationCatalog: () => ({
+        isLoaded: vue.ref(true),
+        loadCatalog: vi.fn(),
+        findCategory: () => undefined,
+        findSubject: () => undefined,
+      }),
+    };
+  },
+);
+
+vi.mock(
+  "../layers/dms-layout/app/build/components/pages/settings/notification/NotificationInboxItem.vue",
+  async () => {
+    const vue = await import("vue");
+    return {
+      default: vue.defineComponent({
+        props: { notification: Object },
+        emits: ["open", "toggle-read", "delete"],
+        setup:
+          (props, { emit }) =>
+          () =>
+            vue.h("article", { "data-id": props.notification?._id }, [
+              vue.h("button", {
+                class: "toggle",
+                onClick: () => emit("toggle-read"),
+              }),
+              vue.h("button", {
+                class: "remove",
+                onClick: () => emit("delete"),
+              }),
+            ]),
+      }),
+    };
+  },
+);
+
+vi.mock("#dms-ui/app/build/components/table/Empty.vue", async () => {
+  const vue = await import("vue");
+  return {
+    default: vue.defineComponent({ render: () => vue.h("p", "empty") }),
+  };
+});
+
+vi.mock("#dms-ui/app/build/components/table/Pagination.vue", async () => {
+  const vue = await import("vue");
+  return { default: vue.defineComponent({ render: () => vue.h("nav") }) };
+});
+
+let app: App | undefined;
+
+function mount(component: Component, props: Record<string, unknown>) {
+  app = createApp(defineComponent({ setup: () => () => h(component, props) }));
+  for (const [name, stub] of Object.entries({
+    UButton: defineComponent({
+      props: { label: String },
+      emits: ["click"],
+      setup:
+        (props, { emit }) =>
+        () =>
+          h("button", { onClick: () => emit("click") }, props.label),
+    }),
+    DmsEyebrow: defineComponent({
+      props: { label: String },
+      setup: (props) => () => h("h3", props.label),
+    }),
+    USkeleton: defineComponent({ render: () => h("span") }),
+  })) {
+    app.component(name, stub);
+  }
+  const container = document.createElement("div");
+  app.mount(container);
+  return container;
+}
+
+beforeEach(() => {
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("watch", watch);
+  vi.stubGlobal("onMounted", onMounted);
+  vi.stubGlobal("useI18n", () => ({
+    t: (key: string) => key,
+    locale: ref("en-GB"),
+  }));
+  vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
+  vi.stubGlobal("navigateDms", vi.fn());
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  vi.unstubAllGlobals();
+  vi.clearAllMocks();
+});
+
+describe("notifications inbox display", () => {
+  const now = new Date().toISOString();
+  const contextOf = (refresh: () => Promise<void>) => ({
+    items: [
+      { _id: "n1", title: "Deploy", isRead: false, createdAt: now },
+      { _id: "n2", title: "Invoice", isRead: true, createdAt: now },
+    ],
+    loading: false,
+    refresh,
+  });
+
+  it("lists the feed under day headings and lists it again after a change", async () => {
+    const refresh = vi.fn(async () => {});
+    const container = mount(NotificationInboxDisplay as Component, {
+      context: contextOf(refresh),
+    });
+    expect(container.querySelector("h3")?.textContent).toBe(
+      "page.settings.notifications.day_today",
+    );
+    const rows = container.querySelectorAll("article");
+    expect([...rows].map((row) => row.getAttribute("data-id"))).toEqual([
+      "n1",
+      "n2",
+    ]);
+
+    rows[0]!.querySelector<HTMLButtonElement>(".toggle")!.click();
+    await vi.waitFor(() => expect(refresh).toHaveBeenCalledTimes(1));
+    expect(notifications.markAsRead).toHaveBeenCalledWith("n1");
+
+    rows[1]!.querySelector<HTMLButtonElement>(".toggle")!.click();
+    rows[1]!.querySelector<HTMLButtonElement>(".remove")!.click();
+    await vi.waitFor(() => expect(refresh).toHaveBeenCalledTimes(3));
+    expect(notifications.markAsUnread).toHaveBeenCalledWith("n2");
+    expect(notifications.deleteNotification).toHaveBeenCalledWith("n2");
+  });
+});

package/frontend-vue/tests/notification-popover-errors.test.ts

@@ -1,6 +1,7 @@
 // @vitest-environment jsdom
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import {
+  computed,
   createApp,
   defineComponent,
   h,
@@ -15,13 +16,33 @@ import NotificationPopover from "../layers/dms-layout/app/build/components/notif
 
 const HTTP_FORBIDDEN = 403;
 const UNREAD_COUNT = 4;
+const UNSEEN_COUNT = 2;
 
 interface NotificationsStub {
   unreadCount: ReturnType<typeof ref<number>>;
-  fetchUnreadCount: ReturnType<typeof vi.fn>;
+  unseenCount: ReturnType<typeof ref<number>>;
+  notifications: ReturnType<typeof ref<unknown[]>>;
+  fetchBellCounts: ReturnType<typeof vi.fn>;
   fetchNotifications: ReturnType<typeof vi.fn>;
+  markAsRead: ReturnType<typeof vi.fn>;
+  markAllSeen: ReturnType<typeof vi.fn>;
 }
 
+const UNREAD_NOTIFICATION = {
+  _id: "n1",
+  userId: "u1",
+  icon: "i-ph-bell",
+  title: "Hello",
+  description: "World",
+  params: null,
+  linkTo: null,
+  isRead: false,
+  categoryId: "system",
+  subjectId: "general",
+  createdAt: "2026-10-02T10:00:00.000Z",
+  updatedAt: "2026-10-02T10:00:00.000Z",
+};
+
 let app: App;
 let host: HTMLDivElement;
 let errorHandler: ReturnType<typeof vi.fn>;
@@ -47,10 +68,21 @@ const Popover = defineComponent({
           { "data-trigger": "", onClick: () => emit("update:open", true) },
           slots.default?.(),
         ),
+        h("button", {
+          "data-close": "",
+          onClick: () => emit("update:open", false),
+        }),
         props.open ? slots.content?.() : null,
       ]),
 });
 
+const Card = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", { "data-card": "" }, slots.default?.()),
+});
+
 const Passthrough = defineComponent({
   setup:
     (_, { slots }) =>
@@ -59,9 +91,15 @@ const Passthrough = defineComponent({
 });
 
 function installRuntime(): void {
-  Object.entries({ ref, watch, nextTick, onMounted, onUnmounted }).forEach(
-    ([key, value]) => vi.stubGlobal(key, value),
-  );
+  Object.entries({
+    ref,
+    computed,
+    watch,
+    nextTick,
+    onMounted,
+    onUnmounted,
+  }).forEach(([key, value]) => vi.stubGlobal(key, value));
+  vi.stubGlobal("useDmsState", <T>(_key: string, init: () => T) => ref(init()));
   vi.stubGlobal("useI18n", () => ({ t: (key: string) => key, locale: "en" }));
   vi.stubGlobal("useUserSession", () => ({ loggedIn: ref(true) }));
   vi.stubGlobal("useTranslation", () => ({
@@ -69,9 +107,7 @@ function installRuntime(): void {
   }));
   vi.stubGlobal("useNotifications", () => ({
     ...notifications,
-    notifications: ref([]),
     hasMore: ref(false),
-    markAllAsRead: vi.fn(),
   }));
   vi.stubGlobal("useInfiniteScroll", () => ({
     isLoadingMore: ref(false),
@@ -91,19 +127,44 @@ async function mountPopover(): Promise<void> {
   app.component("UButton", Passthrough);
   app.component("USeparator", Passthrough);
   app.component("UIcon", Passthrough);
+  app.component("UCard", Card);
   app.mount(host);
   await vi.waitFor(() =>
-    expect(notifications.fetchUnreadCount).toHaveBeenCalled(),
+    expect(notifications.fetchBellCounts).toHaveBeenCalled(),
   );
   await nextTick();
 }
 
+async function openPopover(): Promise<void> {
+  host.querySelector<HTMLElement>("[data-trigger]")!.click();
+  await vi.waitFor(() =>
+    expect(notifications.fetchNotifications).toHaveBeenCalled(),
+  );
+  await nextTick();
+}
+
+async function closePopover(): Promise<void> {
+  host.querySelector<HTMLElement>("[data-close]")!.click();
+  await nextTick();
+  await nextTick();
+}
+
+function badgeText(): string {
+  return host.querySelector("[data-trigger] span")?.textContent?.trim() ?? "";
+}
+
 beforeEach(() => {
   errorHandler = vi.fn();
   notifications = {
     unreadCount: ref(0),
-    fetchUnreadCount: vi.fn(),
+    unseenCount: ref(0),
+    notifications: ref([]),
+    fetchBellCounts: vi.fn(),
     fetchNotifications: vi.fn(),
+    markAsRead: vi.fn(),
+    markAllSeen: vi.fn(async () => {
+      notifications.unseenCount.value = 0;
+    }),
   };
   vi.spyOn(console, "warn").mockImplementation(() => {});
   installRuntime();
@@ -116,31 +177,89 @@ afterEach(() => {
   vi.restoreAllMocks();
 });
 
-it("shows the unread badge when the count loads", async () => {
-  notifications.fetchUnreadCount.mockImplementation(async () => {
+it("badges the unseen notifications, not every unread one", async () => {
+  notifications.fetchBellCounts.mockImplementation(async () => {
     notifications.unreadCount.value = UNREAD_COUNT;
+    notifications.unseenCount.value = UNSEEN_COUNT;
   });
   await mountPopover();
-  expect(host.textContent).toContain(String(UNREAD_COUNT));
+  expect(badgeText()).toBe(String(UNSEEN_COUNT));
 });
 
 it("hides the badge instead of failing the page when the count is refused", async () => {
   notifications.unreadCount.value = UNREAD_COUNT;
-  notifications.fetchUnreadCount.mockImplementation(forbidden);
+  notifications.unseenCount.value = UNSEEN_COUNT;
+  notifications.fetchBellCounts.mockImplementation(forbidden);
   await mountPopover();
   await vi.waitFor(() => expect(console.warn).toHaveBeenCalled());
   expect(errorHandler).not.toHaveBeenCalled();
   expect(notifications.unreadCount.value).toBe(0);
-  expect(host.textContent).not.toContain(String(UNREAD_COUNT));
+  expect(notifications.unseenCount.value).toBe(0);
+  expect(badgeText()).toBe("");
 });
 
-it("keeps the page alive when the notification list is refused on open", async () => {
-  notifications.fetchNotifications.mockImplementation(forbidden);
+it("marks the notifications seen on open, and never read on close", async () => {
+  const sendBeacon = vi.fn();
+  vi.stubGlobal("navigator", { sendBeacon });
+  notifications.unreadCount.value = UNREAD_COUNT;
+  notifications.unseenCount.value = UNSEEN_COUNT;
+  notifications.notifications.value = [UNREAD_NOTIFICATION];
   await mountPopover();
-  host.querySelector<HTMLElement>("[data-trigger]")!.click();
+
+  await openPopover();
+  await vi.waitFor(() => expect(notifications.markAllSeen).toHaveBeenCalled());
+  expect(badgeText()).toBe("");
+  expect(host.querySelector(".bg-primary")).not.toBeNull();
+
+  await closePopover();
+  window.dispatchEvent(new Event("beforeunload"));
+  expect(notifications.markAsRead).not.toHaveBeenCalled();
+  expect(sendBeacon).not.toHaveBeenCalled();
+  expect(notifications.unreadCount.value).toBe(UNREAD_COUNT);
+});
+
+it("does not mark seen again when nothing new arrived", async () => {
+  await mountPopover();
+  await openPopover();
+  await closePopover();
+  expect(notifications.markAllSeen).not.toHaveBeenCalled();
+});
+
+it("marks seen on close what arrived while the list was open", async () => {
+  await mountPopover();
+  await openPopover();
+  notifications.unseenCount.value = 1;
+  await closePopover();
   await vi.waitFor(() =>
-    expect(notifications.fetchNotifications).toHaveBeenCalled(),
+    expect(notifications.markAllSeen).toHaveBeenCalledTimes(1),
   );
+});
+
+it("marks a notification read when it is clicked", async () => {
+  notifications.notifications.value = [UNREAD_NOTIFICATION];
+  await mountPopover();
+  await openPopover();
+  host.querySelector<HTMLElement>("[data-card]")!.click();
+  await vi.waitFor(() =>
+    expect(notifications.markAsRead).toHaveBeenCalledWith("n1"),
+  );
+});
+
+it("does not mark an already read notification again", async () => {
+  notifications.notifications.value = [
+    { ...UNREAD_NOTIFICATION, isRead: true },
+  ];
+  await mountPopover();
+  await openPopover();
+  host.querySelector<HTMLElement>("[data-card]")!.click();
+  await nextTick();
+  expect(notifications.markAsRead).not.toHaveBeenCalled();
+});
+
+it("keeps the page alive when the notification list is refused on open", async () => {
+  notifications.fetchNotifications.mockImplementation(forbidden);
+  await mountPopover();
+  await openPopover();
   await vi.waitFor(() => expect(console.warn).toHaveBeenCalled());
   expect(errorHandler).not.toHaveBeenCalled();
   expect(host.textContent).toContain("notification.dropdown.no_notifications");