@antelopejs/dms 0.4.5 → 0.4.7

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",
+      },
+    });
+  });
 });

package/frontend-vue/tests/signup-invitation-link.test.ts

@@ -0,0 +1,126 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  reactive,
+  ref,
+  type App,
+} from "vue";
+import * as z from "zod";
+import SignupPage from "../layers/dms-auth/app/custom-pages/auth/signup.vue";
+
+const route = reactive<{ query: Record<string, unknown> }>({ query: {} });
+let app: App;
+let host: HTMLDivElement;
+const locale = ref("en");
+const setLocale = vi.fn(async (code: string) => {
+  locale.value = code;
+});
+
+const Passthrough = defineComponent({
+  inheritAttrs: false,
+  setup:
+    (_, { attrs, slots }) =>
+    () =>
+      h("div", { "data-testid": attrs["data-testid"] }, slots.default?.()),
+});
+
+const LinkButton = defineComponent({
+  props: { label: String, to: String },
+  setup: (props) => () => h("a", { href: props.to }, props.label),
+});
+
+function installRuntime() {
+  Object.entries({ computed, ref, reactive }).forEach(([key, value]) =>
+    vi.stubGlobal(key, value),
+  );
+  vi.stubGlobal("useI18n", () => ({
+    locale,
+    locales: ref([{ code: "en" }, { code: "fr" }]),
+    setLocale,
+  }));
+  vi.stubGlobal("useDmsRuntimeConfig", () => ({
+    public: { dms: { mustValidateEmail: false } },
+  }));
+  vi.stubGlobal("useHomepage", () => "/");
+  vi.stubGlobal("useDmsRoute", () => route);
+  vi.stubGlobal("passwordSchema", z.string());
+  vi.stubGlobal("usePasswordStrength", () => ({
+    strength: ref([]),
+    score: ref(0),
+    color: ref("error"),
+  }));
+}
+
+function mountSignup(query: Record<string, unknown>) {
+  route.query = query;
+  app = createApp(SignupPage);
+  app.config.globalProperties.$t = (key: string) => key;
+  for (const name of [
+    "DmsCard",
+    "UIcon",
+    "UForm",
+    "UFormField",
+    "UInput",
+    "DmsOAuthButtons",
+    "DmsPasswordStrength",
+    "DmsLink",
+  ]) {
+    app.component(name, Passthrough);
+  }
+  app.component("UButton", LinkButton);
+  app.mount(host);
+}
+
+beforeEach(() => {
+  locale.value = "en";
+  setLocale.mockClear();
+  installRuntime();
+  host = document.createElement("div");
+});
+afterEach(() => {
+  app?.unmount();
+  vi.unstubAllGlobals();
+});
+
+it.each([{}, { token: "" }, { token: ["a", "b"] }])(
+  "explains an invitation link without its token (%o)",
+  (query) => {
+    expect(() => mountSignup(query)).not.toThrow();
+    expect(
+      host.querySelector('[data-testid="signup-invalid-invitation"]'),
+    ).not.toBe(null);
+    expect(host.textContent).toContain(
+      "page.signup.invalid_invitation_description",
+    );
+    expect(host.querySelector('a[href="/auth"]')?.textContent).toBe(
+      "button.login",
+    );
+  },
+);
+
+it("shows the signup form for an invitation link with its token", () => {
+  mountSignup({ token: "invite-token", email: "new@local.test" });
+  expect(host.querySelector('[data-testid="signup-invalid-invitation"]')).toBe(
+    null,
+  );
+  expect(host.textContent).toContain("page.signup.create_account_title");
+});
+
+it("opens in the language the invitation was written in", () => {
+  mountSignup({ token: "invite-token", email: "new@local.test", lang: "fr" });
+  expect(setLocale).toHaveBeenCalledWith("fr");
+  expect(locale.value).toBe("fr");
+});
+
+it.each([{}, { lang: "en" }, { lang: "de" }, { lang: ["fr", "en"] }])(
+  "keeps the current language for an invitation link carrying %o",
+  (query) => {
+    mountSignup({ token: "invite-token", email: "new@local.test", ...query });
+    expect(setLocale).not.toHaveBeenCalled();
+    expect(locale.value).toBe("en");
+  },
+);

package/frontend-vue/tests/skeleton-paragraph.test.ts

@@ -0,0 +1,30 @@
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const PARAGRAPH = /<p\b[^>]*>(.*?)<\/p>/gs;
+const SKELETON = /<USkeleton\b/;
+
+function walk(directory: string): string[] {
+  return readdirSync(directory).flatMap((name) => {
+    const path = join(directory, name);
+    return statSync(path).isDirectory() ? walk(path) : [path];
+  });
+}
+
+describe("skeleton placement", () => {
+  // The skeleton renders a <div>. The browser's parser closes an open <p>
+  // before a <div>, so the server markup no longer matches the client tree
+  // and hydration reports a mismatch.
+  it("keeps skeletons out of paragraphs", () => {
+    const offenders = walk(join(process.cwd(), "layers"))
+      .filter((path) => path.endsWith(".vue"))
+      .flatMap((path) =>
+        [...readFileSync(path, "utf8").matchAll(PARAGRAPH)]
+          .filter(([, content]) => SKELETON.test(content ?? ""))
+          .map(() => relative(process.cwd(), path)),
+      );
+
+    expect(offenders).toEqual([]);
+  });
+});

package/frontend-vue/tests/tab-without-component-id.test.ts

@@ -0,0 +1,51 @@
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { computed, nextTick, reactive, ref, watch } from "vue";
+import { useTab } from "../layers/dms-ui/app/composables/tab/useTab";
+import { TabEvents } from "../layers/dms-ui/app/composables/tab/types/events";
+import type { TabProps } from "../layers/dms-ui/app/composables/tab/types";
+
+const TAB_COUNT = 3;
+const sendComponentEvent = vi.fn();
+
+beforeEach(() => {
+  sendComponentEvent.mockClear();
+  Object.entries({ computed, ref, watch, TabEvents }).forEach(([key, value]) =>
+    vi.stubGlobal(key, value),
+  );
+  vi.stubGlobal("isNumber", (value: unknown) => typeof value === "number");
+  vi.stubGlobal("isString", (value: unknown) => typeof value === "string");
+  vi.stubGlobal("useComponentEvent", () => ({ sendComponentEvent }));
+  vi.stubGlobal("useWatch", () => ({ isLoading: ref(false), state: ref({}) }));
+  vi.stubGlobal("useDmsRoute", () => reactive({ query: {} }));
+  vi.stubGlobal("useDmsRouter", () => ({ push: vi.fn() }));
+});
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+it("switches tabs without announcing them when no component owns the set", async () => {
+  const { activeTab, goToTab } = useTab(TAB_COUNT, { items: [] } as TabProps);
+
+  goToTab(1);
+  await nextTick();
+
+  expect(activeTab.value).toBe("1");
+  expect(sendComponentEvent).not.toHaveBeenCalled();
+});
+
+it("announces a tab change for a registered component", async () => {
+  const { goToTab } = useTab(TAB_COUNT, {
+    items: [],
+    componentId: "settings.tabs",
+    pageId: "settings",
+  } as TabProps);
+
+  goToTab(2);
+  await nextTick();
+
+  expect(sendComponentEvent).toHaveBeenCalledWith(
+    TabEvents.TAB_CHANGE,
+    "settings.tabs",
+    { previousTab: 0, currentTab: 2 },
+  );
+});

package/frontend-vue/tests/table-column-visibility.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { buildInitialColumnVisibility } from "../layers/dms-ui/app/build/composables/table-view/utils/columnVisibility";
+
+describe("buildInitialColumnVisibility", () => {
+  it("hides the columns declared isVisible: false", () => {
+    expect(
+      buildInitialColumnVisibility([
+        { id: "number" },
+        { id: "amount", isVisible: true },
+        { id: "stripeId", isVisible: false },
+      ]),
+    ).toEqual({ number: true, amount: true, stripeId: false });
+  });
+
+  it("keeps every column visible when none opts out", () => {
+    expect(buildInitialColumnVisibility([{ id: "name" }])).toEqual({
+      name: true,
+    });
+  });
+});