@antelopejs/dms 0.9.2 → 0.9.3

package/frontend-vue/tests/chart-type-defaults.test.ts

@@ -1,128 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { useApexChart } from "../layers/dms-ui/app/composables/chart/useApexChart";
-import type { UseApexChartInput } from "../layers/dms-ui/app/composables/chart/useApexChart.types";
-import type { ChartSeries } from "../layers/dms-ui/app/composables/chart/types";
-
-const DEALS: ChartSeries[] = [
-  {
-    name: "Deals",
-    data: [
-      { x: 3, y: 120, label: "Acme" },
-      { x: 8, y: 340 },
-    ],
-  },
-];
-
-type Section = Record<string, unknown>;
-type LabelFormatter = (value: unknown, context: unknown) => unknown;
-
-function optionsFor(input: Partial<UseApexChartInput>): Section {
-  return useApexChart(() => ({ type: "line", series: [], ...input })).options
-    .value;
-}
-
-function sectionOf(options: Section, key: string): Section {
-  return options[key] as Section;
-}
-
-function labelContext(dataPointIndex: number) {
-  return { seriesIndex: 0, dataPointIndex, w: { config: { series: DEALS } } };
-}
-
-describe("radar grid", () => {
-  it("leaves the grid to the radar's own polygons", () => {
-    expect(sectionOf(optionsFor({ type: "radar" }), "grid").show).toBe(false);
-  });
-
-  it("keeps the cartesian grid on axis charts", () => {
-    expect(sectionOf(optionsFor({ type: "line" }), "grid").show).toBe(true);
-  });
-});
-
-describe("donut slice labels", () => {
-  it("hides them on the default thin ring they overflow", () => {
-    const labels = sectionOf(optionsFor({ type: "donut" }), "dataLabels");
-    expect(labels.enabled).toBe(false);
-  });
-
-  it("shows them on a ring wide enough to hold them", () => {
-    const labels = sectionOf(
-      optionsFor({ type: "donut", arcWidth: 45 }),
-      "dataLabels",
-    );
-    expect(labels.enabled).toBe(true);
-  });
-
-  it("keeps them on a pie, and Apex's own percent formatter", () => {
-    const labels = sectionOf(optionsFor({ type: "pie" }), "dataLabels");
-    expect(labels.enabled).toBe(true);
-    expect(labels.formatter).toBeUndefined();
-  });
-});
-
-describe("scatter points", () => {
-  it("draws its points without a pointSize", () => {
-    const markers = sectionOf(optionsFor({ type: "scatter" }), "markers");
-    expect(markers.size).toBeGreaterThan(0);
-  });
-
-  it("honours an explicit pointSize", () => {
-    const markers = sectionOf(
-      optionsFor({ type: "scatter", pointSize: 9 }),
-      "markers",
-    );
-    expect(markers.size).toBe(9);
-  });
-
-  it("keeps line markers hidden", () => {
-    expect(sectionOf(optionsFor({ type: "line" }), "markers").size).toBe(0);
-  });
-
-  it("labels a point with its own label, else its value", () => {
-    const labels = sectionOf(
-      optionsFor({ type: "scatter", series: DEALS, showLabels: true }),
-      "dataLabels",
-    );
-    const format = labels.formatter as LabelFormatter;
-    expect(format(120, labelContext(0))).toBe("Acme");
-    expect(format(340, labelContext(1))).toBe(340);
-  });
-
-  it("lifts a point's label off the point it names", () => {
-    const labels = sectionOf(
-      optionsFor({ type: "scatter", showLabels: true }),
-      "dataLabels",
-    );
-    expect(labels.offsetY).toBeLessThan(0);
-    const line = sectionOf(optionsFor({ type: "line" }), "dataLabels");
-    expect(line.offsetY).toBe(0);
-  });
-});
-
-describe("rawOptions paths", () => {
-  it("sets a dotted key inside its section", () => {
-    const markers = sectionOf(
-      optionsFor({
-        type: "scatter",
-        rawOptions: [{ key: "markers.size", value: "5" }],
-      }),
-      "markers",
-    );
-    expect(markers.size).toBe(5);
-    expect(markers.strokeWidth).toBe(0);
-  });
-
-  it("creates the sections a dotted key names", () => {
-    const options = optionsFor({
-      rawOptions: [{ key: "states.hover.filter", value: '{"type":"none"}' }],
-    });
-    expect(options.states).toEqual({ hover: { filter: { type: "none" } } });
-  });
-
-  it("still replaces a whole section from a plain key", () => {
-    const options = optionsFor({
-      rawOptions: [{ key: "markers", value: '{"size":5}' }],
-    });
-    expect(options.markers).toEqual({ size: 5 });
-  });
-});

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

@@ -1,54 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
-  formatValue,
-  formatValueParts,
-} from "../layers/dms-ui/app/composables/chart/formatValue";
-import type { ValueFormat } from "../layers/dms-ui/app/composables/chart/types";
-
-describe("chart value precision", () => {
-  it("preserves all legacy defaults", () => {
-    expect(formatValue(9.39, "currency", "fr-FR")).toBe("9 €");
-    expect(formatValue(9.3912)).toBe("9.391");
-    expect(formatValue(9.39, "percent")).toBe("9.4%");
-    expect(formatValue(1234, "compact")).toBe("1.2K");
-  });
-
-  it.each(["fr-FR", "en-GB", "ja-JP", "ar-KW"])(
-    "uses native currency digits in %s",
-    (locale) => {
-      for (const currency of ["EUR", "JPY", "KWD"]) {
-        for (const value of [9.391, 0, -9.391]) {
-          const expected = new Intl.NumberFormat(locale, {
-            style: "currency",
-            currency,
-          }).format(value);
-          expect(
-            formatValue(value, "currency", locale, currency, "native"),
-          ).toBe(expected);
-        }
-      }
-    },
-  );
-
-  it.each<ValueFormat>(["number", "currency", "percent", "compact"])(
-    "supports fixed precision for %s",
-    (format) => {
-      expect(formatValue(9.3, format, "en", "JPY", 2)).toContain("9.30");
-      expect(formatValue(9.3, format, "en", "KWD", 0)).not.toContain(".");
-    },
-  );
-
-  it("keeps KPI parts aligned with full strings and unit placement", () => {
-    expect(
-      formatValueParts(9.39, "currency", "fr-FR", "EUR", "native"),
-    ).toEqual({ value: "9,39", unit: "€", unitIsPrefix: false });
-    expect(formatValueParts(9.39, "currency", "en-US", "EUR", 3)).toEqual({
-      value: "9.390",
-      unit: "€",
-      unitIsPrefix: true,
-    });
-    expect(formatValueParts(9.3, "number", "fr-FR", "EUR", 2).value).toBe(
-      "9,30",
-    );
-  });
-});

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

@@ -1,159 +0,0 @@
-import { createSSRApp, defineComponent, h, ref, type PropType } from "vue";
-import { renderToString } from "vue/server-renderer";
-import { beforeEach, afterEach, describe, expect, it, vi } from "vitest";
-import { useRealDataEngine } from "./fixtures/dataEngine";
-import ChartCard from "../layers/dms-ui/app/components/chart/ChartCard.vue";
-import Chart from "../layers/dms-ui/app/components/chart/Chart.vue";
-import KpiCard from "../layers/dms-ui/app/components/kpi/KpiCard.vue";
-import TopListCard from "../layers/dms-ui/app/components/top-list/TopListCard.vue";
-import type { ValuePrecision } from "../layers/dms-ui/app/composables/chart/types";
-
-const AMOUNT = 9.391;
-vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
-  useChartFetch: () => ({
-    data: ref({
-      value: AMOUNT,
-      previousValue: AMOUNT,
-      series: [{ name: "Spend", data: [AMOUNT] }],
-      items: [{ id: "spend", title: "Spend", value: AMOUNT }],
-    }),
-    isLoading: ref(false),
-  }),
-}));
-
-interface ValueFormatter {
-  formatter: (value: number) => string;
-}
-interface FormattedAxis {
-  labels: ValueFormatter;
-}
-interface FormattedTooltip {
-  y: ValueFormatter;
-}
-interface ChartOptions {
-  yaxis: FormattedAxis;
-  tooltip: FormattedTooltip;
-}
-
-const PlotProbe = defineComponent({
-  props: {
-    options: { type: Object as PropType<ChartOptions>, required: true },
-  },
-  setup: (props) => () =>
-    h("output", [
-      h(
-        "span",
-        { class: "axis" },
-        props.options.yaxis.labels.formatter(AMOUNT),
-      ),
-      h(
-        "span",
-        { class: "tooltip" },
-        props.options.tooltip.y.formatter(AMOUNT),
-      ),
-    ]),
-});
-const Slot = defineComponent({
-  setup:
-    (_, { slots }) =>
-    () =>
-      h("div", slots.default?.()),
-});
-const Row = defineComponent({
-  props: ["formattedValue"],
-  setup: (props) => () => h("span", props.formattedValue),
-});
-
-function stubNuxt(locale: string) {
-  vi.stubGlobal("useI18n", () => ({
-    locale: ref(locale),
-    t: (key: string) => key,
-  }));
-  vi.stubGlobal("useTranslation", () => ({
-    processI18n: (text: string) => text,
-  }));
-  vi.stubGlobal("useComponentEvent", () => ({}));
-  vi.stubGlobal("useWatch", () => ({ state: ref({}) }));
-}
-
-const SLOT_COMPONENTS = [
-  "DmsCard",
-  "DmsClientOnly",
-  "UIcon",
-  "USkeleton",
-  "DmsTrendBadge",
-  "DmsSparkline",
-  "UBadge",
-];
-
-type CardProps = InstanceType<typeof ChartCard>["$props"];
-
-async function renderCards(
-  currencyCode: string,
-  locale: string,
-  valuePrecision?: ValuePrecision,
-) {
-  stubNuxt(locale);
-  const props: CardProps = {
-    title: "Spend",
-    componentId: "card",
-    pageId: "precision",
-    valueFormat: "currency",
-    currencyCode,
-    valuePrecision,
-  };
-  const app = createSSRApp({
-    render: () =>
-      h("main", [
-        h(ChartCard, props, () =>
-          h(Chart, { type: "line", componentId: "plot", pageId: "precision" }),
-        ),
-        h(KpiCard, props),
-        h(TopListCard, props),
-      ]),
-  });
-  for (const name of SLOT_COMPONENTS) app.component(name, Slot);
-  app.component("DmsApexChartHost", PlotProbe);
-  app.component("DmsTopListRow", Row);
-  return renderToString(app);
-}
-
-afterEach(() => vi.unstubAllGlobals());
-
-beforeEach(() => useRealDataEngine());
-
-describe("card → nested chart → Apex format propagation", () => {
-  it.each(["EUR", "JPY", "KWD"])(
-    "propagates native %s formatting to headline, comparison, axis, tooltip and list",
-    async (currency) => {
-      const expected = new Intl.NumberFormat("fr-FR", {
-        style: "currency",
-        currency,
-      }).format(AMOUNT);
-      const html = await renderCards(currency, "fr-FR", "native");
-      expect(html.split(expected)).toHaveLength(6);
-      expect(html).toContain(`class="axis">${expected}`);
-      expect(html).toContain(`class="tooltip">${expected}`);
-      const numeric = new Intl.NumberFormat("fr-FR", {
-        style: "currency",
-        currency,
-      })
-        .formatToParts(AMOUNT)
-        .filter((part) => part.type !== "currency")
-        .map((part) => part.value)
-        .join("")
-        .trim();
-      expect(html).toContain(`<span>${numeric}</span>`);
-    },
-  );
-
-  it("preserves defaults and honours explicit zero and three digits", async () => {
-    expect(await renderCards("EUR", "en-US")).toContain('class="axis">€9');
-    expect(await renderCards("EUR", "en-US", 0)).toContain(
-      'class="tooltip">€9',
-    );
-    expect(await renderCards("EUR", "en-US", 3)).toContain(
-      'class="tooltip">€9.391',
-    );
-  });
-});

package/frontend-vue/tests/check-list-marker.test.ts

@@ -1,58 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { createApp, defineComponent, h, nextTick, type App } from "vue";
-import CheckList, {
-  type CheckListItem,
-  type CheckListMarker,
-} from "../layers/dms-ui/app/components/check-list/CheckList.vue";
-
-const IconStub = defineComponent({
-  props: { name: String },
-  setup: (props) => () => h("i", { "data-icon": props.name }),
-});
-
-const ITEMS: CheckListItem[] = [
-  { label: "Ok", state: "ok" },
-  { label: "Failed", state: "error" },
-  { label: "Waiting", state: "pending" },
-];
-
-let app: App | undefined;
-let host: HTMLDivElement;
-
-async function mount(marker: CheckListMarker) {
-  app = createApp({ render: () => h(CheckList, { items: ITEMS, marker }) });
-  app.component("UIcon", IconStub);
-  app.config.globalProperties.$t = (key: string) => key;
-  app.mount(host);
-  await nextTick();
-}
-
-const iconOf = (label: string) =>
-  [...host.querySelectorAll("li")]
-    .find((item) => item.textContent?.includes(label))
-    ?.querySelector("i")?.dataset.icon;
-
-beforeEach(() => {
-  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
-  host = document.createElement("div");
-  document.body.append(host);
-});
-
-afterEach(() => {
-  app?.unmount();
-  app = undefined;
-  host.remove();
-  vi.unstubAllGlobals();
-});
-
-describe("DmsCheckList markers", () => {
-  it.each<CheckListMarker>(["icon", "plain"])(
-    "never draws a pending line with the error icon (%s)",
-    async (marker) => {
-      await mount(marker);
-      expect(iconOf("Waiting")).toBeTruthy();
-      expect(iconOf("Waiting")).not.toBe(iconOf("Failed"));
-    },
-  );
-});

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

@@ -1,68 +0,0 @@
-// @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);
-});

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

@@ -1,60 +0,0 @@
-/**
- * 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",
-    );
-  });
-});