@antelopejs/dms 0.7.8 → 0.7.10

package/frontend-vue/tests/block-not-found.test.ts

@@ -0,0 +1,220 @@
+// @vitest-environment jsdom
+/**
+ * A data block whose source answers 404 shows what it reads does not exist:
+ * a translated not-found state (the server's message or `emptyState` over
+ * it), never "Check your connection" with a retry, and never the values it
+ * showed for the record it read before.
+ */
+import {
+  type Component,
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  reactive,
+  ref,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { readFetchNotFound } from "../layers/dms-ui/app/build/utils/fetchNotFound";
+
+interface FetchFailure extends Error {
+  statusCode?: number;
+  data?: unknown;
+}
+
+const route = reactive<{ query: Record<string, unknown> }>({ query: {} });
+const answers = new Map<string, unknown>();
+
+function failure(statusCode: number, data?: unknown): FetchFailure {
+  return Object.assign(new Error(`${statusCode}`), {
+    name: "FetchError",
+    statusCode,
+    data,
+  });
+}
+
+vi.stubGlobal("useAuthFetch", () => ({
+  $authFetch: async (url: string) => {
+    const answer = answers.get(url);
+    if (answer instanceof Error) throw answer;
+    return answer;
+  },
+}));
+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"
+);
+const { default: BlockStatus } = await import(
+  "../layers/dms-ui/app/build/components/blocks/BlockStatus.vue"
+);
+
+// useChartFetch debounces every refresh past the first by 180ms.
+const SETTLE_MS = 250;
+const settle = () => new Promise((resolve) => setTimeout(resolve, SETTLE_MS));
+const URL = "/api/kpis?workspace={{query.workspace}}";
+
+const mounted: Array<{ unmount: () => void }> = [];
+
+// Runs a composable inside a component's setup.
+const Probe = defineComponent({
+  props: { run: { type: Function, required: true } },
+  setup(props) {
+    props.run();
+    return () => h("div");
+  },
+});
+
+const probe = (run: () => void) => mount({ render: () => h(Probe, { run }) });
+
+function mount(component: Component): HTMLElement {
+  const app = createApp(component);
+  for (const name of ["UIcon", "UButton", "DmsLink"]) {
+    app.component(name, (props: Record<string, unknown>) =>
+      h("i", { "data-stub": name, "data-label": props.label }),
+    );
+  }
+  const host = document.createElement("div");
+  app.mount(host);
+  mounted.push(app);
+  return host;
+}
+
+beforeEach(() => {
+  answers.clear();
+  route.query = { workspace: "web" };
+  answers.set("/api/kpis?workspace=web", { items: [{ label: "web" }] });
+  answers.set(
+    "/api/kpis?workspace=gone",
+    failure(404, { code: "unknown_workspace", message: "No such workspace" }),
+  );
+  answers.set("/api/kpis?workspace=down", failure(500));
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("useI18n", () => ({
+    t: (key: string) => `t(${key})`,
+    locale: ref("en"),
+  }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string) => (text.startsWith("$") ? `t(${text})` : text),
+  }));
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+});
+
+async function switchWorkspace(workspace: string) {
+  route.query = { workspace };
+  await nextTick();
+  await settle();
+}
+
+describe("readFetchNotFound", () => {
+  it("reads a 404's message and emptyState", () => {
+    expect(
+      readFetchNotFound(
+        failure(404, { message: "Gone", emptyState: { title: "$x.y" } }),
+      ),
+    ).toEqual({ message: "Gone", emptyState: { title: "$x.y" } });
+  });
+
+  it("is null for any other failure", () => {
+    expect(readFetchNotFound(failure(500))).toBeNull();
+    expect(readFetchNotFound(new TypeError("Failed to fetch"))).toBeNull();
+    expect(readFetchNotFound(null)).toBeNull();
+  });
+});
+
+describe("useChartFetch on a 404", () => {
+  function mountFetch() {
+    const state: Partial<ReturnType<typeof useChartFetch<unknown>>> = {};
+    probe(() =>
+      Object.assign(state, useChartFetch<unknown>({ fetchUrl: URL })),
+    );
+    return state;
+  }
+
+  it("drops the values of the record it read before", async () => {
+    const state = mountFetch();
+    await settle();
+    expect(state.data?.value).toEqual({ items: [{ label: "web" }] });
+    await switchWorkspace("gone");
+    expect(state.data?.value).toBeNull();
+    expect(readFetchNotFound(state.error?.value)?.message).toBe(
+      "No such workspace",
+    );
+  });
+
+  it("keeps them on any other failure", async () => {
+    const state = mountFetch();
+    await settle();
+    await switchWorkspace("down");
+    expect(state.data?.value).toEqual({ items: [{ label: "web" }] });
+  });
+});
+
+describe("useBlockItems on a 404", () => {
+  it("reports not found, not a load error, and lists nothing", async () => {
+    const state: Partial<ReturnType<typeof useBlockItems<unknown>>> = {};
+    probe(() =>
+      Object.assign(
+        state,
+        useBlockItems<unknown>({ items: () => [], fetchUrl: URL }),
+      ),
+    );
+    await settle();
+    await switchWorkspace("gone");
+    expect(state.items?.value).toEqual([]);
+    expect(state.hasError?.value).toBe(false);
+    expect(state.notFound?.value?.message).toBe("No such workspace");
+    // Nothing left on screen to keep: the next failure is a load error.
+    await switchWorkspace("down");
+    expect(state.notFound?.value).toBeNull();
+    expect(state.hasError?.value).toBe(true);
+  });
+});
+
+describe("BlockStatus not-found", () => {
+  const render = (notFound: unknown) =>
+    mount({
+      render: () => h(BlockStatus, { state: "not-found", notFound }),
+    }).textContent;
+
+  it("says so in the user's language, with no retry", () => {
+    const text = render({});
+    expect(text).toContain("t(dms.blocks.not_found)");
+    expect(text).toContain("t(dms.blocks.not_found_hint)");
+    expect(text).not.toContain("load_error");
+  });
+
+  it("describes it with the server's message", () => {
+    expect(render({ message: "No such workspace" })).toContain(
+      "No such workspace",
+    );
+  });
+
+  it("lays the server's emptyState over it", () => {
+    const text = render({
+      message: "No such workspace",
+      emptyState: {
+        title: "$lang.unknown_title",
+        description: "$lang.unknown_hint",
+      },
+    });
+    expect(text).toContain("t($lang.unknown_title)");
+    expect(text).toContain("t($lang.unknown_hint)");
+    expect(text).not.toContain("No such workspace");
+  });
+});

package/frontend-vue/tests/choice-cards-columns.test.ts

@@ -0,0 +1,60 @@
+/**
+ * Choice cards sit two per row once the field is wide enough; `columns` sets
+ * how many, so three options fit one row instead of wrapping 2 + 1.
+ */
+import { computed, createSSRApp, defineComponent, h } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import ChoiceCards from "../layers/dms-ui/app/components/form/components/ChoiceCards.vue";
+
+const Group = defineComponent({
+  props: { ui: { type: Object, default: undefined } },
+  setup: (props) => () =>
+    h("fieldset", { class: (props.ui as { fieldset?: string })?.fieldset }),
+});
+
+async function render(props: Record<string, unknown>): Promise<string> {
+  const app = createSSRApp({
+    render: () =>
+      h(ChoiceCards, {
+        items: [
+          { label: "30 days", value: 30 },
+          { label: "90 days", value: 90 },
+          { label: "365 days", value: 365 },
+        ],
+        modelValue: 30,
+        ...props,
+      }),
+  });
+  app.component("URadioGroup", Group);
+  app.component("UCheckboxGroup", Group);
+  return renderToString(app);
+}
+
+// A Nuxt auto-import, which ChoiceCards.vue uses unimported.
+beforeEach(() => vi.stubGlobal("computed", computed));
+afterEach(() => vi.unstubAllGlobals());
+
+describe("ChoiceCards columns", () => {
+  it("lays the cards on a grid whose column count is a custom property", async () => {
+    const html = await render({});
+    expect(html).toContain(
+      "@min-[480px]:grid-cols-[repeat(var(--dms-choice-columns),minmax(0,1fr))]",
+    );
+  });
+
+  it("keeps two cards per row by default", async () => {
+    expect(await render({})).toContain("--dms-choice-columns:2");
+  });
+
+  it("puts `columns` cards per row", async () => {
+    expect(await render({ columns: 3 })).toContain("--dms-choice-columns:3");
+  });
+
+  it("keeps at least one whole column", async () => {
+    expect(await render({ columns: 0 })).toContain("--dms-choice-columns:1");
+    expect(await render({ columns: 2.6, multiple: true })).toContain(
+      "--dms-choice-columns:3",
+    );
+  });
+});

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

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import {
+  childComponentId,
+  siblingComponentId,
+} from "../layers/dms-ui/app/utils/componentId";
+
+describe("siblingComponentId", () => {
+  it("names a top-level block's neighbour by its key", () => {
+    expect(siblingComponentId("preview", "form")).toBe("form");
+  });
+
+  it("names a nested block's neighbour under the same parent", () => {
+    const row = childComponentId("editor", "row");
+    expect(siblingComponentId(childComponentId(row, "preview"), "form")).toBe(
+      "editor-child-row-child-form",
+    );
+  });
+});

package/frontend-vue/tests/confirm-secondary-action.test.ts

@@ -0,0 +1,269 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  type App,
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+} from "vue";
+import { createI18n } from "vue-i18n";
+import ConfirmModal from "../layers/dms-ui/app/components/confirm/ConfirmModal.vue";
+import { resolveConfirmDialog } from "../layers/dms-ui/app/build/composables/confirm/confirmDialogTexts";
+import {
+  downloadFilename,
+  secondaryTargetRunner,
+} from "../layers/dms-ui/app/build/composables/confirm/secondaryTarget";
+
+vi.mock("reka-ui", async () => {
+  const { defineComponent: define, h: render } = await import("vue");
+  const Text = define({
+    setup:
+      (_, { slots }) =>
+      () =>
+        render("div", slots.default?.()),
+  });
+  return { DialogTitle: Text, DialogDescription: Text };
+});
+
+const i18n = createI18n({
+  legacy: false,
+  locale: "en",
+  messages: { en: { lang: { download: "Download {file}" } } },
+});
+const t = i18n.global.t as (
+  key: string,
+  params: Record<string, unknown>,
+  plural?: number,
+) => string;
+
+describe("a confirmation's secondary action, resolved", () => {
+  it("fills its label, URL and file name with the row and the params", async () => {
+    const runTarget = vi.fn();
+    const options = resolveConfirmDialog(
+      {
+        title: "Remove {name}?",
+        params: { file: "fr.json" },
+        secondaryAction: {
+          label: "$lang.download",
+          icon: "i-ph-download-simple",
+          target: {
+            type: "download",
+            url: "/legacy/lang/{workspace}/{code}.json",
+            filename: "{workspace}-{file}",
+          },
+        },
+      },
+      { name: "French", code: "fr", workspace: "site" },
+      t,
+      runTarget,
+    );
+    expect(options.secondaryAction).toMatchObject({
+      label: "Download fr.json",
+      icon: "i-ph-download-simple",
+    });
+    await options.secondaryAction!.run();
+    expect(runTarget).toHaveBeenCalledWith({
+      type: "download",
+      url: "/legacy/lang/site/fr.json",
+      filename: "site-fr.json",
+    });
+  });
+
+  it("is left out when nothing can run it", () => {
+    const options = resolveConfirmDialog(
+      {
+        title: "Remove?",
+        secondaryAction: {
+          label: "Docs",
+          target: { type: "external", url: "https://antelopejs.com" },
+        },
+      },
+      undefined,
+      t,
+    );
+    expect(options.secondaryAction).toBeUndefined();
+  });
+});
+
+describe("a confirmation's secondary target", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("names a download as declared, else as served, else after its URL", () => {
+    const target = {
+      type: "download" as const,
+      url: "/files/fr%20FR.json?v=2",
+    };
+    expect(downloadFilename({ ...target, filename: "a.json" }, null)).toBe(
+      "a.json",
+    );
+    expect(downloadFilename(target, 'attachment; filename="served.json"')).toBe(
+      "served.json",
+    );
+    expect(downloadFilename(target, null)).toBe("fr FR.json");
+  });
+
+  it("fetches a download with the session and saves it", async () => {
+    const blob = new Blob(["{}"]);
+    const fetchRaw = vi.fn(async () => ({
+      _data: blob,
+      headers: new Headers(),
+    }));
+    const createObjectURL = vi.fn(() => "blob:fr");
+    const revokeObjectURL = vi.fn();
+    vi.stubGlobal(
+      "URL",
+      Object.assign(URL, { createObjectURL, revokeObjectURL }),
+    );
+    const saved: string[] = [];
+    vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(function (
+      this: HTMLAnchorElement,
+    ) {
+      saved.push(`${this.href} ${this.download}`);
+    });
+
+    await secondaryTargetRunner(fetchRaw)({
+      type: "download",
+      url: "/legacy/lang/fr.json",
+    });
+
+    expect(fetchRaw).toHaveBeenCalledWith("/legacy/lang/fr.json", {
+      responseType: "blob",
+    });
+    expect(createObjectURL).toHaveBeenCalledWith(blob);
+    expect(saved).toEqual(["blob:fr fr.json"]);
+    expect(revokeObjectURL).toHaveBeenCalledWith("blob:fr");
+  });
+
+  it("opens a link in a new tab when asked", async () => {
+    const open = vi.spyOn(window, "open").mockReturnValue(null);
+    const fetchRaw = vi.fn();
+    await secondaryTargetRunner(fetchRaw)({
+      type: "external",
+      url: "https://antelopejs.com",
+      newTab: true,
+    });
+    expect(open).toHaveBeenCalledWith(
+      "https://antelopejs.com",
+      "_blank",
+      "noopener,noreferrer",
+    );
+    expect(fetchRaw).not.toHaveBeenCalled();
+  });
+});
+
+describe("ConfirmModal secondary action", () => {
+  let app: App | undefined;
+  let host: HTMLDivElement;
+  const closed = vi.fn();
+
+  const Slots = defineComponent({
+    setup:
+      (_, { slots }) =>
+      () =>
+        h("div", [slots.header?.(), slots.body?.(), slots.footer?.()]),
+  });
+  const Button = defineComponent({
+    props: { label: String },
+    emits: ["click"],
+    setup:
+      (props, { emit }) =>
+      () =>
+        h("button", { onClick: () => emit("click") }, props.label),
+  });
+  const Alert = defineComponent({
+    props: { title: String },
+    setup: (props) => () => h("p", { "data-alert": "" }, props.title),
+  });
+  const Empty = defineComponent({ setup: () => () => null });
+
+  async function flush(): Promise<void> {
+    for (let tick = 0; tick < 6; tick++) await nextTick();
+  }
+
+  function mount(props: Record<string, unknown>): void {
+    app = createApp(ConfirmModal, { onClose: closed, ...props });
+    app.config.globalProperties.$t = (key: string) => key;
+    app.component("UModal", Slots);
+    app.component("UButton", Button);
+    app.component("UAlert", Alert);
+    for (const name of ["UIcon", "UKbd", "UInput", "UFormField", "I18nT"]) {
+      app.component(name, Empty);
+    }
+    app.component("DmsIconWell", Empty);
+    app.mount(host);
+  }
+
+  const button = (label: string) =>
+    [...host.querySelectorAll("button")].find(
+      (entry) => entry.textContent === label,
+    );
+
+  beforeEach(() => {
+    vi.stubGlobal("ref", ref);
+    vi.stubGlobal("computed", computed);
+    vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+    vi.stubGlobal("useTranslation", () => ({
+      processApiMessage: (message: string) => message,
+    }));
+    vi.stubGlobal("resolveDmsComponent", () => undefined);
+    host = document.createElement("div");
+    document.body.append(host);
+    closed.mockReset();
+  });
+
+  afterEach(() => {
+    app?.unmount();
+    app = undefined;
+    host.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("draws no third button without one", async () => {
+    mount({ title: "Remove French?" });
+    await flush();
+    expect(host.querySelectorAll("button")).toHaveLength(3);
+  });
+
+  it("runs it and stays open, the action still to confirm", async () => {
+    const run = vi.fn().mockResolvedValue(undefined);
+    const onConfirm = vi.fn().mockResolvedValue(undefined);
+    mount({
+      title: "Remove French?",
+      secondaryAction: { label: "Download fr.json", run },
+      onConfirm,
+    });
+    await flush();
+
+    button("Download fr.json")!.click();
+    await flush();
+
+    expect(run).toHaveBeenCalledTimes(1);
+    expect(closed).not.toHaveBeenCalled();
+    expect(onConfirm).not.toHaveBeenCalled();
+
+    button("dms.confirm.confirm")!.click();
+    await flush();
+    expect(closed).toHaveBeenCalledWith(true);
+  });
+
+  it("shows a failure in the dialog's alert, the dialog open", async () => {
+    const run = vi.fn().mockRejectedValue(new Error("offline"));
+    mount({
+      title: "Remove French?",
+      secondaryAction: { label: "Download fr.json", run },
+    });
+    await flush();
+
+    button("Download fr.json")!.click();
+    await flush();
+
+    expect(host.querySelector("[data-alert]")).not.toBeNull();
+    expect(closed).not.toHaveBeenCalled();
+  });
+});