@cosmicdrift/kumiko-renderer 0.327.0 → 0.328.1

package/src/components/__tests__/render-edit-screen-description.test.tsx

@@ -1,152 +0,0 @@
-// Regression coverage for kumiko-framework#2723: `EntityEditScreenDefinition.
-// description` / `ActionFormScreenDefinition.description` existed in the type
-// but was never rendered anywhere — used only as agent/API metadata
-// (packages/framework/src/api/server.ts). RenderEdit now renders it as the
-// form's subtitle, same visual slot section.description already fills for a
-// section (render-edit.tsx's `Section`), falling back to it only when no
-// `screen:<id>.subtitle` i18n override is set. `description` is run through
-// translate(): an i18n key (the established convention, e.g.
-// user-data-rights/feature.ts) resolves to its translation, plain prose
-// passes through unchanged (review finding on this PR).
-
-import { describe, expect, test } from "bun:test";
-import type {
-  EntityDefinition,
-  EntityEditScreenDefinition,
-} from "@cosmicdrift/kumiko-framework/ui-types";
-import { render } from "@testing-library/react";
-import type { ReactNode } from "react";
-import { createStaticLocaleResolver, LocaleProvider, type TranslationsByLocale } from "../../i18n";
-import { kumikoDefaultTranslations } from "../../i18n-defaults";
-import { type CorePrimitives, type FormProps, PrimitivesProvider } from "../../primitives";
-import { RenderEdit } from "../render-edit";
-
-const noop = (): ReactNode => null;
-const passChildren = ({ children }: { readonly children?: ReactNode }): ReactNode => children;
-
-function buildEntity(): EntityDefinition {
-  return {
-    fields: {
-      name: { type: "text", maxLength: 200, required: false, searchable: false, sortable: false },
-    },
-  };
-}
-
-function renderEditCapturingForm(
-  screen: EntityEditScreenDefinition,
-  extraTranslations?: TranslationsByLocale,
-  hideSectionTitles = false,
-): {
-  captured: FormProps | undefined;
-} {
-  let captured: FormProps | undefined;
-  const capturingForm = (props: FormProps): ReactNode => {
-    captured = props;
-    return props.children;
-  };
-  const primitives: CorePrimitives = {
-    Button: noop,
-    Banner: noop,
-    Field: passChildren,
-    Input: noop,
-    DataTable: noop,
-    Form: capturingForm,
-    Section: passChildren,
-    Card: passChildren,
-    Grid: passChildren,
-    GridCell: passChildren,
-    Text: passChildren,
-    Heading: noop,
-    Dialog: noop,
-    Modal: noop,
-    Lightbox: noop,
-    ConfigSourceBadge: noop,
-    ConfigCascadeView: noop,
-    Link: noop,
-  };
-  render(
-    <LocaleProvider
-      resolver={createStaticLocaleResolver({ locale: "en-US" })}
-      fallbackBundles={
-        extraTranslations !== undefined
-          ? [extraTranslations, kumikoDefaultTranslations]
-          : [kumikoDefaultTranslations]
-      }
-    >
-      <PrimitivesProvider value={primitives}>
-        <RenderEdit
-          screen={screen}
-          entity={buildEntity()}
-          featureName="widgets"
-          initial={{ name: "" }}
-          {...(hideSectionTitles && { hideSectionTitles: true })}
-        />
-      </PrimitivesProvider>
-    </LocaleProvider>,
-  );
-  return { captured };
-}
-
-describe("RenderEdit — screen.description as form subtitle (fw#2723)", () => {
-  test("a screen with description renders it as the form's subtitle", () => {
-    const screen: EntityEditScreenDefinition = {
-      id: "widget-edit",
-      type: "entityEdit",
-      entity: "widget",
-      description: "Edit the widget's basic details.",
-      layout: { sections: [{ title: "Basics", fields: ["name"] }] },
-    };
-
-    const { captured } = renderEditCapturingForm(screen);
-
-    expect(captured?.subtitle).toBe("Edit the widget's basic details.");
-  });
-
-  test("a description that is a known i18n key renders translated, not as the raw key", () => {
-    const screen: EntityEditScreenDefinition = {
-      id: "widget-edit",
-      type: "entityEdit",
-      entity: "widget",
-      description: "widgets:widget-edit.explainer",
-      layout: { sections: [{ title: "Basics", fields: ["name"] }] },
-    };
-
-    const { captured } = renderEditCapturingForm(screen, {
-      "en-US": { "widgets:widget-edit.explainer": "Every field here is optional." },
-    });
-
-    expect(captured?.subtitle).toBe("Every field here is optional.");
-  });
-
-  test("a screen without description renders no subtitle prop at all (no empty placeholder)", () => {
-    const screen: EntityEditScreenDefinition = {
-      id: "widget-edit",
-      type: "entityEdit",
-      entity: "widget",
-      layout: { sections: [{ title: "Basics", fields: ["name"] }] },
-    };
-
-    const { captured } = renderEditCapturingForm(screen);
-
-    expect(captured).toBeDefined();
-    expect(captured && "subtitle" in captured).toBe(false);
-  });
-
-  test("tabs mode suppresses a description whose key matches the subtitle probe", () => {
-    const screen: EntityEditScreenDefinition = {
-      id: "widget-edit",
-      type: "entityEdit",
-      entity: "widget",
-      description: "screen:widget-edit.subtitle",
-      layout: { mode: "tabs", sections: [{ title: "Basics", fields: ["name"] }] },
-    };
-
-    const { captured } = renderEditCapturingForm(
-      screen,
-      { "en-US": { "screen:widget-edit.subtitle": "Widget details." } },
-      true,
-    );
-
-    expect(captured && "subtitle" in captured).toBe(false);
-  });
-});

package/src/components/__tests__/render-edit-submit-actions.test.tsx

@@ -1,460 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import type {
-  EntityDefinition,
-  EntityEditScreenDefinition,
-} from "@cosmicdrift/kumiko-framework/ui-types";
-import type { Dispatcher, DispatcherError, SubmitResult } from "@cosmicdrift/kumiko-headless";
-import { fireEvent, render, screen as rtlScreen, waitFor } from "@testing-library/react";
-import type { ComponentType, ReactNode } from "react";
-import { buildFormSchema } from "../../app/form-schema";
-import { DispatcherProvider } from "../../context/dispatcher-context";
-import { createStaticLocaleResolver, LocaleProvider } from "../../i18n";
-import { kumikoDefaultTranslations } from "../../i18n-defaults";
-import {
-  type BannerProps,
-  type CorePrimitives,
-  PrimitivesProvider,
-  type SectionProps,
-  type TextProps,
-} from "../../primitives";
-import { RenderEdit, type RenderEditAction, type RenderEditProps } from "../render-edit";
-
-type Values = { name: string };
-
-const passChildren = ({ children }: { readonly children?: ReactNode }): ReactNode => children;
-
-const noop = () => {};
-
-const renderSection: ComponentType<SectionProps> = ({ testId, children }) => (
-  <div data-testid={testId}>{children}</div>
-);
-
-const testButton: ComponentType<{
-  children?: ReactNode;
-  onClick?: () => void;
-  testId?: string;
-  type?: "button" | "submit";
-  disabled?: boolean;
-}> = ({ children, onClick, testId, type, disabled }) => (
-  <button type={type ?? "button"} data-testid={testId} onClick={onClick} disabled={disabled}>
-    {children}
-  </button>
-);
-
-const testForm: ComponentType<{
-  children?: ReactNode;
-  actions?: ReactNode;
-  secondaryActions?: ReactNode;
-  onSubmit?: () => void;
-}> = ({ children, actions, secondaryActions, onSubmit }) => (
-  <form
-    onSubmit={(e) => {
-      e.preventDefault();
-      onSubmit?.();
-    }}
-  >
-    {children}
-    {secondaryActions}
-    {actions}
-  </form>
-);
-
-const testInput: ComponentType<{
-  name?: string;
-  value?: unknown;
-  onChange?: (v: unknown) => void;
-}> = ({ name = "field", value, onChange }) => (
-  <input
-    aria-label={name}
-    data-testid={`input-${name}`}
-    value={typeof value === "string" ? value : ""}
-    onChange={(e) => onChange?.(e.target.value)}
-  />
-);
-
-const testBanner: ComponentType<BannerProps> = ({ children, testId }) => (
-  <div data-testid={testId}>{children}</div>
-);
-
-const testText: ComponentType<TextProps> = ({ children, testId }) => (
-  <span data-testid={testId}>{children}</span>
-);
-
-function testPrimitives(): CorePrimitives {
-  return {
-    Button: testButton,
-    Banner: testBanner,
-    Field: passChildren,
-    Input: testInput,
-    DataTable: noop,
-    Form: testForm,
-    Section: renderSection,
-    Card: passChildren,
-    Grid: passChildren,
-    GridCell: passChildren,
-    Text: testText,
-    Heading: noop,
-    Dialog: noop,
-    Modal: noop,
-    Lightbox: noop,
-    ConfigSourceBadge: noop,
-    ConfigCascadeView: noop,
-    Link: noop,
-  } as unknown as CorePrimitives;
-}
-
-function buildEntity(required = false): EntityDefinition {
-  return {
-    fields: {
-      name: {
-        type: "text",
-        maxLength: 200,
-        required,
-        searchable: false,
-        sortable: false,
-      },
-    },
-  };
-}
-
-function stubDispatcher(writeImpl?: Dispatcher["write"]): {
-  dispatcher: Dispatcher;
-  writes: Array<{ type: string; payload: unknown }>;
-} {
-  const writes: Array<{ type: string; payload: unknown }> = [];
-  const dispatcher: Dispatcher = {
-    write: (async (type, payload) => {
-      writes.push({ type, payload });
-      if (writeImpl) return writeImpl(type, payload);
-      return { isSuccess: true, data: { id: "n1" } };
-    }) as Dispatcher["write"],
-    query: (async () => ({ isSuccess: true, data: {} })) as Dispatcher["query"],
-    batch: (async () => ({ isSuccess: true, results: [] })) as Dispatcher["batch"],
-    statusStore: {
-      getState: () => "online",
-      subscribe: () => () => {},
-    } as unknown as Dispatcher["statusStore"],
-    async *stream() {},
-    pendingWrites: () => [],
-    pendingFiles: () => [],
-  };
-  return { dispatcher, writes };
-}
-
-function renderEdit(
-  screen: EntityEditScreenDefinition,
-  overrides: Partial<RenderEditProps<Values>> = {},
-  entity: EntityDefinition = buildEntity(),
-  dispatcher?: Dispatcher,
-) {
-  const body = (
-    <LocaleProvider
-      resolver={createStaticLocaleResolver({ locale: "en-US" })}
-      fallbackBundles={[kumikoDefaultTranslations]}
-    >
-      <PrimitivesProvider value={testPrimitives()}>
-        <RenderEdit
-          screen={screen}
-          entity={entity}
-          featureName="contacts"
-          initial={{ name: "" }}
-          {...overrides}
-        />
-      </PrimitivesProvider>
-    </LocaleProvider>
-  );
-  return render(
-    dispatcher !== undefined ? (
-      <DispatcherProvider dispatcher={dispatcher}>{body}</DispatcherProvider>
-    ) : (
-      body
-    ),
-  );
-}
-
-const oneFieldScreen: EntityEditScreenDefinition = {
-  id: "contact-edit",
-  type: "entityEdit",
-  entity: "contact",
-  layout: { sections: [{ title: "Main", fields: ["name"] }] },
-};
-
-const writeFailure: DispatcherError = {
-  code: "conflict",
-  httpStatus: 409,
-  i18nKey: "errors.conflict",
-  message: "conflict",
-};
-
-describe("RenderEdit — submit path", () => {
-  test("changing a field and saving calls onSubmit with a successful result", async () => {
-    let submitted: SubmitResult<unknown> | undefined;
-    renderEdit(oneFieldScreen, {
-      customSubmit: async () => ({
-        validationBlocked: false,
-        isSuccess: true,
-        data: { id: "n1" },
-      }),
-      onSubmit: (result) => {
-        submitted = result;
-      },
-    });
-
-    fireEvent.change(rtlScreen.getByLabelText(/name/i), { target: { value: "Ferdinand" } });
-    fireEvent.click(rtlScreen.getByTestId("render-edit-submit"));
-
-    await waitFor(() => expect(submitted).toBeDefined());
-    expect(submitted?.isSuccess).toBe(true);
-  });
-
-  test("submit stays disabled while the form is unchanged and enables after edits", async () => {
-    const view = renderEdit(oneFieldScreen, {
-      customSubmit: async () => ({ validationBlocked: false, isSuccess: true, data: {} }),
-      onSubmit: () => {
-        throw new Error("must not fire while disabled");
-      },
-    });
-
-    const save = rtlScreen.getByTestId("render-edit-submit") as HTMLButtonElement;
-    expect(save.disabled).toBe(true);
-    fireEvent.change(rtlScreen.getByLabelText(/name/i), { target: { value: "X" } });
-    await waitFor(() => expect(save.disabled).toBe(false));
-    view.unmount();
-  });
-
-  test("failed customSubmit surfaces the form-error banner and notifies onSubmit", async () => {
-    let submitted: SubmitResult<unknown> | undefined;
-    let customCalls = 0;
-    renderEdit(oneFieldScreen, {
-      customSubmit: async () => {
-        customCalls += 1;
-        return { validationBlocked: false, isSuccess: false, error: writeFailure };
-      },
-      onSubmit: (result) => {
-        submitted = result;
-      },
-    });
-
-    fireEvent.change(rtlScreen.getByLabelText(/name/i), { target: { value: "Ferdinand" } });
-    fireEvent.click(rtlScreen.getByTestId("render-edit-submit"));
-
-    await waitFor(() => expect(rtlScreen.getByTestId("render-edit-form-error")).toBeTruthy());
-    // LocaleProvider resolves i18nKey → human copy; pin the error code via onSubmit.
-    expect(rtlScreen.getByTestId("render-edit-form-error-key").textContent?.length).toBeGreaterThan(
-      0,
-    );
-    expect(customCalls).toBe(1);
-    expect(submitted).toEqual({
-      validationBlocked: false,
-      isSuccess: false,
-      error: writeFailure,
-    });
-  });
-
-  test("schema validation blocks customSubmit and notifies validationBlocked", async () => {
-    let submitted: SubmitResult<unknown> | undefined;
-    let customCalls = 0;
-    const entity = buildEntity(true);
-    // RenderEdit only validates when a schema is passed (kumiko-screen builds it
-    // via buildFormSchema). Without it, entity.required is display-only here.
-    render(
-      <LocaleProvider
-        resolver={createStaticLocaleResolver({ locale: "en-US" })}
-        fallbackBundles={[kumikoDefaultTranslations]}
-      >
-        <PrimitivesProvider value={testPrimitives()}>
-          <RenderEdit
-            screen={oneFieldScreen}
-            entity={entity}
-            featureName="contacts"
-            initial={{ name: "seed" }}
-            schema={buildFormSchema(entity, oneFieldScreen)}
-            customSubmit={async () => {
-              customCalls += 1;
-              return { validationBlocked: false, isSuccess: true, data: {} };
-            }}
-            onSubmit={(result) => {
-              submitted = result;
-            }}
-          />
-        </PrimitivesProvider>
-      </LocaleProvider>,
-    );
-
-    // Clear the required field; form stays dirty vs initial "seed".
-    fireEvent.change(rtlScreen.getByLabelText(/name/i), { target: { value: "" } });
-    await waitFor(() =>
-      expect((rtlScreen.getByTestId("render-edit-submit") as HTMLButtonElement).disabled).toBe(
-        false,
-      ),
-    );
-    fireEvent.click(rtlScreen.getByTestId("render-edit-submit"));
-
-    await waitFor(() => expect(submitted).toBeDefined());
-    expect(submitted).toEqual({ validationBlocked: true, isSuccess: false });
-    expect(customCalls).toBe(0);
-  });
-  test("failed writeCommand with field issues suppresses the form-error banner", async () => {
-    const writeFailure: DispatcherError = {
-      code: "validation_failed",
-      httpStatus: 422,
-      i18nKey: "kumiko.errors.validation",
-      message: "validation failed",
-      details: {
-        fields: [{ path: "name", code: "too_small", i18nKey: "kumiko.errors.required" }],
-      },
-    };
-    const { dispatcher } = stubDispatcher(async () => ({
-      isSuccess: false,
-      error: writeFailure,
-    }));
-    renderEdit(
-      oneFieldScreen,
-      { writeCommand: "contacts:write:contact:update" },
-      buildEntity(),
-      dispatcher,
-    );
-
-    fireEvent.change(rtlScreen.getByLabelText(/name/i), { target: { value: "Ada" } });
-    fireEvent.click(rtlScreen.getByTestId("render-edit-submit"));
-
-    await waitFor(() => expect(rtlScreen.queryByTestId("render-edit-form-error")).toBeNull());
-  });
-
-  // fw#2838: an input-less secretMint mint step declares an empty entity
-  // (fields: {}) and an empty layout (sections: []) — such a form can never
-  // go dirty, so the unchanged-gate must not permanently disable its submit.
-  test("a fieldless form's submit button is not disabled and stays visible", () => {
-    const zeroFieldScreen: EntityEditScreenDefinition = {
-      id: "trigger",
-      type: "entityEdit",
-      entity: "trigger",
-      layout: { sections: [] },
-    };
-    renderEdit(zeroFieldScreen, {}, { fields: {} });
-
-    const save = rtlScreen.getByTestId("render-edit-submit") as HTMLButtonElement;
-    expect(save.disabled).toBe(false);
-  });
-});
-describe("RenderEdit — custom actions", () => {
-  test("renders an action button and runs its handler on click", async () => {
-    let pressed = 0;
-    const actions: readonly RenderEditAction[] = [
-      {
-        id: "ping",
-        label: "Ping",
-        onPress: async () => {
-          pressed += 1;
-        },
-      },
-    ];
-    renderEdit(oneFieldScreen, { actions });
-
-    fireEvent.click(rtlScreen.getByTestId("render-edit-action-ping"));
-    await waitFor(() => expect(pressed).toBe(1));
-  });
-
-  test("action handler failure shows the action-error banner", async () => {
-    const actions: readonly RenderEditAction[] = [
-      {
-        id: "boom",
-        label: "Boom",
-        onPress: async () => {
-          throw new Error("action exploded");
-        },
-      },
-    ];
-    renderEdit(oneFieldScreen, { actions });
-
-    fireEvent.click(rtlScreen.getByTestId("render-edit-action-boom"));
-    await waitFor(() => expect(rtlScreen.getByTestId("render-edit-action-error")).toBeTruthy());
-    expect(rtlScreen.getByTestId("render-edit-action-error").textContent).toContain(
-      "action exploded",
-    );
-  });
-});
-
-describe("RenderEdit — writeCommand path", () => {
-  test("successful writeCommand dispatches and notifies onSubmit", async () => {
-    const { dispatcher, writes } = stubDispatcher();
-    let submitted: SubmitResult<unknown> | undefined;
-    renderEdit(
-      oneFieldScreen,
-      {
-        writeCommand: "contacts:write:contact:update",
-        onSubmit: (result) => {
-          submitted = result;
-        },
-      },
-      buildEntity(),
-      dispatcher,
-    );
-
-    fireEvent.change(rtlScreen.getByLabelText(/name/i), { target: { value: "Ada" } });
-    fireEvent.click(rtlScreen.getByTestId("render-edit-submit"));
-
-    await waitFor(() => expect(submitted).toBeDefined());
-    expect(submitted?.isSuccess).toBe(true);
-    expect(writes).toHaveLength(1);
-    expect(writes[0]?.type).toBe("contacts:write:contact:update");
-    expect(writes[0]?.payload).toMatchObject({ name: "Ada" });
-  });
-
-  test("failed writeCommand without field issues shows form-error banner", async () => {
-    const writeFailure: DispatcherError = {
-      code: "conflict",
-      httpStatus: 409,
-      i18nKey: "errors.conflict",
-      message: "conflict",
-    };
-    const { dispatcher } = stubDispatcher(async () => ({
-      isSuccess: false,
-      error: writeFailure,
-    }));
-    let submitted: SubmitResult<unknown> | undefined;
-    renderEdit(
-      oneFieldScreen,
-      {
-        writeCommand: "contacts:write:contact:update",
-        onSubmit: (result) => {
-          submitted = result;
-        },
-      },
-      buildEntity(),
-      dispatcher,
-    );
-
-    fireEvent.change(rtlScreen.getByLabelText(/name/i), { target: { value: "Ada" } });
-    fireEvent.click(rtlScreen.getByTestId("render-edit-submit"));
-
-    await waitFor(() => expect(rtlScreen.getByTestId("render-edit-form-error")).toBeTruthy());
-    expect(submitted?.isSuccess).toBe(false);
-  });
-  test("failed writeCommand with field issues suppresses the form-error banner", async () => {
-    const writeFailure: DispatcherError = {
-      code: "validation_failed",
-      httpStatus: 422,
-      i18nKey: "kumiko.errors.validation",
-      message: "validation failed",
-      details: {
-        fields: [{ path: "name", code: "too_small", i18nKey: "kumiko.errors.required" }],
-      },
-    };
-    const { dispatcher } = stubDispatcher(async () => ({
-      isSuccess: false,
-      error: writeFailure,
-    }));
-    renderEdit(
-      oneFieldScreen,
-      { writeCommand: "contacts:write:contact:update" },
-      buildEntity(),
-      dispatcher,
-    );
-
-    fireEvent.change(rtlScreen.getByLabelText(/name/i), { target: { value: "Ada" } });
-    fireEvent.click(rtlScreen.getByTestId("render-edit-submit"));
-
-    await waitFor(() => expect(rtlScreen.queryByTestId("render-edit-form-error")).toBeNull());
-  });
-});