@antelopejs/dms 0.5.5 → 0.6.0

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

@@ -0,0 +1,231 @@
+// @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();
+  });
+});

package/frontend-vue/tests/image-hydration-ids.test.ts

@@ -53,8 +53,17 @@ beforeEach(() => {
   vi.stubGlobal("useUploadWithProgress", () => ({
     uploadWithProgress: vi.fn(),
   }));
-  vi.stubGlobal("useFormField", () => ({ emitFormChange: vi.fn() }));
+  vi.stubGlobal("useFormField", () => ({
+    emitFormChange: vi.fn(),
+    color: ref(undefined),
+    ariaAttrs: ref(undefined),
+  }));
   vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal(
+    "useDmsCookie",
+    (_key: string, options: { default: () => unknown }) =>
+      ref(options.default()),
+  );
   vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
 });
 

package/frontend-vue/tests/image-reference-preservation.test.ts

@@ -20,6 +20,8 @@ import {
 import { renderToString } from "vue/server-renderer";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import Image from "../layers/dms-ui/app/components/form/components/Image.vue";
+import { useKeyboardPlatform } from "../layers/dms-ui/app/composables/global/keyboardPlatform";
+import { fieldErrorId } from "../layers/dms-core/app/composables/useFieldErrors";
 import {
   isDefinitiveMetadataFailure,
   resolveMetadataRetryDelay,
@@ -72,7 +74,7 @@ function loadImage(): ImageHarness {
     .split('<script setup lang="ts">')[1]!
     .split("</script>")[0]!;
   const source = script
-    .replace(/^import[\s\S]*?from "[^"]+";\n/gm, "")
+    .replace(/^import[\s\S]*?from "[^"]+";\r?\n/gm, "")
     .replaceAll("import.meta.env.SSR", "false")
     .replace(/^export type /gm, "type ");
   const { outputText } = transpileModule(source, {});
@@ -112,8 +114,22 @@ beforeEach(() => {
   vi.stubGlobal("useUploadWithProgress", () => ({
     uploadWithProgress: upload,
   }));
-  vi.stubGlobal("useFormField", () => ({ emitFormChange: vi.fn() }));
+  // Outside a UFormField: no error, no aria attributes.
+  vi.stubGlobal("useFormField", () => ({
+    emitFormChange: vi.fn(),
+    color: ref(undefined),
+    highlight: ref(undefined),
+    ariaAttrs: ref(undefined),
+  }));
   vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal(
+    "useDmsCookie",
+    (_key: string, options: { default: () => unknown }) =>
+      ref(options.default()),
+  );
+  // The script runs without its imports: hand it the paste-hint composable.
+  vi.stubGlobal("useKeyboardPlatform", useKeyboardPlatform);
+  vi.stubGlobal("fieldErrorId", fieldErrorId);
   vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
 });
 

package/frontend-vue/tests/input-tags.test.ts

@@ -0,0 +1,146 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import {
+  type App,
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  inject,
+  nextTick,
+  provide,
+  ref,
+  watch,
+} from "vue";
+import {
+  formErrorsInjectionKey,
+  formFieldInjectionKey,
+} from "@nuxt/ui/composables/useFormField";
+import { FORM_CONTROL_ERRORS_KEY } from "../layers/dms-ui/app/build/composables/form/useControlError";
+
+const formErrors = ref<Array<Record<string, unknown>>>([]);
+const model = ref<string[]>([]);
+const reported = new Map<string, string | undefined>();
+let emitTags: (tags: string[]) => void = () => {};
+
+let app: App | undefined;
+let host: HTMLDivElement;
+
+async function flush(): Promise<void> {
+  for (let tick = 0; tick < 4; tick++) await nextTick();
+}
+
+// Renders each tag through the component's `item-text` slot, and hands the
+// test the way the tags input reports a change.
+const InputTagsStub = defineComponent({
+  props: { modelValue: { type: Array, default: () => [] } },
+  emits: ["update:modelValue"],
+  setup(props, { slots, emit }) {
+    emitTags = (tags) => emit("update:modelValue", tags);
+    return () =>
+      h(
+        "div",
+        props.modelValue.map((item) =>
+          h("span", { class: "tag" }, slots["item-text"]?.({ item })),
+        ),
+      );
+  },
+});
+
+async function mountTags(props: Record<string, unknown>): Promise<void> {
+  const { default: InputTags } = await import(
+    "../layers/dms-ui/app/components/form/components/InputTags.vue"
+  );
+  const Field = defineComponent({
+    setup() {
+      provide(
+        formFieldInjectionKey,
+        computed(() => ({ name: "emails", ariaId: "field-emails" })) as never,
+      );
+      provide(formErrorsInjectionKey, formErrors as never);
+      provide(FORM_CONTROL_ERRORS_KEY, {
+        report: (field: string, message: string | undefined) =>
+          reported.set(field, message),
+      });
+      return () =>
+        h(InputTags, {
+          id: "emails",
+          ...props,
+          modelValue: model.value,
+          "onUpdate:modelValue": (value: string[]) => {
+            model.value = value;
+          },
+        });
+    },
+  });
+  app = createApp(Field);
+  app.component("UInputTags", InputTagsStub);
+  app.component("UIcon", defineComponent({ setup: () => () => h("i") }));
+  app.mount(host);
+  await flush();
+}
+
+const flagged = () =>
+  [...host.querySelectorAll("[data-flagged]")].map((tag) =>
+    tag.textContent?.trim(),
+  );
+
+beforeEach(() => {
+  for (const [name, value] of Object.entries({
+    computed,
+    ref,
+    watch,
+    inject,
+  })) {
+    vi.stubGlobal(name, value);
+  }
+  vi.stubGlobal("useI18n", () => ({
+    t: (key: string, named?: Record<string, unknown>) =>
+      `${key} ${Object.values(named ?? {}).join("/")}`,
+  }));
+  formErrors.value = [];
+  model.value = [];
+  reported.clear();
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+it("keeps each address once, in lower case, up to max", async () => {
+  await mountTags({ itemType: "email", max: 2 });
+  emitTags(["Ana@test.local", "ana@test.local", "bob@test.local", "c@d.io"]);
+  await flush();
+
+  expect(model.value).toEqual(["ana@test.local", "bob@test.local"]);
+});
+
+it("turns an item that is no address red, and refuses the field", async () => {
+  await mountTags({ itemType: "email" });
+  emitTags(["ana@test.local", "not-an-address"]);
+  await flush();
+
+  expect(flagged()).toEqual(["not-an-address"]);
+  expect(reported.get("emails")).toBe(
+    "dms.form.tags.invalid_email not-an-address",
+  );
+
+  emitTags(["ana@test.local"]);
+  await flush();
+  expect(reported.get("emails")).toBeUndefined();
+});
+
+it("marks the addresses a server error names", async () => {
+  model.value = ["ana@test.local", "bob@test.local"];
+  await mountTags({ itemType: "email" });
+  formErrors.value = [
+    { name: "emails", message: "Already a member", values: ["BOB@test.local"] },
+  ];
+  await flush();
+
+  expect(flagged()).toEqual(["bob@test.local"]);
+});

package/frontend-vue/tests/instant-save-badge.test.ts

@@ -0,0 +1,195 @@
+// @vitest-environment jsdom
+import { readFileSync, readdirSync } from "node:fs";
+import { join, relative, resolve } from "node:path";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, type App } from "vue";
+import uiEn from "../layers/dms-ui/i18n/locales/ui-en-GB.json";
+import uiFr from "../layers/dms-ui/i18n/locales/ui-fr-FR.json";
+import { providePageHeaderActions } from "../layers/dms-layout/app/composables/layout/usePageHeaderActions";
+
+type Messages = Record<string, unknown>;
+
+const translator = (messages: Messages) => (key: string) =>
+  String(
+    key
+      .split(".")
+      .reduce<unknown>(
+        (node, part) => (node as Messages | undefined)?.[part],
+        messages,
+      ) ?? key,
+  );
+
+const IconStub = defineComponent({
+  props: { name: String },
+  setup: (props) => () => h("i", { "data-icon": props.name }),
+});
+
+let app: App | undefined;
+let host: HTMLDivElement;
+
+async function mount(component: Parameters<typeof createApp>[0]) {
+  app = createApp(component);
+  app.component("UIcon", IconStub);
+  app.mount(host);
+  for (let tick = 0; tick < 3; tick++) await nextTick();
+}
+
+const badge = () =>
+  host.querySelector<HTMLElement>("[data-instant-save-badge]");
+
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ t: translator(uiEn) }));
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+describe("DmsInstantSaveBadge", () => {
+  it("reads exactly 'Saved instantly' in en-GB, whatever the save state", async () => {
+    const { default: InstantSaveBadge } = await import(
+      "../layers/dms-ui/app/components/save-bar/InstantSaveBadge.vue"
+    );
+    for (const state of [undefined, "idle", "saving", "saved"] as const) {
+      await mount({ render: () => h(InstantSaveBadge, { state }) });
+      expect(badge()?.textContent?.trim()).toBe("Saved instantly");
+      expect(badge()?.dataset.state).toBe(state ?? "idle");
+      expect(badge()?.title).toBeTruthy();
+      app?.unmount();
+      app = undefined;
+    }
+  });
+
+  it("flashes through its icon only: bolt, spinner, tick", async () => {
+    const { default: InstantSaveBadge } = await import(
+      "../layers/dms-ui/app/components/save-bar/InstantSaveBadge.vue"
+    );
+    const icons: Record<string, string> = {
+      idle: "i-ph-lightning",
+      saving: "i-ph-circle-notch",
+      saved: "i-ph-check",
+    };
+    for (const [state, icon] of Object.entries(icons)) {
+      await mount({ render: () => h(InstantSaveBadge, { state }) });
+      expect(badge()?.querySelector("i")?.dataset.icon).toBe(icon);
+      app?.unmount();
+      app = undefined;
+    }
+  });
+
+  it("uses one key, translated in French", async () => {
+    vi.stubGlobal("useI18n", () => ({ t: translator(uiFr) }));
+    const { default: InstantSaveBadge } = await import(
+      "../layers/dms-ui/app/components/save-bar/InstantSaveBadge.vue"
+    );
+    await mount({ render: () => h(InstantSaveBadge) });
+    expect(badge()?.textContent?.trim()).toBe("Enregistré instantanément");
+  });
+});
+
+describe("useInstantSaveHeader", () => {
+  it("puts the badge in the page header actions of the layout", async () => {
+    const { useInstantSaveHeader } = await import(
+      "../layers/dms-layout/app/composables/layout/useInstantSaveHeader"
+    );
+    let actions: ReturnType<typeof providePageHeaderActions> | undefined;
+    const Page = defineComponent({
+      setup() {
+        useInstantSaveHeader(() => "saved");
+        return () => h("main");
+      },
+    });
+    const Layout = defineComponent({
+      setup() {
+        actions = providePageHeaderActions();
+        return () =>
+          h("div", [h("header", actions?.actions.value?.()), h(Page)]);
+      },
+    });
+    await mount(Layout);
+    expect(host.querySelector("header [data-instant-save-badge]")).not.toBe(
+      null,
+    );
+    expect(badge()?.textContent?.trim()).toBe("Saved instantly");
+    expect(badge()?.dataset.state).toBe("saved");
+  });
+
+  it("folds per-control states: saving wins, then saved, else idle", async () => {
+    const { combineSaveStates } = await import(
+      "../layers/dms-layout/app/composables/layout/useInstantSaveHeader"
+    );
+    expect(combineSaveStates([])).toBe("idle");
+    expect(combineSaveStates(["idle", undefined])).toBe("idle");
+    expect(combineSaveStates(["idle", "saved"])).toBe("saved");
+    expect(combineSaveStates(["saved", "saving", "idle"])).toBe("saving");
+  });
+});
+
+describe("instant-save page registry", () => {
+  const root = resolve(__dirname, "../layers");
+  const read = (path: string) => readFileSync(join(root, path), "utf8");
+  const SETTINGS = "dms-layout/app/custom-pages/settings";
+  const SETTINGS_PARTS = "dms-layout/app/build/components/pages/settings";
+
+  /** Pages (or the section owning them) whose controls save on their own. */
+  /** The generic form: the pill with `saveMode: "instant"`, a bar otherwise. */
+  const FORM = "dms-ui/app/components/form/Form.vue";
+  const INSTANT_SAVE = [
+    `${SETTINGS_PARTS}/theme/useAppearanceSave.ts`,
+    `${SETTINGS_PARTS}/notification/NotificationPreferencesForm.vue`,
+    FORM,
+  ];
+  /** Save bar, explicit actions, or nothing persisted: no pill. */
+  const NO_PILL = [
+    `${SETTINGS}/roles.vue`,
+    `${SETTINGS}/shortcuts.vue`,
+    `${SETTINGS_PARTS}/profile/ProfilePersonalInfo.vue`,
+    `${SETTINGS_PARTS}/roles/RoleEditor.vue`,
+  ];
+
+  const vueFiles = (dir: string): string[] =>
+    readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+      const path = join(dir, entry.name);
+      if (entry.isDirectory()) return vueFiles(path);
+      return entry.name.endsWith(".vue") ? [path] : [];
+    });
+
+  it("shows the shared pill on every instant-save page", () => {
+    for (const path of INSTANT_SAVE) {
+      expect(read(path), path).toMatch(/useInstantSaveHeader\(/);
+    }
+  });
+
+  it("keeps it off pages with a save bar or explicit actions", () => {
+    for (const path of NO_PILL) {
+      expect(read(path), path).not.toMatch(/useInstantSaveHeader/);
+    }
+  });
+
+  it("is the only instant-save pill: no page draws its own, none sits by a save bar", () => {
+    const users = vueFiles(root)
+      .map((path) => ({
+        path: relative(root, path).replaceAll("\\", "/"),
+        source: readFileSync(path, "utf8"),
+      }))
+      .filter(({ source }) => /useInstantSaveHeader\(/.test(source));
+    expect(users.map(({ path }) => path).sort()).toEqual(
+      INSTANT_SAVE.filter((path) => path.endsWith(".vue")).sort(),
+    );
+    for (const { path, source } of users) {
+      if (path === FORM) continue;
+      expect(source, path).not.toMatch(/DmsSaveBar|saveBar/);
+    }
+    expect(read(FORM)).toMatch(/if \(instantSave && /);
+    for (const path of vueFiles(root)) {
+      const source = readFileSync(path, "utf8");
+      if (!source.includes("usePageHeaderActions(")) continue;
+      expect(source, path).not.toMatch(/bg-success\/10|\.instant"\)/);
+    }
+  });
+});