@antelopejs/dms 0.8.3 → 0.9.1

package/frontend-vue/tests/module-store-catalog.test.ts

@@ -5,11 +5,30 @@ import {
   moduleCategoryOptions,
 } from "../layers/dms-layout/app/build/utils/modules-catalog";
 import {
-  MODULE_STORE_CATALOG,
-  availableStoreModules,
-  moduleInstallCommand,
   type ModuleStoreEntry,
+  filterByScope,
+  isAwaitingFrontend,
+  needsDependencyChoice,
+  sortStoreModules,
+  storeActionBlock,
+  storeActions,
+  storeTileStatus,
+  toModuleStoreEntry,
 } from "../layers/dms-layout/app/build/utils/module-store-catalog";
+import {
+  OTHER_PACKAGE_CHOICE,
+  areDependencyDraftsValid,
+  buildInstallBody,
+  createDependencyDrafts,
+  isNpmPackageName,
+  parseDependencyConfig,
+  validateDependencyDraft,
+} from "../layers/dms-layout/app/build/utils/module-store-install";
+import type {
+  MissingInterface,
+  StoreListingEntry,
+} from "../layers/dms-layout/app/types/module-store";
+import catalogDocument from "../../data/module-store/catalog.json";
 import en from "../layers/dms-layout/i18n/locales/layout-en-GB.json";
 import fr from "../layers/dms-layout/i18n/locales/layout-fr-FR.json";
 
@@ -33,16 +52,33 @@ const resolve = (value: string): string => {
   return typeof text === "string" ? text : value;
 };
 
-function storeEntry(
+function listingEntry(
   id: string,
-  overrides: Partial<ModuleStoreEntry> = {},
-): ModuleStoreEntry {
+  overrides: Partial<StoreListingEntry> = {},
+): StoreListingEntry {
   return {
     id,
-    packageName: `@antelopejs/dms-${id}`,
+    package: `@antelopejs/dms-${id}`,
+    icon: "i-ph-cube",
+    category: "data",
     title: id[0].toUpperCase() + id.slice(1),
     description: `${id} description`,
-    icon: "i-ph-cube",
+    state: "available",
+    updateAvailable: false,
+    compatible: true,
+    frontend: "none",
+    missingInterfaces: [],
+    dependents: [],
+    ...overrides,
+  };
+}
+
+function storeEntry(
+  id: string,
+  overrides: Partial<ModuleStoreEntry> = {},
+): ModuleStoreEntry {
+  return {
+    ...toModuleStoreEntry(listingEntry(id)),
     catalogCategory: "Data",
     ...overrides,
   };
@@ -53,32 +89,95 @@ const catalog = [
     catalogCategory: "Content",
     description: "Asset library",
   }),
-  storeEntry("database"),
+  storeEntry("database", { state: "active", installedVersion: "0.1.2" }),
   storeEntry("lang", { title: "Translations", catalogCategory: "Content" }),
-  storeEntry("ai", { catalogCategory: "AI" }),
+  storeEntry("ai", {
+    catalogCategory: "AI",
+    state: "disabled",
+    installedVersion: "0.2.1",
+  }),
 ];
 
+const actionKinds = (entry: StoreListingEntry) =>
+  storeActions(entry).map((action) => action.kind);
+
 describe("module store catalog", () => {
-  it("hides the modules already installed", () => {
-    const available = availableStoreModules(
-      catalog,
-      new Set(["database", "demo"]),
-      resolve,
-    );
-    expect(available.map((entry) => entry.id)).toEqual(["ai", "media", "lang"]);
+  it("sorts the modules by their shown name", () => {
+    expect(
+      sortStoreModules(catalog, resolve).map((entry) => entry.title),
+    ).toEqual(["Ai", "Database", "Media", "Translations"]);
   });
 
-  it("lists every module, by name, when none is installed", () => {
+  it("splits installed modules, paused ones included, from available ones", () => {
     expect(
-      availableStoreModules(catalog, new Set(), resolve).map(
-        (entry) => entry.title,
+      filterByScope(catalog, "installed").map((entry) => entry.id),
+    ).toEqual(["database", "ai"]);
+    expect(
+      filterByScope(catalog, "available").map((entry) => entry.id),
+    ).toEqual(["media", "lang"]);
+    expect(filterByScope(catalog, "all")).toHaveLength(4);
+  });
+
+  it("counts a failed install as available, a failed update as installed", () => {
+    const failedInstall = listingEntry("api", { state: "error" });
+    const failedUpdate = listingEntry("api", {
+      state: "error",
+      installedVersion: "0.3.0",
+    });
+    expect(filterByScope([failedInstall], "available")).toHaveLength(1);
+    expect(filterByScope([failedUpdate], "installed")).toHaveLength(1);
+    expect(actionKinds(failedInstall)).toEqual(["install"]);
+    expect(actionKinds(failedUpdate)).toEqual(["apply", "uninstall"]);
+  });
+
+  it("offers each state its actions, the main one first", () => {
+    expect(actionKinds(listingEntry("a"))).toEqual(["install"]);
+    expect(actionKinds(listingEntry("a", { state: "active" }))).toEqual([
+      "disable",
+      "uninstall",
+    ]);
+    expect(
+      actionKinds(
+        listingEntry("a", { state: "active", updateAvailable: true }),
       ),
-    ).toEqual(["Ai", "Database", "Media", "Translations"]);
+    ).toEqual(["update", "disable", "uninstall"]);
+    expect(actionKinds(listingEntry("a", { state: "disabled" }))).toEqual([
+      "enable",
+      "uninstall",
+    ]);
+    expect(actionKinds(listingEntry("a", { state: "busy" }))).toEqual([]);
   });
 
-  it("is empty once every module is installed", () => {
-    const installed = new Set(catalog.map((entry) => entry.id));
-    expect(availableStoreModules(catalog, installed, resolve)).toEqual([]);
+  it("asks for confirmation before uninstalling only", () => {
+    const confirmed = storeActions(listingEntry("a", { state: "disabled" }))
+      .filter((action) => action.confirm)
+      .map((action) => action.kind);
+    expect(confirmed).toEqual(["uninstall"]);
+  });
+
+  it("flags an update on an active module's pill", () => {
+    expect(
+      storeTileStatus(
+        listingEntry("a", { state: "active", updateAvailable: true }),
+      ).labelKey,
+    ).toBe("update_available");
+    expect(storeTileStatus(listingEntry("a", { state: "busy" })).dot).toBe(
+      "live",
+    );
+  });
+
+  it("waits on the frontend only once the operation is over", () => {
+    expect(isAwaitingFrontend(listingEntry("a", { frontend: "pending" }))).toBe(
+      true,
+    );
+    expect(
+      isAwaitingFrontend(
+        listingEntry("a", { state: "busy", frontend: "pending" }),
+      ),
+    ).toBe(false);
+    expect(isAwaitingFrontend(listingEntry("a", { frontend: "unknown" }))).toBe(
+      false,
+    );
   });
 
   it("searches the name, description, category and id", () => {
@@ -95,23 +194,6 @@ describe("module store catalog", () => {
     expect(search("payments")).toEqual([]);
   });
 
-  it("filters by category, combined with the search", () => {
-    expect(
-      filterModules(catalog, {
-        query: "",
-        category: "Content",
-        resolve,
-      }).map((entry) => entry.id),
-    ).toEqual(["media", "lang"]);
-    expect(
-      filterModules(catalog, {
-        query: "lang",
-        category: "Data",
-        resolve,
-      }),
-    ).toEqual([]);
-  });
-
   it("offers the categories present, with their counts", () => {
     expect(moduleCategoryOptions(catalog, resolve)).toEqual([
       { value: "AI", label: "AI", count: 1 },
@@ -119,31 +201,168 @@ describe("module store catalog", () => {
       { value: "Data", label: "Data", count: 1 },
     ]);
   });
+});
+
+const REDIS: MissingInterface = {
+  interfacePackage: "@antelopejs/interface-redis",
+  candidates: [
+    { name: "redis", package: "@antelopejs/redis" },
+    { name: "valkey", package: "@antelopejs/valkey" },
+  ],
+};
+const QUEUE: MissingInterface = {
+  interfacePackage: "@antelopejs/interface-queue",
+  candidates: [],
+};
+
+const FRONTEND_REQUIREMENT = {
+  range: ">=0.7.0",
+  running: "0.6.0",
+  target: "0.7.2",
+  command: "pnpm add @antelopejs/dms-frontend@0.7.2",
+  breaks: [],
+};
+
+describe("module store blocked actions", () => {
+  const released = (overrides: Partial<StoreListingEntry> = {}) =>
+    listingEntry("cache", { latestVersion: "1.0.0", ...overrides });
+
+  it("lets a releasable module install and update", () => {
+    expect(storeActionBlock(released(), "install")).toBeUndefined();
+    expect(storeActionBlock(released(), "update")).toBeUndefined();
+  });
 
-  it("shows the AntelopeJS CLI command that adds the package", () => {
-    expect(moduleInstallCommand(storeEntry("media"))).toBe(
-      "ajs project modules add @antelopejs/dms-media",
+  it("blocks a release without a version, on another interface or dms-frontend", () => {
+    expect(storeActionBlock(listingEntry("cache"), "install")).toBe(
+      "no_release",
+    );
+    expect(storeActionBlock(released({ compatible: false }), "update")).toBe(
+      "incompatible",
     );
+    expect(
+      storeActionBlock(
+        released({ frontendRequirement: FRONTEND_REQUIREMENT }),
+        "install",
+      ),
+    ).toBe("frontend");
+  });
+
+  it("asks for the missing interfaces on install, refuses them on update", () => {
+    const missing = released({ missingInterfaces: [REDIS] });
+    expect(storeActionBlock(missing, "install")).toBeUndefined();
+    expect(needsDependencyChoice(missing, "install")).toBe(true);
+    expect(storeActionBlock(missing, "update")).toBe("interfaces");
+    expect(needsDependencyChoice(missing, "update")).toBe(false);
+    expect(needsDependencyChoice(released(), "install")).toBe(false);
+  });
+
+  it("keeps a module others need from being paused or removed", () => {
+    const needed = released({ state: "active", dependents: ["@acme/jobs"] });
+    expect(storeActionBlock(needed, "disable")).toBe("dependents");
+    expect(storeActionBlock(needed, "uninstall")).toBe("dependents");
+    expect(storeActionBlock(needed, "enable")).toBeUndefined();
+    expect(
+      storeActionBlock(released({ state: "active" }), "uninstall"),
+    ).toBeUndefined();
   });
 });
 
-describe("official module list", () => {
+describe("module store install dialog", () => {
+  it("accepts npm package names only", () => {
+    expect(isNpmPackageName("redis")).toBe(true);
+    expect(isNpmPackageName("@antelopejs/redis")).toBe(true);
+    expect(isNpmPackageName("Redis")).toBe(false);
+    expect(isNpmPackageName("git+https://github.com/a/b.git")).toBe(false);
+    expect(isNpmPackageName("./local/module")).toBe(false);
+    expect(isNpmPackageName("@scope")).toBe(false);
+    expect(isNpmPackageName("a".repeat(215))).toBe(false);
+  });
+
+  it("reads an empty config as none and refuses anything but an object", () => {
+    expect(parseDependencyConfig("  ")).toEqual({ isValid: true });
+    expect(parseDependencyConfig('{ "url": "redis://cache" }')).toEqual({
+      isValid: true,
+      config: { url: "redis://cache" },
+    });
+    expect(parseDependencyConfig("[]").isValid).toBe(false);
+    expect(parseDependencyConfig("null").isValid).toBe(false);
+    expect(parseDependencyConfig("{ url: }").isValid).toBe(false);
+  });
+
+  it("preselects the first candidate, or the other package without one", () => {
+    expect(
+      createDependencyDrafts([REDIS, QUEUE]).map((draft) => draft.choice),
+    ).toEqual(["@antelopejs/redis", OTHER_PACKAGE_CHOICE]);
+  });
+
+  it("keeps what an earlier attempt picked for the same interface", () => {
+    const [earlier] = createDependencyDrafts([REDIS]);
+    const edited = { ...earlier!, choice: "@antelopejs/valkey", config: "{}" };
+    expect(createDependencyDrafts([REDIS, QUEUE], [edited])[0]).toEqual(edited);
+  });
+
+  it("flags a missing or invalid package and a config that is not an object", () => {
+    const [draft] = createDependencyDrafts([QUEUE]);
+    expect(validateDependencyDraft(draft!)).toEqual({
+      package: "package_required",
+    });
+    expect(
+      validateDependencyDraft({
+        ...draft!,
+        otherPackage: "github:acme/queue",
+        config: "[1]",
+      }),
+    ).toEqual({ package: "package_invalid", config: "config_invalid" });
+    expect(
+      areDependencyDraftsValid([{ ...draft!, otherPackage: " @acme/queue " }]),
+    ).toBe(true);
+  });
+
+  it("builds the install body, leaving out an empty config", () => {
+    const [redis, queue] = createDependencyDrafts([REDIS, QUEUE]);
+    expect(
+      buildInstallBody("cache", [
+        redis!,
+        { ...queue!, otherPackage: "@acme/queue", config: '{"size":2}' },
+      ]),
+    ).toEqual({
+      id: "cache",
+      dependencies: [
+        {
+          interfacePackage: "@antelopejs/interface-redis",
+          package: "@antelopejs/redis",
+        },
+        {
+          interfacePackage: "@antelopejs/interface-queue",
+          package: "@acme/queue",
+          config: { size: 2 },
+        },
+      ],
+    });
+    expect(buildInstallBody("cache", [])).toEqual({ id: "cache" });
+  });
+});
+
+describe("bundled module catalog", () => {
+  const entries = catalogDocument.modules.map((entry) =>
+    toModuleStoreEntry(listingEntry(entry.id, { category: entry.category })),
+  );
+
   it("has unique ids and packages", () => {
-    const ids = MODULE_STORE_CATALOG.map((entry) => entry.id);
-    const packages = MODULE_STORE_CATALOG.map((entry) => entry.packageName);
+    const ids = catalogDocument.modules.map((entry) => entry.id);
+    const packages = catalogDocument.modules.map((entry) => entry.package);
     expect(new Set(ids).size).toBe(ids.length);
     expect(new Set(packages).size).toBe(packages.length);
   });
 
   it("translates every name, description and category in both locales", () => {
     for (const messages of [en, fr]) {
-      for (const entry of MODULE_STORE_CATALOG) {
+      for (const entry of entries) {
         for (const key of [
-          entry.title,
-          entry.description,
+          `$modules.store.catalog.${entry.id}.title`,
+          `$modules.store.catalog.${entry.id}.description`,
           entry.catalogCategory,
         ]) {
-          expect(key.startsWith("$")).toBe(true);
           expect(typeof lookup(messages, key.slice(1)), key).toBe("string");
         }
       }

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

@@ -117,7 +117,7 @@ describe("findModulePageMatch", () => {
     "/modules/saas/billing/invoices": page("/modules/saas/billing/invoices", {
       displayName: "Invoices",
       module: "saas",
-      category: { displayName: "Billing" },
+      categoryId: "saas.billing",
     }),
     "/modules/saas/invoice/:id": page("/modules/saas/invoice/:id", {
       displayName: "Invoice detail",
@@ -130,9 +130,22 @@ describe("findModulePageMatch", () => {
     }),
   };
 
+  // Every category once, by full id: a page names its own.
+  const layout = {
+    pages,
+    categories: {
+      "saas.billing": {
+        id: "billing",
+        fullId: "saas.billing",
+        fullSlug: "/modules/saas/billing",
+        displayName: "Billing",
+      },
+    },
+  };
+
   it("finds an openable page of an installed module and its section", () => {
     expect(
-      findModulePageMatch(pages, "invoice", new Set(["saas"]), resolve),
+      findModulePageMatch(layout, "invoice", new Set(["saas"]), resolve),
     ).toEqual({
       moduleId: "saas",
       path: "/modules/saas/billing/invoices",
@@ -143,10 +156,10 @@ describe("findModulePageMatch", () => {
 
   it("ignores hidden pages, parameterised pages and other modules", () => {
     expect(
-      findModulePageMatch(pages, "detail", new Set(["saas"]), resolve),
+      findModulePageMatch(layout, "detail", new Set(["saas"]), resolve),
     ).toBeNull();
     expect(
-      findModulePageMatch(pages, "invoices", new Set(["hidden"]), resolve),
+      findModulePageMatch(layout, "invoices", new Set(["hidden"]), resolve),
     ).toBeNull();
   });
 });

package/frontend-vue/tests/modules-listing-transfer.test.ts

@@ -0,0 +1,95 @@
+// @vitest-environment jsdom
+/**
+ * The modules catalog through the runtime's real async data: a server render
+ * reads it for a platform owner and hands it to the browser, which does not
+ * ask again (its live readouts would no longer match the markup); a member
+ * reads nothing; two renders in flight at once each render their own.
+ */
+import { computed, defineComponent, h, nextTick, ref, type App } from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { hydrate, serverRender, stubApiData } from "./helpers/api-data-runtime";
+import { useModulesListing } from "../layers/dms-layout/app/composables/page/useModulesListing";
+
+const ordersModule = { id: "orders", title: "Orders", hasAccess: true };
+const billingModule = { id: "billing", title: "Billing", hasAccess: true };
+
+const authFetch = vi.fn();
+const isOwner = ref(true);
+const mounted: App[] = [];
+
+const Catalog = defineComponent({
+  async setup() {
+    const listing = useModulesListing();
+    await listing.loadModulesListing();
+    return () =>
+      h(
+        "p",
+        listing.loadingError.value?.kind ??
+          (listing.modules.value ?? []).map((entry) => entry.id).join(","),
+      );
+  },
+});
+const Page = defineComponent({
+  setup: () => () => h("main", [h(Catalog)]),
+});
+
+beforeEach(() => {
+  isOwner.value = true;
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("HTTP_FORBIDDEN", 403);
+  vi.stubGlobal("useIsOwner", () => computed(() => isOwner.value));
+  stubApiData(authFetch);
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+  vi.unstubAllGlobals();
+  vi.resetAllMocks();
+});
+
+it("hands the listing the server rendered to the browser, which does not ask again", async () => {
+  authFetch.mockResolvedValue([ordersModule]);
+  const { html, payload } = await serverRender(Page);
+  expect(html).toBe("<main><p>orders</p></main>");
+  expect(authFetch).toHaveBeenCalledTimes(1);
+
+  authFetch.mockClear();
+  const { app, container } = hydrate(Page, html, payload);
+  mounted.push(app);
+  await nextTick();
+  await new Promise((done) => setTimeout(done, 0));
+  expect(authFetch).not.toHaveBeenCalled();
+  expect(container.innerHTML).toBe(html);
+});
+
+it("reads nothing for a member", async () => {
+  isOwner.value = false;
+  const { html } = await serverRender(Page);
+  expect(html).toBe("<main><p></p></main>");
+  expect(authFetch).not.toHaveBeenCalled();
+});
+
+it("shows a refused listing as forbidden", async () => {
+  authFetch.mockRejectedValue(
+    Object.assign(new Error("Forbidden"), { statusCode: 403 }),
+  );
+  const { html } = await serverRender(Page);
+  expect(html).toBe("<main><p>forbidden</p></main>");
+});
+
+it("renders each request's own listing when two renders are in flight at once", async () => {
+  let answerFirst!: (value: unknown) => void;
+  authFetch
+    .mockReturnValueOnce(
+      new Promise((resolve) => {
+        answerFirst = resolve;
+      }),
+    )
+    .mockResolvedValueOnce([billingModule]);
+  const first = serverRender(Page);
+  const second = serverRender(Page);
+  await new Promise((done) => setTimeout(done, 0));
+  answerFirst([ordersModule]);
+  expect((await first).html).toBe("<main><p>orders</p></main>");
+  expect((await second).html).toBe("<main><p>billing</p></main>");
+});

package/frontend-vue/tests/multi-account-validate.test.ts

@@ -1,5 +1,8 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { validateAccount } from "../layers/dms-core/app/composables/auth/useMultiAccount";
+import {
+  refreshSessionSurfaces,
+  validateAccount,
+} from "../layers/dms-core/app/composables/auth/useMultiAccount";
 import type { StoredAccount } from "../layers/dms-core/app/types/auth";
 
 function makeAccount(overrides: Partial<StoredAccount> = {}): StoredAccount {
@@ -97,3 +100,22 @@ describe("validateAccount", () => {
     expect(account).not.toHaveProperty("refreshToken");
   });
 });
+
+describe("refreshSessionSurfaces", () => {
+  afterEach(() => vi.unstubAllGlobals());
+
+  it("reads the session again, then reloads the site layout through Inertia", async () => {
+    const calls: string[] = [];
+    vi.stubGlobal("useSiteLayout", () => ({
+      resync: vi.fn(async () => calls.push("inertia reload")),
+      refresh: vi.fn(async () => calls.push("site layout fetch")),
+    }));
+    vi.stubGlobal("usePermissions", () => ({
+      clear: () => calls.push("permissions cleared"),
+    }));
+
+    await refreshSessionSurfaces(async () => calls.push("session"));
+
+    expect(calls).toEqual(["session", "permissions cleared", "inertia reload"]);
+  });
+});

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

@@ -3,6 +3,7 @@ import {
   computed,
   createApp,
   defineComponent,
+  effectScope,
   h,
   onMounted,
   ref,
@@ -51,8 +52,6 @@ beforeEach(() => {
   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);
@@ -86,6 +85,43 @@ describe("useNavBadges", () => {
   });
 });
 
+describe("the counts a page visit carries", () => {
+  it("draws each one, over a static badge", () => {
+    const { navBadgeOf, applyCountedNavBadges } = useNavBadges();
+    applyCountedNavBadges({
+      "settings.user.notifications": { badge: "4", tone: "error" },
+    });
+    expect(
+      navBadgeOf({ fullId: "settings.user.notifications", badge: "new" }),
+    ).toEqual({ label: "4", tone: "error" });
+  });
+
+  it("drops the badge of an entry the next visit no longer counts", () => {
+    const { navBadgeOf, applyCountedNavBadges } = useNavBadges();
+    applyCountedNavBadges({
+      "settings.user.notifications": { badge: "4" },
+      "settings.workspace.invites": { badge: "2" },
+    });
+    applyCountedNavBadges({ "settings.workspace.invites": { badge: "1" } });
+
+    expect(
+      navBadgeOf({ fullId: "settings.user.notifications" }),
+    ).toBeUndefined();
+    expect(navBadgeOf({ fullId: "settings.workspace.invites" })).toEqual({
+      label: "1",
+    });
+  });
+
+  it("leaves the badges alone when a visit carries none, such as a frontend page", () => {
+    const { navBadgeOf, applyCountedNavBadges } = useNavBadges();
+    applyCountedNavBadges({ "settings.user.notifications": { badge: "4" } });
+    applyCountedNavBadges(undefined);
+    expect(navBadgeOf({ fullId: "settings.user.notifications" })).toEqual({
+      label: "4",
+    });
+  });
+});
+
 describe("NavigationMenu badges", () => {
   // Renders each entry's badge the way UNavigationMenu hands it over.
   const MenuStub = defineComponent({
@@ -102,6 +138,7 @@ describe("NavigationMenu badges", () => {
           "data-badge": item.badge?.label,
           "data-color": item.badge?.color,
           "data-variant": item.badge?.variant,
+          "data-prefetch": String(item.prefetch),
         });
       return () => h("nav", props.items.flat().map(renderItem));
     },
@@ -150,6 +187,19 @@ describe("NavigationMenu badges", () => {
     expect(badgeOf("settings.user.notifications").color).toBe("primary");
   });
 
+  it("lets Inertia prefetch each linked page on hover, with no fetch of its own", () => {
+    const fetch = vi.fn();
+    vi.stubGlobal("fetch", fetch);
+    vi.stubGlobal("$fetch", fetch);
+    mount();
+    for (const item of ITEMS)
+      expect(badgeOf(item.fullId as string).prefetch).toBe("true");
+    host
+      .querySelector("nav")!
+      .dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
+    expect(fetch).not.toHaveBeenCalled();
+  });
+
   it("follows the live count and tone, and hides the badge at zero", async () => {
     mount();
     const { setNavBadge } = useNavBadges();
@@ -259,13 +309,26 @@ describe("Security page badge", () => {
     const { useSecurityOverview } = await import(
       "../layers/dms-layout/app/build/composables/settings/security/useSecurityOverview"
     );
+    const { engine, browserRuntime } = await import(
+      "./helpers/api-data-runtime"
+    );
+    const { useApiData } = await import(
+      "../layers/dms-core/app/composables/auth/useApiData"
+    );
+    vi.stubGlobal("useDmsAsyncData", engine.useDmsAsyncData);
+    vi.stubGlobal("useDmsFetch", engine.useDmsFetch);
+    vi.stubGlobal("useApiData", useApiData);
     vi.stubGlobal("useAuthFetch", () => ({
       $authFetch: vi.fn(async () => ({
         attention: ["backup_codes_low", "backup_codes_unsaved"],
         attentionTone: "error",
       })),
     }));
-    await useSecurityOverview().refresh();
+    browserRuntime();
+    const scope = effectScope();
+    const overview = scope.run(() => useSecurityOverview())!;
+    await overview.refresh();
+    scope.stop();
     expect(liveBadges()?.value["settings.user.security"]).toEqual({
       label: "2",
       tone: "error",