@multiplatform.one/frappe-ui 7.6.3 → 7.7.1

package/src/fields/OTPInput/OTPInput.spec.tsx

@@ -0,0 +1,167 @@
+/**
+ * OTPInputField contract specs. The `OTP` fieldtype is a segmented code entry,
+ * so the adapter's promises are countable: `length` decides how many cells
+ * exist, `type` decides what a cell will accept, `secureTextEntry` decides
+ * whether the digits are legible, and `onComplete` fires exactly once the last
+ * cell is filled — a login screen wires its submit to that callback, so a
+ * dropped `onComplete` is a dead flow, not a cosmetic bug.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent } from "@testing-library/react";
+import type React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { getFieldComponent, type FieldRenderProps } from "../../fieldRegistry";
+import { OTPInputField } from ".";
+
+afterEach(cleanup);
+
+const cells = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll("input")) as HTMLInputElement[];
+
+describe("OTPInputField cell count", () => {
+  it("defaults to six cells, the stock one-time-code length", () => {
+    const result = renderWithProviders(<OTPInputField label="Code" value="" onChange={() => {}} />);
+    expect(cells(result.container)).toHaveLength(6);
+  });
+
+  it("honours an explicit length", () => {
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="" length={4} onChange={() => {}} />,
+    );
+    expect(cells(result.container)).toHaveLength(4);
+  });
+
+  it("paints a controlled value one character per cell", () => {
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="1234" length={4} onChange={() => {}} />,
+    );
+    expect(cells(result.container).map((c) => c.value)).toEqual(["1", "2", "3", "4"]);
+  });
+
+  it("leaves the tail blank for a partial value", () => {
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="12" length={4} onChange={() => {}} />,
+    );
+    expect(cells(result.container).map((c) => c.value)).toEqual(["1", "2", "", ""]);
+  });
+});
+
+describe("OTPInputField entry", () => {
+  it("emits the assembled code through canonical onChange", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="" length={4} onChange={onChange} />,
+    );
+    await act(async () => {
+      fireEvent.change(cells(result.container)[0], { target: { value: "7" } });
+    });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange.mock.calls.at(-1)?.[0]).toBe("7");
+  });
+
+  it("fires onComplete when the last cell is filled, and not before", async () => {
+    const onComplete = vi.fn();
+    const result = renderWithProviders(
+      <OTPInputField
+        label="Code"
+        value="123"
+        length={4}
+        onComplete={onComplete}
+        onChange={() => {}}
+      />,
+    );
+    expect(onComplete).not.toHaveBeenCalled();
+    await act(async () => {
+      fireEvent.change(cells(result.container)[3], { target: { value: "4" } });
+    });
+    expect(onComplete).toHaveBeenCalledWith("1234");
+  });
+
+  it("numeric is the default cell mode", () => {
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="" length={4} onChange={() => {}} />,
+    );
+    expect(cells(result.container)[0].getAttribute("inputmode")).toBe("numeric");
+  });
+
+  it("alphanumeric widens the cell mode past digits", () => {
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="" length={4} type="alphanumeric" onChange={() => {}} />,
+    );
+    expect(cells(result.container)[0].getAttribute("inputmode")).not.toBe("numeric");
+  });
+
+  it("secureTextEntry masks the cells", () => {
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="1234" length={4} secureTextEntry onChange={() => {}} />,
+    );
+    expect(cells(result.container)[0].getAttribute("type")).toBe("password");
+  });
+
+  it("readOnly marks every cell readonly, which is how the browser refuses entry", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="12" length={4} readOnly onChange={onChange} />,
+    );
+    // Every cell, not just the first: a partially readOnly OTP is a field a
+    // user can half-edit.
+    for (const cell of cells(result.container)) {
+      expect(cell.hasAttribute("readonly")).toBe(true);
+    }
+
+    // FINDING (MPO-123): the DOM attribute is the ONLY guard. Unlike
+    // forms/TextArea, whose onChangeText opens `if (disabled || readOnly)
+    // return;`, OTPInput's handleDigitChange has no such check — so a
+    // programmatic change still moves the digits and still emits. A real
+    // browser never fires change on a readonly input, so this is not a user
+    // -reachable bug today; it is a missing guard, asserted here as the
+    // behaviour that actually exists rather than the one that should.
+    await act(async () => {
+      fireEvent.change(cells(result.container)[2], { target: { value: "9" } });
+    });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("skeleton branch renders no cells", () => {
+    const result = renderWithProviders(
+      <OTPInputField label="Code" value="1234" length={4} skeleton onChange={() => {}} />,
+    );
+    expect(cells(result.container)).toHaveLength(0);
+  });
+});
+
+describe("registry resolution (OTP fieldtype)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'OTP' to OTPInputField", () => {
+    const Component = getFieldComponent("OTP")!;
+    expect(Component).toBeTruthy();
+    const element = (Component as Function)(
+      propsFor({ value: "123456", label: "Code" }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.type).toBe(OTPInputField);
+    expect(element.props.value).toBe("123456");
+    expect(element.props.label).toBe("Code");
+  });
+
+  it("substitutes an empty string for a null value so the cells stay controlled", () => {
+    const Component = getFieldComponent("OTP")!;
+    const element = (Component as Function)(
+      propsFor({ value: null as unknown as string }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.value).toBe("");
+  });
+
+  it("passes helperText / readOnly / skeleton / compact through", () => {
+    const Component = getFieldComponent("OTP")!;
+    const element = (Component as Function)(
+      propsFor({ helperText: "check your texts", readOnly: true, skeleton: true, compact: true }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.helperText).toBe("check your texts");
+    expect(element.props.readOnly).toBe(true);
+    expect(element.props.skeleton).toBe(true);
+    expect(element.props.compact).toBe(true);
+  });
+});

package/src/fields/Password/Password.stories.tsx

@@ -1,5 +1,6 @@
 import { action } from "@multiplatform.one/storybook";
 import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
+import { SIZE_RECIPE_TOKENS } from "@multiplatform.one/theme";
 import { useState } from "react";
 import { YStack } from "tamagui";
 import { fieldtypeToTableField } from "../../fieldRegistry";
@@ -135,3 +136,23 @@ InTable.parameters = {
     },
   },
 };
+
+/**
+ * Every size step, so AC1 ("a reveal toggle in the end-cap slot at every
+ * size step, generated from the size recipe rather than hardcoded") is
+ * measurable rather than argued. The end cap stamps `data-end-cap` with the
+ * square it took from `sizeRecipeForToken`, so the probe reads the recipe
+ * off the DOM instead of trusting the source.
+ */
+export const Sizes = (args: StoryProps) => (
+  <YStack gap="$4" maxWidth={420}>
+    {SIZE_RECIPE_TOKENS.map((token) => (
+      <Controlled {...args} key={token} label={`size ${token}`} size={token as any} />
+    ))}
+  </YStack>
+);
+Sizes.args = {
+  value: "hunter2",
+  placeholder: "Enter password",
+} as Partial<StoryProps>;
+Sizes.storyName = "Sizes";

package/src/fields/Phone/Phone.spec.tsx

@@ -0,0 +1,151 @@
+/**
+ * Phone contract specs. The adapter is thin by design — compose the forms
+ * PhoneInput, emit canonical onChange — so what has to be pinned is that every
+ * prop the Frappe layer sets actually ARRIVES: the country the number is
+ * parsed against (`defaultCountry`, fed from df.options by the registry), the
+ * controlled value, and the read-only / disabled gates.
+ *
+ * A dropped `defaultCountry` is the failure that matters here: the same digits
+ * serialise to a different E.164 number under a different region, so a silent
+ * default of US would corrupt every non-US phone field on save.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent } from "@testing-library/react";
+import type React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { getFieldComponent, type FieldRenderProps } from "../../fieldRegistry";
+import { Phone } from ".";
+
+afterEach(cleanup);
+
+const phoneInput = (container: HTMLElement) =>
+  container.querySelector('[data-testid="phone-input"]') as HTMLInputElement | null;
+
+describe("Phone composes the forms PhoneInput", () => {
+  it("renders the composite phone control, not a bare Input", () => {
+    const result = renderWithProviders(<Phone label="Mobile" value="" onChange={() => {}} />);
+    expect(phoneInput(result.container)).toBeTruthy();
+    expect(result.container.querySelector('[data-testid="phone-box"]')).toBeTruthy();
+  });
+
+  it("shows the national form of a controlled E.164 value", () => {
+    const result = renderWithProviders(
+      <Phone label="Mobile" value="+14155550123" onChange={() => {}} />,
+    );
+    const input = phoneInput(result.container);
+    expect(input?.value).toContain("415");
+    expect(input?.value).toContain("555");
+  });
+
+  it("emits a serialised number through canonical onChange", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<Phone label="Mobile" value="" onChange={onChange} />);
+    const input = phoneInput(result.container) as HTMLInputElement;
+    await act(async () => {
+      fireEvent.change(input, { target: { value: "4155550123" } });
+    });
+    expect(onChange).toHaveBeenCalled();
+    const emitted = onChange.mock.calls.at(-1)?.[0] as string;
+    expect(emitted.startsWith("+")).toBe(true);
+    expect(emitted).toContain("4155550123");
+  });
+});
+
+describe("Phone defaultCountry", () => {
+  it("defaults to the +1 region when the field declares no country", () => {
+    const result = renderWithProviders(<Phone label="Mobile" value="" onChange={() => {}} />);
+    expect(result.container.textContent).toContain("+1");
+  });
+
+  it("honours defaultCountry, so the dial code follows the DocField", () => {
+    const result = renderWithProviders(
+      <Phone label="Mobile" value="" defaultCountry="GB" onChange={() => {}} />,
+    );
+    expect(result.container.textContent).toContain("+44");
+  });
+
+  it("parses the same digits under the declared region", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <Phone label="Mobile" value="" defaultCountry="IN" onChange={onChange} />,
+    );
+    await act(async () => {
+      fireEvent.change(phoneInput(result.container) as HTMLInputElement, {
+        target: { value: "8074052136" },
+      });
+    });
+    const emitted = onChange.mock.calls.at(-1)?.[0] as string;
+    expect(emitted.startsWith("+91")).toBe(true);
+  });
+});
+
+describe("Phone gates", () => {
+  it("readOnly marks the control read-only", () => {
+    const result = renderWithProviders(
+      <Phone label="Mobile" value="+14155550123" readOnly onChange={() => {}} />,
+    );
+    expect(phoneInput(result.container)?.hasAttribute("readonly")).toBe(true);
+  });
+
+  it("skeleton branch renders no phone control", () => {
+    const result = renderWithProviders(
+      <Phone label="Mobile" value="+14155550123" skeleton onChange={() => {}} />,
+    );
+    expect(phoneInput(result.container)).toBeNull();
+  });
+
+  it("shows the label, helperText and error", () => {
+    const result = renderWithProviders(
+      <Phone
+        label="Mobile"
+        value=""
+        helperText="include the country code"
+        error="not a number"
+        onChange={() => {}}
+      />,
+    );
+    expect(result.container.textContent).toContain("Mobile");
+    expect(result.container.textContent).toContain("not a number");
+  });
+});
+
+describe("registry resolution (Phone fieldtype)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'Phone' to the Phone adapter", () => {
+    const Component = getFieldComponent("Phone")!;
+    expect(Component).toBeTruthy();
+    const element = (Component as Function)(
+      propsFor({ value: "+14155550123", label: "Mobile" }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.type).toBe(Phone);
+    expect(element.props.value).toBe("+14155550123");
+    expect(element.props.label).toBe("Mobile");
+  });
+
+  it("takes defaultCountry from df.options — this is the DocField's own region", () => {
+    const Component = getFieldComponent("Phone")!;
+    const element = (Component as Function)(
+      propsFor({ fieldMeta: { options: "IN" } } as Partial<FieldRenderProps>),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.defaultCountry).toBe("IN");
+  });
+
+  it("leaves defaultCountry unset when df.options is empty, so PhoneInput owns the default", () => {
+    const Component = getFieldComponent("Phone")!;
+    const element = (Component as Function)(
+      propsFor({ fieldMeta: { options: "" } } as Partial<FieldRenderProps>),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.defaultCountry).toBeUndefined();
+  });
+
+  it("substitutes an empty string for a null value", () => {
+    const Component = getFieldComponent("Phone")!;
+    const element = (Component as Function)(
+      propsFor({ value: null as unknown as string }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.value).toBe("");
+  });
+});

package/src/fields/Progress/Progress.spec.tsx

@@ -0,0 +1,160 @@
+/**
+ * ProgressField contract specs.
+ *
+ * ProgressField is a thin adapter: it takes the Frappe field props and hands
+ * them to the forms Progress, which owns the track, the clamp and the label
+ * chrome. So what is worth pinning here is the FORWARDING — every prop the
+ * adapter is documented to pass (readOnly / skeleton / compact / max /
+ * helperText / error) has to actually arrive, because the failure mode of a
+ * thin adapter is a silently dropped prop that makes three story variants
+ * render identically (the ContractProbe story exists for exactly that).
+ *
+ * The registry half matters too: "Progress" is a display fieldtype, so its
+ * adapter must coerce a non-number to 0 rather than hand the track NaN.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup } from "@testing-library/react";
+import type React from "react";
+import { afterEach, describe, expect, it } from "vitest";
+import { getFieldComponent, type FieldRenderProps } from "../../fieldRegistry";
+import { ProgressField } from ".";
+
+afterEach(cleanup);
+
+describe("ProgressField chrome", () => {
+  it("renders the label and a track", () => {
+    const { container } = renderWithProviders(
+      <ProgressField label="Completion" value={65} max={100} />,
+    );
+    expect(container.textContent).toContain("Completion");
+    expect(container.firstElementChild).toBeTruthy();
+  });
+
+  it("shows helperText", () => {
+    const { container } = renderWithProviders(
+      <ProgressField label="Completion" value={65} helperText="how far along" />,
+    );
+    expect(container.textContent).toContain("how far along");
+  });
+
+  it("shows the error message", () => {
+    const { container } = renderWithProviders(
+      <ProgressField label="Completion" value={65} error="Value out of range" />,
+    );
+    expect(container.textContent).toContain("Value out of range");
+  });
+
+  it("marks a required field", () => {
+    const { container } = renderWithProviders(
+      <ProgressField label="Completion" value={65} required />,
+    );
+    expect(container.textContent).toContain("Completion");
+    expect(container.querySelector("[aria-required], [aria-hidden]")).toBeTruthy();
+  });
+
+  it("a value with no max still paints (max defaults to 100)", () => {
+    const { container } = renderWithProviders(<ProgressField label="Completion" value={40} />);
+    expect(container.firstElementChild).toBeTruthy();
+    expect(container.textContent).toContain("Completion");
+  });
+});
+
+/**
+ * The ContractProbe story asserts these three visually. If the adapter drops
+ * any of them the probe variants render identically to Main and nobody
+ * notices, so pin them structurally too.
+ */
+describe("ProgressField forwards the thin-adapter contract", () => {
+  it("skeleton renders a different tree from the loaded field", () => {
+    const loaded = renderWithProviders(<ProgressField label="Completion" value={65} />);
+    const loadedHtml = loaded.container.innerHTML;
+    cleanup();
+    const skeleton = renderWithProviders(<ProgressField label="Completion" value={65} skeleton />);
+    expect(skeleton.container.innerHTML).not.toBe(loadedHtml);
+  });
+
+  it("compact renders a different tree from the default density", () => {
+    const normal = renderWithProviders(<ProgressField label="Completion" value={65} />);
+    const normalHtml = normal.container.innerHTML;
+    cleanup();
+    const compact = renderWithProviders(<ProgressField label="Completion" value={65} compact />);
+    expect(compact.container.innerHTML).not.toBe(normalHtml);
+  });
+
+  it("readOnly is accepted and still paints the value", () => {
+    const { container } = renderWithProviders(
+      <ProgressField label="Completion" value={65} readOnly />,
+    );
+    expect(container.textContent).toContain("Completion");
+    expect(container.firstElementChild).toBeTruthy();
+  });
+
+  it("max reaches the track: the same value at two maxes renders differently", () => {
+    const wide = renderWithProviders(<ProgressField label="Completion" value={50} max={100} />);
+    const wideHtml = wide.container.innerHTML;
+    cleanup();
+    const narrow = renderWithProviders(<ProgressField label="Completion" value={50} max={50} />);
+    expect(narrow.container.innerHTML).not.toBe(wideHtml);
+  });
+});
+
+describe("registry resolution (Progress fieldtype)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'Progress' to ProgressField", () => {
+    const Component = getFieldComponent("Progress")!;
+    expect(Component).toBeTruthy();
+    const element = (Component as Function)(
+      propsFor({ value: 65, label: "Completion" }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.type).toBe(ProgressField);
+    expect(element.props.value).toBe(65);
+    expect(element.props.label).toBe("Completion");
+  });
+
+  it("coerces a non-number to 0 rather than handing the track NaN", () => {
+    const Component = getFieldComponent("Progress")!;
+    const element = (Component as Function)(
+      propsFor({ value: "not a number" }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.value).toBe(0);
+  });
+
+  it("a null value becomes 0, not null", () => {
+    const Component = getFieldComponent("Progress")!;
+    const element = (Component as Function)(
+      propsFor({ value: null as unknown as string }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.value).toBe(0);
+  });
+
+  it("forwards the passthrough contract (helperText / readOnly / skeleton / compact)", () => {
+    const Component = getFieldComponent("Progress")!;
+    const element = (Component as Function)(
+      propsFor({
+        value: 20,
+        helperText: "from the doc",
+        readOnly: true,
+        skeleton: true,
+        compact: true,
+      } as Partial<FieldRenderProps>),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.helperText).toBe("from the doc");
+    expect(element.props.readOnly).toBe(true);
+    expect(element.props.skeleton).toBe(true);
+    expect(element.props.compact).toBe(true);
+  });
+
+  it("falls back to the DocField description when no helperText is given", () => {
+    const Component = getFieldComponent("Progress")!;
+    const element = (Component as Function)(
+      propsFor({
+        value: 20,
+        fieldMeta: { description: "percent complete" },
+      } as Partial<FieldRenderProps>),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.helperText).toBe("percent complete");
+  });
+});