@antelopejs/dms 0.5.6 → 0.6.1

package/frontend-vue/tests/kpi-no-comparison.test.ts

@@ -0,0 +1,92 @@
+import { createSSRApp, defineComponent, h, ref } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import KpiCard from "../layers/dms-ui/app/components/kpi/KpiCard.vue";
+
+const response = ref<Record<string, unknown> | null>(null);
+
+vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
+  useChartFetch: () => ({
+    data: response,
+    isLoading: ref(false),
+    error: ref(null),
+    refresh: async () => {},
+  }),
+}));
+
+const Slot = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", slots.default?.()),
+});
+
+const TREND_LINE = 'class="flex h-6 items-center"';
+const STAT_TREND_PLACEHOLDER = 'class="h-4"';
+// The trend badge's own classes (the sparkline's gradient carries "%" too).
+const TREND_BADGE = "whitespace-nowrap tabular-nums transition-colors";
+
+async function render(props: Record<string, unknown> = {}) {
+  const app = createSSRApp({
+    render: () =>
+      h(KpiCard, {
+        title: "Revenue",
+        componentId: "kpi",
+        pageId: "page",
+        compareLabel: "vs previous month",
+        ...props,
+      }),
+  });
+  for (const name of ["DmsCard", "UIcon", "USkeleton", "UButton"]) {
+    app.component(name, Slot);
+  }
+  return renderToString(app);
+}
+
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ locale: ref("en-GB"), t: String }));
+  vi.stubGlobal("useTranslation", () => ({ processI18n: String }));
+  vi.stubGlobal("useComponentEvent", () => ({}));
+  vi.stubGlobal("useWatch", () => ({ state: ref({}) }));
+});
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe("a KPI card with no comparison period", () => {
+  it("shows no change at all, not a 0% stand-in", async () => {
+    response.value = { value: 1535, sparkline: [1, 2, 3] };
+    const html = await render();
+    expect(html).not.toContain(TREND_BADGE);
+    expect(html).not.toContain("●");
+    expect(html).toContain("vs previous month");
+  });
+
+  it("keeps the trend's line, so toggling a comparison moves nothing", async () => {
+    response.value = { value: 1535 };
+    const without = await render();
+    response.value = { value: 1535, previousValue: 1616, delta: -5 };
+    const withDelta = await render();
+    expect(without).toContain(TREND_LINE);
+    expect(withDelta).toContain(TREND_LINE);
+    expect(withDelta).toContain(TREND_BADGE);
+    expect(withDelta).toMatch(/-5[.,]0\s?%/);
+  });
+
+  it("still shows a real flat change while comparing", async () => {
+    response.value = { value: 1535, previousValue: 1535, delta: 0 };
+    expect(await render()).toContain("●");
+  });
+
+  it("holds the trend's place in the stat variant too", async () => {
+    response.value = { value: 1535, sparkline: [1, 2, 3] };
+    const html = await render({ variant: "stat", showSparkline: true });
+    expect(html).toContain(STAT_TREND_PLACEHOLDER);
+    expect(html).not.toContain(TREND_BADGE);
+  });
+
+  it("reserves nothing when the card shows no change by design", async () => {
+    response.value = { value: 1535 };
+    const html = await render({ showDelta: false, compareLabel: undefined });
+    expect(html).not.toContain(TREND_LINE);
+  });
+});

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

@@ -0,0 +1,227 @@
+// @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";
+
+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);
+  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);
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: 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(
+    [...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);
+});

package/frontend-vue/tests/metadata-retry.test.ts

@@ -108,8 +108,19 @@ beforeEach(() => {
   vi.stubGlobal("useUploadWithProgress", () => ({
     uploadWithProgress: vi.fn(),
   }));
-  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()),
+  );
   vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
 });
 

package/frontend-vue/tests/meter-block-load-error.test.ts

@@ -0,0 +1,70 @@
+import { createSSRApp, defineComponent, h, ref } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import MeterBlock from "../layers/dms-ui/app/components/meter/MeterBlock.vue";
+
+const data = ref<Record<string, unknown> | null>(null);
+const error = ref<unknown>(null);
+
+vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
+  useChartFetch: () => ({
+    data,
+    isLoading: ref(false),
+    error,
+    refresh: async () => {},
+  }),
+}));
+
+vi.mock("../layers/dms-core/app/composables/watch/useWatch", () => ({
+  useWatch: () => ({ state: ref({}) }),
+}));
+
+const Slot = defineComponent({
+  props: { label: { type: String, default: undefined } },
+  setup:
+    (props, { slots }) =>
+    () =>
+      h("div", [props.label, slots.default?.()]),
+});
+
+async function render(): Promise<string> {
+  const app = createSSRApp({
+    render: () =>
+      h(MeterBlock, {
+        componentId: "meter",
+        pageId: "page",
+        label: "Seats",
+        fetchUrl: "/seats",
+      }),
+  });
+  for (const name of ["DmsCard", "UIcon", "USkeleton", "UButton"]) {
+    app.component(name, Slot);
+  }
+  return renderToString(app);
+}
+
+beforeEach(() => {
+  data.value = null;
+  error.value = null;
+  vi.stubGlobal("useI18n", () => ({ locale: ref("en-GB"), t: String }));
+  vi.stubGlobal("useTranslation", () => ({ processI18n: String }));
+});
+
+afterEach(() => vi.unstubAllGlobals());
+
+it("shows a failed load as an error with a retry, not as 0 / 100", async () => {
+  error.value = new Error("network");
+  const html = await render();
+  expect(html).toContain("dms.table.load_error_title");
+  expect(html).toContain("dms.table.load_error_retry");
+  expect(html).toContain("Seats");
+  expect(html).not.toContain("100");
+});
+
+it("keeps the last figures when only a refetch fails", async () => {
+  data.value = { value: 8, max: 10 };
+  error.value = new Error("network");
+  const html = await render();
+  expect(html).not.toContain("dms.table.load_error_title");
+  expect(html).toMatch(/8\s*\/\s*10/);
+});

package/frontend-vue/tests/module-store-catalog.test.ts

@@ -0,0 +1,152 @@
+import { describe, expect, it } from "vitest";
+import {
+  MODULE_CATEGORY_ALL,
+  filterModules,
+  moduleCategoryOptions,
+} from "../layers/dms-layout/app/build/utils/modules-catalog";
+import {
+  MODULE_STORE_CATALOG,
+  availableStoreModules,
+  moduleInstallCommand,
+  type ModuleStoreEntry,
+} from "../layers/dms-layout/app/build/utils/module-store-catalog";
+import en from "../layers/dms-layout/i18n/locales/layout-en-GB.json";
+import fr from "../layers/dms-layout/i18n/locales/layout-fr-FR.json";
+
+type Messages = Record<string, unknown>;
+
+function lookup(messages: Messages, key: string): unknown {
+  return key
+    .split(".")
+    .reduce<unknown>(
+      (node, part) =>
+        node && typeof node === "object" ? (node as Messages)[part] : undefined,
+      messages,
+    );
+}
+
+// Resolves `$i18n.key` display strings against the English catalog, like
+// processI18n does in the app.
+const resolve = (value: string): string => {
+  if (!value.startsWith("$")) return value;
+  const text = lookup(en, value.slice(1));
+  return typeof text === "string" ? text : value;
+};
+
+function storeEntry(
+  id: string,
+  overrides: Partial<ModuleStoreEntry> = {},
+): ModuleStoreEntry {
+  return {
+    id,
+    packageName: `@antelopejs/dms-${id}`,
+    title: id[0].toUpperCase() + id.slice(1),
+    description: `${id} description`,
+    icon: "i-ph-cube",
+    catalogCategory: "Data",
+    ...overrides,
+  };
+}
+
+const catalog = [
+  storeEntry("media", {
+    catalogCategory: "Content",
+    description: "Asset library",
+  }),
+  storeEntry("database"),
+  storeEntry("lang", { title: "Translations", catalogCategory: "Content" }),
+  storeEntry("ai", { catalogCategory: "AI" }),
+];
+
+describe("module store catalog", () => {
+  it("hides the modules already installed", () => {
+    const available = availableStoreModules(
+      catalog,
+      new Set(["database", "demo"]),
+      resolve,
+    );
+    expect(available.map((entry) => entry.id)).toEqual(["ai", "media", "lang"]);
+  });
+
+  it("lists every module, by name, when none is installed", () => {
+    expect(
+      availableStoreModules(catalog, new Set(), resolve).map(
+        (entry) => entry.title,
+      ),
+    ).toEqual(["Ai", "Database", "Media", "Translations"]);
+  });
+
+  it("is empty once every module is installed", () => {
+    const installed = new Set(catalog.map((entry) => entry.id));
+    expect(availableStoreModules(catalog, installed, resolve)).toEqual([]);
+  });
+
+  it("searches the name, description, category and id", () => {
+    const search = (query: string) =>
+      filterModules(catalog, {
+        query,
+        category: MODULE_CATEGORY_ALL,
+        resolve,
+      }).map((entry) => entry.id);
+    expect(search("translat")).toEqual(["lang"]);
+    expect(search("ASSET")).toEqual(["media"]);
+    expect(search("content")).toEqual(["media", "lang"]);
+    expect(search("  ai ")).toEqual(["ai"]);
+    expect(search("payments")).toEqual([]);
+  });
+
+  it("filters by category, combined with the search", () => {
+    expect(
+      filterModules(catalog, {
+        query: "",
+        category: "Content",
+        resolve,
+      }).map((entry) => entry.id),
+    ).toEqual(["media", "lang"]);
+    expect(
+      filterModules(catalog, {
+        query: "lang",
+        category: "Data",
+        resolve,
+      }),
+    ).toEqual([]);
+  });
+
+  it("offers the categories present, with their counts", () => {
+    expect(moduleCategoryOptions(catalog, resolve)).toEqual([
+      { value: "AI", label: "AI", count: 1 },
+      { value: "Content", label: "Content", count: 2 },
+      { value: "Data", label: "Data", count: 1 },
+    ]);
+  });
+
+  it("shows the AntelopeJS CLI command that adds the package", () => {
+    expect(moduleInstallCommand(storeEntry("media"))).toBe(
+      "ajs project modules add @antelopejs/dms-media",
+    );
+  });
+});
+
+describe("official module list", () => {
+  it("has unique ids and packages", () => {
+    const ids = MODULE_STORE_CATALOG.map((entry) => entry.id);
+    const packages = MODULE_STORE_CATALOG.map((entry) => entry.packageName);
+    expect(new Set(ids).size).toBe(ids.length);
+    expect(new Set(packages).size).toBe(packages.length);
+  });
+
+  it("translates every name, description and category in both locales", () => {
+    for (const messages of [en, fr]) {
+      for (const entry of MODULE_STORE_CATALOG) {
+        for (const key of [
+          entry.title,
+          entry.description,
+          entry.catalogCategory,
+        ]) {
+          expect(key.startsWith("$")).toBe(true);
+          expect(typeof lookup(messages, key.slice(1)), key).toBe("string");
+        }
+      }
+    }
+  });
+});