@antelopejs/dms 0.4.3 → 0.4.5

package/frontend-vue/layers/dms-ui/app/components/kpi/KpiCard.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
-import { formatValueParts } from "../../composables/chart/formatValue";
+import {
+  ABSENT_VALUE_PARTS,
+  formatValueParts,
+} from "../../composables/chart/formatValue";
 import { resolveSparklineAccent } from "../../composables/chart/resolveSparklineAccent";
 import type {
   KpiCardResponse,
@@ -69,18 +72,20 @@ const { data, isLoading } = useChartFetch<KpiCardResponse>({
   watchSource: () => watchKey.value,
 });
 
-const value = computed(() => data.value?.value ?? 0);
+const value = computed(() => data.value?.value);
 const delta = computed(() => data.value?.delta ?? null);
 const sparkline = computed(() => data.value?.sparkline ?? []);
 
 const formattedParts = computed(() =>
-  formatValueParts(
-    value.value,
-    props.valueFormat,
-    locale.value,
-    props.currencyCode,
-    props.valuePrecision,
-  ),
+  value.value === undefined
+    ? ABSENT_VALUE_PARTS
+    : formatValueParts(
+        value.value,
+        props.valueFormat,
+        locale.value,
+        props.currencyCode,
+        props.valuePrecision,
+      ),
 );
 
 const showTrend = computed(() => props.showDelta && delta.value !== null);

package/frontend-vue/layers/dms-ui/app/composables/chart/formatValue.ts

@@ -112,6 +112,21 @@ export interface FormattedValueParts {
   unitIsPrefix: boolean;
 }
 
+/**
+ * What a card prints where its figure would go when the query measured nothing.
+ *
+ * An em dash and not a zero: a zero is itself a measurement, so a card printing
+ * one for a period with no rows in it states a result nobody computed. No unit
+ * either — there is no quantity for it to qualify.
+ */
+export const ABSENT_VALUE_TEXT = "—";
+
+export const ABSENT_VALUE_PARTS: FormattedValueParts = {
+  value: ABSENT_VALUE_TEXT,
+  unit: "",
+  unitIsPrefix: false,
+};
+
 /** Splits the same formatted value into numeric and unit parts for KPI cards. */
 export function formatValueParts(
   value: number,

package/frontend-vue/layers/dms-ui/app/composables/chart/types.ts

@@ -82,7 +82,8 @@ export interface DonutRecord {
 }
 
 export interface ChartCardResponse {
-  value: number;
+  /** Absent when the query measured no group; the card shows no figure. */
+  value?: number;
   delta?: number;
   previousValue?: number;
   series: ChartSeries[];
@@ -90,7 +91,8 @@ export interface ChartCardResponse {
 }
 
 export interface KpiCardResponse {
-  value: number;
+  /** Absent when the query measured no group; the card shows no figure. */
+  value?: number;
   delta?: number;
   previousValue?: number;
   sparkline?: number[];

package/frontend-vue/layers/dms-ui/app/composables/form/types/props.ts

@@ -17,6 +17,8 @@ export interface FormProps extends FormComponentProps {
   submitUrl?: string;
   submitUrlMethod?: HttpMethod;
   submitLabel?: string;
+  /** Whether the buttons show; left out, once there is somewhere to submit to. */
+  showActions?: boolean;
   successMessage?: string;
   errorMessage?: string;
   schema?: Record<string, unknown>;

package/frontend-vue/layers/dms-ui/app/composables/form/useForm.ts

@@ -28,6 +28,23 @@ export function cloneFormValue(
   return JSON.parse(JSON.stringify(value));
 }
 
+/**
+ * Whether a form shows its reset and submit buttons.
+ *
+ * Asked for, they show whatever else holds — a form placed in the builder shows
+ * them before it has somewhere to submit to. Left to the form, they show once
+ * it has an address and a field someone can fill in.
+ */
+export function formShowsActions(
+  options: { showActions?: boolean; submitUrl?: string },
+  fields: ReadonlyArray<{ disabled?: boolean }>,
+): boolean {
+  return (
+    options.showActions ??
+    (!!options.submitUrl && !fields.every((field) => field.disabled))
+  );
+}
+
 export function computeResetState(
   state: Record<string, unknown>,
   initialValues: FormData,
@@ -137,6 +154,25 @@ export function replaceUrlVariables(
   return processedUrl;
 }
 
+/** Where a submit goes, or what it lacks to go anywhere. */
+export type SubmitTarget = { url: string } | { missing: "url" | "token" };
+
+/**
+ * Where a submit is sent. A form with no URL has nowhere to send it — it is a
+ * read-only one — and a URL naming a token the page does not carry, such as an
+ * edit form opened without the id of its row, is not a route either: loading
+ * already skips such a URL, and submitting to it wrote to a path that was never
+ * meant to exist.
+ */
+export function resolveSubmitTarget(
+  submitUrl: string | undefined,
+  context: ReplaceUrlVariablesContext,
+): SubmitTarget {
+  if (!submitUrl) return { missing: "url" };
+  const url = replaceUrlVariables(submitUrl, context);
+  return url.includes("{{") ? { missing: "token" } : { url };
+}
+
 function processBeforeStateMappers(
   data: FormData,
   fields: FormFieldOrGroup[],
@@ -496,16 +532,29 @@ export const useForm = (props: FormProps) => {
     }
   };
 
+  const showUnresolvedTargetToast = () => {
+    toast.add({
+      title: processI18n("$dms.form.error_title"),
+      description: processI18n("$dms.form.error_no_target"),
+      color: Color.error,
+    });
+  };
+
   const onSubmit = async (event: FormSubmitEvent<FormData>) => {
+    const target = resolveSubmitTarget(props.submitUrl, buildUrlContext());
+    if ("missing" in target) {
+      // A read-only form renders no submit button, but Enter in one of its
+      // fields still submits it: that does nothing. Falling back on `/` sent
+      // the values to the site root with a PUT and reported nothing.
+      if (target.missing === "token") showUnresolvedTargetToast();
+      return;
+    }
+    const submitUrl = target.url;
     const plainData = collectSubmitData(
       event,
       allFields.value,
       effectiveSubmitDefaults.value,
     );
-    const submitUrl = replaceUrlVariables(
-      props.submitUrl || "/",
-      buildUrlContext(),
-    );
 
     loading.value = true;
     try {

package/frontend-vue/layers/dms-ui/app/composables/tree/useTree.ts

@@ -106,12 +106,6 @@ export async function useTree<T = unknown>(props: TreeProps) {
     },
   });
 
-  if (!props.fetchUrl && !props.staticNodes) {
-    throw new Error(
-      "Either fetchUrl or staticNodes must be provided to useTree",
-    );
-  }
-
   const loadingNodes = ref<Set<string>>(new Set());
   // Shallow on purpose: `TreeItem` carries a string index signature and
   // recurses through `children`, so Vue's deep `UnwrapRef` on a tree node
@@ -194,12 +188,16 @@ export async function useTree<T = unknown>(props: TreeProps) {
     }
   }
 
+  // A tree with neither a URL nor nodes of its own holds nothing yet, which is
+  // what a block just placed on a page looks like: it is configured after it is
+  // placed, and the editor says what is still missing. Refusing to render at
+  // all would answer that gesture with a crash.
   const dataLoader = props.fetchUrl
     ? () =>
         $authFetch<TreeNode<T>[]>(props.fetchUrl!, {
           method: props.fetchUrlMethod || "GET",
         })
-    : () => Promise.resolve(props.staticNodes as TreeNode<T>[]);
+    : () => Promise.resolve((props.staticNodes ?? []) as TreeNode<T>[]);
 
   const { data, status, refresh } = await useDmsAsyncData(
     `tree-${props.componentId}-${props.pageId}-${props.componentId}`,

package/frontend-vue/layers/dms-ui/i18n/locales/ui-en-GB.json

@@ -161,6 +161,7 @@
       "success_message": "Data has been successfully saved",
       "error_title": "Error",
       "error_unknown": "An unknown error occurred",
+      "error_no_target": "This form does not know which item to save. Open it from a link that names one.",
       "no_data": "No data available",
       "empty_value": "—",
       "actions": "Actions",

package/frontend-vue/layers/dms-ui/i18n/locales/ui-fr-FR.json

@@ -161,6 +161,7 @@
       "success_message": "Les données ont été enregistrées avec succès",
       "error_title": "Erreur",
       "error_unknown": "Une erreur inconnue s'est produite",
+      "error_no_target": "Ce formulaire ne sait pas quel élément enregistrer. Ouvrez-le depuis un lien qui en désigne un.",
       "no_data": "Aucune donnée disponible",
       "empty_value": "—",
       "actions": "Actions",

package/frontend-vue/tests/api-error-title.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { resolveApiErrorTitle } from "../layers/dms-core/app/composables/useApiError";
+
+describe("resolveApiErrorTitle", () => {
+  it("titles a 4xx response as a refused request", () => {
+    expect(resolveApiErrorTitle({ statusCode: 403 })).toBe(
+      "error.request_refused.title",
+    );
+    expect(resolveApiErrorTitle({ status: 422 })).toBe(
+      "error.request_refused.title",
+    );
+  });
+
+  it("titles a 5xx response as a server error", () => {
+    expect(resolveApiErrorTitle({ statusCode: 502 })).toBe("error.500.title");
+  });
+
+  it("titles an error without a status as a server error", () => {
+    expect(resolveApiErrorTitle(new Error("network down"))).toBe(
+      "error.500.title",
+    );
+    expect(resolveApiErrorTitle(undefined)).toBe("error.500.title");
+  });
+});

package/frontend-vue/tests/auth-middleware-error.test.ts

@@ -0,0 +1,58 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+type Middleware = (to: unknown) => Promise<unknown>;
+
+const pageError = { value: null as { statusCode: number } | null };
+const navigateDms = vi.fn();
+
+beforeEach(() => {
+  vi.resetModules();
+  vi.stubGlobal("defineDmsMiddleware", (handler: Middleware) => handler);
+  vi.stubGlobal("useError", () => pageError);
+  vi.stubGlobal("abortNavigation", () => false);
+  vi.stubGlobal("navigateDms", navigateDms);
+  vi.stubGlobal("useSiteLayout", () => ({
+    siteLayout: { value: {} },
+    findMatchingRoute: () => ({ metadata: {} }),
+  }));
+  vi.stubGlobal("useUserSession", () => ({ loggedIn: { value: false } }));
+});
+
+afterEach(() => {
+  pageError.value = null;
+  navigateDms.mockReset();
+  vi.unstubAllGlobals();
+});
+
+async function loadMiddleware(): Promise<Middleware> {
+  const module = await import("../layers/dms-auth/app/middleware/auth");
+  return module.default as unknown as Middleware;
+}
+
+const privateRoute = {
+  path: "/projects/project",
+  fullPath: "/projects/project",
+  matched: [{}],
+  meta: { auth: true },
+};
+
+describe("auth middleware", () => {
+  it("aborts without throwing when the page already raised an error", async () => {
+    pageError.value = { statusCode: 404 };
+    const middleware = await loadMiddleware();
+
+    await expect(middleware(privateRoute)).resolves.toBe(false);
+    expect(navigateDms).not.toHaveBeenCalled();
+  });
+
+  it("still sends a signed-out visitor to the login page", async () => {
+    const middleware = await loadMiddleware();
+
+    await middleware(privateRoute);
+
+    expect(navigateDms).toHaveBeenCalledWith({
+      path: "/auth",
+      query: { redirect: "/projects/project" },
+    });
+  });
+});

package/frontend-vue/tests/button-disabled-theme.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import { twMerge } from "tailwind-merge";
+import appConfig from "../layers/dms-layout/app/app.config";
+
+// Nuxt UI 4's own button base, which the app config is merged over.
+const NUXT_UI_BUTTON_BASE =
+  "rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75";
+
+describe("button theme", () => {
+  const merged = twMerge(NUXT_UI_BUTTON_BASE, appConfig.ui.button.slots.base);
+
+  it("fades disabled buttons past Nuxt UI's default", () => {
+    expect(merged).toContain("disabled:opacity-50");
+    expect(merged).toContain("aria-disabled:opacity-50");
+    expect(merged).not.toContain("opacity-75");
+  });
+
+  it("cancels the press effect on a disabled button", () => {
+    expect(merged).toContain("disabled:active:scale-100");
+  });
+});

package/frontend-vue/tests/chart-absent-value.test.ts

@@ -0,0 +1,78 @@
+import { createSSRApp, defineComponent, h, ref } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import ChartCard from "../layers/dms-ui/app/components/chart/ChartCard.vue";
+import KpiCard from "../layers/dms-ui/app/components/kpi/KpiCard.vue";
+import { ABSENT_VALUE_TEXT } from "../layers/dms-ui/app/composables/chart/formatValue";
+
+// A period the query measured nothing in: the response carries its series and no
+// figure at all, which is what the contract answers rather than a zero.
+vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
+  useChartFetch: () => ({
+    data: ref({ series: [{ name: "Revenue", data: [] }] }),
+    isLoading: ref(false),
+  }),
+}));
+
+const Slot = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", slots.default?.()),
+});
+
+const SLOT_COMPONENTS = [
+  "DmsCard",
+  "DmsClientOnly",
+  "UIcon",
+  "USkeleton",
+  "DmsTrendBadge",
+  "DmsSparkline",
+  "UBadge",
+];
+
+function stubNuxt() {
+  vi.stubGlobal("useI18n", () => ({
+    locale: ref("en-US"),
+    t: (key: string) => key,
+  }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string) => text,
+  }));
+  vi.stubGlobal("useComponentEvent", () => ({}));
+  vi.stubGlobal("useWatch", () => ({ state: ref({}) }));
+}
+
+type CardProps = InstanceType<typeof ChartCard>["$props"];
+
+async function renderCards() {
+  stubNuxt();
+  const props: CardProps = {
+    title: "Revenue",
+    componentId: "card",
+    pageId: "absent",
+    valueFormat: "currency",
+  };
+  const app = createSSRApp({
+    render: () => h("main", [h(ChartCard, props), h(KpiCard, props)]),
+  });
+  for (const name of SLOT_COMPONENTS) app.component(name, Slot);
+  return renderToString(app);
+}
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe("a card whose query measured nothing", () => {
+  it("shows an absence where the figure goes, on both cards", async () => {
+    const html = await renderCards();
+    expect(html.split(ABSENT_VALUE_TEXT)).toHaveLength(3);
+  });
+
+  it("prints no zero, and no unit for a quantity there is none of", async () => {
+    const html = await renderCards();
+    expect(html, "a zero reads exactly like a measured figure").not.toContain(
+      "<span>0</span>",
+    );
+    expect(html).not.toContain("€");
+  });
+});

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

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { formShowsActions } from "../layers/dms-ui/app/composables/form/useForm";
+
+describe("formShowsActions", () => {
+  it("shows the buttons once the form has somewhere to submit to", () => {
+    expect(formShowsActions({ submitUrl: "/api/order/new" }, [{}])).toBe(true);
+    expect(formShowsActions({}, [{}])).toBe(false);
+  });
+
+  it("hides them on a form nothing in which can be filled in", () => {
+    expect(
+      formShowsActions({ submitUrl: "/api/order/new" }, [{ disabled: true }]),
+    ).toBe(false);
+  });
+
+  it("shows them when asked, before there is an address or a field", () => {
+    expect(formShowsActions({ showActions: true }, [])).toBe(true);
+  });
+
+  it("hides them when asked, whatever the form could submit", () => {
+    expect(
+      formShowsActions({ showActions: false, submitUrl: "/api/order/new" }, [
+        {},
+      ]),
+    ).toBe(false);
+  });
+});

package/frontend-vue/tests/form-submit-target.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { resolveSubmitTarget } from "../layers/dms-ui/app/composables/form/useForm";
+
+const page = { routeParams: { id: "42" }, routeQuery: { id: "7" } };
+
+describe("resolveSubmitTarget", () => {
+  it("sends a submit where its URL points, tokens filled in", () => {
+    expect(resolveSubmitTarget("/api/ticket/edit?id={{query.id}}", page)).toEqual(
+      { url: "/api/ticket/edit?id=7" },
+    );
+    expect(resolveSubmitTarget("/api/ticket/edit?id={{params.id}}", page)).toEqual(
+      { url: "/api/ticket/edit?id=42" },
+    );
+  });
+
+  it("has nowhere to send a read-only form's values", () => {
+    expect(resolveSubmitTarget(undefined, page)).toEqual({ missing: "url" });
+    expect(resolveSubmitTarget("", page)).toEqual({ missing: "url" });
+  });
+
+  it("refuses a URL naming a row the page does not carry", () => {
+    expect(
+      resolveSubmitTarget("/api/ticket/edit?id={{query.id}}", {
+        routeQuery: {},
+      }),
+    ).toEqual({ missing: "token" });
+  });
+});

package/frontend-vue/tests/menu-navigation.test.ts

@@ -29,10 +29,16 @@ describe("buildMenuItemTarget", () => {
     expect(buildMenuItemTarget(node({}))).to.equal("/project");
   });
 
-  it("returns a path/query target when the entry declares a query", () => {
+  it("returns a string link carrying the query the entry declares", () => {
     expect(
       buildMenuItemTarget(node({ query: { project: "invoicer" } })),
-    ).to.deep.equal({ path: "/project", query: { project: "invoicer" } });
+    ).to.equal("/project?project=invoicer");
+  });
+
+  it("encodes the query values of the link", () => {
+    expect(
+      buildMenuItemTarget(node({ query: { project: "a b&c", env: "prod" } })),
+    ).to.equal("/project?project=a+b%26c&env=prod");
   });
 
   it("returns no target for a category that has no page behind it", () => {
@@ -45,11 +51,11 @@ describe("buildMenuItemTarget", () => {
 describe("isMenuItemActive with query entries", () => {
   const invoicer = {
     fullId: "cloud.projects.invoicer",
-    to: { path: "/project", query: { project: "invoicer" } },
+    to: "/project?project=invoicer",
   };
   const resto = {
     fullId: "cloud.projects.resto",
-    to: { path: "/project", query: { project: "resto" } },
+    to: "/project?project=resto",
   };
 
   it("highlights only the entry matching the current query", () => {
@@ -63,6 +69,22 @@ describe("isMenuItemActive with query entries", () => {
     expect(isMenuItemActive(invoicer, null, current)).to.equal(true);
   });
 
+  it("tells apart entries whose query values share a prefix", () => {
+    const current = route("/project", { project: "invoicer-2" });
+    expect(isMenuItemActive(invoicer, null, current)).to.equal(false);
+  });
+
+  it("stays active on the entry's sub-routes carrying its query", () => {
+    const current = route("/project/settings", { project: "invoicer" });
+    expect(isMenuItemActive(invoicer, null, current)).to.equal(true);
+  });
+
+  it("still accepts an object target", () => {
+    const entry = { to: { path: "/project", query: { project: "invoicer" } } };
+    const current = route("/project", { project: "invoicer" });
+    expect(isMenuItemActive(entry, null, current)).to.equal(true);
+  });
+
   it("stays inactive on the same path without the entry's query", () => {
     expect(isMenuItemActive(invoicer, null, route("/project"))).to.equal(false);
   });
@@ -86,11 +108,8 @@ describe("addActiveStateToMenuItems", () => {
   it("marks a single query entry active across a group", () => {
     const groups = [
       [
-        {
-          id: "invoicer",
-          to: { path: "/project", query: { project: "invoicer" } },
-        },
-        { id: "resto", to: { path: "/project", query: { project: "resto" } } },
+        { id: "invoicer", to: "/project?project=invoicer" },
+        { id: "resto", to: "/project?project=resto" },
       ],
     ];
 
@@ -100,7 +119,17 @@ describe("addActiveStateToMenuItems", () => {
       route("/project", { project: "resto" }),
     );
 
-    expect(group?.[0]?.active).to.equal(undefined);
+    expect(group?.[0]?.active).to.equal(false);
     expect(group?.[1]?.active).to.equal(true);
   });
+
+  it("leaves the native highlighting of an inactive plain entry alone", () => {
+    const [group] = addActiveStateToMenuItems(
+      [[{ id: "orders", to: "/orders" }]],
+      null,
+      route("/invoices"),
+    );
+
+    expect(group?.[0]?.active).to.equal(undefined);
+  });
 });

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/tree-without-source.test.ts

@@ -0,0 +1,79 @@
+// @vitest-environment jsdom
+/**
+ * A tree is configured after it is placed.
+ *
+ * The editor drops a block and the author points it at its data afterwards, so
+ * a tree with neither a URL nor nodes of its own is a page under construction,
+ * not a mistake. It used to throw during setup, which the canvas could only
+ * report as a crash on the block the author had just placed.
+ */
+import * as vue from "vue";
+import { ref } from "vue";
+import { describe, expect, it, vi } from "vitest";
+import type { TreeProps } from "../layers/dms-ui/app/composables/tree/types";
+
+// The layer's auto-imports, as the Nuxt build would supply them: Vue's own
+// first, then the DMS helpers the composable reaches for.
+for (const name of [
+  "ref",
+  "shallowRef",
+  "computed",
+  "watch",
+  "watchEffect",
+  "toValue",
+  "nextTick",
+] as const) {
+  vi.stubGlobal(name, vue[name]);
+}
+
+vi.stubGlobal(
+  "TreeEvents",
+  new Proxy({}, { get: (_target, key) => String(key) }),
+);
+vi.stubGlobal("createError", (payload: unknown) => new Error(String(payload)));
+vi.stubGlobal("useAuthFetch", () => ({
+  $authFetch: async () => [],
+}));
+vi.stubGlobal("useComponentEvent", () => ({ sendComponentEvent: () => {} }));
+vi.stubGlobal("useDefinedFunctions", () => ({ getFunction: () => undefined }));
+vi.stubGlobal("useTranslation", () => ({ processI18n: (text: string) => text }));
+vi.stubGlobal("useWatch", () => ({ isLoading: ref(false), state: ref({}) }));
+vi.stubGlobal("useToast", () => ({ add: () => {} }));
+vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+vi.stubGlobal("useEventedAction", () => ({ execute: async () => [] }));
+vi.stubGlobal(
+  "useDmsAsyncData",
+  async (_key: string, handler: () => Promise<unknown>) => ({
+    data: ref(await handler()),
+    status: ref("success"),
+    refresh: async () => {},
+  }),
+);
+
+const { useTree } = await import(
+  "../layers/dms-ui/app/composables/tree/useTree"
+);
+
+describe("a tree with no source yet", () => {
+  const props = (extra: Partial<TreeProps> = {}) =>
+    ({
+      selectionBehavior: "toggle",
+      componentId: "tree",
+      pageId: "page",
+      ...extra,
+    }) as TreeProps;
+
+  it("holds nothing, rather than refusing to render", async () => {
+    const tree = await useTree(props());
+
+    expect(tree.items.value).toEqual([]);
+  });
+
+  it("still reads the nodes it is given", async () => {
+    const tree = await useTree(
+      props({ staticNodes: [{ value: "one", label: "One" }] }),
+    );
+
+    expect(tree.items.value.map((node) => node.value)).toEqual(["one"]);
+  });
+});