@antelopejs/dms 0.9.1 → 0.9.3

package/frontend-vue/tests/header-action-page-query.test.ts

@@ -1,426 +0,0 @@
-// @vitest-environment jsdom
-/**
- * A page header's buttons follow the page URL: a target URL takes the
- * `{{params.X}}` / `{{query.X}}` tokens of a block's `fetchUrl`, and a
- * button whose availability reads the query is asked for again when the
- * query changes. The served buttons and a page's own actions
- * (`usePageHeaderActions`) share one order.
- */
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import {
-  computed,
-  createApp,
-  defineComponent,
-  h,
-  nextTick,
-  reactive,
-  ref,
-  type App,
-  type FunctionalComponent,
-} from "vue";
-import { resolveLinkVariables } from "../layers/dms-ui/app/build/utils/urlVariables";
-import {
-  isSamePageQuery,
-  layoutUrlWithQuery,
-  pageQueryValues,
-} from "../layers/dms-layout/app/utils/pageQuery";
-import {
-  providePageHeaderActions,
-  usePageHeaderActions,
-  type PageHeaderActionsOptions,
-} from "../layers/dms-layout/app/composables/layout/usePageHeaderActions";
-
-const handleCustomButton = vi.fn();
-vi.mock("#dms-ui/app/build/composables/actions/useActionTargets", () => ({
-  useActionTargets: () => ({ handleCustomButton }),
-}));
-vi.mock("#dms-core/app/build/composables/auth/usePermissionPreview", () => ({
-  usePermissionPreview: () => ({
-    isHeaderActionHidden: () => false,
-    session: ref(null),
-  }),
-}));
-
-const LAYOUT_URL = "/modules/lang/queue/pagelayout";
-const route = reactive<{ path: string; query: Record<string, unknown> }>({
-  path: "/modules/lang/queue/de",
-  query: {},
-});
-const authFetch = vi.fn();
-
-const ButtonStub = defineComponent({
-  props: { label: String, disabled: Boolean, onClick: Function, to: String },
-  setup: (props) => () =>
-    h(
-      "button",
-      {
-        disabled: props.disabled,
-        "data-to": props.to,
-        onClick: () => props.onClick?.(),
-      },
-      props.label,
-    ),
-});
-const SlotStub: FunctionalComponent = (_, { slots }) => slots.default?.();
-
-let app: App | undefined;
-let host: HTMLDivElement;
-
-beforeEach(() => {
-  route.query = { workspace: "web" };
-  handleCustomButton.mockClear();
-  authFetch.mockReset();
-  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
-  vi.stubGlobal("computed", computed);
-  vi.stubGlobal("useTranslation", () => ({
-    processI18n: (value: string, params?: Record<string, unknown>) =>
-      value.replace(/\{(\w+)\}/g, (_, name: string) =>
-        String(params?.[name] ?? `{${name}}`),
-      ),
-  }));
-  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
-  vi.stubGlobal("useDmsRoute", () => route);
-  vi.stubGlobal("useDmsRouter", () => ({ replace: vi.fn() }));
-  vi.stubGlobal("useSiteLayout", () => ({
-    quickActions: ref(null),
-    findMatchingRoute: () => ({
-      metadata: { layoutUrl: LAYOUT_URL },
-      params: { locale: "de" },
-    }),
-  }));
-  host = document.createElement("div");
-  document.body.append(host);
-});
-
-afterEach(() => {
-  app?.unmount();
-  app = undefined;
-  host.remove();
-  vi.unstubAllGlobals();
-});
-
-async function mount(path: string, props: Record<string, unknown>) {
-  const { default: component } = await import(path);
-  app = createApp({ render: () => h(component, props) });
-  app.component("UButton", ButtonStub);
-  app.component("UTooltip", SlotStub);
-  app.mount(host);
-  await nextTick();
-}
-
-const mountBar = (actions: unknown[]) =>
-  mount(
-    "../layers/dms-layout/app/build/components/layout/PageHeaderActionBar.vue",
-    { actions },
-  );
-
-const buttons = () => [...host.querySelectorAll("button")];
-const labels = () => buttons().map((button) => button.textContent);
-
-describe("resolveLinkVariables", () => {
-  const context = {
-    routeParams: { id: "ws 1" },
-    routeQuery: { workspace: "web", tab: "a&b" },
-  };
-
-  it("fills the page's params and query, encoded", () => {
-    expect(
-      resolveLinkVariables(
-        "/ws/{{params.id}}?workspace={{query.workspace}}&tab={{query.tab}}",
-        context,
-      ),
-    ).toBe("/ws/ws%201?workspace=web&tab=a%26b");
-  });
-
-  it("leaves out a query pair the page has no value for", () => {
-    expect(
-      resolveLinkVariables(
-        "/t?missing={{query.locale}}&workspace={{query.workspace}}#keys",
-        context,
-      ),
-    ).toBe("/t?workspace=web#keys");
-    expect(resolveLinkVariables("/t?locale={{query.locale}}", context)).toBe(
-      "/t",
-    );
-  });
-
-  it("fills a query key carrying dots", () => {
-    expect(
-      resolveLinkVariables("/logs?period={{query.api.period}}", {
-        routeQuery: { "api.period": "7d" },
-      }),
-    ).toBe("/logs?period=7d");
-  });
-
-  it("empties any other token left without a value", () => {
-    expect(resolveLinkVariables("/t/{{params.slug}}/edit", context)).toBe(
-      "/t//edit",
-    );
-  });
-});
-
-describe("page query helpers", () => {
-  it("reads one value per name, the last, as the server does", () => {
-    expect(
-      pageQueryValues({ workspace: "web", tag: ["a", "b"], empty: null }),
-    ).toEqual({ workspace: "web", tag: "b" });
-  });
-
-  it("compares queries in any order", () => {
-    expect(isSamePageQuery({ a: "1", b: "2" }, { b: "2", a: "1" })).toBe(true);
-    expect(isSamePageQuery({ a: "1" }, { a: "1", b: "2" })).toBe(false);
-  });
-
-  it("leaves out the keys that only record the view's state", () => {
-    const base = { workspace: "shop" };
-    expect(
-      isSamePageQuery(base, {
-        workspace: "shop",
-        record: "42",
-        live: "0",
-        "api.period": "24h",
-        "api.compare": "previous",
-        "api.from": "2026-10-01",
-      }),
-    ).toBe(true);
-    expect(isSamePageQuery(base, { workspace: "blog", record: "42" })).toBe(
-      false,
-    );
-  });
-
-  it("asks the layout URL for a query", () => {
-    expect(layoutUrlWithQuery("/p/pagelayout", { workspace: "a b" })).toBe(
-      "/p/pagelayout?workspace=a+b",
-    );
-    expect(layoutUrlWithQuery("/p/pagelayout", {})).toBe("/p/pagelayout");
-  });
-});
-
-describe("a header button's target URL", () => {
-  it("links to the page's scope, and follows it", async () => {
-    await mountBar([
-      {
-        id: "matrix",
-        label: "Open matrix",
-        target: {
-          type: "page",
-          url: "/modules/lang/translations?workspace={{query.workspace}}&missingIn={{params.locale}}",
-        },
-      },
-    ]);
-    expect(buttons()[0]?.dataset.to).toBe(
-      "/modules/lang/translations?workspace=web&missingIn=de",
-    );
-
-    route.query = { workspace: "docs" };
-    await nextTick();
-    expect(buttons()[0]?.dataset.to).toBe(
-      "/modules/lang/translations?workspace=docs&missingIn=de",
-    );
-
-    route.query = {};
-    await nextTick();
-    expect(buttons()[0]?.dataset.to).toBe(
-      "/modules/lang/translations?missingIn=de",
-    );
-  });
-
-  it("runs an API target on the page's record", async () => {
-    await mountBar([
-      {
-        id: "export",
-        label: "Export",
-        target: {
-          type: "api",
-          url: "/api/lang/export?workspace={{query.workspace}}",
-          successMessage: "Done",
-        },
-        confirm: { title: "Export?" },
-      },
-    ]);
-    buttons()[0]?.click();
-    expect(handleCustomButton).toHaveBeenCalledWith(
-      expect.objectContaining({
-        target: expect.objectContaining({
-          url: "/api/lang/export?workspace=web",
-        }),
-      }),
-    );
-  });
-  it("runs a download target on the page's scope, as a button", async () => {
-    await mountBar([
-      {
-        id: "download-language",
-        label: "Download",
-        target: {
-          type: "download",
-          url: "/api/lang/translations/export?workspace={{query.workspace}}&locale={{params.locale}}",
-          filename: "{{params.locale}}.json",
-        },
-      },
-    ]);
-    expect(buttons()[0]?.dataset.to).toBeUndefined();
-    buttons()[0]?.click();
-    expect(handleCustomButton).toHaveBeenCalledWith(
-      expect.objectContaining({
-        target: {
-          type: "download",
-          url: "/api/lang/translations/export?workspace=web&locale=de",
-          filename: "{{params.locale}}.json",
-        },
-      }),
-    );
-  });
-});
-
-describe("a header button's label", () => {
-  it("reads the page's query and params as its parameters, and follows them", async () => {
-    route.query = { workspace: "web", file: "fr" };
-    await mountBar([
-      {
-        id: "download",
-        label: "Download {file}.json for {locale}",
-        target: { type: "page", url: "/x" },
-      },
-    ]);
-    expect(labels()).toEqual(["Download fr.json for de"]);
-
-    route.query = { workspace: "web", file: "it" };
-    await nextTick();
-    expect(labels()).toEqual(["Download it.json for de"]);
-  });
-});
-
-describe("a header button's availability", () => {
-  const download = (disabled: boolean) => ({
-    id: "download",
-    label: "Download",
-    target: { type: "page", url: "/download" },
-    disabled,
-  });
-
-  const mountOutlet = (servedQuery?: Record<string, string>) =>
-    mount(
-      "../layers/dms-layout/app/build/components/layout/PageHeaderActionsOutlet.vue",
-      { actions: [download(false)], servedQuery },
-    );
-
-  it("is not asked again while the query is the one it was served for", async () => {
-    await mountOutlet({ workspace: "web" });
-    expect(authFetch).not.toHaveBeenCalled();
-    expect(buttons()[0]?.disabled).toBe(false);
-  });
-
-  it("is asked again for the page's query when it changes", async () => {
-    authFetch.mockResolvedValue({
-      components: {},
-      layout: { options: { headerActions: [download(true)] } },
-    });
-    await mountOutlet({ workspace: "web" });
-
-    route.query = { workspace: "gone" };
-    await nextTick();
-    await new Promise((resolve) => setTimeout(resolve));
-    expect(authFetch).toHaveBeenCalledWith(`${LAYOUT_URL}?workspace=gone`);
-    expect(buttons()[0]?.disabled).toBe(true);
-
-    route.query = { workspace: "web" };
-    await nextTick();
-    expect(buttons()[0]?.disabled).toBe(false);
-  });
-
-  it("shows a button it hides only for the queries it does not hide it for", async () => {
-    const addKey = {
-      id: "add-key",
-      label: "Add key",
-      target: download(false).target,
-    };
-    authFetch.mockResolvedValue({
-      components: {},
-      layout: { options: { headerActions: [download(false)] } },
-    });
-    await mount(
-      "../layers/dms-layout/app/build/components/layout/PageHeaderActionsOutlet.vue",
-      { actions: [download(false), addKey], servedQuery: { workspace: "web" } },
-    );
-    expect(labels()).toEqual(["Download", "Add key"]);
-
-    route.query = { workspace: "modules" };
-    await nextTick();
-    await new Promise((resolve) => setTimeout(resolve));
-    expect(authFetch).toHaveBeenCalledWith(`${LAYOUT_URL}?workspace=modules`);
-    expect(labels()).toEqual(["Download"]);
-
-    route.query = { workspace: "web" };
-    await nextTick();
-    expect(labels()).toEqual(["Download", "Add key"]);
-  });
-
-  it("is never asked again when no button declares one", async () => {
-    await mountOutlet(undefined);
-    route.query = { workspace: "gone" };
-    await nextTick();
-    expect(authFetch).not.toHaveBeenCalled();
-  });
-});
-
-describe("the order of the header's buttons", () => {
-  const served = (id: string, order?: number) => ({
-    id,
-    label: id,
-    target: { type: "page", url: `/${id}` },
-    order,
-  });
-
-  // A layout's page body: the outlet, then the page calling
-  // usePageHeaderActions, then the marker saying the page has rendered.
-  async function mountPage(
-    actions: unknown[],
-    options?: PageHeaderActionsOptions,
-  ) {
-    const { default: Outlet } = await import(
-      "../layers/dms-layout/app/build/components/layout/PageHeaderActionsOutlet.vue"
-    );
-    const Page = defineComponent({
-      setup() {
-        usePageHeaderActions(() => h("button", "Export"), options);
-        return () => null;
-      },
-    });
-    const Body = defineComponent({
-      setup() {
-        const pageHost = providePageHeaderActions();
-        const Rendered = defineComponent({
-          setup() {
-            pageHost.markSlotRendered();
-            return () => null;
-          },
-        });
-        return () => [h(Outlet, { actions }), h(Page), h(Rendered)];
-      },
-    });
-    app = createApp(Body);
-    app.component("UButton", ButtonStub);
-    app.component("UTooltip", SlotStub);
-    app.mount(host);
-    await nextTick();
-  }
-
-  it("puts the page's actions after the served buttons by default", async () => {
-    await mountPage([served("add-key"), served("add-language")]);
-    expect(labels()).toEqual(["add-key", "add-language", "Export"]);
-  });
-
-  it("puts them before the served buttons of a greater order", async () => {
-    await mountPage([served("add-key")], { order: -1 });
-    expect(labels()).toEqual(["Export", "add-key"]);
-  });
-
-  it("sorts the served buttons by order, the declared order breaking ties", async () => {
-    await mountPage(
-      [served("last", 2), served("first"), served("second"), served("mid", 1)],
-      { order: 1 },
-    );
-    expect(labels()).toEqual(["first", "second", "mid", "Export", "last"]);
-  });
-});

package/frontend-vue/tests/header-action-press-in-place.test.ts

@@ -1,231 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import {
-  computed,
-  createApp,
-  defineComponent,
-  h,
-  nextTick,
-  reactive,
-  ref,
-  type App,
-} from "vue";
-import {
-  registerQuickActionTarget,
-  runMountedQuickAction,
-} from "../layers/dms-ui/app/build/utils/quickActionTargets";
-
-const handleCustomButton = vi.fn();
-vi.mock("#dms-ui/app/build/composables/actions/useActionTargets", () => ({
-  useActionTargets: () => ({ handleCustomButton }),
-}));
-
-vi.mock("#dms-core/app/build/composables/auth/usePermissionPreview", () => ({
-  usePermissionPreview: () => ({
-    isHeaderActionHidden: () => false,
-    session: ref(null),
-  }),
-}));
-
-const MEMBERS_PATH = "/settings/workspace/members";
-const TABLE_ID = "table";
-const INVITE = "invite";
-
-// The members page as the backend serves it: the table view's "invite"
-// button, placed in the header, which opens the invite modal.
-const INVITE_HEADER_ACTION = {
-  id: `${TABLE_ID}:${INVITE}`,
-  componentId: TABLE_ID,
-  buttonId: INVITE,
-  label: "Invite members",
-  color: "primary" as const,
-};
-
-const ButtonStub = defineComponent({
-  props: { label: String, disabled: Boolean, onClick: Function, to: String },
-  setup: (props) => () =>
-    h(
-      "button",
-      {
-        disabled: props.disabled,
-        "data-to": props.to,
-        onClick: () => props.onClick?.(),
-      },
-      props.label,
-    ),
-});
-
-let app: App | undefined;
-let host: HTMLDivElement;
-const routerReplace = vi.fn(() => Promise.resolve());
-
-beforeEach(() => {
-  routerReplace.mockClear();
-  handleCustomButton.mockClear();
-  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: vi.fn() }));
-  vi.stubGlobal("computed", computed);
-  vi.stubGlobal("useTranslation", () => ({
-    processI18n: (value: string) => value,
-  }));
-  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
-  vi.stubGlobal("useDmsRoute", () =>
-    reactive({ path: MEMBERS_PATH, query: {} }),
-  );
-  vi.stubGlobal("useDmsRouter", () => ({ replace: routerReplace }));
-  vi.stubGlobal("useSiteLayout", () => ({
-    quickActions: ref(null),
-    findMatchingRoute: () => ({ metadata: { layoutUrl: MEMBERS_PATH } }),
-    pageLayouts: ref({
-      [MEMBERS_PATH]: {
-        components: {
-          [TABLE_ID]: { options: { customButtons: [{ id: INVITE }] } },
-        },
-      },
-    }),
-  }));
-  host = document.createElement("div");
-  document.body.append(host);
-});
-
-afterEach(() => {
-  app?.unmount();
-  app = undefined;
-  host.remove();
-  vi.unstubAllGlobals();
-});
-
-async function mountHeaderBar(actions: unknown[] = [INVITE_HEADER_ACTION]) {
-  const { default: PageHeaderActionBar } = await import(
-    "../layers/dms-layout/app/build/components/layout/PageHeaderActionBar.vue"
-  );
-  app = createApp({
-    render: () => h(PageHeaderActionBar, { actions }),
-  });
-  app.component("UButton", ButtonStub);
-  app.component(
-    "UTooltip",
-    defineComponent(
-      (_, { slots }) =>
-        () =>
-          slots.default?.(),
-    ),
-  );
-  app.mount(host);
-  await nextTick();
-  const button = host.querySelector("button");
-  if (!button) throw new Error("the header action did not render");
-  return button;
-}
-
-describe("a header action pressing a table view button", () => {
-  it("presses the mounted table view in place, on the click, without a server visit", async () => {
-    const run = vi.fn();
-    const unregister = registerQuickActionTarget({
-      path: MEMBERS_PATH,
-      componentId: TABLE_ID,
-      run,
-    });
-    try {
-      const button = await mountHeaderBar();
-      button.click();
-
-      // Routed through the URL, the modal opened two server visits later,
-      // and over the next page when the user navigated meanwhile.
-      expect(run).toHaveBeenCalledTimes(1);
-      expect(run).toHaveBeenCalledWith({ kind: "button", button: INVITE });
-      expect(routerReplace).not.toHaveBeenCalled();
-    } finally {
-      unregister();
-    }
-  });
-
-  it("falls back to the URL when the table view is not mounted", async () => {
-    const button = await mountHeaderBar();
-    button.click();
-
-    expect(routerReplace).toHaveBeenCalledTimes(1);
-    expect(routerReplace).toHaveBeenCalledWith({
-      query: {
-        quickAction: "button",
-        quickActionComponent: TABLE_ID,
-        quickActionButton: INVITE,
-      },
-    });
-  });
-});
-
-describe("header buttons", () => {
-  it("presses a table view's add placed in the header", async () => {
-    const run = vi.fn();
-    const unregister = registerQuickActionTarget({
-      path: MEMBERS_PATH,
-      componentId: TABLE_ID,
-      run,
-    });
-    try {
-      const button = await mountHeaderBar([
-        { id: `${TABLE_ID}:add`, componentId: TABLE_ID, label: "New" },
-      ]);
-      button.click();
-      expect(run).toHaveBeenCalledWith({ kind: "add" });
-    } finally {
-      unregister();
-    }
-  });
-
-  it("runs a declared button's target as a toolbar button", async () => {
-    const purge = {
-      id: "purge",
-      label: "Purge",
-      target: { type: "api", url: "/api/purge", successMessage: "Done" },
-      confirm: { title: "Purge?" },
-    };
-    const button = await mountHeaderBar([purge]);
-    button.click();
-    expect(handleCustomButton).toHaveBeenCalledWith(purge);
-  });
-
-  it("draws a page target as a link", async () => {
-    const button = await mountHeaderBar([
-      { id: "docs", label: "Docs", target: { type: "page", url: "/docs" } },
-    ]);
-    expect(button.dataset.to).toBe("/docs");
-  });
-
-  it("leaves out a quick action the user is not served", async () => {
-    await expect(
-      mountHeaderBar([
-        {
-          id: "new",
-          label: "",
-          target: { type: "quickAction", id: "billing:new-invoice" },
-        },
-      ]),
-    ).rejects.toThrow(/did not render/);
-  });
-});
-
-describe("runMountedQuickAction", () => {
-  const intent = { kind: "button", button: INVITE } as const;
-
-  it("only answers for the table view of that page", () => {
-    const run = vi.fn();
-    const unregister = registerQuickActionTarget({
-      path: MEMBERS_PATH,
-      componentId: TABLE_ID,
-      run,
-    });
-
-    expect(
-      runMountedQuickAction("/settings/workspace/roles", TABLE_ID, intent),
-    ).toBe(false);
-    expect(runMountedQuickAction(MEMBERS_PATH, "other", intent)).toBe(false);
-    expect(run).not.toHaveBeenCalled();
-    expect(runMountedQuickAction(MEMBERS_PATH, TABLE_ID, intent)).toBe(true);
-    expect(run).toHaveBeenCalledOnce();
-
-    unregister();
-    expect(runMountedQuickAction(MEMBERS_PATH, TABLE_ID, intent)).toBe(false);
-    expect(run).toHaveBeenCalledOnce();
-  });
-});