@antelopejs/dms 0.5.6 → 0.6.1

package/frontend-vue/tests/block-route-params.test.ts

@@ -0,0 +1,190 @@
+// @vitest-environment jsdom
+/**
+ * A data block on a detail page reads the record of that page: the
+ * `{{params.X}}` / `{{query.X}}` tokens of its `fetchUrl` are filled from the
+ * page URL, again when it changes, and a URL with a token left unresolved is
+ * never requested.
+ */
+import {
+  type Component,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  reactive,
+  ref,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  replaceUrlVariables,
+  resolveUrlVariables,
+} from "../layers/dms-ui/app/build/utils/urlVariables";
+
+const requests: string[] = [];
+const route = reactive<{ query: Record<string, unknown> }>({ query: {} });
+
+vi.stubGlobal("useAuthFetch", () => ({
+  $authFetch: async (url: string) => {
+    requests.push(url);
+    return { items: [{ label: url }] };
+  },
+}));
+vi.stubGlobal("useDmsRoute", () => route);
+
+vi.mock("../layers/dms-core/app/composables/watch/useWatch", () => ({
+  useWatch: () => ({ state: ref({}) }),
+}));
+vi.mock(
+  "../layers/dms-core/app/composables/components/useComponentEvent",
+  () => ({ useComponentEvent: () => ({}) }),
+);
+
+const { useChartFetch } = await import(
+  "../layers/dms-ui/app/composables/chart/useChartFetch"
+);
+const { useBlockItems } = await import(
+  "../layers/dms-ui/app/build/composables/blocks/useBlockItems"
+);
+
+// useChartFetch debounces every refresh past the first by 180ms.
+const SETTLE_MS = 250;
+const settle = () => new Promise((resolve) => setTimeout(resolve, SETTLE_MS));
+
+const mounted: Array<{ unmount: () => void }> = [];
+
+function mount(component: Component) {
+  const app = createApp(component);
+  app.mount(document.createElement("div"));
+  mounted.push(app);
+}
+
+beforeEach(() => {
+  requests.length = 0;
+  route.query = {};
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+});
+
+describe("resolveUrlVariables", () => {
+  it("fills route parameters and query values", () => {
+    expect(
+      resolveUrlVariables("/api/ws/{{params.id}}/facts?tab={{query.tab}}", {
+        routeParams: { id: "ws-1" },
+        routeQuery: { tab: "billing" },
+      }),
+    ).toBe("/api/ws/ws-1/facts?tab=billing");
+  });
+
+  it("reaches one occurrence of a repeated parameter", () => {
+    expect(
+      resolveUrlVariables("/api/ws/{{params.id:1}}/rows/{{params.id}}", {
+        routeParams: { id: "row-7", "id:1": "ws-1", "id:2": "row-7" },
+        routeQuery: {},
+      }),
+    ).toBe("/api/ws/ws-1/rows/row-7");
+  });
+
+  it("gives nothing while a token has no value", () => {
+    const context = { routeParams: {}, routeQuery: {} };
+    expect(resolveUrlVariables("/api/ws/{{params.id}}", context)).toBe(
+      undefined,
+    );
+    expect(replaceUrlVariables("/api/ws/{{params.id}}", context)).toBe(
+      "/api/ws/{{params.id}}",
+    );
+  });
+
+  it("leaves a URL without tokens as it is", () => {
+    expect(resolveUrlVariables("/api/plain", { routeQuery: {} })).toBe(
+      "/api/plain",
+    );
+  });
+});
+
+describe("useChartFetch with a templated fetchUrl", () => {
+  function mountFetch(
+    fetchUrl: string,
+    routeParams: () => Record<string, string> | undefined,
+  ) {
+    const state: { isLoading?: { value: boolean } } = {};
+    const Probe = defineComponent({
+      setup() {
+        const { isLoading } = useChartFetch<unknown>({ fetchUrl, routeParams });
+        state.isLoading = isLoading;
+        return () => h("div");
+      },
+    });
+    mount(Probe);
+    return state;
+  }
+
+  it("requests the URL of the page's record", async () => {
+    mountFetch("/api/ws/{{params.id}}/facts", () => ({ id: "ws-1" }));
+    await settle();
+    expect(requests).toEqual(["/api/ws/ws-1/facts"]);
+  });
+
+  it("requests nothing, and shows no skeleton, while a token is unresolved", async () => {
+    const state = mountFetch("/api/ws/{{params.id}}/facts", () => ({}));
+    await settle();
+    expect(requests).toEqual([]);
+    expect(state.isLoading?.value).toBe(false);
+  });
+
+  it("follows the route to another record", async () => {
+    const params = ref<Record<string, string>>({ id: "ws-1" });
+    mountFetch("/api/ws/{{params.id}}/facts", () => params.value);
+    await settle();
+    params.value = { id: "ws-2" };
+    await nextTick();
+    await settle();
+    expect(requests).toEqual(["/api/ws/ws-1/facts", "/api/ws/ws-2/facts"]);
+  });
+
+  it("fetches once a query value it waited for appears", async () => {
+    mountFetch("/api/activity?actor={{query.actor}}", () => ({}));
+    await settle();
+    expect(requests).toEqual([]);
+    route.query = { actor: "u-1" };
+    await nextTick();
+    await settle();
+    expect(requests).toEqual(["/api/activity?actor=u-1"]);
+  });
+});
+
+describe("useBlockItems with a templated fetchUrl", () => {
+  function mountItems(routeParams: Record<string, string>) {
+    const state: { items?: { value: unknown[] } } = {};
+    const Probe = defineComponent({
+      setup() {
+        const { items } = useBlockItems<{ label: string }>({
+          items: () => [{ label: "static" }],
+          fetchUrl: "/api/ws/{{params.id}}/billing-info",
+          routeParams: () => routeParams,
+        });
+        state.items = items;
+        return () => h("div");
+      },
+    });
+    mount(Probe);
+    return state;
+  }
+
+  it("lists the items of the page's record", async () => {
+    const state = mountItems({ id: "ws-1" });
+    await settle();
+    expect(requests).toEqual(["/api/ws/ws-1/billing-info"]);
+    expect(state.items?.value).toEqual([
+      { label: "/api/ws/ws-1/billing-info" },
+    ]);
+  });
+
+  it("shows its empty state, not the static items, without the record", async () => {
+    const state = mountItems({});
+    await settle();
+    expect(requests).toEqual([]);
+    expect(state.items?.value).toEqual([]);
+  });
+});

package/frontend-vue/tests/category-nav-cards.test.ts

@@ -0,0 +1,97 @@
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { computed, ref } from "vue";
+import { useCategoryNavCards } from "../layers/dms-layout/app/build/composables/navigation/useCategoryNavCards";
+
+const badges = ref<Record<string, string>>({});
+
+vi.mock(
+  "../layers/dms-ui/app/build/composables/navigation/useNavBadges",
+  () => ({
+    useNavBadges: () => ({ badges }),
+  }),
+);
+vi.mock(
+  "../layers/dms-core/app/build/composables/auth/usePermissionPreview",
+  () => ({
+    usePermissionPreview: () => ({}),
+  }),
+);
+
+const node = (fullId: string, extra: Record<string, unknown> = {}) => ({
+  fullId,
+  displayName: `$${fullId}`,
+  fullSlug: `/${fullId.replaceAll(".", "/")}`,
+  layoutUrl: `/${fullId}/pagelayout`,
+  children: {},
+  childrenOrders: [],
+  ...extra,
+});
+
+const tree = ref({
+  ...node(""),
+  children: {
+    settings: {
+      ...node("settings"),
+      layoutUrl: undefined,
+      children: {
+        user: {
+          ...node("settings.user"),
+          layoutUrl: undefined,
+          children: {
+            profile: node("settings.user.profile", { icon: "i-ph-user" }),
+            security: node("settings.user.security", { badge: "1" }),
+            notifications: node("settings.user.notifications", { badge: "4" }),
+            locked: node("settings.user.locked", { hasAccess: false }),
+          },
+          childrenOrders: ["profile", "security", "notifications", "locked"],
+        },
+      },
+      childrenOrders: ["user"],
+    },
+  },
+  childrenOrders: ["settings"],
+});
+
+beforeEach(() => {
+  badges.value = {};
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useSiteLayout", () => ({ siteLayoutTree: tree }));
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+it("makes a card of each page the viewer can open, in menu order", () => {
+  const { cards } = useCategoryNavCards(() => "settings.user");
+  expect(cards.value.map((card) => card.id)).toEqual([
+    "settings.user.profile",
+    "settings.user.security",
+    "settings.user.notifications",
+  ]);
+  expect(cards.value[0]).toMatchObject({
+    title: "$settings.user.profile",
+    icon: "i-ph-user",
+    to: "/settings/user/profile",
+    state: undefined,
+  });
+});
+
+it("shows the navigation badge, a fresher count first", () => {
+  badges.value = {
+    "settings.user.notifications": "",
+    "settings.user.security": "2",
+  };
+  const { cards } = useCategoryNavCards(() => "settings.user");
+  expect(cards.value.map((card) => card.state)).toEqual([
+    undefined,
+    "2",
+    undefined,
+  ]);
+});
+
+it("lists nothing for a category the site layout does not hold", () => {
+  const { cards } = useCategoryNavCards(() => "settings.unknown");
+  expect(cards.value).toEqual([]);
+});

package/frontend-vue/tests/chart-colors.test.ts

@@ -171,7 +171,7 @@ describe("chart color tokens", () => {
     vi.mocked(document.createElement).mockReturnValueOnce({
       getContext: () => context,
     } as unknown as HTMLCanvasElement);
-    expect(resolveChartColor("primary-500")).toBe("rgba(92, 76, 200, 1)");
+    expect(resolveChartColor("primary-500")).toBe("rgb(92, 76, 200)");
     expect(context.fillStyle).toBe(computedColor);
   });
 });

package/frontend-vue/tests/chart-series-styles.test.ts

@@ -21,29 +21,29 @@ describe("series stroke styles", () => {
   it("preserves scalar defaults and comparison defaults when omitted", () => {
     expect(strokeFor()).toEqual({
       curve: "smooth",
-      width: 3,
+      width: 2.5,
       lineCap: "round",
     });
     expect(
       strokeFor({ series: [PLAIN, PLAIN], comparisonSeriesCount: 1 }),
-    ).toMatchObject({ width: [3, 1.5], dashArray: [0, 4] });
+    ).toMatchObject({ width: [2.5, 1.75], dashArray: [0, 5] });
   });
 
   it("keeps styles attached through reactive reorder, insertion and removal", () => {
     const series = ref([PLAIN, STYLED]);
     const chart = useApexChart(() => ({ type: "line", series: series.value }));
     expect(chart.options.value.stroke).toMatchObject({
-      width: [3, 2],
+      width: [2.5, 2],
       dashArray: [0, 6],
     });
     series.value = [STYLED, PLAIN];
     expect(chart.options.value.stroke).toMatchObject({
-      width: [2, 3],
+      width: [2, 2.5],
       dashArray: [6, 0],
     });
     series.value = [PLAIN, STYLED, PLAIN];
     expect(chart.options.value.stroke).toMatchObject({
-      width: [3, 2, 3],
+      width: [2.5, 2, 2.5],
       dashArray: [0, 6, 0],
     });
     series.value = [STYLED];
@@ -72,7 +72,7 @@ describe("series stroke styles", () => {
         strokeWidth: 8,
         comparisonSeriesCount: 1,
       }),
-    ).toMatchObject({ width: [2, 8], dashArray: [6, 4] });
+    ).toMatchObject({ width: [2, 8], dashArray: [6, 5] });
   });
 
   it.each(["solid", "dimmed"] as const)(
@@ -84,7 +84,7 @@ describe("series stroke styles", () => {
           comparisonSeriesCount: 1,
           comparisonStyle,
         }),
-      ).toMatchObject({ width: [3, 2], dashArray: [0, 6] });
+      ).toMatchObject({ width: [2.5, 2], dashArray: [0, 6] });
     },
   );
 
@@ -96,7 +96,7 @@ describe("series stroke styles", () => {
           { ...PLAIN, strokeDashArray: 3 },
         ],
       }),
-    ).toMatchObject({ width: [5, 3], dashArray: [0, 3] });
+    ).toMatchObject({ width: [5, 2.5], dashArray: [0, 3] });
   });
 
   it("preserves styles when mixed definitions project type and color", () => {
@@ -110,7 +110,7 @@ describe("series stroke styles", () => {
       ],
     }));
     expect(chart.options.value.stroke).toMatchObject({
-      width: [3, 2],
+      width: [2.5, 2],
       dashArray: [0, 6],
     });
     expect(chart.series.value).toEqual([

package/frontend-vue/tests/chip-group.test.ts

@@ -0,0 +1,68 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { type App, createApp, h, nextTick } from "vue";
+
+const ITEMS = [
+  { value: "all", label: "All", count: 12 },
+  { value: "data", label: "Data", count: 4 },
+  { value: "mail", label: "Mail" },
+];
+
+let app: App | undefined;
+let host: HTMLDivElement;
+
+async function mount(props: Record<string, unknown>) {
+  const { default: ChipGroup } = await import(
+    "../layers/dms-ui/app/build/components/form/ChipGroup.vue"
+  );
+  const onPick = vi.fn();
+  app = createApp({
+    setup: () => () =>
+      h(ChipGroup, { items: ITEMS, label: "Category", onPick, ...props }),
+  });
+  app.component("UIcon", () => h("i", { "data-check": "" }));
+  app.mount(host);
+  await nextTick();
+  return { onPick };
+}
+
+const chip = (value: string) =>
+  host.querySelector<HTMLButtonElement>(`button[data-value="${value}"]`)!;
+
+beforeEach(() => {
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+});
+
+it("reads a single pick as radios, with each chip's count", async () => {
+  const { onPick } = await mount({ selected: ["data"] });
+  expect(host.firstElementChild!.getAttribute("role")).toBe("radiogroup");
+  expect(chip("data").getAttribute("role")).toBe("radio");
+  expect(chip("data").getAttribute("aria-checked")).toBe("true");
+  expect(chip("all").getAttribute("aria-checked")).toBe("false");
+  expect(chip("all").textContent).toContain("12");
+  expect(host.querySelector("[data-check]")).toBeNull();
+
+  chip("mail").click();
+  expect(onPick).toHaveBeenCalledWith("mail");
+});
+
+it("reads several picks as toggles, checking the picked ones", async () => {
+  await mount({ selected: ["all", "mail"], multiple: true });
+  expect(host.firstElementChild!.getAttribute("role")).toBe("group");
+  expect(chip("all").getAttribute("aria-pressed")).toBe("true");
+  expect(chip("data").getAttribute("aria-pressed")).toBe("false");
+  expect(host.querySelectorAll("[data-check]")).toHaveLength(2);
+});
+
+it("rings the chips not picked when invalid, and holds them when disabled", async () => {
+  await mount({ selected: ["all"], invalid: true, disabled: true });
+  expect(chip("data").className).toContain("border-error");
+  expect(chip("all").className).not.toContain("border-error");
+  expect(chip("data").disabled).toBe(true);
+});