@antelopejs/dms 0.4.4 → 0.4.6

package/frontend-vue/tests/quick-actions.test.ts

@@ -2,6 +2,8 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { dispatchQuickActionTarget } from "../layers/dms-layout/app/composables/page/useQuickActions";
 import {
   QUICK_ACTION_ADD,
+  QUICK_ACTION_BUTTON,
+  QUICK_ACTION_BUTTON_KEY,
   QUICK_ACTION_COMPONENT_KEY,
   QUICK_ACTION_QUERY_KEY,
 } from "../layers/dms-ui/app/types/quick-actions";
@@ -29,4 +31,25 @@ describe("dispatchQuickActionTarget", () => {
       },
     });
   });
+
+  it("routes button actions to the target table with the button to press", () => {
+    const navigateDms = vi.fn();
+    vi.stubGlobal("navigateDms", navigateDms);
+
+    dispatchQuickActionTarget({
+      type: "button",
+      to: "/settings/user/members",
+      component: "table",
+      button: "invite",
+    });
+
+    expect(navigateDms).toHaveBeenCalledWith({
+      path: "/settings/user/members",
+      query: {
+        [QUICK_ACTION_QUERY_KEY]: QUICK_ACTION_BUTTON,
+        [QUICK_ACTION_COMPONENT_KEY]: "table",
+        [QUICK_ACTION_BUTTON_KEY]: "invite",
+      },
+    });
+  });
 });

package/frontend-vue/tests/relation-badges.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import { buildRelationBadges } from "../layers/dms-ui/app/build/composables/data-types/relationBadges";
+
+describe("buildRelationBadges", () => {
+  it("reads each resolved related row through the label key", () => {
+    expect(
+      buildRelationBadges([{ name: "Admin" }, { name: "Billing" }], "name"),
+    ).to.deep.equal({ visible: ["Admin", "Billing"], hidden: [] });
+  });
+
+  it("folds the labels past the limit into the hidden list", () => {
+    const roles = ["A", "B", "C", "D", "E"].map((name) => ({ name }));
+    expect(buildRelationBadges(roles, "name", 3)).to.deep.equal({
+      visible: ["A", "B", "C"],
+      hidden: ["D", "E"],
+    });
+  });
+
+  it("shows a raw id when the relation was not resolved", () => {
+    expect(buildRelationBadges(["role-1"], "name").visible).to.deep.equal([
+      "role-1",
+    ]);
+  });
+
+  it("drops items without a label and renders nothing for no value", () => {
+    expect(buildRelationBadges([{ other: "x" }, null], "name")).to.deep.equal({
+      visible: [],
+      hidden: [],
+    });
+    expect(buildRelationBadges([], "name").visible).to.deep.equal([]);
+  });
+});

package/frontend-vue/tests/signup-invitation-link.test.ts

@@ -0,0 +1,126 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  reactive,
+  ref,
+  type App,
+} from "vue";
+import * as z from "zod";
+import SignupPage from "../layers/dms-auth/app/custom-pages/auth/signup.vue";
+
+const route = reactive<{ query: Record<string, unknown> }>({ query: {} });
+let app: App;
+let host: HTMLDivElement;
+const locale = ref("en");
+const setLocale = vi.fn(async (code: string) => {
+  locale.value = code;
+});
+
+const Passthrough = defineComponent({
+  inheritAttrs: false,
+  setup:
+    (_, { attrs, slots }) =>
+    () =>
+      h("div", { "data-testid": attrs["data-testid"] }, slots.default?.()),
+});
+
+const LinkButton = defineComponent({
+  props: { label: String, to: String },
+  setup: (props) => () => h("a", { href: props.to }, props.label),
+});
+
+function installRuntime() {
+  Object.entries({ computed, ref, reactive }).forEach(([key, value]) =>
+    vi.stubGlobal(key, value),
+  );
+  vi.stubGlobal("useI18n", () => ({
+    locale,
+    locales: ref([{ code: "en" }, { code: "fr" }]),
+    setLocale,
+  }));
+  vi.stubGlobal("useDmsRuntimeConfig", () => ({
+    public: { dms: { mustValidateEmail: false } },
+  }));
+  vi.stubGlobal("useHomepage", () => "/");
+  vi.stubGlobal("useDmsRoute", () => route);
+  vi.stubGlobal("passwordSchema", z.string());
+  vi.stubGlobal("usePasswordStrength", () => ({
+    strength: ref([]),
+    score: ref(0),
+    color: ref("error"),
+  }));
+}
+
+function mountSignup(query: Record<string, unknown>) {
+  route.query = query;
+  app = createApp(SignupPage);
+  app.config.globalProperties.$t = (key: string) => key;
+  for (const name of [
+    "DmsCard",
+    "UIcon",
+    "UForm",
+    "UFormField",
+    "UInput",
+    "DmsOAuthButtons",
+    "DmsPasswordStrength",
+    "DmsLink",
+  ]) {
+    app.component(name, Passthrough);
+  }
+  app.component("UButton", LinkButton);
+  app.mount(host);
+}
+
+beforeEach(() => {
+  locale.value = "en";
+  setLocale.mockClear();
+  installRuntime();
+  host = document.createElement("div");
+});
+afterEach(() => {
+  app?.unmount();
+  vi.unstubAllGlobals();
+});
+
+it.each([{}, { token: "" }, { token: ["a", "b"] }])(
+  "explains an invitation link without its token (%o)",
+  (query) => {
+    expect(() => mountSignup(query)).not.toThrow();
+    expect(
+      host.querySelector('[data-testid="signup-invalid-invitation"]'),
+    ).not.toBe(null);
+    expect(host.textContent).toContain(
+      "page.signup.invalid_invitation_description",
+    );
+    expect(host.querySelector('a[href="/auth"]')?.textContent).toBe(
+      "button.login",
+    );
+  },
+);
+
+it("shows the signup form for an invitation link with its token", () => {
+  mountSignup({ token: "invite-token", email: "new@local.test" });
+  expect(host.querySelector('[data-testid="signup-invalid-invitation"]')).toBe(
+    null,
+  );
+  expect(host.textContent).toContain("page.signup.create_account_title");
+});
+
+it("opens in the language the invitation was written in", () => {
+  mountSignup({ token: "invite-token", email: "new@local.test", lang: "fr" });
+  expect(setLocale).toHaveBeenCalledWith("fr");
+  expect(locale.value).toBe("fr");
+});
+
+it.each([{}, { lang: "en" }, { lang: "de" }, { lang: ["fr", "en"] }])(
+  "keeps the current language for an invitation link carrying %o",
+  (query) => {
+    mountSignup({ token: "invite-token", email: "new@local.test", ...query });
+    expect(setLocale).not.toHaveBeenCalled();
+    expect(locale.value).toBe("en");
+  },
+);

package/frontend-vue/tests/skeleton-paragraph.test.ts

@@ -0,0 +1,30 @@
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const PARAGRAPH = /<p\b[^>]*>(.*?)<\/p>/gs;
+const SKELETON = /<USkeleton\b/;
+
+function walk(directory: string): string[] {
+  return readdirSync(directory).flatMap((name) => {
+    const path = join(directory, name);
+    return statSync(path).isDirectory() ? walk(path) : [path];
+  });
+}
+
+describe("skeleton placement", () => {
+  // The skeleton renders a <div>. The browser's parser closes an open <p>
+  // before a <div>, so the server markup no longer matches the client tree
+  // and hydration reports a mismatch.
+  it("keeps skeletons out of paragraphs", () => {
+    const offenders = walk(join(process.cwd(), "layers"))
+      .filter((path) => path.endsWith(".vue"))
+      .flatMap((path) =>
+        [...readFileSync(path, "utf8").matchAll(PARAGRAPH)]
+          .filter(([, content]) => SKELETON.test(content ?? ""))
+          .map(() => relative(process.cwd(), path)),
+      );
+
+    expect(offenders).toEqual([]);
+  });
+});

package/frontend-vue/tests/tab-without-component-id.test.ts

@@ -0,0 +1,51 @@
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { computed, nextTick, reactive, ref, watch } from "vue";
+import { useTab } from "../layers/dms-ui/app/composables/tab/useTab";
+import { TabEvents } from "../layers/dms-ui/app/composables/tab/types/events";
+import type { TabProps } from "../layers/dms-ui/app/composables/tab/types";
+
+const TAB_COUNT = 3;
+const sendComponentEvent = vi.fn();
+
+beforeEach(() => {
+  sendComponentEvent.mockClear();
+  Object.entries({ computed, ref, watch, TabEvents }).forEach(([key, value]) =>
+    vi.stubGlobal(key, value),
+  );
+  vi.stubGlobal("isNumber", (value: unknown) => typeof value === "number");
+  vi.stubGlobal("isString", (value: unknown) => typeof value === "string");
+  vi.stubGlobal("useComponentEvent", () => ({ sendComponentEvent }));
+  vi.stubGlobal("useWatch", () => ({ isLoading: ref(false), state: ref({}) }));
+  vi.stubGlobal("useDmsRoute", () => reactive({ query: {} }));
+  vi.stubGlobal("useDmsRouter", () => ({ push: vi.fn() }));
+});
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+it("switches tabs without announcing them when no component owns the set", async () => {
+  const { activeTab, goToTab } = useTab(TAB_COUNT, { items: [] } as TabProps);
+
+  goToTab(1);
+  await nextTick();
+
+  expect(activeTab.value).toBe("1");
+  expect(sendComponentEvent).not.toHaveBeenCalled();
+});
+
+it("announces a tab change for a registered component", async () => {
+  const { goToTab } = useTab(TAB_COUNT, {
+    items: [],
+    componentId: "settings.tabs",
+    pageId: "settings",
+  } as TabProps);
+
+  goToTab(2);
+  await nextTick();
+
+  expect(sendComponentEvent).toHaveBeenCalledWith(
+    TabEvents.TAB_CHANGE,
+    "settings.tabs",
+    { previousTab: 0, currentTab: 2 },
+  );
+});

package/frontend-vue/tests/table-column-visibility.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { buildInitialColumnVisibility } from "../layers/dms-ui/app/build/composables/table-view/utils/columnVisibility";
+
+describe("buildInitialColumnVisibility", () => {
+  it("hides the columns declared isVisible: false", () => {
+    expect(
+      buildInitialColumnVisibility([
+        { id: "number" },
+        { id: "amount", isVisible: true },
+        { id: "stripeId", isVisible: false },
+      ]),
+    ).toEqual({ number: true, amount: true, stripeId: false });
+  });
+
+  it("keeps every column visible when none opts out", () => {
+    expect(buildInitialColumnVisibility([{ id: "name" }])).toEqual({
+      name: true,
+    });
+  });
+});

package/frontend-vue/tests/user-language.test.ts

@@ -0,0 +1,58 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useUserLanguage } from "../layers/dms-layout/app/composables/profile/useUserLanguage";
+
+interface LanguageHarness {
+  setLocale: ReturnType<typeof vi.fn>;
+  authFetch: ReturnType<typeof vi.fn>;
+  refreshUser: ReturnType<typeof vi.fn>;
+}
+
+function stubComposables(authFetch = vi.fn(async () => ({}))): LanguageHarness {
+  const harness: LanguageHarness = {
+    setLocale: vi.fn(async () => {}),
+    authFetch,
+    refreshUser: vi.fn(async () => {}),
+  };
+  vi.stubGlobal("useDmsApp", () => ({
+    $i18n: { setLocale: harness.setLocale },
+  }));
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: harness.authFetch }));
+  vi.stubGlobal("useUserSession", () => ({
+    user: { value: { name: "Ada", email: "ada@example.com", language: "en" } },
+    fetch: harness.refreshUser,
+  }));
+  return harness;
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("useUserLanguage", () => {
+  it("applies the language and stores it on the user's profile", async () => {
+    const harness = stubComposables();
+
+    await useUserLanguage().changeLanguage("fr");
+
+    expect(harness.setLocale).toHaveBeenCalledWith("fr");
+    expect(harness.authFetch).toHaveBeenCalledWith("/settings/user/profile", {
+      method: "POST",
+      body: { name: "Ada", email: "ada@example.com", language: "fr" },
+    });
+    expect(harness.refreshUser).toHaveBeenCalled();
+  });
+
+  it("keeps the applied language when the profile update fails", async () => {
+    const harness = stubComposables(
+      vi.fn(async () => {
+        throw new Error("offline");
+      }),
+    );
+
+    await expect(useUserLanguage().changeLanguage("fr")).resolves.toBe(
+      undefined,
+    );
+    expect(harness.setLocale).toHaveBeenCalledWith("fr");
+    expect(harness.refreshUser).not.toHaveBeenCalled();
+  });
+});

package/frontend-vue/tests/vue-inventory.test.ts

@@ -2,7 +2,7 @@ import { readFileSync, readdirSync, statSync } from "node:fs";
 import { join, relative } from "node:path";
 import { describe, expect, it } from "vitest";
 
-const EXPECTED_VUE_FILES = 143;
+const EXPECTED_VUE_FILES = 144;
 
 function walk(directory: string): string[] {
   return readdirSync(directory).flatMap((name) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AntelopeJS/dms.git"
@@ -36,7 +36,7 @@
     "@antelopejs/interface-data-api": ">=0.1.9 <1.0.0",
     "@antelopejs/interface-database": ">=0.1.7 <1.0.0",
     "@antelopejs/interface-database-decorators": ">=0.1.6 <1.0.0",
-    "@antelopejs/interface-dms": ">=0.2.0 <1.0.0",
+    "@antelopejs/interface-dms": ">=0.2.5 <1.0.0",
     "@antelopejs/interface-email": ">=0.0.5 <1.0.0",
     "@antelopejs/interface-file-storage": ">=0.1.3 <1.0.0",
     "archiver": "^7.0.1",

package/skills/dms/REFERENCE.md

@@ -21,7 +21,7 @@ List a section to see its files:
 
 Everything the DMS exposes to a consumer ships in **one** package, `@antelopejs/interface-dms`,
 split into subpaths: `/page`, `/component`, `/permissions`, `/guards`, `/db`, `/hooks`, `/realtime`,
-`/quick-actions`, `/auth` (+ `/auth/db`), `/base` (+ `/base/form`, `/base/table-view`,
+`/quick-actions`, `/layout-banners`, `/auth` (+ `/auth/db`), `/base` (+ `/base/form`, `/base/table-view`,
 `/base/data-types`, `/base/types`, …), `/notifications`, `/html-render`. There is no separate
 `dms-auth` or `dms-base` interface, and nothing is imported through the runtime package
 `@antelopejs/dms`. Other modules follow the same shape: one `interface-<name>` package per module.