@antelopejs/dms 0.9.2 → 0.9.3

package/frontend-vue/tests/notification-counts-from-writes.test.ts

@@ -1,223 +0,0 @@
-// @vitest-environment jsdom
-/**
- * The bell's counts after a change of the feed: a write (mark read or
- * unread, delete) answers them and its realtime event carries them, so the
- * tab that wrote and every other tab of the user take them as they are. The
- * write's own event, which comes before or after its answer, changes
- * nothing and reads nothing. Through the real composable, its stream plugin
- * and the runtime's state, over a fake feed.
- */
-import { defineComponent, h, nextTick, ref, type App } from "vue";
-import { afterEach, beforeEach, expect, it, vi } from "vitest";
-import { mountInBrowser, stubApiData } from "./helpers/api-data-runtime";
-
-type Tone = "neutral" | "primary" | "warning" | "error";
-interface Row {
-  _id: string;
-  isRead: boolean;
-  tone: Tone;
-}
-interface Counts {
-  all: number;
-  unread: number;
-  unreadTone?: Tone;
-}
-type StreamEvent = { type: string; payload?: Record<string, unknown> };
-
-const TONE_ORDER: Tone[] = ["error", "warning", "primary", "neutral"];
-const feed: Row[] = [];
-
-/** The whole feed's counts, as `countFeedWithUnreadTone` gives them. */
-function countsOf(): Counts {
-  const unread = feed.filter((row) => !row.isRead);
-  const tone = TONE_ORDER.find((t) => unread.some((row) => row.tone === t));
-  return tone
-    ? { all: feed.length, unread: unread.length, unreadTone: tone }
-    : { all: feed.length, unread: unread.length };
-}
-
-const requests: string[] = [];
-// A write's answer can be held, to deliver its echo first.
-let holdWrites: Promise<void> | undefined;
-let failWrites = false;
-const authFetch = vi.fn(async (url: string, options?: { method?: string }) => {
-  const method = options?.method ?? "GET";
-  requests.push(`${method} ${url}`);
-  if (method === "GET" && url.endsWith("/counts")) return countsOf();
-  if (failWrites) throw new Error("refused");
-  const id = url.split("/").pop();
-  const row = feed.find((entry) => entry._id === id);
-  if (url.includes("/mark-read/")) row!.isRead = true;
-  else if (url.includes("/mark-unread/")) row!.isRead = false;
-  else if (url.includes("/delete/")) feed.splice(feed.indexOf(row!), 1);
-  const counts = countsOf();
-  await holdWrites;
-  return { success: true, counts };
-});
-
-let streamHandler: ((event: unknown) => void) | undefined;
-stubApiData(authFetch as never);
-vi.stubGlobal("useComponentEvent", () => ({ sendComponentEvent: vi.fn() }));
-vi.stubGlobal("useDmsUserSession", () => ({
-  user: ref({ _id: "u1" }),
-  loggedIn: ref(true),
-}));
-vi.stubGlobal("useUserRealtime", () => ({
-  subscribe: (_topic: string, handler: (event: unknown) => void) => {
-    streamHandler = handler;
-    return () => {
-      streamHandler = undefined;
-    };
-  },
-}));
-vi.stubGlobal("defineDmsPlugin", (setup: () => void) => setup);
-vi.stubGlobal("watch", (await import("vue")).watch);
-const { useNotifications } = await import(
-  "../layers/dms-layout/app/composables/notification/useNotifications"
-);
-vi.stubGlobal("useNotifications", useNotifications);
-const { default: notificationStream } = await import(
-  "../layers/dms-layout/app/plugins/notification-stream.client"
-);
-
-const mounted: App[] = [];
-let bell: ReturnType<typeof useNotifications>;
-
-/** A tab: the bell's state and the stream plugin, on one runtime. */
-function openTab(): HTMLElement {
-  const Tab = defineComponent({
-    setup() {
-      bell = useNotifications();
-      (notificationStream as unknown as () => void)();
-      return () =>
-        h("span", `${bell.unreadCount.value}:${bell.unreadTone.value ?? "-"}`);
-    },
-  });
-  const { app, container } = mountInBrowser(Tab);
-  mounted.push(app);
-  return container;
-}
-
-/** The server's event for a read state change, with the counts after it. */
-const echo = (type: string, ids: string[]): StreamEvent => ({
-  type,
-  payload: { ids, counts: countsOf() },
-});
-
-async function settle(): Promise<void> {
-  await nextTick();
-  await new Promise((done) => setTimeout(done, 0));
-}
-
-beforeEach(async () => {
-  feed.splice(
-    0,
-    feed.length,
-    { _id: "risk", isRead: false, tone: "error" },
-    { _id: "check", isRead: false, tone: "warning" },
-    { _id: "old", isRead: true, tone: "neutral" },
-  );
-  requests.length = 0;
-  holdWrites = undefined;
-  failWrites = false;
-  const tab = openTab();
-  await bell.fetchBellCounts();
-  await settle();
-  expect(tab.textContent).toBe("2:error");
-  requests.length = 0;
-});
-
-afterEach(() => {
-  mounted.splice(0).forEach((app) => app.unmount());
-});
-
-it("takes the counts a write answers, and reads nothing for its echo after the answer", async () => {
-  await bell.markAsRead("risk");
-  await settle();
-  expect(bell.unreadCount.value).toBe(1);
-  // The next most important unread one gives the tone: only the server knows it.
-  expect(bell.unreadTone.value).toBe("warning");
-
-  streamHandler!(echo("notification:read", ["risk"]));
-  await settle();
-  expect(requests).toEqual([
-    "PUT /dms/pages/settings/user/notifications/mark-read/risk",
-  ]);
-  expect(bell.unreadCount.value).toBe(1);
-
-  await bell.markAsUnread("risk");
-  await bell.deleteNotification("check");
-  await settle();
-  expect(requests).toEqual([
-    "PUT /dms/pages/settings/user/notifications/mark-read/risk",
-    "PUT /dms/pages/settings/user/notifications/mark-unread/risk",
-    "DELETE /dms/pages/settings/user/notifications/delete/check",
-  ]);
-  expect([bell.unreadCount.value, bell.unreadTone.value]).toEqual([1, "error"]);
-});
-
-it("reads nothing when the write's echo comes before its answer", async () => {
-  let release!: () => void;
-  holdWrites = new Promise((done) => {
-    release = done;
-  });
-  const writing = bell.markAsRead("check");
-  await settle();
-  streamHandler!(echo("notification:read", ["check"]));
-  await settle();
-  expect([bell.unreadCount.value, bell.unreadTone.value]).toEqual([1, "error"]);
-  release();
-  await writing;
-  await settle();
-  expect(requests).toEqual([
-    "PUT /dms/pages/settings/user/notifications/mark-read/check",
-  ]);
-  expect(bell.unreadCount.value).toBe(1);
-});
-
-it("takes another tab's changes from their events, without reading", async () => {
-  feed[0]!.isRead = true;
-  streamHandler!(echo("notification:read", ["risk"]));
-  await settle();
-  expect([bell.unreadCount.value, bell.unreadTone.value]).toEqual([
-    1,
-    "warning",
-  ]);
-
-  feed[0]!.isRead = false;
-  streamHandler!(echo("notification:unread", ["risk"]));
-  await settle();
-  expect(bell.unreadTone.value).toBe("error");
-
-  for (const row of feed) row.isRead = true;
-  streamHandler!({
-    type: "notification:all-read",
-    payload: { counts: countsOf() },
-  });
-  await settle();
-  expect([bell.unreadCount.value, bell.unreadTone.value]).toEqual([
-    0,
-    undefined,
-  ]);
-  expect(requests).toEqual([]);
-});
-
-it("reads the counts when an event carries none", async () => {
-  feed[0]!.isRead = true;
-  streamHandler!({ type: "notification:read", payload: { ids: ["risk"] } });
-  await settle();
-  expect(requests).toEqual([
-    "GET /dms/pages/settings/user/notifications/counts",
-  ]);
-  expect(bell.unreadCount.value).toBe(1);
-});
-
-it("keeps the counts when a write fails", async () => {
-  failWrites = true;
-  await expect(bell.markAsRead("risk")).rejects.toThrow("refused");
-  await settle();
-  expect(requests).toEqual([
-    "PUT /dms/pages/settings/user/notifications/mark-read/risk",
-  ]);
-  expect([bell.unreadCount.value, bell.unreadTone.value]).toEqual([2, "error"]);
-});

package/frontend-vue/tests/notification-counts-transfer.test.ts

@@ -1,88 +0,0 @@
-// @vitest-environment jsdom
-/**
- * The header bell's counts as the dashboard frame reads them with the page,
- * through the runtime's real async data: a server render shows the badge,
- * and the browser's bell, and whatever else shows the counts, start from the
- * same counts without asking again. A signed-out visit reads nothing.
- */
-import { defineComponent, h, nextTick, ref, type App } from "vue";
-import { afterEach, beforeEach, expect, it, vi } from "vitest";
-import {
-  hydrate,
-  mountInBrowser,
-  serverRender,
-  stubApiData,
-} from "./helpers/api-data-runtime";
-
-const COUNTS = { all: 5, unread: 3, unreadTone: "warning" };
-const authFetch = vi.fn(async () => structuredClone(COUNTS));
-const loggedIn = ref(true);
-const mounted: App[] = [];
-
-stubApiData(authFetch as never);
-vi.stubGlobal("useDmsUserSession", () => ({ loggedIn }));
-vi.stubGlobal("useComponentEvent", () => ({ sendComponentEvent: vi.fn() }));
-const { useNotifications, useRenderedBellCounts } = await import(
-  "../layers/dms-layout/app/composables/notification/useNotifications"
-);
-vi.stubGlobal("useNotifications", useNotifications);
-
-/** The bell's badge, or the profile's summary: the shared counts. */
-const Counts = defineComponent({
-  setup() {
-    const { unreadCount, unreadTone, areCountsLoaded } = useNotifications();
-    return () =>
-      h(
-        "span",
-        areCountsLoaded.value
-          ? `${unreadCount.value}:${unreadTone.value}`
-          : "unknown",
-      );
-  },
-});
-// As the dashboard frame: in the persistent layout, outside the page's
-// <Suspense>, around the header and the page.
-const Frame = defineComponent({
-  setup() {
-    useRenderedBellCounts();
-    return () => h("div", [h(Counts), h(Counts)]);
-  },
-});
-
-beforeEach(() => {
-  loggedIn.value = true;
-  authFetch.mockClear();
-});
-
-afterEach(() => {
-  mounted.splice(0).forEach((app) => app.unmount());
-  vi.unstubAllEnvs();
-});
-
-it("renders the bell's counts on the server, and the browser starts from them without asking", async () => {
-  vi.stubEnv("SSR", true);
-  const { html, payload } = await serverRender(Frame);
-  vi.stubEnv("SSR", false);
-  expect(html).toBe("<div><span>3:warning</span><span>3:warning</span></div>");
-  expect(authFetch).toHaveBeenCalledTimes(1);
-
-  authFetch.mockClear();
-  const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
-  const { app, container } = hydrate(Frame, html, payload);
-  mounted.push(app);
-  await nextTick();
-  await new Promise((done) => setTimeout(done, 0));
-  expect(authFetch).not.toHaveBeenCalled();
-  expect(container.innerHTML).toBe(html);
-  expect(warn.mock.calls.flat().join(" ")).not.toMatch(/hydration/i);
-  warn.mockRestore();
-});
-
-it("reads nothing for a signed-out visit", async () => {
-  loggedIn.value = false;
-  const { app, container } = mountInBrowser(Frame);
-  mounted.push(app);
-  await nextTick();
-  expect(authFetch).not.toHaveBeenCalled();
-  expect(container.textContent).toBe("unknownunknown");
-});

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

@@ -1,221 +0,0 @@
-// @vitest-environment jsdom
-import {
-  computed,
-  createApp,
-  defineComponent,
-  h,
-  nextTick,
-  onMounted,
-  ref,
-  watch,
-  type App,
-  type Component,
-  type Ref,
-} 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 () => {}),
-}));
-
-// The bell's state the display watches, shared like `useDmsState`.
-const bell = vi.hoisted(() => ({
-  unreadCount: undefined as unknown as Ref<number>,
-  notifications: undefined as unknown as Ref<{ _id: string }[]>,
-}));
-
-vi.mock(
-  "../layers/dms-layout/app/composables/notification/useNotifications",
-  async () => {
-    const vue = await import("vue");
-    bell.unreadCount = vue.ref(0);
-    bell.notifications = vue.ref([]);
-    return {
-      useNotifications: () => ({ ...notifications, ...bell }),
-    };
-  },
-);
-
-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(() => {
-  bell.unreadCount.value = 0;
-  bell.notifications.value = [];
-  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");
-  });
-
-  it("lists the feed again once per change made here, though the change moves the counts", async () => {
-    const refresh = vi.fn(async () => {});
-    const container = mount(NotificationInboxDisplay as Component, {
-      context: contextOf(refresh),
-    });
-    // As the bell does: the write's echo, then its answer, move the count and
-    // rebuild the bell's lists.
-    notifications.markAsRead.mockImplementationOnce(async () => {
-      bell.unreadCount.value = 4;
-      bell.notifications.value = [{ _id: "n1" }];
-      await new Promise((done) => setTimeout(done, 0));
-      bell.unreadCount.value = 3;
-      bell.notifications.value = [{ _id: "n1" }];
-    });
-    container.querySelector<HTMLButtonElement>("article .toggle")!.click();
-    await vi.waitFor(() => expect(refresh).toHaveBeenCalledTimes(1));
-    await new Promise((done) => setTimeout(done, 10));
-    expect(refresh).toHaveBeenCalledTimes(1);
-  });
-
-  it("lists the feed again once per change the stream brings, not when the bell rebuilds its lists", async () => {
-    const refresh = vi.fn(async () => {});
-    mount(NotificationInboxDisplay as Component, {
-      context: contextOf(refresh),
-    });
-    bell.notifications.value = [{ _id: "n1" }, { _id: "n2" }];
-    await nextTick();
-    refresh.mockClear();
-
-    // A read state changing elsewhere rebuilds the lists, then the count moves.
-    bell.notifications.value = [{ _id: "n1" }, { _id: "n2" }];
-    await nextTick();
-    expect(refresh).not.toHaveBeenCalled();
-    bell.unreadCount.value += 1;
-    await nextTick();
-    expect(refresh).toHaveBeenCalledTimes(1);
-
-    // A notification arriving: listed first and counted, together.
-    bell.notifications.value = [{ _id: "n0" }, ...bell.notifications.value];
-    bell.unreadCount.value += 1;
-    await nextTick();
-    expect(refresh).toHaveBeenCalledTimes(2);
-  });
-});