rastack 0.0.26 → 0.0.27

package/test/components.spec.ts

@@ -0,0 +1,386 @@
+/**
+ * Tests for the pure cores behind `rastack/components` — the logic that decides
+ * how a component renders itself from a hook. The React `.tsx` render layer is
+ * thin and ships as source (like `rastack/theme`); everything that makes a
+ * decision (field datatype → control, data → columns, hook → model) lives in
+ * plain modules exercised here.
+ */
+
+import { getFieldStructure } from "../hooks/form/structure";
+import { cssVar, tokens } from "../components/style";
+import { humanizeKey } from "../components/util";
+import { resolveColumns, formatCell } from "../components/data-table/columns";
+import { buildDataTableModel } from "../components/data-table/use-data-table";
+import {
+  inputKindForFieldType,
+  resolveFieldSpecs,
+} from "../components/auto-form/fields";
+import { buildAutoFormModel } from "../components/auto-form/use-auto-form";
+import type {
+  TableQuery,
+  AutoFormLike,
+  AutoFormField,
+} from "../components/types";
+
+// A write JSON Schema like the `Deref{Name}` the form hook validates against.
+const schema = {
+  properties: {
+    name: { type: "string", maxLength: 120 },
+    active: { type: "boolean" },
+    seats: { type: "integer" },
+    price: { type: "number" },
+    created: { type: "string", format: "date-time" },
+    birthday: { type: "string", format: "date" },
+    email: { type: "string", format: "email" },
+    site: { type: "string", format: "uri" },
+    status: { type: "string", enum: ["draft", "active", "archived"] },
+    airport: {
+      type: "integer",
+      "x-rastack-relation": { app: "airports", model: "airport" },
+    },
+    nickname: { type: ["string", "null"] },
+    tags: { type: "array" },
+  },
+  required: ["name", "seats"],
+} as const;
+
+describe("getFieldStructure — datatype derivation from the write schema", () => {
+  const fieldType = (name: string) =>
+    getFieldStructure(schema as any, name).type;
+
+  it("maps JSON Schema types/formats to control kinds", () => {
+    expect(fieldType("name")).toBe("text");
+    expect(fieldType("active")).toBe("boolean");
+    expect(fieldType("seats")).toBe("number");
+    expect(fieldType("price")).toBe("number");
+    expect(fieldType("created")).toBe("datetime");
+    expect(fieldType("birthday")).toBe("date");
+    expect(fieldType("email")).toBe("email");
+    expect(fieldType("site")).toBe("url");
+    expect(fieldType("tags")).toBe("array");
+  });
+
+  it("treats an enum as a select and exposes its options", () => {
+    const s = getFieldStructure(schema as any, "status");
+    expect(s.type).toBe("select");
+    expect(s.options).toEqual([
+      { label: "draft", value: "draft" },
+      { label: "active", value: "active" },
+      { label: "archived", value: "archived" },
+    ]);
+  });
+
+  it("keeps a foreign key as its scalar but exposes the relation target", () => {
+    const s = getFieldStructure(schema as any, "airport");
+    expect(s.type).toBe("number");
+    expect(s.relation).toEqual({ app: "airports", model: "airport" });
+  });
+
+  it("reads maxLength, nullability and required", () => {
+    expect(getFieldStructure(schema as any, "name").maxLength).toBe(120);
+    expect(getFieldStructure(schema as any, "nickname").nullable).toBe(true);
+    expect(getFieldStructure(schema as any, "name").isRequired).toBe(true);
+    expect(getFieldStructure(schema as any, "active").isRequired).toBe(false);
+  });
+
+  it("falls back to a non-required text field for unknown/absent fields", () => {
+    expect(getFieldStructure(undefined, "whatever")).toEqual({
+      isRequired: false,
+      type: "text",
+    });
+    expect(getFieldStructure(schema as any, "missing")).toEqual({
+      isRequired: false,
+      type: "text",
+    });
+  });
+});
+
+describe("cssVar + tokens", () => {
+  it("renders a token path as a CSS variable reference", () => {
+    expect(cssVar("color.surface")).toBe("var(--color-surface)");
+    expect(cssVar("space.md")).toBe("var(--space-md)");
+    expect(cssVar("color.surface-alt")).toBe("var(--color-surface-alt)");
+  });
+
+  it("includes a fallback when given", () => {
+    expect(cssVar("color.danger", "#E5484D")).toBe(
+      "var(--color-danger, #E5484D)",
+    );
+  });
+
+  it("exposes semantic tokens with fallbacks baked in", () => {
+    expect(tokens.color.accent).toBe("var(--color-accent, #4f6bff)");
+    expect(tokens.radius.md).toBe("var(--radius-md, 10px)");
+  });
+});
+
+describe("humanizeKey", () => {
+  it("turns field keys into labels", () => {
+    expect(humanizeKey("first_name")).toBe("First name");
+    expect(humanizeKey("createdAt")).toBe("Created at");
+    expect(humanizeKey("code")).toBe("Code");
+    expect(humanizeKey("airport-id")).toBe("Airport id");
+  });
+});
+
+describe("resolveColumns", () => {
+  it("prefers explicit columns and fills defaults", () => {
+    const cols = resolveColumns<{ code: string }>({
+      columns: [
+        { key: "code" },
+        { key: "name", header: "Full name", align: "right" },
+      ],
+    });
+    expect(cols.map((c) => c.key)).toEqual(["code", "name"]);
+    expect(cols[0].header).toBe("Code");
+    expect(cols[1].header).toBe("Full name");
+    expect(cols[1].align).toBe("right");
+  });
+
+  it("uses the server header when present", () => {
+    const cols = resolveColumns({
+      header: [
+        { key: "code", name: "Code" },
+        { key: "name", name: "Name" },
+      ],
+    });
+    expect(cols.map((c) => c.key)).toEqual(["code", "name"]);
+    expect(cols[0].header).toBe("Code");
+  });
+
+  it("infers columns from the first row when there is no header", () => {
+    const cols = resolveColumns({ rows: [{ code: "LHR", city: "London" }] });
+    expect(cols.map((c) => c.key)).toEqual(["code", "city"]);
+    expect(cols[1].header).toBe("City");
+  });
+
+  it("honours the sortable default only for inferred columns", () => {
+    const inferred = resolveColumns({
+      rows: [{ a: 1 }],
+      sortableByDefault: true,
+    });
+    expect(inferred[0].sortable).toBe(true);
+    const explicit = resolveColumns({
+      columns: [{ key: "a", sortable: false }],
+      sortableByDefault: true,
+    });
+    expect(explicit[0].sortable).toBe(false);
+  });
+
+  it("returns nothing when there is no source of columns", () => {
+    expect(resolveColumns({ rows: [] })).toEqual([]);
+    expect(resolveColumns({})).toEqual([]);
+  });
+});
+
+describe("formatCell", () => {
+  it("formats values conservatively", () => {
+    expect(formatCell(null)).toBe("—");
+    expect(formatCell(undefined)).toBe("—");
+    expect(formatCell(true)).toBe("Yes");
+    expect(formatCell(false)).toBe("No");
+    expect(formatCell(42)).toBe("42");
+    expect(formatCell("LHR")).toBe("LHR");
+    expect(formatCell({ a: 1 })).toBe('{"a":1}');
+  });
+});
+
+describe("buildDataTableModel — normalizing the two hook families", () => {
+  it("drives a rich REST list hook (search + sort + pagination)", () => {
+    const sortField = jest.fn();
+    const setSearchText = jest.fn();
+    const query = {
+      data: [{ code: "LHR" }, { code: "JFK" }],
+      isLoading: false,
+      header: [{ key: "code", name: "Code" }],
+      searching: { searchText: "lo", setSearchText },
+      sorting: { sortField, getSortingDirection: () => "asc" },
+      pagination: {
+        currentPage: 2,
+        pageSize: 20,
+        pageCount: 5,
+        itemCount: 100,
+        nextPage: jest.fn(),
+        previousPage: jest.fn(),
+        setPageSize: jest.fn(),
+      },
+    } as unknown as TableQuery<{ code: string }>;
+
+    const model = buildDataTableModel(query);
+    expect(model.columns.map((c) => c.key)).toEqual(["code"]);
+    expect(model.columns[0].sortable).toBe(true);
+    expect(model.rows).toHaveLength(2);
+    expect(model.isLoading).toBe(false);
+    expect(model.isEmpty).toBe(false);
+
+    expect(model.search?.value).toBe("lo");
+    model.search?.setValue("");
+    expect(setSearchText).toHaveBeenCalledWith(undefined); // empty box clears the search
+
+    expect(model.sort?.directionOf("code")).toBe("asc");
+    model.sort?.by("code");
+    expect(sortField).toHaveBeenCalledWith("code");
+
+    expect(model.pagination).toMatchObject({
+      current: 2,
+      count: 5,
+      canPrev: true,
+      canNext: true,
+    });
+  });
+
+  it("drives a minimal sync list hook (no search/sort/pagination)", () => {
+    const query = {
+      data: [{ id: "1", title: "A" }],
+      isLoading: false,
+      isReady: true,
+    } as unknown as TableQuery<{ id: string; title: string }>;
+
+    const model = buildDataTableModel(query);
+    expect(model.columns.map((c) => c.key)).toEqual(["id", "title"]);
+    expect(model.columns[0].sortable).toBe(false); // no sorting capability → not sortable
+    expect(model.search).toBeUndefined();
+    expect(model.sort).toBeUndefined();
+    expect(model.pagination).toBeUndefined();
+  });
+
+  it("reports loading and empty states", () => {
+    const loading = buildDataTableModel({
+      data: undefined,
+      isLoading: true,
+    } as TableQuery);
+    expect(loading.isLoading).toBe(true);
+    expect(loading.isEmpty).toBe(false);
+
+    const empty = buildDataTableModel({
+      data: [],
+      isLoading: false,
+    } as TableQuery);
+    expect(empty.isEmpty).toBe(true);
+  });
+});
+
+describe("inputKindForFieldType", () => {
+  it("maps every datatype to a control", () => {
+    expect(inputKindForFieldType("boolean")).toBe("checkbox");
+    expect(inputKindForFieldType("number")).toBe("number");
+    expect(inputKindForFieldType("date")).toBe("date");
+    expect(inputKindForFieldType("datetime")).toBe("datetime-local");
+    expect(inputKindForFieldType("select")).toBe("select");
+    expect(inputKindForFieldType("email")).toBe("email");
+    expect(inputKindForFieldType("url")).toBe("url");
+    expect(inputKindForFieldType("array")).toBe("textarea");
+    expect(inputKindForFieldType("text")).toBe("text");
+  });
+});
+
+describe("resolveFieldSpecs", () => {
+  const names = ["code", "name", "active"];
+
+  it("defaults to the value keys in order", () => {
+    expect(resolveFieldSpecs(names).map((s) => s.name)).toEqual([
+      "code",
+      "name",
+      "active",
+    ]);
+  });
+
+  it("honours an explicit ordered field list with config", () => {
+    const specs = resolveFieldSpecs(names, {
+      fields: ["name", { name: "code", label: "Airport code" }],
+    });
+    expect(specs.map((s) => s.name)).toEqual(["name", "code"]);
+    expect(specs[1].label).toBe("Airport code");
+  });
+
+  it("applies excludes", () => {
+    expect(
+      resolveFieldSpecs(names, { exclude: ["active"] }).map((s) => s.name),
+    ).toEqual(["code", "name"]);
+  });
+});
+
+describe("buildAutoFormModel — wiring a form hook into field descriptors", () => {
+  // Minimal stand-in for a `useForm()` result.
+  const makeField = (over: Partial<AutoFormField>): AutoFormField =>
+    ({
+      value: "",
+      error: "",
+      type: "text",
+      isChecked: false,
+      isError: false,
+      isDisabled: false,
+      isRequired: false,
+      setValue: jest.fn(),
+      setTouched: jest.fn(),
+      ...over,
+    }) as AutoFormField;
+
+  const fieldsByName: Record<string, AutoFormField> = {
+    code: makeField({
+      type: "text",
+      isRequired: true,
+      value: "LHR",
+      maxLength: 3,
+    }),
+    active: makeField({ type: "boolean", value: true }),
+    status: makeField({
+      type: "select",
+      options: [{ label: "Draft", value: "draft" }],
+    }),
+  };
+
+  const onSubmit = jest.fn();
+  const resetForm = jest.fn();
+  const form: AutoFormLike = {
+    formValues: { code: "LHR", active: true, status: "draft" },
+    getFormField: (name: string) => fieldsByName[name],
+    onSubmit,
+    resetForm,
+    isSubmitDisabled: false,
+    isSubmitting: false,
+    errors: {},
+  };
+
+  it("produces one descriptor per field with the control picked from the datatype", () => {
+    const model = buildAutoFormModel(form);
+    expect(model.fields.map((f) => f.name)).toEqual([
+      "code",
+      "active",
+      "status",
+    ]);
+    expect(model.fields.map((f) => f.input)).toEqual([
+      "text",
+      "checkbox",
+      "select",
+    ]);
+    expect(model.fields[0].label).toBe("Code");
+    expect(model.fields[0].id).toBe("af-code");
+    expect(model.fields[2].options).toEqual([
+      { label: "Draft", value: "draft" },
+    ]);
+  });
+
+  it("computes submit-ability and wires submit/reset", () => {
+    const model = buildAutoFormModel(form);
+    expect(model.canSubmit).toBe(true);
+    model.submit();
+    model.reset();
+    expect(onSubmit).toHaveBeenCalled();
+    expect(resetForm).toHaveBeenCalled();
+  });
+
+  it("blocks submission while invalid or submitting", () => {
+    expect(
+      buildAutoFormModel({ ...form, isSubmitDisabled: true }).canSubmit,
+    ).toBe(false);
+    expect(buildAutoFormModel({ ...form, isSubmitting: true }).canSubmit).toBe(
+      false,
+    );
+  });
+
+  it("respects field selection options", () => {
+    const model = buildAutoFormModel(form, { exclude: ["status"] });
+    expect(model.fields.map((f) => f.name)).toEqual(["code", "active"]);
+  });
+});