@antelopejs/dms 0.4.5 → 0.4.6

package/frontend-vue/tests/layout-banners.test.ts

@@ -0,0 +1,224 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createApp,
+  createSSRApp,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+  type App,
+  type Ref,
+} from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import DashboardBanners from "../layers/dms-layout/app/build/components/layout/DashboardBanners.vue";
+import {
+  resolveLayoutBannerPresentation,
+  useLayoutBanners,
+} from "../layers/dms-layout/app/composables/layout/useLayoutBanners";
+import type {
+  LayoutBanner,
+  LayoutBannerVariant,
+  SiteLayout,
+} from "../layers/dms-layout/app/types/page";
+
+const DISMISSED_BANNERS_COOKIE = "dms-dismissed-banners";
+
+const siteLayout = ref<SiteLayout | undefined>();
+let dismissedCookie: Ref<string[]>;
+const cookieNames: string[] = [];
+
+const banner = (extra: Partial<LayoutBanner> = {}): LayoutBanner => ({
+  key: "banner",
+  variant: "info",
+  order: 0,
+  dismissible: false,
+  text: "Heads up",
+  ...extra,
+});
+
+function serveBanners(banners: LayoutBanner[] | undefined): void {
+  siteLayout.value = { pages: {}, categories: {}, banners };
+}
+
+// Renders what the real alert exposes to the banner: its description slot and
+// a close button that reports the alert closed.
+const AlertStub = defineComponent({
+  props: {
+    color: { type: String, default: undefined },
+    icon: { type: String, default: undefined },
+    close: { type: Boolean, default: false },
+  },
+  emits: ["update:open"],
+  setup:
+    (props, { slots, emit }) =>
+    () =>
+      h("div", { "data-color": props.color, "data-icon": props.icon }, [
+        slots.description?.(),
+        props.close
+          ? h("button", { onClick: () => emit("update:open", false) }, "close")
+          : null,
+      ]),
+});
+
+const BannerContent = defineComponent({
+  props: { days: { type: Number, required: true } },
+  setup: (props) => () => h("strong", `${props.days} days left`),
+});
+
+function mountable(root: App): App {
+  root.component("UAlert", AlertStub);
+  root.component("BannerContent", BannerContent);
+  return root;
+}
+
+beforeEach(() => {
+  siteLayout.value = undefined;
+  cookieNames.length = 0;
+  dismissedCookie = ref<string[]>([]);
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("useSiteLayout", () => ({ siteLayout }));
+  vi.stubGlobal("useDmsCookie", (name: string) => {
+    cookieNames.push(name);
+    return dismissedCookie;
+  });
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (key: string) => key.replace(/^\$/, "t:"),
+  }));
+  vi.stubGlobal("useLayoutBanners", useLayoutBanners);
+  vi.stubGlobal(
+    "resolveLayoutBannerPresentation",
+    resolveLayoutBannerPresentation,
+  );
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("resolveLayoutBannerPresentation", () => {
+  it.each([
+    ["info", "status"],
+    ["warning", "status"],
+    ["error", "alert"],
+  ] as const)("announces a %s banner as %s", (variant, role) => {
+    const presentation = resolveLayoutBannerPresentation(banner({ variant }));
+    expect(presentation.role).toBe(role);
+    expect(presentation.color).toBe(variant);
+  });
+
+  it("renders an unknown variant as info rather than unstyled", () => {
+    const presentation = resolveLayoutBannerPresentation(
+      banner({ variant: "success" as LayoutBannerVariant }),
+    );
+    expect(presentation).toEqual(
+      resolveLayoutBannerPresentation(banner({ variant: "info" })),
+    );
+  });
+
+  it("keeps the banner's own icon over the variant's", () => {
+    expect(
+      resolveLayoutBannerPresentation(banner({ icon: "i-ph-clock" })).icon,
+    ).toBe("i-ph-clock");
+  });
+});
+
+describe("useLayoutBanners", () => {
+  it("serves nothing for a backend that predates banners", () => {
+    serveBanners(undefined);
+    expect(useLayoutBanners().banners.value).toEqual([]);
+  });
+
+  it("drops a dismissed banner, and remembers the dismissal in the cookie", () => {
+    serveBanners([
+      banner({ key: "a", dismissible: true }),
+      banner({ key: "b", dismissible: true }),
+    ]);
+    const { banners, dismiss } = useLayoutBanners();
+
+    dismiss("a");
+    dismiss("a");
+
+    expect(cookieNames).toEqual([DISMISSED_BANNERS_COOKIE]);
+    expect(dismissedCookie.value).toEqual(["a"]);
+    expect(banners.value.map((entry) => entry.key)).toEqual(["b"]);
+  });
+
+  // A banner that turned non-dismissible (an overdue invoice) must show again
+  // even to a user who closed its dismissible predecessor under the same key.
+  it("ignores a dismissal for a banner that is not dismissible", () => {
+    dismissedCookie.value = ["a"];
+    serveBanners([banner({ key: "a", dismissible: false })]);
+    expect(useLayoutBanners().banners.value).toHaveLength(1);
+  });
+});
+
+describe("DashboardBanners", () => {
+  it("server-renders the banners in order, each with its variant's role", async () => {
+    serveBanners([
+      banner({ key: "billing", variant: "error", text: "$billing.overdue" }),
+      banner({
+        key: "trial",
+        variant: "warning",
+        component: "BannerContent",
+        props: { days: 3 },
+        text: undefined,
+      }),
+      banner({ key: "news", variant: "info", text: "New release" }),
+    ]);
+
+    const html = await renderToString(
+      mountable(createSSRApp(DashboardBanners)),
+    );
+    const document = new DOMParser().parseFromString(html, "text/html");
+    const rendered = [
+      ...document.querySelectorAll("[data-dms-layout-banner]"),
+    ].map((node) => ({
+      key: node.getAttribute("data-dms-layout-banner"),
+      role: node.getAttribute("role"),
+      text: node.textContent,
+    }));
+
+    expect(rendered).toEqual([
+      { key: "billing", role: "alert", text: "t:billing.overdue" },
+      { key: "trial", role: "status", text: "3 days left" },
+      { key: "news", role: "status", text: "New release" },
+    ]);
+  });
+
+  // The server reads the same cookie, so a dismissed banner never reaches the
+  // page only to be removed on hydration.
+  it("leaves a dismissed banner out of the server-rendered page", async () => {
+    dismissedCookie.value = ["news"];
+    serveBanners([banner({ key: "news", dismissible: true })]);
+
+    const html = await renderToString(
+      mountable(createSSRApp(DashboardBanners)),
+    );
+    expect(html).not.toContain("data-dms-layout-banners");
+  });
+
+  it("offers a close button only on a dismissible banner, and closes it", async () => {
+    serveBanners([
+      banner({ key: "sticky" }),
+      banner({ key: "closable", dismissible: true }),
+    ]);
+    const host = document.createElement("div");
+    const app = mountable(createApp(DashboardBanners));
+    app.mount(host);
+
+    const buttons = host.querySelectorAll("button");
+    expect(buttons).toHaveLength(1);
+    buttons[0]!.click();
+    await nextTick();
+
+    expect(dismissedCookie.value).toEqual(["closable"]);
+    expect(
+      [...host.querySelectorAll("[data-dms-layout-banner]")].map((node) =>
+        node.getAttribute("data-dms-layout-banner"),
+      ),
+    ).toEqual(["sticky"]);
+    app.unmount();
+  });
+});

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

@@ -0,0 +1,147 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import {
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+  type App,
+} from "vue";
+import NotificationPopover from "../layers/dms-layout/app/build/components/notification/NotificationPopover.vue";
+
+const HTTP_FORBIDDEN = 403;
+const UNREAD_COUNT = 4;
+
+interface NotificationsStub {
+  unreadCount: ReturnType<typeof ref<number>>;
+  fetchUnreadCount: ReturnType<typeof vi.fn>;
+  fetchNotifications: ReturnType<typeof vi.fn>;
+}
+
+let app: App;
+let host: HTMLDivElement;
+let errorHandler: ReturnType<typeof vi.fn>;
+let notifications: NotificationsStub;
+
+function forbidden(): Promise<never> {
+  return Promise.reject(
+    Object.assign(new Error("tenant.suspended"), {
+      response: { status: HTTP_FORBIDDEN },
+    }),
+  );
+}
+
+const Popover = defineComponent({
+  props: { open: { type: Boolean, default: false } },
+  emits: ["update:open"],
+  setup:
+    (props, { emit, slots }) =>
+    () =>
+      h("div", [
+        h(
+          "div",
+          { "data-trigger": "", onClick: () => emit("update:open", true) },
+          slots.default?.(),
+        ),
+        props.open ? slots.content?.() : null,
+      ]),
+});
+
+const Passthrough = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", slots.default?.()),
+});
+
+function installRuntime(): void {
+  Object.entries({ ref, watch, nextTick, onMounted, onUnmounted }).forEach(
+    ([key, value]) => vi.stubGlobal(key, value),
+  );
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key, locale: "en" }));
+  vi.stubGlobal("useUserSession", () => ({ loggedIn: ref(true) }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (value: string) => value,
+  }));
+  vi.stubGlobal("useNotifications", () => ({
+    ...notifications,
+    notifications: ref([]),
+    hasMore: ref(false),
+    markAllAsRead: vi.fn(),
+  }));
+  vi.stubGlobal("useInfiniteScroll", () => ({
+    isLoadingMore: ref(false),
+    setupObserver: vi.fn(),
+    disconnectObserver: vi.fn(),
+  }));
+  vi.stubGlobal("NotificationEvents", { NOTIFICATION_RECEIVED: "received" });
+  vi.stubGlobal("FormEvents", { SUBMIT_SUCCESS: "submit-success" });
+  vi.stubGlobal("navigateDms", vi.fn());
+}
+
+async function mountPopover(): Promise<void> {
+  app = createApp(NotificationPopover);
+  app.config.errorHandler = errorHandler;
+  app.config.globalProperties.$t = (key: string) => key;
+  app.component("UPopover", Popover);
+  app.component("UButton", Passthrough);
+  app.component("USeparator", Passthrough);
+  app.component("UIcon", Passthrough);
+  app.mount(host);
+  await vi.waitFor(() =>
+    expect(notifications.fetchUnreadCount).toHaveBeenCalled(),
+  );
+  await nextTick();
+}
+
+beforeEach(() => {
+  errorHandler = vi.fn();
+  notifications = {
+    unreadCount: ref(0),
+    fetchUnreadCount: vi.fn(),
+    fetchNotifications: vi.fn(),
+  };
+  vi.spyOn(console, "warn").mockImplementation(() => {});
+  installRuntime();
+  host = document.createElement("div");
+});
+
+afterEach(() => {
+  app?.unmount();
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+});
+
+it("shows the unread badge when the count loads", async () => {
+  notifications.fetchUnreadCount.mockImplementation(async () => {
+    notifications.unreadCount.value = UNREAD_COUNT;
+  });
+  await mountPopover();
+  expect(host.textContent).toContain(String(UNREAD_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);
+  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));
+});
+
+it("keeps the page alive when the notification list is refused on open", async () => {
+  notifications.fetchNotifications.mockImplementation(forbidden);
+  await mountPopover();
+  host.querySelector<HTMLElement>("[data-trigger]")!.click();
+  await vi.waitFor(() =>
+    expect(notifications.fetchNotifications).toHaveBeenCalled(),
+  );
+  await vi.waitFor(() => expect(console.warn).toHaveBeenCalled());
+  expect(errorHandler).not.toHaveBeenCalled();
+  expect(host.textContent).toContain("notification.dropdown.no_notifications");
+});

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

@@ -0,0 +1,103 @@
+import { readFileSync } from "node:fs";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+type Middleware = (to: { path: string }) => Promise<unknown>;
+
+const navigateDms = vi.fn();
+const onboarding = vi.fn();
+const session = { loggedIn: { value: false } };
+
+beforeEach(() => {
+  vi.resetModules();
+  vi.stubGlobal("defineDmsMiddleware", (handler: Middleware) => handler);
+  vi.stubGlobal("navigateDms", navigateDms);
+  vi.stubGlobal("useOnboarding", onboarding);
+  vi.stubGlobal("useUserSession", () => session);
+  vi.stubGlobal("useHomepage", () => "/dashboard");
+});
+
+afterEach(() => {
+  session.loggedIn.value = false;
+  navigateDms.mockReset();
+  onboarding.mockReset();
+  vi.unstubAllGlobals();
+});
+
+async function loadMiddleware(): Promise<Middleware> {
+  const module = await import(
+    "../layers/dms-onboarding/app/middleware/onboarding.global"
+  );
+  return module.default as unknown as Middleware;
+}
+
+describe("onboarding middleware", () => {
+  it("sends every route to the wizard while no admin exists", async () => {
+    onboarding.mockResolvedValue({ hasOnboarded: false });
+    const middleware = await loadMiddleware();
+
+    await middleware({ path: "/settings" });
+
+    expect(navigateDms).toHaveBeenCalledWith("/onboarding");
+  });
+
+  it("lets the wizard render while no admin exists", async () => {
+    onboarding.mockResolvedValue({ hasOnboarded: false });
+    const middleware = await loadMiddleware();
+
+    await middleware({ path: "/onboarding" });
+
+    expect(navigateDms).not.toHaveBeenCalled();
+  });
+
+  it("sends a signed-in user away from the finished wizard to the homepage", async () => {
+    onboarding.mockResolvedValue({ hasOnboarded: true });
+    session.loggedIn.value = true;
+    const middleware = await loadMiddleware();
+
+    await middleware({ path: "/onboarding" });
+
+    expect(navigateDms).toHaveBeenCalledWith("/dashboard", { replace: true });
+  });
+
+  it("sends an anonymous visitor away from the finished wizard to the login page", async () => {
+    onboarding.mockResolvedValue({ hasOnboarded: true });
+    const middleware = await loadMiddleware();
+
+    await middleware({ path: "/onboarding" });
+
+    expect(navigateDms).toHaveBeenCalledWith("/auth", { replace: true });
+  });
+
+  it("leaves other routes alone once onboarding is done", async () => {
+    onboarding.mockResolvedValue({ hasOnboarded: true });
+    const middleware = await loadMiddleware();
+
+    await middleware({ path: "/settings" });
+
+    expect(navigateDms).not.toHaveBeenCalled();
+  });
+
+  it("does not block navigation when the onboarding status is unavailable", async () => {
+    onboarding.mockRejectedValue(new Error("offline"));
+    const middleware = await loadMiddleware();
+
+    await middleware({ path: "/onboarding" });
+
+    expect(navigateDms).not.toHaveBeenCalled();
+  });
+});
+
+describe("onboarding page", () => {
+  // Global middleware runs on a direct load only for a page declaring its
+  // meta: without it, a finished wizard would render instead of redirecting.
+  it("declares its meta so the onboarding middleware runs on a direct load", () => {
+    const page = readFileSync(
+      new URL(
+        "../layers/dms-onboarding/app/custom-pages/onboarding.vue",
+        import.meta.url,
+      ),
+      "utf8",
+    );
+    expect(page).toMatch(/defineDmsPageMeta\(/);
+  });
+});

package/frontend-vue/tests/password-strength-meter.test.ts

@@ -0,0 +1,33 @@
+// @vitest-environment jsdom
+import { afterEach, expect, it } from "vitest";
+import { createApp, defineComponent, h, type App } from "vue";
+import PasswordStrength from "../layers/dms-ui/app/components/PasswordStrength.vue";
+
+let app: App | undefined;
+
+afterEach(() => app?.unmount());
+
+it("scales the meter to the number of requirements", () => {
+  const host = document.createElement("div");
+  const strength = Array.from({ length: 5 }, (_, index) => ({
+    met: true,
+    text: `requirement ${index}`,
+  }));
+
+  app = createApp(PasswordStrength, { color: "success", score: 5, strength });
+  app.config.globalProperties.$t = (key: string) => key;
+  app.component(
+    "UProgress",
+    defineComponent({
+      props: { modelValue: Number, max: Number },
+      setup: (props) => () =>
+        h("progress", { value: props.modelValue, max: props.max }),
+    }),
+  );
+  app.component("UIcon", defineComponent({ render: () => null }));
+  app.mount(host);
+
+  const meter = host.querySelector("progress")!;
+  expect(meter.getAttribute("max")).toBe("5");
+  expect(meter.getAttribute("value")).toBe("5");
+});

package/frontend-vue/tests/quick-action-intent.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import {
+  QUICK_ACTION_ADD,
+  QUICK_ACTION_BUTTON,
+  QUICK_ACTION_BUTTON_KEY,
+  QUICK_ACTION_COMPONENT_KEY,
+  QUICK_ACTION_QUERY_KEY,
+  readQuickActionIntent,
+} from "../layers/dms-ui/app/types/quick-actions";
+
+const COMPONENT_ID = "table";
+
+describe("readQuickActionIntent", () => {
+  it("reads an open-form intent addressed to the table view", () => {
+    const intent = readQuickActionIntent(
+      {
+        [QUICK_ACTION_QUERY_KEY]: QUICK_ACTION_ADD,
+        [QUICK_ACTION_COMPONENT_KEY]: COMPONENT_ID,
+      },
+      COMPONENT_ID,
+    );
+
+    expect(intent).toEqual({ kind: "add" });
+  });
+
+  it("reads which button a button intent presses", () => {
+    const intent = readQuickActionIntent(
+      {
+        [QUICK_ACTION_QUERY_KEY]: QUICK_ACTION_BUTTON,
+        [QUICK_ACTION_COMPONENT_KEY]: COMPONENT_ID,
+        [QUICK_ACTION_BUTTON_KEY]: "invite",
+      },
+      COMPONENT_ID,
+    );
+
+    expect(intent).toEqual({ kind: "button", button: "invite" });
+  });
+
+  it("ignores a button intent that names no button", () => {
+    const intent = readQuickActionIntent(
+      {
+        [QUICK_ACTION_QUERY_KEY]: QUICK_ACTION_BUTTON,
+        [QUICK_ACTION_COMPONENT_KEY]: COMPONENT_ID,
+      },
+      COMPONENT_ID,
+    );
+
+    expect(intent).toBeUndefined();
+  });
+
+  it("ignores an intent addressed to another table view", () => {
+    const intent = readQuickActionIntent(
+      {
+        [QUICK_ACTION_QUERY_KEY]: QUICK_ACTION_ADD,
+        [QUICK_ACTION_COMPONENT_KEY]: "other-table",
+      },
+      COMPONENT_ID,
+    );
+
+    expect(intent).toBeUndefined();
+  });
+
+  it("ignores an unknown intent", () => {
+    const intent = readQuickActionIntent(
+      {
+        [QUICK_ACTION_QUERY_KEY]: "unknown",
+        [QUICK_ACTION_COMPONENT_KEY]: COMPONENT_ID,
+      },
+      COMPONENT_ID,
+    );
+
+    expect(intent).toBeUndefined();
+  });
+});

package/frontend-vue/tests/quick-actions.test.ts

@@ -2,6 +2,8 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { dispatchQuickActionTarget } from "../layers/dms-layout/app/composables/page/useQuickActions";
 import {
   QUICK_ACTION_ADD,
+  QUICK_ACTION_BUTTON,
+  QUICK_ACTION_BUTTON_KEY,
   QUICK_ACTION_COMPONENT_KEY,
   QUICK_ACTION_QUERY_KEY,
 } from "../layers/dms-ui/app/types/quick-actions";
@@ -29,4 +31,25 @@ describe("dispatchQuickActionTarget", () => {
       },
     });
   });
+
+  it("routes button actions to the target table with the button to press", () => {
+    const navigateDms = vi.fn();
+    vi.stubGlobal("navigateDms", navigateDms);
+
+    dispatchQuickActionTarget({
+      type: "button",
+      to: "/settings/user/members",
+      component: "table",
+      button: "invite",
+    });
+
+    expect(navigateDms).toHaveBeenCalledWith({
+      path: "/settings/user/members",
+      query: {
+        [QUICK_ACTION_QUERY_KEY]: QUICK_ACTION_BUTTON,
+        [QUICK_ACTION_COMPONENT_KEY]: "table",
+        [QUICK_ACTION_BUTTON_KEY]: "invite",
+      },
+    });
+  });
 });