@antelopejs/dms 0.5.6 → 0.6.0

package/frontend-vue/tests/permission-preview.test.ts

@@ -0,0 +1,196 @@
+import { describe, expect, it } from "vitest";
+import {
+  applyPreviewLocks,
+  buildPreviewUrl,
+  childLayoutPath,
+  isPreviewEntryLocked,
+  isStalePreviewSession,
+  listPreviewablePages,
+  parsePreviewSession,
+  PERMISSION_PREVIEW_TTL_MS,
+  type PermissionPreviewResult,
+  type PreviewLockableEntry,
+  resolveActivePreviewBlock,
+  resolvePreviewBlock,
+} from "#dms-core/app/build/utils/permission-preview";
+
+const SESSION = {
+  id: "p1",
+  roleId: "r1",
+  roleName: "Support",
+  permissions: ["sales.orders"],
+  unsaved: true,
+  returnTo: "/settings/roles",
+  updatedAt: 1000,
+};
+
+describe("permission preview", () => {
+  describe("parsePreviewSession", () => {
+    it("reads a stored session", () => {
+      expect(parsePreviewSession(JSON.stringify(SESSION))).toEqual(SESSION);
+    });
+
+    it("defaults the optional fields", () => {
+      const { roleId: _roleId, unsaved: _unsaved, ...rest } = SESSION;
+      expect(parsePreviewSession(JSON.stringify(rest))).toEqual({
+        ...rest,
+        roleId: null,
+        unsaved: false,
+      });
+    });
+
+    it("rejects anything else", () => {
+      expect(parsePreviewSession(null)).toBeNull();
+      expect(parsePreviewSession("{")).toBeNull();
+      expect(parsePreviewSession("[]")).toBeNull();
+      expect(
+        parsePreviewSession(JSON.stringify({ ...SESSION, permissions: [1] })),
+      ).toBeNull();
+    });
+  });
+
+  it("drops sessions past their lifetime", () => {
+    expect(isStalePreviewSession(SESSION, 1000)).toBe(false);
+    expect(
+      isStalePreviewSession(SESSION, 1000 + PERMISSION_PREVIEW_TTL_MS + 1),
+    ).toBe(true);
+  });
+
+  it("builds layout paths like the server", () => {
+    expect(childLayoutPath("grid", "kpis")).toBe("grid.kpis");
+    expect(childLayoutPath(undefined, "kpis")).toBeUndefined();
+  });
+
+  it("resolves the block of a layout path", () => {
+    const result: PermissionPreviewResult = {
+      page: { fullId: "sales.orders", displayName: "Orders", hidden: false },
+      blocks: {
+        table: { state: "readonly", withheld: ["Edit"] },
+        "grid.kpis": { state: "hidden" },
+      },
+      hiddenEntries: [],
+      outOfScope: 0,
+    };
+    expect(resolvePreviewBlock(result, "grid.kpis")).toEqual({
+      state: "hidden",
+    });
+    expect(resolvePreviewBlock(result, "grid")).toBeUndefined();
+    expect(resolvePreviewBlock(result, undefined)).toBeUndefined();
+    expect(resolvePreviewBlock(null, "table")).toBeUndefined();
+  });
+
+  it("adds the preview id to the first URL", () => {
+    expect(buildPreviewUrl("/", "a b")).toBe("/?dms-preview=a%20b");
+    expect(buildPreviewUrl("/x?y=1", "id")).toBe("/x?y=1&dms-preview=id");
+  });
+
+  it("offers the pages reachable without parameters", () => {
+    const pages = {
+      "/": { displayName: "Home" },
+      "/orders": { displayName: "Orders", hasAccess: true },
+      "/denied": { displayName: "Denied", hasAccess: false },
+      "/auth/login": { displayName: "Login", publicAccess: true },
+      "/hidden": { displayName: "Hidden", hidden: true },
+      "/orders/:id": { displayName: "Order" },
+      "/edit": {
+        displayName: "Edit",
+        validation: { requiredQueryParams: ["id"] },
+      },
+    };
+    expect(listPreviewablePages(pages).map(({ slug }) => slug)).toEqual([
+      "/",
+      "/orders",
+    ]);
+  });
+  describe("preview-only rendering", () => {
+    const RESULT: PermissionPreviewResult = {
+      page: { fullId: "sales.orders", displayName: "Orders", hidden: false },
+      blocks: { table: { state: "hidden" } },
+      hiddenEntries: ["sales.orders"],
+      outOfScope: 0,
+    };
+    const HIDDEN = new Set(RESULT.hiddenEntries);
+
+    it("veils a block only while a preview is active", () => {
+      expect(resolveActivePreviewBlock(true, RESULT, "table")).toEqual({
+        state: "hidden",
+      });
+      // A normal session, even holding a stale result, veils nothing.
+      expect(resolveActivePreviewBlock(false, RESULT, "table")).toBeUndefined();
+    });
+
+    it("locks a menu entry only while a preview is active", () => {
+      expect(isPreviewEntryLocked(true, HIDDEN, "sales.orders")).toBe(true);
+      expect(isPreviewEntryLocked(false, HIDDEN, "sales.orders")).toBe(false);
+      expect(isPreviewEntryLocked(true, HIDDEN, "sales.invoices")).toBe(false);
+      expect(isPreviewEntryLocked(true, HIDDEN, undefined)).toBe(false);
+    });
+  });
+
+  describe("applyPreviewLocks", () => {
+    interface Entry extends PreviewLockableEntry {
+      label: string;
+      type?: "label";
+      locked?: boolean;
+      children?: Entry[];
+    }
+    const lock = (entry: Entry): Entry => ({ ...entry, locked: true });
+    const lockedLabels = (entries: Entry[]): string[] =>
+      entries.flatMap((entry) => [
+        ...(entry.locked ? [entry.label] : []),
+        ...lockedLabels(entry.children ?? []),
+      ]);
+    // A label group, a category with a nested category and a dynamic entry,
+    // and the sidebar footer.
+    const MENU: Entry[] = [
+      { label: "Sales", type: "label", fullId: "pages.sales" },
+      {
+        label: "Orders",
+        fullId: "pages.sales.orders",
+        children: [
+          {
+            label: "Archive",
+            fullId: "pages.sales.orders.archive",
+            children: [
+              { label: "Old", fullId: "pages.sales.orders.archive.old" },
+            ],
+          },
+          { label: "Project", fullId: "pages.sales.orders.acme" },
+        ],
+      },
+      { label: "Favorite without id" },
+      { label: "Settings", fullId: "settings" },
+      { label: "Modules", fullId: "modules" },
+    ];
+
+    it("locks labels, categories, nested and footer entries alike", () => {
+      const hidden = new Set([
+        "pages.sales",
+        "pages.sales.orders.archive.old",
+        "pages.sales.orders.acme",
+        "modules",
+      ]);
+      const locked = applyPreviewLocks(
+        MENU,
+        (fullId) => isPreviewEntryLocked(true, hidden, fullId),
+        lock,
+      );
+      expect(lockedLabels(locked)).toEqual([
+        "Sales",
+        "Old",
+        "Project",
+        "Modules",
+      ]);
+    });
+
+    it("locks nothing outside a preview", () => {
+      const hidden = new Set(MENU.map((entry) => entry.fullId ?? ""));
+      const locked = applyPreviewLocks(
+        MENU,
+        (fullId) => isPreviewEntryLocked(false, hidden, fullId),
+        lock,
+      );
+      expect(lockedLabels(locked)).toEqual([]);
+    });
+  });
+});

package/frontend-vue/tests/permission-veil-stable-content.test.ts

@@ -0,0 +1,191 @@
+// @vitest-environment jsdom
+import {
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+  shallowRef,
+  Suspense,
+  type App,
+  type Component,
+} from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import PermissionVeil from "../layers/dms-ui/app/build/components/permission/PermissionVeil.vue";
+
+// A role preview veils the blocks of the page it previews, and the veils move
+// as the preview answers for each page. A block's content (a table view) has
+// an async setup: remounting it while the page's Suspense waits for the next
+// page left Vue mounting it under a detached placeholder ("can't access
+// property insertBefore, parent is null"). The veil must keep its content in
+// place whatever its state.
+
+type VeilState = "hidden" | "readonly" | "limited" | null;
+
+let app: App | undefined;
+let host: HTMLDivElement;
+const errors: unknown[] = [];
+const onRejection = (event: PromiseRejectionEvent) => {
+  errors.push(event.reason);
+  event.preventDefault();
+};
+
+function deferred() {
+  let resolve!: () => void;
+  const promise = new Promise<void>((res) => {
+    resolve = res;
+  });
+  return { promise, resolve };
+}
+
+const Stub = defineComponent({
+  setup(_, { slots }) {
+    return () => h("span", slots.default?.());
+  },
+});
+
+function asyncBlock(setups: { count: number }, wait: () => Promise<void>) {
+  return defineComponent({
+    name: "AsyncBlock",
+    async setup() {
+      setups.count++;
+      await wait();
+      return () => h("section", { class: "block" }, "rows");
+    },
+  });
+}
+
+function mount(root: Component) {
+  app = createApp(root);
+  app.component("UTooltip", Stub);
+  app.component("UIcon", Stub);
+  app.config.errorHandler = (error) => {
+    errors.push(error);
+  };
+  app.mount(host);
+}
+
+async function flush() {
+  for (let index = 0; index < 5; index++) {
+    await Promise.resolve();
+    await nextTick();
+  }
+}
+
+beforeEach(() => {
+  host = document.createElement("div");
+  document.body.append(host);
+  errors.length = 0;
+  window.addEventListener("unhandledrejection", onRejection);
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  host.remove();
+  window.removeEventListener("unhandledrejection", onRejection);
+});
+
+it("keeps a persistent veil's content mounted when its state changes", async () => {
+  const setups = { count: 0 };
+  const Block = asyncBlock(setups, () => Promise.resolve());
+  const state = ref<VeilState>(null);
+  mount({
+    render: () =>
+      h(Suspense, null, {
+        default: () =>
+          h(
+            PermissionVeil,
+            { state: state.value, label: "Limited", persistent: true },
+            { default: () => h(Block) },
+          ),
+      }),
+  });
+  await vi.waitFor(() => expect(host.querySelector(".block")).not.toBeNull());
+  const block = host.querySelector(".block");
+
+  for (const next of ["limited", null, "hidden", "readonly", null] as const) {
+    state.value = next;
+    await flush();
+    expect(host.querySelector(".block")).toBe(block);
+  }
+  expect(setups.count).toBe(1);
+  expect(host.querySelector("[data-permission-veil]")).toBeNull();
+  state.value = "hidden";
+  await flush();
+  expect(
+    host
+      .querySelector("[data-permission-veil]")
+      ?.getAttribute("data-permission-veil"),
+  ).toBe("hidden");
+  expect(errors).toEqual([]);
+});
+
+it("renders the slot alone when it is not persistent and has no state", async () => {
+  mount({
+    render: () =>
+      h(PermissionVeil, { state: null }, { default: () => h("p", "plain") }),
+  });
+  await flush();
+  expect(host.innerHTML).toBe("<p>plain</p>");
+});
+
+it("survives veil changes on the old page while the next page loads", async () => {
+  const setups = { count: 0 };
+  const pending: Array<ReturnType<typeof deferred>> = [];
+  const Block = asyncBlock(setups, () => {
+    // The first mount resolves at once; later ones wait for the test.
+    if (setups.count === 1) return Promise.resolve();
+    const next = deferred();
+    pending.push(next);
+    return next.promise;
+  });
+  const nextPage = deferred();
+  const NextPage = defineComponent({
+    async setup() {
+      await nextPage.promise;
+      return () => h("main", { class: "next" }, "next page");
+    },
+  });
+  const state = ref<VeilState>("limited");
+  const OldPage = defineComponent({
+    setup() {
+      return () =>
+        h(
+          "main",
+          h(
+            PermissionVeil,
+            { state: state.value, label: "Limited", persistent: true },
+            { default: () => h(Block) },
+          ),
+        );
+    },
+  });
+  const page = shallowRef<Component>(OldPage);
+  const pageKey = ref("old");
+  mount({
+    render: () =>
+      h(Suspense, null, {
+        default: () => h(page.value, { key: pageKey.value }),
+      }),
+  });
+  await vi.waitFor(() => expect(host.querySelector(".block")).not.toBeNull());
+
+  // Navigation: the Suspense keeps the old page while the next one loads, and
+  // the preview's answer for the next page moves the old page's veils.
+  page.value = NextPage;
+  pageKey.value = "next";
+  await flush();
+  state.value = null;
+  await flush();
+  state.value = "limited";
+  await flush();
+  for (const entry of pending) entry.resolve();
+  await flush();
+  nextPage.resolve();
+  await vi.waitFor(() => expect(host.querySelector(".next")).not.toBeNull());
+  await flush();
+
+  expect(setups.count).toBe(1);
+  expect(errors).toEqual([]);
+});