@multiplatform.one/frappe-ui 7.7.6 → 7.8.0

package/src/fields/MentionInput/MentionInput.spec.tsx

@@ -0,0 +1,110 @@
+/**
+ * MentionInputField contract specs. The registry hands `value` and `onChange`
+ * straight to this adapter (MentionAdapter in fieldRegistry). The failure
+ * mode of a thin adapter is dropping those two, so a saved comment never
+ * paints and a typed comment never emits (LC-14). Pin the hop.
+ */
+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 { MentionInputField, type MentionValue } from ".";
+
+afterEach(cleanup);
+
+const mentions = [{ trigger: "@", data: [{ id: "u1", display: "Ada" }] }];
+
+const seeded: MentionValue = { text: "hello ada", mentions: [] };
+
+const textarea = (container: HTMLElement) =>
+  container.querySelector("textarea") as HTMLTextAreaElement | null;
+
+describe("MentionInputField composes the forms MentionInput", () => {
+  it("paints a controlled value onto the textarea", () => {
+    const result = renderWithProviders(
+      <MentionInputField label="Comment" mentions={mentions} value={seeded} onChange={() => {}} />,
+    );
+    expect(textarea(result.container)?.value).toBe("hello ada");
+  });
+
+  it("emits a MentionValue through canonical onChange", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <MentionInputField
+        label="Comment"
+        mentions={mentions}
+        value={{ text: "", mentions: [] }}
+        onChange={onChange}
+      />,
+    );
+    await act(async () => {
+      fireEvent.change(textarea(result.container) as HTMLTextAreaElement, {
+        target: { value: "typed" },
+      });
+    });
+    expect(onChange).toHaveBeenCalled();
+    const emitted = onChange.mock.calls.at(-1)?.[0] as MentionValue;
+    expect(emitted.text).toBe("typed");
+    expect(Array.isArray(emitted.mentions)).toBe(true);
+  });
+
+  it("forwards disabled onto the textarea", () => {
+    const result = renderWithProviders(
+      <MentionInputField
+        label="Comment"
+        mentions={mentions}
+        value={seeded}
+        disabled
+        onChange={() => {}}
+      />,
+    );
+    const el = textarea(result.container);
+    expect(el?.disabled || el?.getAttribute("aria-disabled") === "true").toBe(true);
+  });
+
+  it("forwards readOnly onto the textarea", () => {
+    const result = renderWithProviders(
+      <MentionInputField
+        label="Comment"
+        mentions={mentions}
+        value={seeded}
+        readOnly
+        onChange={() => {}}
+      />,
+    );
+    const el = textarea(result.container);
+    expect(el?.readOnly || el?.getAttribute("aria-readonly") === "true").toBe(true);
+  });
+
+  it("shows the label and error", () => {
+    const result = renderWithProviders(
+      <MentionInputField
+        label="Comment"
+        mentions={mentions}
+        value={seeded}
+        error="too short"
+        onChange={() => {}}
+      />,
+    );
+    expect(result.container.textContent).toContain("Comment");
+    expect(result.container.textContent).toContain("too short");
+  });
+});
+
+describe("registry resolution (Mention fieldtype)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'Mention' to MentionInputField and hands value through", () => {
+    const Component = getFieldComponent("Mention")!;
+    expect(Component).toBeTruthy();
+    const element = (Component as Function)(
+      propsFor({ value: "hello ada", label: "Comment" }),
+    ) as React.ReactElement<Record<string, unknown>>;
+    expect(element.type).toBe(MentionInputField);
+    expect(element.props.value).toBe("hello ada");
+    expect(element.props.label).toBe("Comment");
+  });
+});

package/src/fields/MentionInput/index.tsx

@@ -79,7 +79,8 @@ export function MentionInputField<
     _preserveValue,
     validators,
     disabled,
-    _value,
+    value,
+    onChange,
     mentions,
     placeholder,
     onMentionSelect,
@@ -103,6 +104,8 @@ export function MentionInputField<
       id={fieldProps.id}
       size={fieldProps.size}
       disabled={disabled}
+      value={value}
+      onChange={onChange}
       mentions={mentions ?? []}
       placeholder={placeholder}
       onMentionSelect={onMentionSelect}

package/src/fields/Password/index.tsx

@@ -45,7 +45,7 @@ export type PasswordProps<
     unknown,
     string
   >,
-  "children" | "field"
+  "children" | "field" | "onChange"
 > &
   Partial<
     Omit<

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

@@ -57,6 +57,15 @@ describe("ProgressField chrome", () => {
     expect(container.firstElementChild).toBeTruthy();
     expect(container.textContent).toContain("Completion");
   });
+
+  it("forwards the controlled value onto the progressbar", () => {
+    const { container } = renderWithProviders(
+      <ProgressField label="Completion" value={65} max={100} />,
+    );
+    expect(container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow")).toBe(
+      "65",
+    );
+  });
 });
 
 /**

package/src/fields/RadioGroup/RadioGroup.spec.tsx

@@ -0,0 +1,93 @@
+/**
+ * RadioGroupField contract specs. The adapter maps `onChange` onto the forms
+ * RadioGroup's `onValueChange`. Pin that value, onChange, disabled, label
+ * and error survive the hop.
+ */
+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 { RadioGroupField } from ".";
+
+afterEach(cleanup);
+
+const options = [
+  { label: "Red", value: "red" },
+  { label: "Blue", value: "blue" },
+];
+
+const radios = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('[role="radio"]')) as HTMLElement[];
+
+describe("RadioGroupField composes the forms RadioGroup", () => {
+  it("paints a controlled value onto the matching radio", () => {
+    const result = renderWithProviders(
+      <RadioGroupField label="Color" value="blue" options={options} onChange={() => {}} />,
+    );
+    const all = radios(result.container);
+    const checked = all.find((el) => el.getAttribute("aria-checked") === "true");
+    expect(checked).toBeTruthy();
+    // option order is Red, Blue — the disc itself has no text
+    expect(checked).toBe(all[1]);
+  });
+
+  it("emits the option value through canonical onChange", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <RadioGroupField label="Color" value="red" options={options} onChange={onChange} />,
+    );
+    const blue = radios(result.container).find((el) => (el.textContent || "").includes("Blue"));
+    expect(blue || radios(result.container)[1]).toBeTruthy();
+    await act(async () => {
+      fireEvent.click(blue ?? radios(result.container)[1]);
+    });
+    expect(onChange).toHaveBeenCalledWith("blue");
+  });
+
+  it("forwards disabled onto the radios", () => {
+    const result = renderWithProviders(
+      <RadioGroupField label="Color" value="red" options={options} disabled onChange={() => {}} />,
+    );
+    const el = radios(result.container)[0];
+    expect(el?.getAttribute("aria-disabled") === "true" || el?.hasAttribute("disabled")).toBe(true);
+  });
+
+  it("shows the label and error", () => {
+    const result = renderWithProviders(
+      <RadioGroupField
+        label="Color"
+        value="red"
+        options={options}
+        error="pick one"
+        onChange={() => {}}
+      />,
+    );
+    expect(result.container.textContent).toContain("Color");
+    expect(result.container.textContent).toContain("pick one");
+  });
+});
+
+describe("registry resolution (Radio fieldtype)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'Radio' to RadioGroupField and splits df.options on newlines", () => {
+    const Component = getFieldComponent("Radio")!;
+    const element = (Component as Function)(
+      propsFor({
+        value: "Red",
+        label: "Color",
+        fieldMeta: { options: "Red\nBlue" },
+      } as Partial<FieldRenderProps>),
+    ) as React.ReactElement<Record<string, unknown>>;
+    expect(element.type).toBe(RadioGroupField);
+    expect(element.props.value).toBe("Red");
+    expect(element.props.label).toBe("Color");
+    expect(element.props.options).toEqual([
+      { label: "Red", value: "Red" },
+      { label: "Blue", value: "Blue" },
+    ]);
+  });
+});

package/src/fields/Signature/Signature.spec.tsx

@@ -0,0 +1,105 @@
+/**
+ * Signature adapter contract specs. The Frappe Signature field stores a
+ * data URL; this adapter must hand value / onChange / disabled / label /
+ * error to the forms Signature pad. Drawing lives in the forms spec.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent } from "@testing-library/react";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { getFieldComponent, type FieldRenderProps } from "../../fieldRegistry";
+import type React from "react";
+import { Signature } from ".";
+
+function encodeSignature(strokes: number[][][]): string {
+  const json = JSON.stringify({ v: 2, s: strokes });
+  return `data:application/json;base64,${btoa(json)}`;
+}
+
+const inkedValue = encodeSignature([
+  [
+    [0.1, 0.2, 0.5],
+    [0.4, 0.3, 0.5],
+    [0.7, 0.25, 0.5],
+  ],
+]);
+
+function getPad(container: HTMLElement): HTMLElement {
+  const label = container.querySelector("label[for]") as HTMLLabelElement | null;
+  const id = label?.htmlFor;
+  const pad = id ? (container.querySelector(`#${CSS.escape(id)}`) as HTMLElement | null) : null;
+  if (!pad) throw new Error("signature pad not found");
+  return pad;
+}
+
+beforeAll(() => {
+  HTMLCanvasElement.prototype.getContext = vi.fn(() => ({
+    clearRect: vi.fn(),
+    beginPath: vi.fn(),
+    moveTo: vi.fn(),
+    lineTo: vi.fn(),
+    stroke: vi.fn(),
+    fillRect: vi.fn(),
+    drawImage: vi.fn(),
+  })) as unknown as typeof HTMLCanvasElement.prototype.getContext;
+});
+
+afterEach(cleanup);
+
+describe("Signature composes the forms Signature", () => {
+  it("paints a controlled value as a signed pad", () => {
+    const result = renderWithProviders(
+      <Signature label="Sign here" value={inkedValue} onChange={() => {}} />,
+    );
+    expect(getPad(result.container).getAttribute("data-signed")).toBe("true");
+  });
+
+  it("emits an empty string through canonical onChange on Delete", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <Signature label="Sign here" value={inkedValue} onChange={onChange} />,
+    );
+    const pad = getPad(result.container);
+    fireEvent.focus(pad);
+    fireEvent.keyDown(pad, { key: "Delete" });
+    expect(onChange).toHaveBeenCalledWith("");
+  });
+
+  it("forwards readOnly onto the pad", () => {
+    const result = renderWithProviders(
+      <Signature label="Sign here" value={inkedValue} readOnly onChange={() => {}} />,
+    );
+    expect(getPad(result.container).getAttribute("aria-readonly")).toBe("true");
+  });
+
+  it("forwards disabled onto the pad", () => {
+    const result = renderWithProviders(
+      <Signature label="Sign here" value={inkedValue} disabled onChange={() => {}} />,
+    );
+    const pad = getPad(result.container);
+    expect(pad.getAttribute("aria-disabled") === "true" || pad.hasAttribute("disabled")).toBe(true);
+  });
+
+  it("shows the label and error", () => {
+    const result = renderWithProviders(
+      <Signature label="Sign here" value="" error="signature required" onChange={() => {}} />,
+    );
+    expect(result.container.textContent).toContain("Sign here");
+    expect(result.container.textContent).toContain("signature required");
+  });
+});
+
+describe("registry resolution (Signature fieldtype)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'Signature' to the Signature adapter and hands value through", () => {
+    const Component = getFieldComponent("Signature")!;
+    const element = (Component as Function)(
+      propsFor({ value: inkedValue, label: "Sign here" }),
+    ) as React.ReactElement<Record<string, unknown>>;
+    expect(element.type).toBe(Signature);
+    expect(element.props.value).toBe(inkedValue);
+    expect(element.props.label).toBe("Sign here");
+  });
+});

package/src/fields/Slider/Slider.spec.tsx

@@ -0,0 +1,73 @@
+/**
+ * SliderField contract specs. The adapter wraps a scalar number as the
+ * forms Slider's `[number]` tuple. Pin that value, onChange, disabled,
+ * label and error survive the hop.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { 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 { SliderField } from ".";
+
+afterEach(cleanup);
+
+const thumb = (container: HTMLElement) =>
+  container.querySelector('[role="slider"]') as HTMLElement | null;
+
+describe("SliderField composes the forms Slider", () => {
+  it("paints a controlled value onto the thumb", () => {
+    const result = renderWithProviders(
+      <SliderField label="Volume" value={40} min={0} max={100} onChange={() => {}} />,
+    );
+    expect(thumb(result.container)?.getAttribute("aria-valuenow")).toBe("40");
+  });
+
+  it("emits a scalar through canonical onChange", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <SliderField label="Volume" value={40} min={0} max={100} step={1} onChange={onChange} />,
+    );
+    const el = thumb(result.container) as HTMLElement;
+    el.focus();
+    fireEvent.keyDown(el, { key: "ArrowRight" });
+    expect(onChange).toHaveBeenCalled();
+    expect(typeof onChange.mock.calls.at(-1)?.[0]).toBe("number");
+  });
+
+  it("forwards disabled onto the thumb", () => {
+    const result = renderWithProviders(
+      <SliderField label="Volume" value={40} disabled onChange={() => {}} />,
+    );
+    const el = thumb(result.container);
+    const disabledMarker =
+      el?.getAttribute("aria-disabled") === "true" ||
+      el?.hasAttribute("data-disabled") ||
+      Boolean(el?.closest("[data-disabled]"));
+    expect(disabledMarker).toBe(true);
+  });
+
+  it("shows the label and error", () => {
+    const result = renderWithProviders(
+      <SliderField label="Volume" value={40} error="out of range" onChange={() => {}} />,
+    );
+    expect(result.container.textContent).toContain("Volume");
+    expect(result.container.textContent).toContain("out of range");
+  });
+});
+
+describe("registry resolution (Slider fieldtype)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'Slider' to SliderField and coerces a non-number to 0", () => {
+    const Component = getFieldComponent("Slider")!;
+    const element = (Component as Function)(
+      propsFor({ value: "nope", label: "Volume" }),
+    ) as React.ReactElement<Record<string, unknown>>;
+    expect(element.type).toBe(SliderField);
+    expect(element.props.value).toBe(0);
+    expect(element.props.label).toBe("Volume");
+  });
+});

package/src/fields/Switch/Switch.spec.tsx

@@ -0,0 +1,65 @@
+/**
+ * SwitchField contract specs. Frappe Switch is 1/0 in the doc; this adapter
+ * maps that onto the forms Switch's boolean checked/onCheckedChange. Pin
+ * that value, onChange, disabled, label and error survive the hop.
+ */
+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 { SwitchField } from ".";
+
+afterEach(cleanup);
+
+describe("SwitchField composes the forms Switch", () => {
+  it("paints a controlled true value as aria-checked=true", () => {
+    const result = renderWithProviders(
+      <SwitchField label="Enabled" value={true} onChange={() => {}} />,
+    );
+    expect(result.getSwitch()?.getAttribute("aria-checked")).toBe("true");
+  });
+
+  it("emits a boolean through canonical onChange", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <SwitchField label="Enabled" value={false} onChange={onChange} />,
+    );
+    await act(async () => {
+      fireEvent.click(result.getSwitch() as HTMLElement);
+    });
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it("forwards disabled onto the switch", () => {
+    const result = renderWithProviders(
+      <SwitchField label="Enabled" value={false} disabled onChange={() => {}} />,
+    );
+    const el = result.getSwitch();
+    expect(el?.hasAttribute("disabled") || el?.getAttribute("aria-disabled") === "true").toBe(true);
+  });
+
+  it("shows the label and error", () => {
+    const result = renderWithProviders(
+      <SwitchField label="Enabled" value={false} error="cannot enable" onChange={() => {}} />,
+    );
+    expect(result.container.textContent).toContain("Enabled");
+    expect(result.container.textContent).toContain("cannot enable");
+  });
+});
+
+describe("registry resolution (Switch fieldtype)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'Switch' to SwitchField and maps a truthy doc value to true", () => {
+    const Component = getFieldComponent("Switch")!;
+    const element = (Component as Function)(
+      propsFor({ value: 1, label: "Enabled" }),
+    ) as React.ReactElement<Record<string, unknown>>;
+    expect(element.type).toBe(SwitchField);
+    expect(element.props.value).toBe(true);
+    expect(element.props.label).toBe("Enabled");
+  });
+});

package/src/fields/TextEditor/TextEditor.spec.tsx

@@ -51,11 +51,10 @@ describe("TextEditor initialization emissions", () => {
     await waitFor(() => {
       expect(utils.container.querySelector(".ProseMirror")).toBeTruthy();
     });
-    // House RichTextEditor seeds via initialContent (mount). External HTML
-    // sync is the house editor's contract, not a forked TipTap in this wrapper.
+    // An external update changes the actual document without echoing an edit.
     utils.rerender(<TextEditor label="Description" value="<p>second</p>" onChange={onChange} />);
     await waitFor(() => {
-      expect(utils.container.querySelector(".ProseMirror")).toBeTruthy();
+      expect(utils.container.querySelector(".ProseMirror")?.textContent).toBe("second");
     });
     expect(onChange).not.toHaveBeenCalled();
   });

package/src/fields/TextEditor/TextEditor.stories.tsx

@@ -1,7 +1,8 @@
 import { action } from "@multiplatform.one/storybook";
+import { Button } from "@multiplatform.one/forms";
 import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useState } from "react";
-import { YStack } from "tamagui";
+import { Text, YStack } from "tamagui";
 import { fieldtypeToTableField } from "../../fieldRegistry";
 import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { TextEditor, type TextEditorProps } from ".";
@@ -51,6 +52,35 @@ Main.args = {
 } as Partial<StoryProps>;
 Main.storyName = "Main";
 
+export const ExternalValueUpdates = {
+  name: "External value updates",
+  render: function ExternalValueUpdatesStory() {
+    const [value, setValue] = useState("<p>Original note</p>");
+    const [edits, setEdits] = useState(0);
+    return (
+      <YStack gap="$3" maxWidth={640}>
+        <TextEditor
+          label="Note"
+          value={value}
+          onChange={(next) => {
+            setValue(next);
+            setEdits((count) => count + 1);
+          }}
+        />
+        <Button
+          onPress={() => {
+            setEdits(0);
+            setValue("<p>Saved note</p>");
+          }}
+        >
+          Load saved note
+        </Button>
+        <Text testID="editor-user-edits">User edits: {edits}</Text>
+      </YStack>
+    );
+  },
+};
+
 export const Empty = (args: StoryProps) => <Controlled {...args} />;
 Empty.args = {
   label: "Empty editor",

package/src/fields/ToggleGroup/ToggleGroup.spec.tsx

@@ -0,0 +1,110 @@
+/**
+ * ToggleGroupField contract specs. The adapter maps `onChange` onto the forms
+ * ToggleGroup's `onValueChange`. Pin that value, onChange, disabled, label
+ * and error survive the hop.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { 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 { ToggleGroupField } from ".";
+
+afterEach(cleanup);
+
+const options = [
+  { label: "Left", value: "left" },
+  { label: "Center", value: "center" },
+  { label: "Right", value: "right" },
+];
+
+describe("ToggleGroupField composes the forms ToggleGroup", () => {
+  it("paints a controlled value onto the matching item", () => {
+    const result = renderWithProviders(
+      <ToggleGroupField
+        label="Align"
+        type="single"
+        value="center"
+        options={options}
+        onChange={() => {}}
+      />,
+    );
+    expect(result.container.textContent).toContain("Center");
+    const pressed = result.container.querySelector('[aria-pressed="true"], [data-state="on"]');
+    expect(pressed).toBeTruthy();
+  });
+
+  it("emits the item value through canonical onChange", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <ToggleGroupField
+        label="Align"
+        type="single"
+        value="left"
+        options={options}
+        onChange={onChange}
+      />,
+    );
+    const center = result.findTextElement("Center");
+    expect(center).toBeTruthy();
+    fireEvent.click(center as HTMLElement);
+    expect(onChange).toHaveBeenCalledWith("center");
+  });
+
+  it("forwards disabled onto the group", () => {
+    const result = renderWithProviders(
+      <ToggleGroupField
+        label="Align"
+        type="single"
+        value="left"
+        options={options}
+        disabled
+        onChange={() => {}}
+      />,
+    );
+    const el =
+      result.container.querySelector('[role="group"]') ||
+      result.container.querySelector('[data-disabled="true"]') ||
+      result.container.querySelector("[disabled]");
+    expect(el).toBeTruthy();
+  });
+
+  it("shows the label and error", () => {
+    const result = renderWithProviders(
+      <ToggleGroupField
+        label="Align"
+        type="single"
+        value="left"
+        options={options}
+        error="pick a side"
+        onChange={() => {}}
+      />,
+    );
+    expect(result.container.textContent).toContain("Align");
+    expect(result.container.textContent).toContain("pick a side");
+  });
+});
+
+describe("registry resolution (Toggle Group fieldtype)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'Toggle Group' to ToggleGroupField and splits df.options on newlines", () => {
+    const Component = getFieldComponent("Toggle Group")!;
+    const element = (Component as Function)(
+      propsFor({
+        value: "Left",
+        label: "Align",
+        fieldMeta: { options: "Left\nCenter" },
+      } as Partial<FieldRenderProps>),
+    ) as React.ReactElement<Record<string, unknown>>;
+    expect(element.type).toBe(ToggleGroupField);
+    expect(element.props.value).toBe("Left");
+    expect(element.props.label).toBe("Align");
+    expect(element.props.options).toEqual([
+      { label: "Left", value: "Left" },
+      { label: "Center", value: "Center" },
+    ]);
+  });
+});