cx 26.3.9 → 26.4.0

package/src/jsx-runtime.spec.tsx

@@ -1,508 +1,508 @@
-import assert from "assert";
-import { Button } from "./widgets/Button";
-import { Widget, WidgetConfig } from "./ui/Widget";
-import { StringProp, NumberProp, BooleanProp } from "./core";
-
-// Minimal mock implementations to avoid side effects from importing real widgets
-
-interface TextFieldConfig extends WidgetConfig {
-   value?: StringProp;
-   placeholder?: StringProp;
-   disabled?: BooleanProp;
-   readOnly?: BooleanProp;
-   required?: BooleanProp;
-   minLength?: NumberProp;
-   maxLength?: NumberProp;
-   validationErrorText?: StringProp;
-}
-
-class TextField extends Widget<TextFieldConfig> {}
-
-interface NumberFieldConfig extends WidgetConfig {
-   value?: NumberProp;
-   placeholder?: StringProp;
-   minValue?: NumberProp;
-   maxValue?: NumberProp;
-   format?: StringProp;
-   disabled?: BooleanProp;
-   increment?: NumberProp;
-}
-
-class NumberField extends Widget<NumberFieldConfig> {}
-import { Checkbox } from "./widgets/form/Checkbox";
-import { bind } from "./ui/bind";
-import { expr } from "./ui/expr";
-import { createFunctionalComponent } from "./ui/createFunctionalComponent";
-
-interface SandboxConfig extends WidgetConfig {
-   key: StringProp;
-}
-
-class Sandbox extends Widget<SandboxConfig> {}
-
-/**
- * These tests verify that widget props are correctly typed in JSX.
- * Negative tests use @ts-expect-error to verify that incorrect types are rejected.
- */
-
-describe("jsx-runtime type inference", () => {
-   describe("TextField", () => {
-      it("accepts correct prop types", () => {
-         const widget = (
-            <cx>
-               <TextField
-                  value={bind("text")}
-                  placeholder="Enter text"
-                  disabled={false}
-                  readOnly={true}
-                  required={false}
-                  minLength={5}
-                  maxLength={100}
-               />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("accepts binding for string props", () => {
-         const widget = (
-            <cx>
-               <TextField placeholder={bind("placeholder")} validationErrorText={bind("errorText")} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("accepts expressions for boolean props", () => {
-         const widget = (
-            <cx>
-               <TextField disabled={expr("{loading}")} readOnly={expr("{!editable}")} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects number for placeholder (expects string)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - placeholder should be StringProp, not a number */}
-               <TextField placeholder={123} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects string for minLength (expects number)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - minLength should be NumberProp, not a string */}
-               <TextField minLength="five" />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects string for maxLength (expects number)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - maxLength should be NumberProp, not a string */}
-               <TextField maxLength="100" />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects number for disabled (expects boolean)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - disabled should be BooleanProp, not a number */}
-               <TextField disabled={1} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects string for readOnly (expects boolean)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - readOnly should be BooleanProp, not a string */}
-               <TextField readOnly="true" />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects non-existent properties", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - nonExistentProp does not exist on TextFieldConfig */}
-               <TextField nonExistentProp="value" />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-   });
-
-   describe("NumberField", () => {
-      it("accepts correct prop types", () => {
-         const widget = (
-            <cx>
-               <NumberField
-                  value={bind("amount")}
-                  placeholder="Enter amount"
-                  minValue={0}
-                  maxValue={1000}
-                  format="currency"
-                  disabled={false}
-               />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("accepts bindings for number props", () => {
-         const widget = (
-            <cx>
-               <NumberField minValue={bind("minVal")} maxValue={bind("maxVal")} increment={bind("step")} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects string for value (expects number)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - value should be NumberProp, not a literal string */}
-               <NumberField value="100" />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects string for minValue (expects number)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - minValue should be NumberProp, not a string */}
-               <NumberField minValue="zero" />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects string for maxValue (expects number)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - maxValue should be NumberProp, not a string */}
-               <NumberField maxValue="one thousand" />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects boolean for increment (expects number)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - increment should be NumberProp, not a boolean */}
-               <NumberField increment={true} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects number for format (expects string)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - format should be StringProp, not a number */}
-               <NumberField format={123} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-   });
-
-   describe("Button", () => {
-      it("accepts correct prop types", () => {
-         const widget = (
-            <cx>
-               <Button text="Click me" disabled={false} pressed={true} icon="search" />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("accepts bindings for boolean props", () => {
-         const widget = (
-            <cx>
-               <Button disabled={bind("isLoading")} pressed={bind("isPressed")} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("accepts expressions for enabled prop", () => {
-         const widget = (
-            <cx>
-               <Button enabled={expr("!{isLoading}")} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects string for disabled (expects boolean)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - disabled should be BooleanProp, not a string */}
-               <Button disabled="true" />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects number for pressed (expects boolean)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - pressed should be BooleanProp, not a number */}
-               <Button pressed={1} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects number for icon (expects string)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - icon should be StringProp, not a number */}
-               <Button icon={42} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects invalid type value", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - type should be "submit" | "button", not "reset" */}
-               <Button type="reset" />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-   });
-
-   describe("Checkbox", () => {
-      it("accepts correct prop types", () => {
-         const widget = (
-            <cx>
-               <Checkbox value={bind("checked")} text="Accept terms" disabled={false} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects string for value (expects boolean)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - value should be BooleanProp, not a string */}
-               <Checkbox value="checked" />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects number for disabled (expects boolean)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - disabled should be BooleanProp, not a number */}
-               <Checkbox disabled={0} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-   });
-
-   describe("HtmlElement intrinsic elements", () => {
-      it("accepts correct prop types for div", () => {
-         const widget = (
-            <cx>
-               <div text="Hello" visible={true} class="container" style="padding: 10px" />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("accepts bindings for text prop", () => {
-         const widget = (
-            <cx>
-               <div text={bind("message")} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("accepts expressions for visible prop", () => {
-         const widget = (
-            <cx>
-               <div visible={expr("{showDiv}")} text="Conditional" />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects boolean for text (expects string or number)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - text should be StringProp | NumberProp, not a boolean */}
-               <div text={false} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects string for visible (expects boolean)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - visible should be BooleanProp, not a string */}
-               <div visible="true" />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-   });
-
-   describe("Required props", () => {
-      interface RequiredPropsConfig {
-         title: string;
-         count: number;
-         optional?: boolean;
-      }
-
-      const ComponentWithRequiredProps = createFunctionalComponent<RequiredPropsConfig>(
-         ({ title, count, optional }) => (
-            <cx>
-               <div text={title} />
-               <div text={String(count)} />
-               {optional && <div text="optional shown" />}
-            </cx>
-         ),
-      );
-
-      it("accepts all required props provided", () => {
-         const widget = (
-            <cx>
-               <ComponentWithRequiredProps title="Hello" count={42} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("accepts required props with optional prop", () => {
-         const widget = (
-            <cx>
-               <ComponentWithRequiredProps title="Hello" count={42} optional={true} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects missing required prop (title)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - title is required but missing */}
-               <ComponentWithRequiredProps count={42} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects missing required prop (count)", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - count is required but missing */}
-               <ComponentWithRequiredProps title="Hello" />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-
-      it("rejects missing all required props", () => {
-         const widget = (
-            <cx>
-               {/* @ts-expect-error - title and count are required but missing */}
-               <ComponentWithRequiredProps optional={true} />
-            </cx>
-         );
-         assert.ok(widget);
-      });
-   });
-
-   describe("key prop", () => {
-      it("accepts key prop on widgets", () => {
-         const widget = (
-            <cx>
-               <Sandbox key={bind("field1")} />
-            </cx>
-         );
-         assert.ok(widget);
-         assert.deepEqual(widget.key, { bind: "field1", defaultValue: undefined });
-      });
-
-      it("accepts key prop on intrinsic elements", () => {
-         const widget = (
-            <cx>
-               <div key="div1" text="Hello" />
-            </cx>
-         );
-         assert.ok(widget);
-         assert.equal(widget.key, "div1");
-      });
-
-      it("includes key in jsxAttributes", () => {
-         const widget = (
-            <cx>
-               <div key="div1" text="Hello" />
-            </cx>
-         );
-         assert.ok(widget.jsxAttributes.includes("key"));
-      });
-   });
-
-   describe("Fragment", () => {
-      it("returns single child directly", () => {
-         const widget = (
-            <cx>
-               <>
-                  <div text="Hello" />
-               </>
-            </cx>
-         );
-         assert.ok(widget);
-         assert.equal(widget.$type.name, "HtmlElement");
-      });
-
-      it("returns array of children", () => {
-         const widget = (
-            <cx>
-               <>
-                  <div text="Hello" />
-                  <div text="World" />
-               </>
-            </cx>
-         );
-         assert.ok(Array.isArray(widget));
-         assert.equal(widget.length, 2);
-      });
-
-      it("works with widgets inside fragment", () => {
-         const widget = (
-            <cx>
-               <>
-                  <Button text="Click" />
-                  <TextField value={bind("name")} />
-               </>
-            </cx>
-         );
-         assert.ok(Array.isArray(widget));
-         assert.equal(widget.length, 2);
-      });
-   });
-});
+import assert from "assert";
+import { Button } from "./widgets/Button";
+import { Widget, WidgetConfig } from "./ui/Widget";
+import { StringProp, NumberProp, BooleanProp } from "./core";
+
+// Minimal mock implementations to avoid side effects from importing real widgets
+
+interface TextFieldConfig extends WidgetConfig {
+   value?: StringProp;
+   placeholder?: StringProp;
+   disabled?: BooleanProp;
+   readOnly?: BooleanProp;
+   required?: BooleanProp;
+   minLength?: NumberProp;
+   maxLength?: NumberProp;
+   validationErrorText?: StringProp;
+}
+
+class TextField extends Widget<TextFieldConfig> {}
+
+interface NumberFieldConfig extends WidgetConfig {
+   value?: NumberProp;
+   placeholder?: StringProp;
+   minValue?: NumberProp;
+   maxValue?: NumberProp;
+   format?: StringProp;
+   disabled?: BooleanProp;
+   increment?: NumberProp;
+}
+
+class NumberField extends Widget<NumberFieldConfig> {}
+import { Checkbox } from "./widgets/form/Checkbox";
+import { bind } from "./ui/bind";
+import { expr } from "./ui/expr";
+import { createFunctionalComponent } from "./ui/createFunctionalComponent";
+
+interface SandboxConfig extends WidgetConfig {
+   key: StringProp;
+}
+
+class Sandbox extends Widget<SandboxConfig> {}
+
+/**
+ * These tests verify that widget props are correctly typed in JSX.
+ * Negative tests use @ts-expect-error to verify that incorrect types are rejected.
+ */
+
+describe("jsx-runtime type inference", () => {
+   describe("TextField", () => {
+      it("accepts correct prop types", () => {
+         const widget = (
+            <cx>
+               <TextField
+                  value={bind("text")}
+                  placeholder="Enter text"
+                  disabled={false}
+                  readOnly={true}
+                  required={false}
+                  minLength={5}
+                  maxLength={100}
+               />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts binding for string props", () => {
+         const widget = (
+            <cx>
+               <TextField placeholder={bind("placeholder")} validationErrorText={bind("errorText")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts expressions for boolean props", () => {
+         const widget = (
+            <cx>
+               <TextField disabled={expr("{loading}")} readOnly={expr("{!editable}")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for placeholder (expects string)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - placeholder should be StringProp, not a number */}
+               <TextField placeholder={123} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for minLength (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - minLength should be NumberProp, not a string */}
+               <TextField minLength="five" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for maxLength (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - maxLength should be NumberProp, not a string */}
+               <TextField maxLength="100" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for disabled (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - disabled should be BooleanProp, not a number */}
+               <TextField disabled={1} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for readOnly (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - readOnly should be BooleanProp, not a string */}
+               <TextField readOnly="true" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects non-existent properties", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - nonExistentProp does not exist on TextFieldConfig */}
+               <TextField nonExistentProp="value" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+
+   describe("NumberField", () => {
+      it("accepts correct prop types", () => {
+         const widget = (
+            <cx>
+               <NumberField
+                  value={bind("amount")}
+                  placeholder="Enter amount"
+                  minValue={0}
+                  maxValue={1000}
+                  format="currency"
+                  disabled={false}
+               />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts bindings for number props", () => {
+         const widget = (
+            <cx>
+               <NumberField minValue={bind("minVal")} maxValue={bind("maxVal")} increment={bind("step")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for value (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - value should be NumberProp, not a literal string */}
+               <NumberField value="100" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for minValue (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - minValue should be NumberProp, not a string */}
+               <NumberField minValue="zero" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for maxValue (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - maxValue should be NumberProp, not a string */}
+               <NumberField maxValue="one thousand" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects boolean for increment (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - increment should be NumberProp, not a boolean */}
+               <NumberField increment={true} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for format (expects string)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - format should be StringProp, not a number */}
+               <NumberField format={123} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+
+   describe("Button", () => {
+      it("accepts correct prop types", () => {
+         const widget = (
+            <cx>
+               <Button text="Click me" disabled={false} pressed={true} icon="search" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts bindings for boolean props", () => {
+         const widget = (
+            <cx>
+               <Button disabled={bind("isLoading")} pressed={bind("isPressed")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts expressions for enabled prop", () => {
+         const widget = (
+            <cx>
+               <Button enabled={expr("!{isLoading}")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for disabled (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - disabled should be BooleanProp, not a string */}
+               <Button disabled="true" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for pressed (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - pressed should be BooleanProp, not a number */}
+               <Button pressed={1} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for icon (expects string)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - icon should be StringProp, not a number */}
+               <Button icon={42} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects invalid type value", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - type should be "submit" | "button", not "reset" */}
+               <Button type="reset" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+
+   describe("Checkbox", () => {
+      it("accepts correct prop types", () => {
+         const widget = (
+            <cx>
+               <Checkbox value={bind("checked")} text="Accept terms" disabled={false} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for value (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - value should be BooleanProp, not a string */}
+               <Checkbox value="checked" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for disabled (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - disabled should be BooleanProp, not a number */}
+               <Checkbox disabled={0} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+
+   describe("HtmlElement intrinsic elements", () => {
+      it("accepts correct prop types for div", () => {
+         const widget = (
+            <cx>
+               <div text="Hello" visible={true} class="container" style="padding: 10px" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts bindings for text prop", () => {
+         const widget = (
+            <cx>
+               <div text={bind("message")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts expressions for visible prop", () => {
+         const widget = (
+            <cx>
+               <div visible={expr("{showDiv}")} text="Conditional" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects boolean for text (expects string or number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - text should be StringProp | NumberProp, not a boolean */}
+               <div text={false} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for visible (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - visible should be BooleanProp, not a string */}
+               <div visible="true" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+
+   describe("Required props", () => {
+      interface RequiredPropsConfig {
+         title: string;
+         count: number;
+         optional?: boolean;
+      }
+
+      const ComponentWithRequiredProps = createFunctionalComponent<RequiredPropsConfig>(
+         ({ title, count, optional }) => (
+            <cx>
+               <div text={title} />
+               <div text={String(count)} />
+               {optional && <div text="optional shown" />}
+            </cx>
+         ),
+      );
+
+      it("accepts all required props provided", () => {
+         const widget = (
+            <cx>
+               <ComponentWithRequiredProps title="Hello" count={42} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts required props with optional prop", () => {
+         const widget = (
+            <cx>
+               <ComponentWithRequiredProps title="Hello" count={42} optional={true} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects missing required prop (title)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - title is required but missing */}
+               <ComponentWithRequiredProps count={42} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects missing required prop (count)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - count is required but missing */}
+               <ComponentWithRequiredProps title="Hello" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects missing all required props", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - title and count are required but missing */}
+               <ComponentWithRequiredProps optional={true} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+
+   describe("key prop", () => {
+      it("accepts key prop on widgets", () => {
+         const widget = (
+            <cx>
+               <Sandbox key={bind("field1")} />
+            </cx>
+         );
+         assert.ok(widget);
+         assert.deepEqual(widget.key, { bind: "field1", defaultValue: undefined });
+      });
+
+      it("accepts key prop on intrinsic elements", () => {
+         const widget = (
+            <cx>
+               <div key="div1" text="Hello" />
+            </cx>
+         );
+         assert.ok(widget);
+         assert.equal(widget.key, "div1");
+      });
+
+      it("includes key in jsxAttributes", () => {
+         const widget = (
+            <cx>
+               <div key="div1" text="Hello" />
+            </cx>
+         );
+         assert.ok(widget.jsxAttributes.includes("key"));
+      });
+   });
+
+   describe("Fragment", () => {
+      it("returns single child directly", () => {
+         const widget = (
+            <cx>
+               <>
+                  <div text="Hello" />
+               </>
+            </cx>
+         );
+         assert.ok(widget);
+         assert.equal(widget.$type.name, "HtmlElement");
+      });
+
+      it("returns array of children", () => {
+         const widget = (
+            <cx>
+               <>
+                  <div text="Hello" />
+                  <div text="World" />
+               </>
+            </cx>
+         );
+         assert.ok(Array.isArray(widget));
+         assert.equal(widget.length, 2);
+      });
+
+      it("works with widgets inside fragment", () => {
+         const widget = (
+            <cx>
+               <>
+                  <Button text="Click" />
+                  <TextField value={bind("name")} />
+               </>
+            </cx>
+         );
+         assert.ok(Array.isArray(widget));
+         assert.equal(widget.length, 2);
+      });
+   });
+});