@cosmicdrift/kumiko-renderer 0.328.0 → 0.328.1

package/src/components/__tests__/render-field-money-embedded-list-consistency.test.tsx

@@ -1,212 +0,0 @@
-// kumiko-framework#1972: one form, two money contracts. A top-level money
-// field's write payload is `{amount, currency}` in MAJOR units
-// (render-field.tsx's moneyPayload) while an embedded-list row's money
-// sub-field is a bare number in MINOR units (embedded-list-field.tsx passes
-// the widget's minor-unit value straight through — currency lives on the
-// head aggregate, not the row). Both are correct in isolation; the risk is
-// a consumer that reads the combined payload and compares the two amounts
-// without converting units first (exactly the reported solon incident:
-// `linesSum:10000` vs `netTotal:100`).
-//
-// This test drives BOTH real conversion paths — RenderField's moneyPayload
-// for the top-level field, EmbeddedListField's handleCellChange for the
-// list rows — with a crooked amount (not a round number, which can hide a
-// factor-of-100 bug by coincidence), assembles the resulting wire payload
-// exactly like a real form submission would, and validates it against the
-// real server schema (buildInsertSchema + EmbeddedFieldDef.totalsMatch). No
-// hand-built wire-form fixture stands in for either conversion function.
-
-import { describe, expect, test } from "bun:test";
-import {
-  buildInsertSchema,
-  createEmbeddedListField,
-  createEntity,
-  createMoneyField,
-} from "@cosmicdrift/kumiko-framework/engine";
-import type {
-  EntityDefinition,
-  EntityEditScreenDefinition,
-} from "@cosmicdrift/kumiko-framework/ui-types";
-import { computeEditViewModel, type EditFieldViewModel } from "@cosmicdrift/kumiko-headless";
-import { render } from "@testing-library/react";
-import type { ComponentType, ReactNode } from "react";
-import { createStaticLocaleResolver, LocaleProvider } from "../../i18n";
-import {
-  type CorePrimitives,
-  type EmbeddedListInputProps,
-  type InputProps,
-  PrimitivesProvider,
-} from "../../primitives";
-import { RenderField } from "../render-field";
-
-let capturedInput: InputProps | undefined;
-let capturedList: EmbeddedListInputProps | undefined;
-let lastTotalPayload: unknown;
-let lastLinesPayload: unknown;
-
-const captureInput: ComponentType<InputProps> = (props) => {
-  capturedInput = props;
-  return null;
-};
-const captureEmbeddedListInput: ComponentType<EmbeddedListInputProps> = (props) => {
-  capturedList = props;
-  return null;
-};
-const onTotalChange = (v: unknown): void => {
-  lastTotalPayload = v;
-};
-const onLinesChange = (v: unknown): void => {
-  lastLinesPayload = v;
-};
-const noop = (): ReactNode => null;
-const passChildren = ({ children }: { readonly children?: ReactNode }): ReactNode => children;
-
-const testPrimitives: CorePrimitives = {
-  Button: noop,
-  Banner: noop,
-  Field: passChildren,
-  Input: captureInput,
-  EmbeddedListInput: captureEmbeddedListInput,
-  DataTable: noop,
-  Form: passChildren,
-  Section: passChildren,
-  Card: passChildren,
-  Grid: passChildren,
-  GridCell: passChildren,
-  Text: passChildren,
-  Heading: noop,
-  Dialog: noop,
-  Modal: noop,
-  Lightbox: noop,
-  ConfigSourceBadge: noop,
-  ConfigCascadeView: noop,
-  Link: noop,
-};
-
-function invoiceEntity(): EntityDefinition {
-  return createEntity({
-    table: "Invoices",
-    fields: {
-      total: createMoneyField({ required: true }),
-      lines: createEmbeddedListField(
-        { amount: { type: "money", required: true } },
-        { totalsMatch: { amount: "total" } },
-      ),
-    },
-    defaultCurrency: "EUR",
-  });
-}
-
-function invoiceScreen(): EntityEditScreenDefinition {
-  return {
-    id: "invoice-edit",
-    type: "entityEdit",
-    entity: "invoice",
-    layout: { sections: [{ columns: 1, fields: ["total", "lines"] }] },
-  } as EntityEditScreenDefinition;
-}
-
-function computeInvoiceFields(
-  entity: EntityDefinition,
-  values: Record<string, unknown>,
-): { readonly total: EditFieldViewModel; readonly lines: EditFieldViewModel } {
-  const vm = computeEditViewModel({
-    screen: invoiceScreen(),
-    entity,
-    values,
-    translate: (key) => key,
-    featureName: "invoices",
-  });
-  const section = vm.sections[0];
-  if (section === undefined || section.kind !== "fields") {
-    throw new Error("expected a fields section");
-  }
-  const total = section.fields.find((f) => f.field === "total");
-  const lines = section.fields.find((f) => f.field === "lines");
-  if (total === undefined || lines === undefined) {
-    throw new Error("expected total + lines fields");
-  }
-  return { total, lines };
-}
-
-// Mounts both fields fresh against the given values and re-captures their
-// widget props. Called again after every simulated edit — a real controlled
-// form re-renders with the previous onChange result fed back in the same
-// way, so this mirrors that instead of mutating one long-lived tree.
-function renderInvoiceForm(entity: EntityDefinition, values: Record<string, unknown>): void {
-  capturedInput = undefined;
-  capturedList = undefined;
-  const { total, lines } = computeInvoiceFields(entity, values);
-  render(
-    <LocaleProvider resolver={createStaticLocaleResolver({ locale: "de-DE" })}>
-      <PrimitivesProvider value={testPrimitives}>
-        <RenderField field={total} onChange={onTotalChange} />
-        <RenderField field={lines} onChange={onLinesChange} featureName="invoices" />
-      </PrimitivesProvider>
-    </LocaleProvider>,
-  );
-  if (capturedInput === undefined) {
-    throw new Error("total field did not render an Input");
-  }
-  if (capturedList === undefined) {
-    throw new Error("lines field did not render an EmbeddedListInput");
-  }
-}
-
-// Mirrors what MoneyInput actually emits on blur: the widget's minor-units
-// value. `InputProps` is a discriminated union keyed by `kind`, so the
-// money-typed onChange only narrows to a callable signature once `kind` is
-// checked.
-function emitMoneyChange(minorUnits: number): void {
-  if (capturedInput === undefined) throw new Error("no Input captured");
-  if (capturedInput.kind !== "money") throw new Error("expected a money Input");
-  capturedInput.onChange(minorUnits);
-}
-
-describe("RenderField money contract consistency across top-level + embedded-list (kumiko-framework#1972)", () => {
-  test("a crooked invoice total (1234.56 EUR) whose line amounts sum to the same value validates end to end", () => {
-    const entity = invoiceEntity();
-
-    // Two rows, edited one at a time via the widget's real onCellChange
-    // (minor units) — each edit re-renders with the previous result fed
-    // back in as `lines`, exactly like a real controlled form.
-    renderInvoiceForm(entity, { lines: [{}, {}] });
-    capturedList?.onCellChange(0, "amount", 100_000); // 1000.00 EUR
-    expect(lastLinesPayload).toEqual([{ amount: 100_000 }, {}]);
-
-    renderInvoiceForm(entity, { lines: lastLinesPayload as Record<string, unknown>[] });
-    capturedList?.onCellChange(1, "amount", 23_456); // 234.56 EUR
-    expect(lastLinesPayload).toEqual([{ amount: 100_000 }, { amount: 23_456 }]);
-
-    // Top-level total: the widget (MoneyInput) emits minor units on blur;
-    // RenderField's moneyPayload converts that to the wire's major-unit
-    // object.
-    emitMoneyChange(123_456); // 1234.56 EUR, minor units
-    expect(lastTotalPayload).toEqual({ amount: 1234.56, currency: "EUR" });
-
-    const result = buildInsertSchema(entity).safeParse({
-      total: lastTotalPayload,
-      lines: lastLinesPayload,
-    });
-    expect(result.success).toBe(true);
-  });
-
-  test("a genuinely wrong total (mismatched, not just a unit mixup) is still rejected", () => {
-    const entity = invoiceEntity();
-    renderInvoiceForm(entity, { lines: [{}] });
-    capturedList?.onCellChange(0, "amount", 100_000); // 1000.00 EUR
-    expect(lastLinesPayload).toEqual([{ amount: 100_000 }]);
-
-    emitMoneyChange(50_000); // user enters 500.00 EUR — doesn't match the line
-    expect(lastTotalPayload).toEqual({ amount: 500, currency: "EUR" });
-
-    const result = buildInsertSchema(entity).safeParse({
-      total: lastTotalPayload,
-      lines: lastLinesPayload,
-    });
-    expect(result.success).toBe(false);
-    if (!result.success) {
-      expect(result.error.issues.some((issue) => issue.path.join(".") === "lines")).toBe(true);
-    }
-  });
-});

package/src/components/__tests__/render-field-money-roundtrip.test.tsx

@@ -1,217 +0,0 @@
-// kumiko-framework#1923: money didn't round-trip on the auto-wired
-// entityEdit path — create sent a bare number against the server's
-// `{amount, currency}` schema, update rendered the rehydrated read value as
-// NaN, and a naive fix would have been 100x off (minor vs. major units).
-//
-// This test walks the whole chain with real functions, no mocks:
-// computeEditViewModel (headless) → RenderField → simulated widget
-// onChange → buildInsertSchema/buildUpdateSchema (framework/engine). The
-// widget's own minor-units math (MoneyInput) is pinned separately in
-// packages/renderer-web/src/primitives/__tests__/money-input.test.tsx —
-// this test starts one step in, at the value RenderField hands to/from the
-// widget contract (`number | ""` minor units).
-
-import { describe, expect, test } from "bun:test";
-import { rehydrateMoney } from "@cosmicdrift/kumiko-framework/db";
-import { buildInsertSchema, buildUpdateSchema } from "@cosmicdrift/kumiko-framework/engine";
-import type {
-  EntityDefinition,
-  EntityEditScreenDefinition,
-} from "@cosmicdrift/kumiko-framework/ui-types";
-import { computeEditViewModel, type EditFieldViewModel } from "@cosmicdrift/kumiko-headless";
-import { render } from "@testing-library/react";
-import type { ComponentType, ReactNode } from "react";
-import { buildInitialValues } from "../../app/kumiko-screen";
-import { createStaticLocaleResolver, LocaleProvider } from "../../i18n";
-import { type CorePrimitives, type InputProps, PrimitivesProvider } from "../../primitives";
-import { RenderField } from "../render-field";
-
-let captured: InputProps | undefined;
-const captureInput: ComponentType<InputProps> = (props) => {
-  captured = props;
-  return null;
-};
-const noop = (): ReactNode => null;
-const passChildren = ({ children }: { readonly children?: ReactNode }): ReactNode => children;
-
-const testPrimitives: CorePrimitives = {
-  Button: noop,
-  Banner: noop,
-  Field: passChildren,
-  Input: captureInput,
-  DataTable: noop,
-  Form: noop,
-  Section: noop,
-  Card: noop,
-  Grid: noop,
-  GridCell: noop,
-  Text: noop,
-  Heading: noop,
-  Dialog: noop,
-  Modal: noop,
-  Lightbox: noop,
-  ConfigSourceBadge: noop,
-  ConfigCascadeView: noop,
-  Link: noop,
-};
-
-function buildEntity(defaultCurrency: string): EntityDefinition {
-  return {
-    fields: {
-      price: { type: "money", required: true },
-    },
-    defaultCurrency,
-  } as EntityDefinition;
-}
-
-function buildScreen(): EntityEditScreenDefinition {
-  return {
-    id: "product-edit",
-    type: "entityEdit",
-    entity: "product",
-    layout: { sections: [{ columns: 1, fields: ["price"] }] },
-  } as EntityEditScreenDefinition;
-}
-
-function priceField(entity: EntityDefinition, values: Record<string, unknown>): EditFieldViewModel {
-  const vm = computeEditViewModel({
-    screen: buildScreen(),
-    entity,
-    values,
-    translate: (key) => key,
-    featureName: "shop",
-  });
-  const section = vm.sections[0];
-  if (section === undefined || section.kind !== "fields") {
-    throw new Error("expected a fields section");
-  }
-  const field = section.fields[0];
-  if (field === undefined) throw new Error("expected a price field");
-  return field;
-}
-
-function renderMoneyField(
-  entity: EntityDefinition,
-  values: Record<string, unknown>,
-  onChange: (v: unknown) => void,
-): InputProps {
-  captured = undefined;
-  render(
-    <LocaleProvider resolver={createStaticLocaleResolver({ locale: "de-DE" })}>
-      <PrimitivesProvider value={testPrimitives}>
-        <RenderField field={priceField(entity, values)} onChange={onChange} />
-      </PrimitivesProvider>
-    </LocaleProvider>,
-  );
-  if (captured === undefined) throw new Error("money field did not render an Input");
-  return captured;
-}
-
-describe("RenderField money round-trip (kumiko-framework#1923)", () => {
-  test("create: untouched required field, buildInitialValues default validates against buildInsertSchema", () => {
-    const entity = buildEntity("USD");
-    // Same default shape kumiko-screen.tsx's buildInitialValues produces
-    // for a money field once a defaultCurrency is threaded through.
-    const initialPrice = { amount: 0, currency: "USD" };
-    const result = buildInsertSchema(entity).safeParse({ price: initialPrice });
-    expect(result.success).toBe(true);
-  });
-
-  test("create: buildInitialValues default renders as 0.00 in the widget, not empty", () => {
-    // Regression: the widget was tested with `values: {}` (no field.value at
-    // all), which produces "" — but the real entityEdit create path always
-    // feeds buildInitialValues(fields, defaultCurrency), which yields
-    // {amount: 0, currency} (kumiko-screen.tsx buildInitialValues).
-    const entity = buildEntity("USD");
-    const initialValues = buildInitialValues(entity.fields, "USD");
-    const field = renderMoneyField(entity, initialValues, () => {});
-    expect(field.kind).toBe("money");
-    if (field.kind !== "money") return;
-    expect(field.value).toBe(0);
-  });
-
-  test("create: user-entered amount becomes a payload that validates against buildInsertSchema", () => {
-    const entity = buildEntity("USD");
-    let payload: unknown;
-    const field = renderMoneyField(entity, {}, (v) => {
-      payload = v;
-    });
-    expect(field.kind).toBe("money");
-    if (field.kind !== "money") return;
-    expect(field.value).toBe(""); // untouched — empty widget state, not NaN/0
-    field.onChange(1299); // widget emits minor units: 12.99 USD
-    expect(payload).toEqual({ amount: 12.99, currency: "USD" });
-    const result = buildInsertSchema(entity).safeParse({ price: payload });
-    expect(result.success).toBe(true);
-  });
-
-  test("update: server-rehydrated value renders as a real number, not NaN (regression)", () => {
-    const entity = buildEntity("USD");
-    const row = { price: 1299, priceCurrency: "USD" };
-    const record = rehydrateMoney(row, entity);
-    const field = renderMoneyField(entity, record, () => {});
-    expect(field.kind).toBe("money");
-    if (field.kind !== "money") return;
-    expect(field.value).toBe(1299);
-    expect(Number.isNaN(field.value)).toBe(false);
-  });
-
-  test("update: edited amount becomes a payload that validates against buildUpdateSchema", () => {
-    const entity = buildEntity("USD");
-    const row = { price: 1299, priceCurrency: "USD" };
-    const record = rehydrateMoney(row, entity);
-    let payload: unknown;
-    const field = renderMoneyField(entity, record, (v) => {
-      payload = v;
-    });
-    if (field.kind !== "money") throw new Error("expected money kind");
-    field.onChange(1500); // user edits to 15.00
-    expect(payload).toEqual({ amount: 15, currency: "USD" });
-    const result = buildUpdateSchema(entity).safeParse({ price: payload });
-    expect(result.success).toBe(true);
-  });
-
-  test("JPY (zero-decimal currency): amountMinor is not read, so the widget value is not 100x off", () => {
-    const entity = buildEntity("JPY");
-    // DB stores minor units at the framework's flat MINOR_UNIT_SCALE=100,
-    // so ¥500 is row-stored as 50000 — rehydrateMoney's amountMinor mirrors
-    // that scale, which disagrees with JPY's real 0 decimal places. Reading
-    // amountMinor here would render 50000 instead of 500.
-    const row = { price: 50000, priceCurrency: "JPY" };
-    const record = rehydrateMoney(row, entity);
-    let payload: unknown;
-    const field = renderMoneyField(entity, record, (v) => {
-      payload = v;
-    });
-    if (field.kind !== "money") throw new Error("expected money kind");
-    expect(field.value).toBe(500);
-    field.onChange(500); // user submits the same amount unchanged
-    expect(payload).toEqual({ amount: 500, currency: "JPY" });
-    const result = buildInsertSchema(entity).safeParse({ price: payload });
-    expect(result.success).toBe(true);
-    expect(result.data?.["price"]).toEqual({ amount: 500, currency: "JPY" });
-  });
-
-  test("record currency differs from entity.defaultCurrency (#1930)", () => {
-    const entity = buildEntity("EUR");
-    let payload: unknown;
-    const field = renderMoneyField(entity, { price: { amount: 500, currency: "JPY" } }, (v) => {
-      payload = v;
-    });
-    if (field.kind !== "money") throw new Error("expected money kind");
-    // Prefer the value's own currency over entity.defaultCurrency (EUR=2dp).
-    expect(field.currency).toBe("JPY");
-    expect(field.value).toBe(500);
-    field.onChange(500);
-    expect(payload).toEqual({ amount: 500, currency: "JPY" });
-  });
-
-  test("server schema strips an unexpected amountMinor key instead of rejecting the payload", () => {
-    const entity = buildEntity("USD");
-    const result = buildUpdateSchema(entity).safeParse({
-      price: { amount: 12.99, currency: "USD", amountMinor: 1299 },
-    });
-    expect(result.success).toBe(true);
-    expect(result.data?.["price"]).toEqual({ amount: 12.99, currency: "USD" });
-  });
-});

package/src/components/__tests__/render-field-number-grouping.test.tsx

@@ -1,76 +0,0 @@
-// Read-only number display (`field.readOnly: true`, no own `renderer`) goes
-// through readOnlyDisplayText's own Intl.NumberFormat call, independent of
-// the headless `applyFormatSpec` path already covered by
-// format.test.tsx — `field.grouping` gates it the same way (fw#3234).
-
-import { describe, expect, test } from "bun:test";
-import type { EditFieldViewModel } from "@cosmicdrift/kumiko-headless";
-import { cleanup, render, screen } from "@testing-library/react";
-import type { ReactNode } from "react";
-import { createStaticLocaleResolver, LocaleProvider } from "../../i18n";
-import { type CorePrimitives, PrimitivesProvider, type TextProps } from "../../primitives";
-import { RenderField } from "../render-field";
-
-const noop = (): ReactNode => null;
-const passChildren = ({ children }: { readonly children?: ReactNode }): ReactNode => children;
-const DefaultText = ({ testId, children }: TextProps): ReactNode => (
-  <span data-testid={testId}>{children}</span>
-);
-
-const testPrimitives: CorePrimitives = {
-  Button: noop,
-  Banner: noop,
-  Field: passChildren,
-  Input: noop,
-  DataTable: noop,
-  Form: noop,
-  Section: noop,
-  Card: noop,
-  Grid: noop,
-  GridCell: noop,
-  Text: DefaultText,
-  Heading: noop,
-  Dialog: noop,
-  Modal: noop,
-  Lightbox: noop,
-  ConfigSourceBadge: noop,
-  ConfigCascadeView: noop,
-  Link: noop,
-};
-
-function numberField(grouping: boolean | undefined): EditFieldViewModel {
-  return {
-    field: "population",
-    label: "Population",
-    type: "number",
-    value: 2021,
-    visible: true,
-    readOnly: true,
-    required: false,
-    ...(grouping !== undefined && { grouping }),
-  };
-}
-
-function renderReadOnly(locale: string, grouping: boolean | undefined): string {
-  cleanup();
-  render(
-    <LocaleProvider resolver={createStaticLocaleResolver({ locale })}>
-      <PrimitivesProvider value={testPrimitives}>
-        <RenderField field={numberField(grouping)} onChange={() => {}} valueDisplay="text" />
-      </PrimitivesProvider>
-    </LocaleProvider>,
-  );
-  return screen.getByTestId("field-value-population").textContent ?? "";
-}
-
-describe("RenderField — read-only number grouping (fw#3234)", () => {
-  test("groups thousands by default, locale-aware", () => {
-    expect(renderReadOnly("en-US", undefined)).toBe("2,021");
-    expect(renderReadOnly("de-DE", undefined)).toBe("2.021");
-  });
-
-  test("grouping: false renders the digits without a thousands separator", () => {
-    expect(renderReadOnly("en-US", false)).toBe("2021");
-    expect(renderReadOnly("de-DE", false)).toBe("2021");
-  });
-});