@antelopejs/dms 0.8.2 → 0.9.0

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

@@ -4,11 +4,13 @@ import {
   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";
@@ -19,16 +21,20 @@ const notifications = vi.hoisted(() => ({
   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,
-        unreadCount: vue.ref(0),
-        notifications: vue.ref([]),
-      }),
+      useNotifications: () => ({ ...notifications, ...bell }),
     };
   },
 );
@@ -113,6 +119,8 @@ function mount(component: Component, props: Record<string, unknown>) {
 }
 
 beforeEach(() => {
+  bell.unreadCount.value = 0;
+  bell.notifications.value = [];
   vi.stubGlobal("computed", computed);
   vi.stubGlobal("watch", watch);
   vi.stubGlobal("onMounted", onMounted);
@@ -166,4 +174,48 @@ describe("notifications inbox display", () => {
     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);
+  });
 });

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

@@ -22,6 +22,7 @@ const NOTIFICATIONS_PAGE = "settings.user.notifications";
 interface NotificationsStub {
   unreadCount: Ref<number>;
   unreadTone: Ref<string | undefined>;
+  areCountsLoaded: Ref<boolean>;
   notifications: Ref<unknown[]>;
   fetchBellCounts: ReturnType<typeof vi.fn>;
   fetchNotifications: ReturnType<typeof vi.fn>;
@@ -105,7 +106,7 @@ function installRuntime(): void {
     return state.get(key);
   });
   vi.stubGlobal("useI18n", () => ({ t: (key: string) => key, locale: "en" }));
-  vi.stubGlobal("useUserSession", () => ({ loggedIn: ref(true) }));
+  vi.stubGlobal("useDmsUserSession", () => ({ loggedIn: ref(true) }));
   vi.stubGlobal("useTranslation", () => ({
     processI18n: (value: string) => value,
   }));
@@ -175,6 +176,9 @@ beforeEach(() => {
   notifications = {
     unreadCount: ref(0),
     unreadTone: ref(undefined),
+    // Not read with the page (signed in since the app started): the bell
+    // reads them once mounted.
+    areCountsLoaded: ref(false),
     notifications: ref([]),
     fetchBellCounts: vi.fn(),
     fetchNotifications: vi.fn(),
@@ -298,3 +302,19 @@ it("keeps the page alive when the notification list is refused on open", async (
   expect(errorHandler).not.toHaveBeenCalled();
   expect(host.textContent).toContain("notification.dropdown.no_notifications");
 });
+
+it("does not read the counts again when the page brought them", async () => {
+  notifications.areCountsLoaded.value = true;
+  notifications.unreadCount.value = 2;
+  app = createApp(NotificationPopover);
+  app.config.globalProperties.$t = (key: string) => key;
+  for (const name of ["UButton", "USeparator", "UIcon"])
+    app.component(name, Passthrough);
+  app.component("UPopover", Popover);
+  app.component("UCard", Card);
+  app.mount(host);
+  await nextTick();
+  await new Promise((done) => setTimeout(done, 0));
+  expect(notifications.fetchBellCounts).not.toHaveBeenCalled();
+  expect(host.textContent).toContain("2");
+});

package/frontend-vue/tests/oauth-complete-handoff.test.ts

@@ -0,0 +1,209 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  Suspense,
+  watch,
+  type App,
+  type Ref,
+} from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { usePostLoginRedirect } from "../layers/dms-auth/app/composables/usePostLoginRedirect";
+import { usePageLayout } from "../layers/dms-layout/app/composables/page/usePageLayout";
+import { useSiteLayout } from "../layers/dms-layout/app/composables/page/useSiteLayout";
+import type { PageLayout } from "../layers/dms-layout/app/types/page";
+
+// The OAuth completion page, drawn by the real page layout cache: the
+// post-login redirect refreshes the site layout for the new identity, which
+// empties that cache and remounts the page while its layout comes back.
+
+const { default: OAuthCompletePage } = await import(
+  "../layers/dms-auth/app/custom-pages/auth/oauth-complete.vue"
+);
+
+const PATH = "/auth/oauth/complete";
+const LAYOUT_URL = `${PATH}/pagelayout`;
+const SITE_LAYOUT_URL = "/dms/sitelayout";
+const HANDOFF_URL = "/auth/oauth/handoff";
+const HOMEPAGE = "/home";
+
+const state = new Map<string, Ref>();
+const authFetch = vi.fn();
+const fetchHandoff = vi.fn();
+const navigate = vi.fn();
+let mounts = 0;
+let route: { path: string; query: Record<string, string> };
+let app: App;
+let host: HTMLDivElement;
+
+const completionLayout: PageLayout = {
+  components: { complete: { options: {} } },
+  layout: {},
+} as unknown as PageLayout;
+
+const siteResponse = {
+  siteLayout: {
+    pages: {
+      [PATH]: {
+        id: "auth-oauth-complete",
+        fullId: "auth-oauth-complete",
+        fullSlug: PATH,
+        displayName: "Completing",
+        layoutUrl: LAYOUT_URL,
+        publicAccess: true,
+      },
+    },
+    categories: {},
+  },
+  siteLayoutTree: undefined,
+  quickActions: undefined,
+  modules: {},
+  isOwner: false,
+};
+
+const Page = defineComponent({
+  async setup() {
+    const { pageLayout } = await usePageLayout();
+    return () =>
+      h(
+        "main",
+        Object.keys(pageLayout.value?.components ?? {}).map((key) =>
+          h(OAuthCompletePage, { key }),
+        ),
+      );
+  },
+});
+
+function installRuntime() {
+  const runtime = {
+    runWithContext: (fn: () => unknown) => fn(),
+    $i18n: { setLocale: vi.fn() },
+  };
+  Object.entries({ computed, ref, watch }).forEach(([key, value]) =>
+    vi.stubGlobal(key, value),
+  );
+  vi.stubGlobal("onMounted", (hook: () => unknown) =>
+    onMounted(() => {
+      mounts += 1;
+      return hook();
+    }),
+  );
+  vi.stubGlobal("useDmsApp", () => runtime);
+  vi.stubGlobal("useDmsRoute", () => route);
+  vi.stubGlobal("useDmsState", (key: string, initial: () => unknown) => {
+    if (!state.has(key)) state.set(key, ref(initial()));
+    return state.get(key);
+  });
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
+  vi.stubGlobal("useSiteLayout", useSiteLayout);
+  vi.stubGlobal("useHomepage", () => HOMEPAGE);
+  vi.stubGlobal("useDmsUserSession", () => ({
+    fetch: async () => undefined,
+    user: ref({ _id: "user" }),
+  }));
+  vi.stubGlobal("useMultiAccount", () => ({ addCurrentAccount: vi.fn() }));
+  vi.stubGlobal("usePostLoginRedirect", usePostLoginRedirect);
+  vi.stubGlobal("navigateDms", navigate);
+  vi.stubGlobal("$fetch", (url: string, options: unknown) =>
+    url === HANDOFF_URL ? fetchHandoff(options) : Promise.reject(url),
+  );
+}
+
+function mountCompletionPage() {
+  route.path = PATH;
+  const layout = useSiteLayout();
+  layout.siteLayout.value = siteResponse.siteLayout as never;
+  layout.pageLayouts.value = { [LAYOUT_URL]: completionLayout };
+  app = createApp({
+    render: () => h(Suspense, null, { default: () => h(Page) }),
+  });
+  app.config.globalProperties.$t = (key: string) => key;
+  app.component("UIcon", defineComponent({ setup: () => () => h("i") }));
+  app.mount(host);
+}
+
+const siteLayoutFetches = () =>
+  authFetch.mock.calls.filter(([url]) => url === SITE_LAYOUT_URL).length;
+
+async function settle() {
+  for (let tick = 0; tick < 20; tick++) {
+    await Promise.resolve();
+    await nextTick();
+  }
+}
+
+beforeEach(() => {
+  state.clear();
+  mounts = 0;
+  // Answered on later tasks, like the network, the page layout first as on
+  // the playground: the page is drawn again before the redirect leaves it.
+  authFetch.mockImplementation(async (url: string) => {
+    const site = url === SITE_LAYOUT_URL;
+    await new Promise((resolve) => setTimeout(resolve, site ? 5 : 0));
+    return site ? siteResponse : completionLayout;
+  });
+  fetchHandoff.mockResolvedValue({ kind: "none" });
+  route = reactive({ path: PATH, query: {} });
+  // Leaving the page unmounts it, as the router does: the completion page
+  // has no layout on any other route.
+  navigate.mockImplementation(async (to: string | { path: string }) => {
+    route.path = typeof to === "string" ? to : to.path;
+  });
+  installRuntime();
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+  vi.unstubAllGlobals();
+  vi.resetAllMocks();
+});
+
+it("consumes the handoff once when the identity refresh remounts the page", async () => {
+  mountCompletionPage();
+  await vi.waitFor(() =>
+    expect(navigate).toHaveBeenCalledWith(HOMEPAGE, { replace: true }),
+  );
+  await settle();
+
+  expect(fetchHandoff).toHaveBeenCalledOnce();
+  expect(siteLayoutFetches()).toBe(1);
+  expect(navigate).toHaveBeenCalledOnce();
+  // The refresh did empty the cache and remount the page: the new instance
+  // joined the completion already running.
+  expect(mounts).toBe(2);
+});
+
+it("redirects to the sign-in page once when the handoff fails", async () => {
+  fetchHandoff.mockRejectedValue(new Error("offline"));
+  mountCompletionPage();
+  await vi.waitFor(() => expect(navigate).toHaveBeenCalled());
+  await settle();
+
+  expect(fetchHandoff).toHaveBeenCalledOnce();
+  expect(navigate).toHaveBeenCalledExactlyOnceWith(
+    { path: "/auth", query: { oauth_error: "error.oauth.failed" } },
+    { replace: true },
+  );
+});
+
+it("completes again on a later visit, once the previous one settled", async () => {
+  mountCompletionPage();
+  await vi.waitFor(() => expect(navigate).toHaveBeenCalledOnce());
+  await settle();
+  app.unmount();
+
+  mountCompletionPage();
+  await vi.waitFor(() => expect(navigate).toHaveBeenCalledTimes(2));
+  await settle();
+
+  expect(fetchHandoff).toHaveBeenCalledTimes(2);
+});

package/frontend-vue/tests/onboarding-middleware.test.ts

@@ -12,7 +12,7 @@ beforeEach(() => {
   vi.stubGlobal("defineDmsMiddleware", (handler: Middleware) => handler);
   vi.stubGlobal("navigateDms", navigateDms);
   vi.stubGlobal("useOnboarding", onboarding);
-  vi.stubGlobal("useUserSession", () => session);
+  vi.stubGlobal("useDmsUserSession", () => session);
   vi.stubGlobal("useHomepage", () => "/dashboard");
 });
 

package/frontend-vue/tests/onboarding-transfer.test.ts

@@ -0,0 +1,106 @@
+// @vitest-environment jsdom
+/**
+ * The onboarding status the global middleware reads while a server renders a
+ * page reaches the browser with the page, through the runtime's real state
+ * transfer: the browser's run of the middleware asks nothing.
+ */
+import { createApp, createSSRApp, defineComponent, h, nextTick } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import type { App } from "vue";
+import type { DmsFrontendRuntime } from "#dms/frontend-module";
+
+const engine = await import("#dms/frontend-module");
+vi.stubGlobal("useDmsState", engine.useDmsState);
+vi.stubGlobal("defineDmsMiddleware", engine.defineDmsMiddleware);
+vi.stubGlobal("navigateDms", engine.navigateDms);
+vi.stubGlobal("useDmsUserSession", () => ({ loggedIn: { value: true } }));
+vi.stubGlobal("useHomepage", () => "/dashboard");
+
+const $authFetch = vi.fn(async () => ({ has_onboarded: true }));
+vi.stubGlobal("useAuthFetch", () => ({ $authFetch }));
+// The status is read once per app however many callers ask (the preload
+// started with the app, the middleware).
+// No DMS app runs here: each runtime holds the deduper on a state of its own.
+vi.stubGlobal(
+  "useDmsApp",
+  () => engine.useDmsState("onboarding-test-app", () => ({})).value,
+);
+const { createTrailingDeduper } = await import(
+  "../layers/dms-core/app/utils/trailingDeduper"
+);
+vi.stubGlobal("createTrailingDeduper", createTrailingDeduper);
+const { useTrailingDeduper } = await import(
+  "../layers/dms-core/app/composables/useTrailingDeduper"
+);
+vi.stubGlobal("useTrailingDeduper", useTrailingDeduper);
+
+const { useOnboarding } = await import(
+  "../layers/dms-onboarding/app/composables/onboarding/useOnboarding"
+);
+vi.stubGlobal("useOnboarding", useOnboarding);
+const { default: onboardingMiddleware } = await import(
+  "../layers/dms-onboarding/app/middleware/onboarding.global"
+);
+
+const Page = defineComponent({
+  setup() {
+    engine.defineDmsPageMeta({});
+    const info = engine.useDmsState<{ hasOnboarded: boolean } | null>(
+      "dms-onboarding-info",
+    );
+    return () => h("p", info.value?.hasOnboarded ? "onboarded" : "unknown");
+  },
+});
+
+const mounted: App[] = [];
+
+function attach(app: App, runtime: DmsFrontendRuntime): void {
+  runtime.route.path = "/dashboard";
+  runtime.route.fullPath = "/dashboard";
+  engine.provideDmsFrontendRuntime(app, runtime);
+}
+
+beforeEach(async () => {
+  $authFetch.mockClear();
+  await engine.setupFrontendModules([
+    {
+      options: { public: {} },
+      module: {
+        setup(sdk) {
+          sdk.registerMiddleware("onboarding", onboardingMiddleware, {
+            global: true,
+          });
+        },
+      },
+    },
+  ]);
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+});
+
+it("hands the onboarding status the server read to the browser", async () => {
+  const server = engine.createDmsFrontendRuntime(undefined, {}, true);
+  const serverApp = createSSRApp(Page);
+  attach(serverApp, server);
+  expect(await renderToString(serverApp)).toBe("<p>onboarded</p>");
+  expect($authFetch).toHaveBeenCalledTimes(1);
+  const payload = structuredClone(engine.serializeDmsPayload(server));
+  expect(payload.state["dms-onboarding-info"]).toEqual({ hasOnboarded: true });
+
+  $authFetch.mockClear();
+  const browser = engine.createDmsFrontendRuntime(undefined, {});
+  engine.restoreDmsPayload(browser, payload);
+  const browserApp = createApp(Page);
+  attach(browserApp, browser);
+  const host = document.createElement("div");
+  browserApp.mount(host);
+  mounted.push(browserApp);
+  await nextTick();
+  await new Promise((done) => setTimeout(done, 0));
+
+  expect($authFetch).not.toHaveBeenCalled();
+  expect(host.textContent).toBe("onboarded");
+});

package/frontend-vue/tests/page-data-refresh.test.ts

@@ -0,0 +1,141 @@
+// @vitest-environment jsdom
+/**
+ * A page's `useApiData` reads follow the page: `refreshPageBlocks()` (an
+ * action of the user) and an event on one of the page's realtime topics read
+ * them again through `refreshDmsPageData()`, without a `refresh()` of their
+ * own. A read that refreshes on its own triggers opts out.
+ */
+import { type App, createApp, defineComponent, h, nextTick, ref } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { RealtimeTopicHandler } from "../layers/dms-core/app/composables/realtime/useUserRealtime";
+import { useRealDataEngine } from "./fixtures/dataEngine";
+import { refreshPageBlocks } from "../layers/dms-ui/app/utils/blockRefresh";
+
+const requests: string[] = [];
+// Holds the answers back while set.
+let held: Promise<void> | undefined;
+vi.stubGlobal("useAuthFetch", () => ({
+  $authFetch: async (url: string) => {
+    requests.push(url);
+    await held;
+    return { url };
+  },
+}));
+
+const { useApiData } = await import(
+  "../layers/dms-core/app/composables/auth/useApiData"
+);
+const { usePageDataRefresh } = await import(
+  "../layers/dms-ui/app/build/composables/live/usePageDataRefresh"
+);
+
+// Past the one-frame window a burst of refreshes collapses into.
+const settle = () => new Promise((resolve) => setTimeout(resolve, 40));
+
+const pageTopics = ref<string[]>([]);
+const handlers = new Map<string, Set<RealtimeTopicHandler>>();
+function subscribe(topic: string, handler: RealtimeTopicHandler) {
+  if (!handlers.has(topic)) handlers.set(topic, new Set());
+  handlers.get(topic)!.add(handler);
+  return () => handlers.get(topic)?.delete(handler);
+}
+function publish(topic: string, event: object): void {
+  for (const handler of handlers.get(topic) ?? [])
+    handler(event as Parameters<RealtimeTopicHandler>[0]);
+}
+
+const mounted: App[] = [];
+
+async function mountPage(): Promise<void> {
+  const Page = defineComponent({
+    setup() {
+      usePageDataRefresh({ pageTopics, subscribe });
+      useApiData("/api/orders");
+      useApiData("/api/own-triggers", { refreshOnPageRefresh: false });
+      return () => h("div");
+    },
+  });
+  const app = createApp(Page);
+  app.mount(document.createElement("div"));
+  mounted.push(app);
+  await settle();
+}
+
+beforeEach(() => {
+  useRealDataEngine();
+  requests.length = 0;
+  pageTopics.value = [];
+  handlers.clear();
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+});
+
+describe("the page's data refresh", () => {
+  it("reads the page's data again on refreshPageBlocks()", async () => {
+    await mountPage();
+    expect(requests.sort()).toEqual(["/api/orders", "/api/own-triggers"]);
+    requests.length = 0;
+
+    refreshPageBlocks();
+    await settle();
+
+    expect(requests).toEqual(["/api/orders"]);
+  });
+
+  it("resolves refreshPageBlocks() once the page's data is read again", async () => {
+    await mountPage();
+    requests.length = 0;
+    let release!: () => void;
+    held = new Promise<void>((resolve) => (release = resolve));
+    let done = false;
+    const refreshed = refreshPageBlocks().then(() => (done = true));
+    await settle();
+    expect(requests).toEqual(["/api/orders"]);
+    expect(done).toBe(false);
+
+    release();
+    held = undefined;
+    await refreshed;
+    expect(done).toBe(true);
+  });
+
+  it("joins the refreshes of one burst", async () => {
+    await mountPage();
+    requests.length = 0;
+    await Promise.all([refreshPageBlocks(), refreshPageBlocks()]);
+    expect(requests).toEqual(["/api/orders"]);
+  });
+
+  it("reads it again on an event of one of the page's topics", async () => {
+    await mountPage();
+    pageTopics.value = ["table:orders"];
+    await nextTick();
+    requests.length = 0;
+
+    publish("table:orders", { topic: "table:orders", type: "updated" });
+    publish("table:orders", { topic: "table:orders", type: "updated" });
+    await settle();
+    expect(requests).toEqual(["/api/orders"]);
+
+    // A presence snapshot rides the topic too, and changes no data.
+    requests.length = 0;
+    publish("table:orders", { topic: "table:orders", entries: [] });
+    await settle();
+    expect(requests).toEqual([]);
+  });
+
+  it("stops following the topics the page no longer has", async () => {
+    await mountPage();
+    pageTopics.value = ["table:orders"];
+    await nextTick();
+    pageTopics.value = ["table:invoices"];
+    await nextTick();
+    requests.length = 0;
+
+    publish("table:orders", { topic: "table:orders", type: "updated" });
+    await settle();
+    expect(requests).toEqual([]);
+  });
+});

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

@@ -28,6 +28,16 @@ import {
   usePageFillHeight,
 } from "../layers/dms-layout/app/composables/layout/usePageFillHeight";
 
+// The page's data refresh and the visit's navigation badges read the
+// realtime session and Inertia's page, which these tests do not run.
+vi.mock(
+  "../layers/dms-ui/app/build/composables/live/usePageDataRefresh",
+  () => ({ usePageDataRefresh: () => {} }),
+);
+vi.mock(
+  "../layers/dms-layout/app/build/composables/navigation/useVisitNavBadges",
+  () => ({ useVisitNavBadges: () => {} }),
+);
 vi.mock(
   "../layers/dms-layout/app/build/components/layout/DashboardSidebar.vue",
   () => ({ default: () => null }),
@@ -151,7 +161,7 @@ function installRuntime(): void {
     PAGE_FILL_HEIGHT_CLASSES,
     providePageFillHeight,
     usePageFillHeight,
-    createError: vi.fn(),
+    createDmsError: vi.fn(),
     defineDmsPageMeta: vi.fn(),
     firstAccessiblePagePath: vi.fn(),
     navigateDms: vi.fn(),
@@ -159,7 +169,7 @@ function installRuntime(): void {
     providePageRealtime: vi.fn(),
     resolveDmsComponent: () => "div",
     runCustomValidation: vi.fn(),
-    showError: vi.fn(),
+    showDmsError: vi.fn(),
     validateRequiredQueryParams: vi.fn(),
     useDefinedFunctions: () => ({ getFunction: () => undefined }),
     useDmsCookie: <T>(_name: string, options: { default?: () => T } = {}) =>
@@ -179,6 +189,9 @@ function installRuntime(): void {
       reconcileSession: async () => {},
       redirectToAuth: async () => {},
     }),
+    // The page brought its site layout.
+    useRenderedSiteLayout: () => {},
+    useRenderedBellCounts: () => {},
     useSiteLayout: () => ({
       siteLayout: ref({ pages: {} }),
       siteLayoutTree: ref([]),
@@ -197,7 +210,7 @@ function installRuntime(): void {
     }),
     useI18n: () => ({ t: (key: string) => key }),
     useTranslation: () => ({ processI18n: (value: string) => value }),
-    useUserSession: () => ({ loggedIn: ref(true) }),
+    useDmsUserSession: () => ({ loggedIn: ref(true) }),
   };
   Object.entries(runtime).forEach(([name, value]) =>
     vi.stubGlobal(name, value),