@antelopejs/dms 0.6.1 → 0.7.0

package/frontend-vue/tests/nav-badge-tones.test.ts

@@ -0,0 +1,274 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  onMounted,
+  ref,
+  useTemplateRef,
+  watch,
+  type App,
+  type PropType,
+  type Ref,
+  type VNode,
+} from "vue";
+import type { NavigationMenuItem } from "@nuxt/ui";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { MENU_STATUS_TEXT_CLASSES } from "#dms-core/app/utils/menu";
+import NavigationMenu from "../layers/dms-layout/app/components/navigation/NavigationMenu.vue";
+import SettingsNav from "../layers/dms-layout/app/build/components/pages/settings/shell/SettingsNav.vue";
+import {
+  type NavBadge,
+  useNavBadges,
+} from "../layers/dms-ui/app/build/composables/navigation/useNavBadges";
+
+// A navigation badge is drawn in the tone the server counted it with (the
+// status pills' soft tints), neutral grey without one, and hidden at zero;
+// the count a page publishes live keeps its tone too.
+
+vi.mock("../layers/dms-ui/app/build/components/form/SearchInput.vue", () => ({
+  default: defineComponent({ setup: () => () => h("input") }),
+}));
+
+let state: Map<string, Ref<unknown>>;
+let app: App | undefined;
+let host: HTMLDivElement;
+
+const liveBadges = () =>
+  state.get("dms-nav-badges") as Ref<Record<string, NavBadge>> | undefined;
+
+beforeEach(() => {
+  state = new Map();
+  Object.entries({ computed, ref, watch, onMounted, useTemplateRef }).forEach(
+    ([key, value]) => vi.stubGlobal(key, value),
+  );
+  vi.stubGlobal("useDmsState", (key: string, initial: () => unknown) => {
+    if (!state.has(key)) state.set(key, ref(initial()));
+    return state.get(key);
+  });
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (value: string) => value,
+  }));
+  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);
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+describe("useNavBadges", () => {
+  it("prefers the count a page published, with its tone", () => {
+    const { navBadgeOf, setNavBadge } = useNavBadges();
+    const entry = { fullId: "settings.user.security", badge: "1" };
+
+    expect(navBadgeOf(entry)).toEqual({ label: "1", tone: undefined });
+    setNavBadge(entry.fullId, "2", "error");
+    expect(navBadgeOf(entry)).toEqual({ label: "2", tone: "error" });
+    setNavBadge(entry.fullId, "", "error");
+    expect(navBadgeOf(entry)).toBeUndefined();
+  });
+
+  it("reads the tone the server served next to the badge", () => {
+    const { navBadgeOf } = useNavBadges();
+    expect(
+      navBadgeOf({ fullId: "a", badge: "3", badgeTone: "warning" }),
+    ).toEqual({ label: "3", tone: "warning" });
+    expect(navBadgeOf({ fullId: "a" })).toBeUndefined();
+  });
+});
+
+describe("NavigationMenu badges", () => {
+  // Renders each entry's badge the way UNavigationMenu hands it over.
+  const MenuStub = defineComponent({
+    props: {
+      items: {
+        type: Array as PropType<NavigationMenuItem[][]>,
+        required: true,
+      },
+    },
+    setup(props) {
+      const renderItem = (item: NavigationMenuItem): VNode =>
+        h("div", {
+          "data-entry": item.fullId,
+          "data-badge": item.badge?.label,
+          "data-color": item.badge?.color,
+          "data-variant": item.badge?.variant,
+        });
+      return () => h("nav", props.items.flat().map(renderItem));
+    },
+  });
+
+  const ITEMS: NavigationMenuItem[] = [
+    { label: "Plain", fullId: "pages.plain", to: "/plain", badge: "7" },
+    {
+      label: "Security",
+      fullId: "settings.user.security",
+      to: "/security",
+      badge: "1",
+      badgeTone: "error",
+    },
+    {
+      label: "Notifications",
+      fullId: "settings.user.notifications",
+      to: "/notifications",
+      badge: "4",
+      badgeTone: "primary",
+    },
+  ];
+
+  const badgeOf = (fullId: string) =>
+    host.querySelector<HTMLElement>(`[data-entry="${fullId}"]`)!.dataset;
+
+  function mount(): void {
+    state.set("dms-permission-preview-session", ref(null));
+    state.set("dms-permission-preview-result", ref(null));
+    app = createApp(NavigationMenu, { items: ITEMS });
+    app.component("UNavigationMenu", MenuStub);
+    app.mount(host);
+  }
+
+  it("draws a served count in its tone, and a bare one neutral", () => {
+    mount();
+    expect(badgeOf("pages.plain")).toMatchObject({
+      badge: "7",
+      color: "neutral",
+      variant: "soft",
+    });
+    expect(badgeOf("settings.user.security")).toMatchObject({
+      badge: "1",
+      color: "error",
+    });
+    expect(badgeOf("settings.user.notifications").color).toBe("primary");
+  });
+
+  it("follows the live count and tone, and hides the badge at zero", async () => {
+    mount();
+    const { setNavBadge } = useNavBadges();
+    setNavBadge("settings.user.notifications", "3", "warning");
+    setNavBadge("settings.user.security", "");
+    await Promise.resolve();
+
+    expect(badgeOf("settings.user.notifications")).toMatchObject({
+      badge: "3",
+      color: "warning",
+    });
+    expect(badgeOf("settings.user.security").badge).toBeUndefined();
+  });
+});
+
+describe("SettingsNav badges", () => {
+  const page = (id: string, extra: Record<string, unknown> = {}) => ({
+    id,
+    fullId: `settings.user.${id}`,
+    displayName: id,
+    fullSlug: `/settings/user/${id}`,
+    layoutUrl: `/settings/user/${id}/pagelayout`,
+    children: {},
+    childrenOrders: [],
+    ...extra,
+  });
+
+  const tree = ref({
+    fullId: "",
+    children: {
+      settings: {
+        id: "settings",
+        fullId: "settings",
+        fullSlug: "/settings",
+        displayName: "Settings",
+        children: {
+          user: {
+            id: "user",
+            fullId: "settings.user",
+            fullSlug: "/settings/user",
+            displayName: "Account",
+            children: {
+              profile: page("profile", { badge: "5" }),
+              security: page("security", { badge: "1", badgeTone: "error" }),
+              notifications: page("notifications", {
+                badge: "4",
+                badgeTone: "warning",
+              }),
+            },
+            childrenOrders: ["profile", "security", "notifications"],
+          },
+        },
+        childrenOrders: ["user"],
+      },
+    },
+    childrenOrders: ["settings"],
+  });
+
+  const Link = defineComponent({
+    props: { to: { type: String, default: "" } },
+    setup:
+      (props, { slots }) =>
+      () =>
+        h("a", { "data-to": props.to }, slots.default?.()),
+  });
+
+  const trailBadge = (to: string) =>
+    host.querySelector(`[data-to="${to}"] span:last-child`) as HTMLElement;
+
+  function mount(): void {
+    vi.stubGlobal("useSiteLayout", () => ({ siteLayoutTree: tree }));
+    vi.stubGlobal("useDmsRoute", () => ({ path: "/settings/user/profile" }));
+    app = createApp(SettingsNav);
+    app.component("DmsLink", Link);
+    app.component("UIcon", defineComponent({ setup: () => () => h("i") }));
+    app.mount(host);
+  }
+
+  it("draws each badge in its tone's soft tint, neutral grey without one", () => {
+    mount();
+    expect(trailBadge("/settings/user/profile").className).toContain(
+      "bg-elevated text-muted",
+    );
+    const security = trailBadge("/settings/user/security");
+    expect(security.textContent?.trim()).toBe("1");
+    expect(security.className).toContain("bg-error/12 text-error");
+    expect(trailBadge("/settings/user/notifications").className).toContain(
+      "bg-warning/12 text-warning",
+    );
+  });
+
+  it("hides a badge whose live count fell to zero", async () => {
+    mount();
+    useNavBadges().setNavBadge("settings.user.security", "");
+    await Promise.resolve();
+    expect(trailBadge("/settings/user/security").textContent?.trim()).toBe(
+      "security",
+    );
+    expect(liveBadges()?.value["settings.user.security"]).toEqual({
+      label: "",
+    });
+  });
+});
+
+describe("Security page badge", () => {
+  it("publishes what needs attention in the tone the server weighed", async () => {
+    const { useSecurityOverview } = await import(
+      "../layers/dms-layout/app/build/composables/settings/security/useSecurityOverview"
+    );
+    vi.stubGlobal("useAuthFetch", () => ({
+      $authFetch: vi.fn(async () => ({
+        attention: ["backup_codes_low", "backup_codes_unsaved"],
+        attentionTone: "error",
+      })),
+    }));
+    await useSecurityOverview().refresh();
+    expect(liveBadges()?.value["settings.user.security"]).toEqual({
+      label: "2",
+      tone: "error",
+    });
+  });
+});

package/frontend-vue/tests/nav-card-badge.test.ts

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+import { createApp, defineComponent, h, type App } from "vue";
+import { afterEach, expect, it } from "vitest";
+import NavCard from "../layers/dms-ui/app/components/card/NavCard.vue";
+
+// A nav card of the settings overview carries its page's navigation badge in
+// its top corner, on the title's row, drawn as the settings nav draws it: the
+// badge's soft tint, neutral grey without a tone, nothing without a count.
+
+let app: App | undefined;
+
+function mountCard(props: Record<string, unknown>): HTMLElement {
+  app = createApp({
+    render: () =>
+      h(NavCard, {
+        to: "/settings/user/security",
+        icon: "i-ph-shield",
+        title: "Security",
+        description: "Password, two-step verification and sessions.",
+        ...props,
+      }),
+  });
+  app.component(
+    "DmsLink",
+    defineComponent({
+      setup:
+        (_, { slots }) =>
+        () =>
+          h("a", slots.default?.()),
+    }),
+  );
+  app.component("UIcon", defineComponent({ setup: () => () => h("i") }));
+  app.component("USkeleton", defineComponent({ setup: () => () => h("span") }));
+  const container = document.createElement("div");
+  app.mount(container);
+  return container;
+}
+
+const headRow = (container: HTMLElement) =>
+  container.querySelector("h3")?.parentElement as HTMLElement;
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+});
+
+it("puts the badge last on the title's row, in its tone", () => {
+  const container = mountCard({ badge: "1", badgeTone: "warning" });
+  const badge = headRow(container).lastElementChild as HTMLElement;
+  expect(badge.textContent?.trim()).toBe("1");
+  expect(badge.className).toContain("bg-warning/12 text-warning");
+  expect(badge.className).toContain("rounded-full");
+  expect(badge.className).toContain("shrink-0");
+  // Not repeated as a state line under the description.
+  expect(container.querySelector("a")?.lastElementChild?.tagName).toBe("P");
+});
+
+it("draws a badge without a tone in neutral grey", () => {
+  const container = mountCard({ badge: "59" });
+  const badge = headRow(container).lastElementChild as HTMLElement;
+  expect(badge.textContent?.trim()).toBe("59");
+  expect(badge.className).toContain("bg-elevated text-muted");
+});
+
+it("shows no badge without a count", () => {
+  const container = mountCard({ badge: "" });
+  expect(headRow(container).lastElementChild?.tagName).toBe("I");
+  expect(container.querySelector(".rounded-full")).toBeNull();
+});

package/frontend-vue/tests/nav-card-grid-empty-category.test.ts

@@ -0,0 +1,163 @@
+// @vitest-environment jsdom
+import { computed, createApp, h, ref, type App } from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import NavCardGridBlock from "../layers/dms-ui/app/components/blocks/NavCardGridBlock.vue";
+
+// The settings overview of a member without a role: the Workspace grid lists
+// the workspace pages they can open, and they open none.
+
+const categoryCards = ref<
+  Array<{
+    id: string;
+    title: string;
+    to: string;
+    badge?: string;
+    badgeTone?: string;
+  }>
+>([]);
+
+// Hoisted with the mocks below, which render through it.
+const { stub } = vi.hoisted(() => ({
+  stub: (tag: string, attribute: string) => async () => {
+    const vue = await import("vue");
+    return {
+      default: vue.defineComponent({
+        inheritAttrs: false,
+        props: ["title", "state", "badge", "badgeTone"],
+        setup: (props) => () =>
+          vue.h(tag, {
+            [attribute]: props.title ?? props.state ?? "",
+            "data-badge": props.badge,
+            "data-badge-tone": props.badgeTone,
+            "data-state": props.state,
+          }),
+      }),
+    };
+  },
+}));
+
+vi.mock(
+  "#dms-layout/app/build/composables/navigation/useCategoryNavCards",
+  () => ({
+    useCategoryNavCards: () => ({ cards: categoryCards }),
+    usePreviewEntryVeil: () => ({
+      state: () => null,
+      label: () => "",
+      detail: () => undefined,
+      isActive: ref(false),
+    }),
+  }),
+);
+vi.mock(
+  "../layers/dms-ui/app/build/composables/blocks/useBlockItems",
+  async () => {
+    const { computed: vueComputed } = await import("vue");
+    return {
+      useBlockItems: () => ({
+        items: vueComputed(() => []),
+        isPending: vueComputed(() => false),
+        hasError: vueComputed(() => false),
+        refresh: vi.fn(),
+      }),
+    };
+  },
+);
+
+vi.mock(
+  "../layers/dms-ui/app/components/card/NavCard.vue",
+  stub("a", "data-card"),
+);
+vi.mock(
+  "../layers/dms-ui/app/build/components/permission/PermissionVeil.vue",
+  async () => {
+    const vue = await import("vue");
+    return {
+      default: vue.defineComponent({
+        setup:
+          (_, { slots }) =>
+          () =>
+            vue.h("div", slots.default?.()),
+      }),
+    };
+  },
+);
+vi.mock(
+  "../layers/dms-ui/app/components/section-header/SectionHeader.vue",
+  stub("h2", "data-title"),
+);
+vi.mock(
+  "../layers/dms-ui/app/build/components/blocks/BlockStatus.vue",
+  stub("p", "data-status"),
+);
+
+let app: App | undefined;
+
+function mountGrid(props: Record<string, unknown>): HTMLElement {
+  app = createApp({ render: () => h(NavCardGridBlock, props) });
+  const container = document.createElement("div");
+  app.mount(container);
+  return container;
+}
+
+beforeEach(() => {
+  categoryCards.value = [];
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string) => text,
+  }));
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  vi.unstubAllGlobals();
+});
+
+it("leaves out a category grid whose pages the viewer opens none of", () => {
+  const container = mountGrid({
+    categoryId: "settings.workspace",
+    title: "$page.settings.shell.workspace",
+  });
+  expect(container.querySelector("section")).toBeNull();
+});
+
+it("lists the pages of the category the viewer can open", () => {
+  categoryCards.value = [
+    {
+      id: "settings.workspace.members",
+      title: "$menu.members",
+      to: "/settings/workspace/members",
+    },
+  ];
+  const container = mountGrid({
+    categoryId: "settings.workspace",
+    title: "$page.settings.shell.workspace",
+  });
+  expect(container.querySelector("[data-title]")).not.toBeNull();
+  expect(container.querySelectorAll("[data-card]")).toHaveLength(1);
+});
+
+it("says what the page asks for when there is nothing to list", () => {
+  const container = mountGrid({
+    categoryId: "settings.workspace",
+    empty: { title: "Nothing here" },
+  });
+  expect(container.querySelector("[data-status]")).not.toBeNull();
+});
+
+it("hands each card its page's badge for the corner, not as a state line", () => {
+  categoryCards.value = [
+    {
+      id: "settings.user.security",
+      title: "$menu.security",
+      to: "/settings/user/security",
+      badge: "1",
+      badgeTone: "warning",
+    },
+  ];
+  const container = mountGrid({ categoryId: "settings.user" });
+  const card = container.querySelector("[data-card]") as HTMLElement;
+  expect(card.dataset.badge).toBe("1");
+  expect(card.dataset.badgeTone).toBe("warning");
+  expect(card.dataset.state).toBeUndefined();
+});

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

@@ -11,21 +11,21 @@ import {
   ref,
   watch,
   type App,
+  type Ref,
 } from "vue";
 import NotificationPopover from "../layers/dms-layout/app/build/components/notification/NotificationPopover.vue";
 
 const HTTP_FORBIDDEN = 403;
 const UNREAD_COUNT = 4;
-const UNSEEN_COUNT = 2;
+const NOTIFICATIONS_PAGE = "settings.user.notifications";
 
 interface NotificationsStub {
-  unreadCount: ReturnType<typeof ref<number>>;
-  unseenCount: ReturnType<typeof ref<number>>;
-  notifications: ReturnType<typeof ref<unknown[]>>;
+  unreadCount: Ref<number>;
+  unreadTone: Ref<string | undefined>;
+  notifications: 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 = {
@@ -47,6 +47,7 @@ let app: App;
 let host: HTMLDivElement;
 let errorHandler: ReturnType<typeof vi.fn>;
 let notifications: NotificationsStub;
+let state: Map<string, Ref<unknown>>;
 
 function forbidden(): Promise<never> {
   return Promise.reject(
@@ -99,7 +100,10 @@ function installRuntime(): void {
     onMounted,
     onUnmounted,
   }).forEach(([key, value]) => vi.stubGlobal(key, value));
-  vi.stubGlobal("useDmsState", <T>(_key: string, init: () => T) => ref(init()));
+  vi.stubGlobal("useDmsState", (key: string, init: () => unknown) => {
+    if (!state.has(key)) state.set(key, ref(init()));
+    return state.get(key);
+  });
   vi.stubGlobal("useI18n", () => ({ t: (key: string) => key, locale: "en" }));
   vi.stubGlobal("useUserSession", () => ({ loggedIn: ref(true) }));
   vi.stubGlobal("useTranslation", () => ({
@@ -149,22 +153,32 @@ async function closePopover(): Promise<void> {
   await nextTick();
 }
 
+function badge(): HTMLElement | null {
+  return host.querySelector("[data-bell-badge]");
+}
+
 function badgeText(): string {
-  return host.querySelector("[data-trigger] span")?.textContent?.trim() ?? "";
+  return badge()?.textContent?.trim() ?? "";
+}
+
+/** The badge the bell keeps on the Notifications entry of the navigation. */
+function menuBadge(): unknown {
+  const badges = state.get("dms-nav-badges")?.value as
+    | Record<string, unknown>
+    | undefined;
+  return badges?.[NOTIFICATIONS_PAGE];
 }
 
 beforeEach(() => {
   errorHandler = vi.fn();
+  state = new Map();
   notifications = {
     unreadCount: ref(0),
-    unseenCount: ref(0),
+    unreadTone: ref(undefined),
     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();
@@ -177,38 +191,74 @@ afterEach(() => {
   vi.restoreAllMocks();
 });
 
-it("badges the unseen notifications, not every unread one", async () => {
+it("badges every unread notification, in the tone of the most important", async () => {
+  notifications.fetchBellCounts.mockImplementation(async () => {
+    notifications.unreadCount.value = UNREAD_COUNT;
+    notifications.unreadTone.value = "error";
+  });
+  await mountPopover();
+  expect(badgeText()).toBe(String(UNREAD_COUNT));
+  expect(badge()!.className).toContain("bg-(--ui-color-error-500) text-white");
+});
+
+it("shows the same count and tone as the Notifications entry", async () => {
   notifications.fetchBellCounts.mockImplementation(async () => {
     notifications.unreadCount.value = UNREAD_COUNT;
-    notifications.unseenCount.value = UNSEEN_COUNT;
+    notifications.unreadTone.value = "warning";
   });
   await mountPopover();
-  expect(badgeText()).toBe(String(UNSEEN_COUNT));
+  expect(menuBadge()).toEqual({ label: String(UNREAD_COUNT), tone: "warning" });
+  expect(badge()!.className).toContain("bg-(--ui-color-warning-400)");
+
+  // A new unread error turns both red.
+  notifications.unreadCount.value = UNREAD_COUNT + 1;
+  notifications.unreadTone.value = "error";
+  await nextTick();
+  expect(badgeText()).toBe(String(UNREAD_COUNT + 1));
+  expect(badge()!.className).toContain("bg-(--ui-color-error-500)");
+  expect(menuBadge()).toEqual({
+    label: String(UNREAD_COUNT + 1),
+    tone: "error",
+  });
+});
+
+it("draws an untoned count in the accent, and hides the badge at zero", async () => {
+  notifications.fetchBellCounts.mockImplementation(async () => {
+    notifications.unreadCount.value = 1;
+    notifications.unreadTone.value = "primary";
+  });
+  await mountPopover();
+  expect(badge()!.className).toContain("bg-(--dms-accent-fill)");
+
+  notifications.unreadCount.value = 0;
+  notifications.unreadTone.value = undefined;
+  await nextTick();
+  expect(badge()).toBeNull();
+  expect(menuBadge()).toEqual({ label: "" });
 });
 
 it("hides the badge instead of failing the page when the count is refused", async () => {
   notifications.unreadCount.value = UNREAD_COUNT;
-  notifications.unseenCount.value = UNSEEN_COUNT;
+  notifications.unreadTone.value = "error";
   notifications.fetchBellCounts.mockImplementation(forbidden);
   await mountPopover();
   await vi.waitFor(() => expect(console.warn).toHaveBeenCalled());
   expect(errorHandler).not.toHaveBeenCalled();
   expect(notifications.unreadCount.value).toBe(0);
-  expect(notifications.unseenCount.value).toBe(0);
+  expect(notifications.unreadTone.value).toBeUndefined();
   expect(badgeText()).toBe("");
 });
 
-it("marks the notifications seen on open, and never read on close", async () => {
+it("keeps the count when opened and closed: opening marks nothing", async () => {
   const sendBeacon = vi.fn();
   vi.stubGlobal("navigator", { sendBeacon });
   notifications.unreadCount.value = UNREAD_COUNT;
-  notifications.unseenCount.value = UNSEEN_COUNT;
+  notifications.unreadTone.value = "warning";
   notifications.notifications.value = [UNREAD_NOTIFICATION];
   await mountPopover();
 
   await openPopover();
-  await vi.waitFor(() => expect(notifications.markAllSeen).toHaveBeenCalled());
-  expect(badgeText()).toBe("");
+  expect(badgeText()).toBe(String(UNREAD_COUNT));
   expect(host.querySelector(".bg-primary")).not.toBeNull();
 
   await closePopover();
@@ -216,23 +266,7 @@ it("marks the notifications seen on open, and never read on close", async () =>
   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.markAllSeen).toHaveBeenCalledTimes(1),
-  );
+  expect(badgeText()).toBe(String(UNREAD_COUNT));
 });
 
 it("marks a notification read when it is clicked", async () => {