@antelopejs/dms 0.9.2 → 0.9.4

package/frontend-vue/tests/live-toggle.test.ts

@@ -1,248 +0,0 @@
-// @vitest-environment jsdom
-/**
- * The LiveToggle block: Direct / Pause as a two-segment toggle, "updated N s
- * ago" counted every second in the browser, L switching the page outside a
- * text field, and nothing at all on a page without `live`.
- */
-import { createApp, h, nextTick, type App } from "vue";
-import { readFileSync } from "node:fs";
-import { resolve } from "node:path";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { usePageLive } from "../layers/dms-ui/app/composables/live/usePageLive";
-import { defineShortcuts } from "@nuxt/ui/runtime/composables/defineShortcuts.js";
-import {
-  createPageLiveController,
-  type PageLiveController,
-} from "../layers/dms-ui/app/build/composables/live/pageLiveController";
-import { setCurrentPageLive } from "../layers/dms-ui/app/build/composables/live/currentPageLive";
-import { formatElapsed } from "../layers/dms-ui/app/build/composables/live/formatElapsed";
-
-let app: App | undefined;
-let host: HTMLDivElement;
-let live: PageLiveController | undefined;
-
-const t = (key: string, params?: { count?: number }) =>
-  params?.count === undefined ? key : `${key}:${params.count}`;
-
-async function createToggle(
-  target: HTMLElement,
-  props: Record<string, unknown> = {},
-): Promise<App> {
-  const { default: LiveToggleBlock } = await import(
-    "../layers/dms-ui/app/components/blocks/LiveToggleBlock.vue"
-  );
-  const toggle = createApp({
-    render: () =>
-      h(LiveToggleBlock, { componentId: "live", pageId: "api.logs", ...props }),
-  });
-  toggle.component("UIcon", () => h("i"));
-  toggle.component("UButton", (buttonProps: { label?: string }, { attrs }) =>
-    h("button", { ...attrs, type: "button" }, buttonProps.label),
-  );
-  toggle.mount(target);
-  await nextTick();
-  return toggle;
-}
-
-async function mountToggle(props: Record<string, unknown> = {}) {
-  app = await createToggle(host, props);
-}
-
-const segment = (value: string) =>
-  host.querySelector<HTMLButtonElement>(
-    `[role="radio"][data-value="${value}"]`,
-  ) ??
-  [...host.querySelectorAll<HTMLButtonElement>('[role="radio"]')].find(
-    (button) => button.textContent?.includes(`dms.live.${value}`),
-  );
-
-const pressL = (target: EventTarget = document) =>
-  target.dispatchEvent(
-    new KeyboardEvent("keydown", { key: "l", bubbles: true }),
-  );
-
-beforeEach(() => {
-  vi.useFakeTimers();
-  vi.stubGlobal("useI18n", () => ({ t }));
-  vi.stubGlobal("defineShortcuts", defineShortcuts);
-  host = document.createElement("div");
-  document.body.append(host);
-  window.localStorage.clear();
-});
-
-afterEach(() => {
-  app?.unmount();
-  app = undefined;
-  host.remove();
-  live?.dispose();
-  live = undefined;
-  setCurrentPageLive(null);
-  vi.unstubAllGlobals();
-  vi.useRealTimers();
-});
-
-function installLive() {
-  live = createPageLiveController("api.logs", { maxRate: 2 });
-  setCurrentPageLive(live);
-  return live;
-}
-
-it("renders nothing on a page without live", async () => {
-  await mountToggle();
-  expect(host.querySelector(".dms-live-toggle")).toBeNull();
-});
-
-it("shows the page's state and switches it", async () => {
-  const controller = installLive();
-  await mountToggle();
-  expect(segment("direct")?.getAttribute("aria-checked")).toBe("true");
-
-  segment("pause")?.click();
-  await nextTick();
-  expect(controller.isPaused.value).toBe(true);
-  expect(segment("pause")?.getAttribute("aria-checked")).toBe("true");
-
-  segment("direct")?.click();
-  await nextTick();
-  expect(controller.isPaused.value).toBe(false);
-});
-
-it("counts the seconds since the last update, every second", async () => {
-  installLive();
-  await mountToggle();
-  expect(host.textContent).toContain("dms.live.updated_seconds:0");
-
-  vi.advanceTimersByTime(3000);
-  await nextTick();
-  expect(host.textContent).toContain("dms.live.updated_seconds:3");
-
-  vi.advanceTimersByTime(60_000);
-  await nextTick();
-  expect(host.textContent).toContain("dms.live.updated_minutes:1");
-});
-
-it("hides the time when asked to", async () => {
-  installLive();
-  await mountToggle({ showUpdatedAt: false });
-  expect(host.textContent).not.toContain("dms.live.updated");
-});
-
-it("switches on L, but not while typing", async () => {
-  const controller = installLive();
-  await mountToggle();
-
-  pressL();
-  expect(controller.isPaused.value).toBe(true);
-  pressL();
-  expect(controller.isPaused.value).toBe(false);
-
-  const field = document.createElement("input");
-  document.body.append(field);
-  field.focus();
-  await nextTick();
-  pressL(field);
-  expect(controller.isPaused.value).toBe(false);
-  field.remove();
-});
-
-it("reads elapsed times in seconds, minutes, then hours", () => {
-  expect(formatElapsed(-5)).toEqual({ unit: "seconds", count: 0 });
-  expect(formatElapsed(59_999)).toEqual({ unit: "seconds", count: 59 });
-  expect(formatElapsed(60_000)).toEqual({ unit: "minutes", count: 1 });
-  expect(formatElapsed(2 * 3_600_000 + 1)).toEqual({ unit: "hours", count: 2 });
-});
-
-it("switches once per L with two toggles on the page", async () => {
-  const controller = installLive();
-  await mountToggle();
-  const second = await createToggle(document.createElement("div"));
-
-  pressL();
-  expect(controller.isPaused.value).toBe(true);
-
-  app?.unmount();
-  app = undefined;
-  pressL();
-  expect(controller.isPaused.value).toBe(false);
-  second.unmount();
-});
-
-describe("the pill variant and the paused state", () => {
-  const pill = (value: string) =>
-    host.querySelector<HTMLButtonElement>(`button[data-value="${value}"]`);
-  const resumeButton = () =>
-    host.querySelector<HTMLButtonElement>('[data-action="resume"]');
-
-  it("draws a Live pill with a pulsing dot beside Pause", async () => {
-    installLive();
-    await mountToggle({ variant: "pill" });
-    expect(pill("direct")?.getAttribute("aria-pressed")).toBe("true");
-    expect(pill("direct")?.textContent).toContain("dms.live.direct");
-    expect(host.querySelector(".dms-live-toggle__dot")?.className).toContain(
-      "animate-pulse",
-    );
-    expect(host.textContent).toContain("dms.live.updated_seconds:0");
-    expect(resumeButton()).toBeNull();
-
-    pill("pause")?.click();
-    await nextTick();
-    expect(live?.isPaused.value).toBe(true);
-    expect(resumeButton()).not.toBeNull();
-
-    resumeButton()?.click();
-    await nextTick();
-    expect(live?.isPaused.value).toBe(false);
-  });
-
-  it("says what was missed, with the module's label and breakdown", async () => {
-    const controller = installLive();
-    await mountToggle({
-      variant: "pill",
-      missedLabel: "$api.live.new_requests",
-    });
-    controller.pause();
-    const block = controller.subscribe(() => {});
-    block.trigger({ topic: "api", payload: { count: 40 } });
-    usePageLive().setMissedDetail({
-      text: "$api.live.in_5xx",
-      params: { count: 2 },
-      tone: "error",
-    });
-    await nextTick();
-
-    const status = host.querySelector(".dms-live-toggle__status");
-    expect(status?.textContent).toContain(
-      "dms.live.paused · api.live.new_requests:40",
-    );
-    expect(status?.querySelector(".text-error")?.textContent).toContain(
-      "api.live.in_5xx:2",
-    );
-  });
-
-  it("names the reason a component holds the page for", async () => {
-    installLive();
-    await mountToggle();
-    usePageLive().hold("$api.live.typing_in_tester");
-    await nextTick();
-    expect(host.textContent).toContain(
-      "dms.live.paused · api.live.typing_in_tester",
-    );
-    expect(host.textContent).not.toContain("dms.live.updated");
-  });
-
-  it("reads Live in en-GB, Direct in fr-FR", () => {
-    const locale = (name: string) =>
-      JSON.parse(
-        readFileSync(
-          resolve(__dirname, `../layers/dms-ui/i18n/locales/ui-${name}.json`),
-          "utf8",
-        ),
-      ).dms.live;
-    expect(locale("en-GB").direct).toBe("Live");
-    expect(locale("fr-FR").direct).toBe("Direct");
-    for (const key of ["paused", "resume", "reason_hidden", "polling"]) {
-      expect(locale("en-GB")[key]).toBeTruthy();
-      expect(locale("fr-FR")[key]).toBeTruthy();
-    }
-  });
-});

package/frontend-vue/tests/master-detail-layout.test.ts

@@ -1,53 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, expect, it } from "vitest";
-import { type App, createApp, h, nextTick } from "vue";
-
-const ITEMS = [
-  { value: "a", label: "Alpha" },
-  { value: "b", label: "Beta" },
-];
-// The former `lg` viewport breakpoint, now read off the component's own width.
-const SIDE_BY_SIDE_COLUMNS = "@5xl:grid-cols-[380px_minmax(0,1fr)]";
-const VIEWPORT_VARIANT = /(?:^|\s)(?:sm|md|lg|xl|2xl):/;
-
-let app: App | undefined;
-let host: HTMLDivElement;
-
-async function mount() {
-  const { default: MasterDetail } = await import(
-    "../layers/dms-ui/app/components/master-detail/MasterDetail.vue"
-  );
-  app = createApp({
-    setup: () => () =>
-      h(
-        MasterDetail,
-        { items: ITEMS, modelValue: "a" },
-        { default: () => h("p", "detail") },
-      ),
-  });
-  app.component("UIcon", () => h("i"));
-  app.mount(host);
-  await nextTick();
-}
-
-beforeEach(() => {
-  host = document.createElement("div");
-  document.body.append(host);
-});
-
-afterEach(() => {
-  app?.unmount();
-  host.remove();
-});
-
-it("lays the panes out from its own width, not the viewport's", async () => {
-  await mount();
-  const container = host.firstElementChild as HTMLElement;
-  const grid = container.firstElementChild as HTMLElement;
-  expect(container.classList).toContain("@container");
-  expect(grid.classList).toContain("grid-cols-1");
-  expect(grid.classList).toContain(SIDE_BY_SIDE_COLUMNS);
-  for (const element of host.querySelectorAll("*")) {
-    expect(element.getAttribute("class") ?? "").not.toMatch(VIEWPORT_VARIANT);
-  }
-});

package/frontend-vue/tests/member-role-picker.test.ts

@@ -1,255 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, expect, it, vi } from "vitest";
-import {
-  type App,
-  computed,
-  createApp,
-  defineComponent,
-  h,
-  nextTick,
-  onMounted,
-  provide,
-  ref,
-} from "vue";
-import {
-  formFieldInjectionKey,
-  formStateInjectionKey,
-} from "@nuxt/ui/composables/useFormField";
-import { sameFormValue } from "../layers/dms-ui/app/build/composables/unsaved-changes/formValue";
-import { browserRuntime, stubApiData } from "./helpers/api-data-runtime";
-
-const ROLES_URL = "/settings/workspace/members/role-options";
-const ROLE_OPTIONS = {
-  roles: [
-    { _id: "admin", name: "Admin", permissionIds: ["a", "b", "c"] },
-    { _id: "finance", name: "Finance", permissionIds: ["c", "d"] },
-    { _id: "support", name: "Support", permissionIds: ["e"] },
-  ],
-  totalPermissions: 10,
-};
-
-const fieldError = ref<string | undefined>();
-const formState = ref<Record<string, unknown>>({});
-const model = ref<string[] | null | undefined>([]);
-const authFetch = vi.fn();
-
-let app: App | undefined;
-let host: HTMLDivElement;
-
-const translate = (key: string, named?: Record<string, unknown>) =>
-  named ? `${key} ${Object.values(named).join("/")}` : key;
-
-async function flush(): Promise<void> {
-  for (let tick = 0; tick < 6; tick++) await nextTick();
-}
-
-/** The picker inside a UFormField named `roleIds`, as a form renders it. */
-async function mountPicker(props: Record<string, unknown> = {}) {
-  const { default: MemberRolePicker } = await import(
-    "../layers/dms-layout/app/build/components/pages/settings/members/MemberRolePicker.vue"
-  );
-  const Field = defineComponent({
-    setup() {
-      provide(
-        formFieldInjectionKey,
-        computed(() => ({
-          name: "roleIds",
-          error: fieldError.value,
-          ariaId: "field-roles",
-        })) as never,
-      );
-      provide(
-        formStateInjectionKey,
-        computed(() => formState.value),
-      );
-      return () =>
-        h(MemberRolePicker, {
-          id: "roleIds",
-          rolesUrl: ROLES_URL,
-          modelValue: model.value,
-          "onUpdate:modelValue": (value: string[]) => {
-            model.value = value;
-          },
-          ...props,
-        });
-    },
-  });
-  app = createApp(Field);
-  browserRuntime(app);
-  const stub = (tag: string) =>
-    defineComponent({
-      setup:
-        (_, { slots }) =>
-        () =>
-          h(tag, slots.default?.()),
-    });
-  app.component("UIcon", stub("i"));
-  app.component("USkeleton", stub("span"));
-  app.component("ULink", stub("a"));
-  app.mount(host);
-  await flush();
-}
-
-const pill = (name: string) =>
-  [...host.querySelectorAll<HTMLButtonElement>("button[data-value]")].find(
-    (button) => button.textContent?.trim() === name,
-  )!;
-const pressed = () =>
-  [...host.querySelectorAll("button[aria-pressed='true']")].map((button) =>
-    button.textContent?.trim(),
-  );
-const hint = () => host.querySelector("p")?.textContent?.trim();
-
-async function toggle(name: string): Promise<void> {
-  pill(name).click();
-  await flush();
-}
-
-beforeEach(() => {
-  vi.stubGlobal("computed", computed);
-  vi.stubGlobal("ref", ref);
-  vi.stubGlobal("onMounted", onMounted);
-  vi.stubGlobal("useI18n", () => ({ t: translate }));
-  authFetch.mockReset();
-  authFetch.mockResolvedValue(ROLE_OPTIONS);
-  stubApiData(authFetch);
-  fieldError.value = undefined;
-  formState.value = {};
-  model.value = [];
-  host = document.createElement("div");
-  document.body.append(host);
-});
-
-afterEach(() => {
-  app?.unmount();
-  host.remove();
-  vi.unstubAllGlobals();
-});
-
-it("offers the server's roles and picks and unpicks them", async () => {
-  await mountPicker();
-
-  expect(authFetch).toHaveBeenCalledWith(ROLES_URL, expect.anything());
-  expect(
-    [...host.querySelectorAll("button[data-value]")].map((b) =>
-      b.textContent?.trim(),
-    ),
-  ).toEqual(["Admin", "Finance", "Support"]);
-  expect(pressed()).toEqual([]);
-
-  await toggle("Finance");
-  await toggle("Admin");
-  expect(model.value).toEqual(["finance", "admin"]);
-  expect(pressed()).toEqual(["Admin", "Finance"]);
-  // Permissions granted by both roles count once.
-  expect(hint()).toContain(
-    "page.settings.members.invite.roles_hint Admin + Finance/4/10",
-  );
-
-  await toggle("Finance");
-  expect(model.value).toEqual(["admin"]);
-});
-
-it("can clear every role, saying what an empty choice means", async () => {
-  model.value = ["support"];
-  await mountPicker({ allowEmpty: true });
-
-  await toggle("Support");
-  expect(model.value).toEqual([]);
-  expect(hint()).toContain("page.settings.members.form.roles_hint_none");
-});
-
-it("asks for a role while none is picked when one is required", async () => {
-  await mountPicker();
-  expect(hint()).toContain("page.settings.members.invite.roles_hint_empty");
-});
-
-it("rings the unpicked pills and marks the group invalid on a field error", async () => {
-  model.value = ["admin"];
-  await mountPicker();
-  const group = host.querySelector("[role=group]")!;
-  expect(group.getAttribute("aria-invalid")).toBe("false");
-  expect(pill("Finance").className).not.toContain("border-error");
-
-  fieldError.value = "This field is required";
-  await flush();
-
-  expect(group.getAttribute("aria-invalid")).toBe("true");
-  expect(group.getAttribute("aria-describedby")).toBe("field-roles-error");
-  expect(pill("Finance").className).toContain("border-error");
-  expect(pill("Support").className).toContain("border-error");
-  // A picked role keeps its picked look.
-  expect(pill("Admin").className).not.toContain("border-error");
-});
-
-it("puts a role picked again back in its loaded place, leaving the form clean", async () => {
-  // As the members data API loads them: `{ _id, name }` each.
-  const loaded = [
-    { _id: "support", name: "Support" },
-    { _id: "admin", name: "Admin" },
-  ];
-  model.value = ["support", "admin"];
-  await mountPicker({
-    initialValue: loaded,
-    keyMapping: { label: "name", value: "_id" },
-  });
-
-  await toggle("Support");
-  expect(sameFormValue(model.value, ["support", "admin"])).toBe(false);
-
-  await toggle("Support");
-  expect(model.value).toEqual(["support", "admin"]);
-  expect(sameFormValue(model.value, ["support", "admin"])).toBe(true);
-
-  // A role new to the form follows the loaded ones.
-  await toggle("Finance");
-  expect(model.value).toEqual(["support", "admin", "finance"]);
-});
-
-it("keeps the roles inert while the owner field is on", async () => {
-  model.value = ["admin"];
-  formState.value = { isTenantOwner: true };
-  await mountPicker({ ownerField: "isTenantOwner" });
-
-  expect(pill("Finance").disabled).toBe(true);
-  expect(hint()).toContain("page.settings.members.invite.roles_owner_hint");
-  await toggle("Finance");
-  expect(model.value).toEqual(["admin"]);
-
-  formState.value = { isTenantOwner: false };
-  await flush();
-  expect(pill("Finance").disabled).toBe(false);
-  await toggle("Finance");
-  expect(model.value).toEqual(["admin", "finance"]);
-});
-
-it("waits for the form's values before showing the pills", async () => {
-  await mountPicker({ loading: true });
-  expect(host.querySelectorAll("button[data-value]")).toHaveLength(0);
-});
-
-it("warns while a picked role amounts to owner-level access, not for an owner", async () => {
-  authFetch.mockResolvedValue({
-    ...ROLE_OPTIONS,
-    roles: ROLE_OPTIONS.roles.map((role) =>
-      role._id === "admin"
-        ? { ...role, warnings: ["$page.settings.roles.warning.members"] }
-        : role,
-    ),
-  });
-  const warning = () =>
-    host.querySelector("[data-role-owner-level]")?.textContent?.trim();
-  await mountPicker({ ownerField: "isTenantOwner" });
-
-  await toggle("Finance");
-  expect(warning()).toBeUndefined();
-
-  await toggle("Admin");
-  expect(warning()).toBe(
-    "page.settings.members.invite.roles_owner_level Admin",
-  );
-
-  formState.value = { isTenantOwner: true };
-  await flush();
-  expect(warning()).toBeUndefined();
-});

package/frontend-vue/tests/menu-hidden-page.test.ts

@@ -1,93 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { convertSiteLayoutTreeToTreeItems } from "../layers/dms-ui/app/build/types/tree";
-
-// A page the viewer may open but whose every block is hidden from them is
-// served out of the menu (`hasAccess: false`, name kept): an Invitations-only
-// role got a Members entry that opened on "nothing to show for you". The
-// pages nested under it keep their own entries, and opening it leads to the
-// first of them.
-
-type TreeNode = NonNullable<
-  Parameters<typeof convertSiteLayoutTreeToTreeItems>[0]
->;
-
-interface NodeFixture {
-  id: string;
-  fullId: string;
-  hasAccess?: boolean;
-  layoutUrl?: string;
-  children?: NodeFixture[];
-}
-
-function node({ children = [], ...fixture }: NodeFixture): TreeNode {
-  return {
-    displayName: fixture.id,
-    fullSlug: `/${fixture.fullId.replaceAll(".", "/")}`,
-    ...fixture,
-    children: Object.fromEntries(
-      children.map((child) => [child.id, node(child)]),
-    ),
-    childrenOrders: children.map((child) => child.id),
-  } as unknown as TreeNode;
-}
-
-const page = (
-  fullId: string,
-  hasAccess = true,
-  children: NodeFixture[] = [],
-) => ({
-  id: fullId.split(".").pop()!,
-  fullId,
-  hasAccess,
-  layoutUrl: `/${fullId}/pagelayout`,
-  children,
-});
-
-function tree(members: NodeFixture, extra: NodeFixture[] = []): TreeNode {
-  return node({
-    id: "",
-    fullId: "",
-    children: [
-      {
-        id: "workspace",
-        fullId: "workspace",
-        hasAccess: true,
-        children: [members, page("workspace.roles"), ...extra],
-      },
-    ],
-  });
-}
-
-function sidebarIds(root: TreeNode): string[] {
-  const ids = (items: Array<{ fullId?: unknown; children?: unknown }>) =>
-    items.flatMap((item): string[] => [
-      String(item.fullId),
-      ...ids((item.children as typeof items | undefined) ?? []),
-    ]);
-  return ids(convertSiteLayoutTreeToTreeItems(root).flat());
-}
-
-describe("the sidebar", () => {
-  it("lists the reachable pages nested under a page left out of it", () => {
-    const root = tree(
-      page("workspace.members", false, [page("workspace.members.invites")]),
-    );
-    expect(sidebarIds(root)).toEqual([
-      "workspace",
-      "workspace.members.invites",
-      "workspace.roles",
-    ]);
-  });
-
-  it("still drops a group left out of it, with what it holds", () => {
-    const root = tree(page("workspace.members"), [
-      {
-        id: "billing",
-        fullId: "workspace.billing",
-        hasAccess: false,
-        children: [page("workspace.billing.invoices")],
-      },
-    ]);
-    expect(sidebarIds(root)).not.toContain("workspace.billing.invoices");
-  });
-});