cx 26.3.9 → 26.4.0

package/src/ui/createFunctionalComponent.spec.tsx

@@ -1,605 +1,605 @@
-import { Store } from "../data/Store";
-import { createFunctionalComponent } from "./createFunctionalComponent";
-import { bind } from "./bind";
-import { expr } from "./expr";
-import { createTestRenderer, act } from "../util/test/createTestRenderer";
-
-import assert from "assert";
-import { Rescope } from "./Rescope";
-import { LabelsLeftLayout } from "./layout/LabelsLeftLayout";
-import { LabeledContainer } from "../widgets/form/LabeledContainer";
-import { Repeater } from "./Repeater";
-import { FirstVisibleChildLayout } from "./layout/FirstVisibleChildLayout";
-import { useStoreMethods } from "../hooks";
-import { AccessorChain, createAccessorModelProxy } from "../data/createAccessorModelProxy";
-
-describe("createFunctionalComponent generic type safety", () => {
-  interface User {
-    id: number;
-    name: string;
-  }
-
-  interface GenericListProps<T> {
-    items: AccessorChain<T[]>;
-    onSelect?: (item: T) => void;
-  }
-
-  const GenericList = createFunctionalComponent(
-    <T,>({ items, onSelect }: GenericListProps<T>) => (
-      <cx>
-        <div />
-      </cx>
-    )
-  );
-
-  it("infers generic type parameter from AccessorChain", () => {
-    let model = createAccessorModelProxy<{ users: User[] }>();
-
-    const widget = (
-      <cx>
-        <GenericList
-          items={model.users}
-          onSelect={(user) => {
-            // user should be inferred as User
-            const id: number = user.id;
-            const name: string = user.name;
-            // @ts-expect-error - nonExistent does not exist on User
-            const x = user.nonExistent;
-          }}
-        />
-      </cx>
-    );
-    assert.ok(widget);
-  });
-
-  it("accepts PureContainerConfig props like visible", () => {
-    let model = createAccessorModelProxy<{ users: User[] }>();
-
-    const widget = (
-      <cx>
-        <GenericList
-          items={model.users}
-          visible={true}
-        />
-      </cx>
-    );
-    assert.ok(widget);
-  });
-});
-
-describe("createFunctionalComponent type safety", () => {
-  interface MyComponentProps {
-    title: string;
-    count: number;
-    optional?: boolean;
-  }
-
-  const TypedComponent = createFunctionalComponent<MyComponentProps>(
-    ({ title, count, optional }) => (
-      <cx>
-        <div text={title} />
-        <div text={String(count)} />
-        {optional && <div text="optional shown" />}
-      </cx>
-    )
-  );
-
-  it("rejects non-existing properties", () => {
-    const widget = (
-      <cx>
-        <TypedComponent
-          title="Test"
-          count={5}
-          // @ts-expect-error - nonExisting does not exist on MyComponentProps
-          nonExisting="invalid"
-        />
-      </cx>
-    );
-    assert.ok(widget);
-  });
-
-  it("rejects wrong property type", () => {
-    const widget = (
-      <cx>
-        <TypedComponent
-          title="Test"
-          // @ts-expect-error - count should be number, not string
-          count="wrong"
-        />
-      </cx>
-    );
-    assert.ok(widget);
-  });
-
-  it("rejects missing required properties", () => {
-    const widget = (
-      <cx>
-        {/* @ts-expect-error - count is required but missing */}
-        <TypedComponent title="Test" />
-      </cx>
-    );
-    assert.ok(widget);
-  });
-});
-
-describe("createFunctionalComponent", () => {
-  it("allows spread", async () => {
-    const SuperDiv = createFunctionalComponent(({ ...props }) => {
-      return (
-        <cx>
-          <div {...props} />
-        </cx>
-      );
-    });
-
-    let props = {
-      text: "Spread",
-      style: "background: red;",
-    };
-
-    const widget = (
-      <cx>
-        <SuperDiv {...props} class="test" />
-      </cx>
-    );
-
-    let store = new Store();
-
-    const component = await createTestRenderer(store, widget);
-
-    let tree = component.toJSON();
-    assert.deepEqual(tree, {
-      type: "div",
-      children: ["Spread"],
-      props: {
-        className: "test",
-        style: {
-          background: "red",
-        },
-      },
-    });
-  });
-
-  it("visible and Rescope behave as expected", async () => {
-    const RootRescope = createFunctionalComponent(({}) => {
-      return (
-        <cx>
-          <Rescope bind="x">
-            <div text={bind("y")} />
-          </Rescope>
-        </cx>
-      );
-    });
-
-    const widget = (
-      <cx>
-        <RootRescope visible={expr("!!{x}")} />
-      </cx>
-    );
-
-    let store = new Store({
-      data: {
-        x: {
-          y: "OK",
-        },
-      },
-    });
-
-    const component = await createTestRenderer(store, widget);
-
-    let tree = component.toJSON();
-    assert.deepEqual(tree, {
-      type: "div",
-      children: ["OK"],
-      props: {},
-    });
-  });
-
-  it("visible and multiple items behave as expected", async () => {
-    const FComponent = createFunctionalComponent(({}) => {
-      return (
-        <cx>
-          <div>1</div>
-          <div visible={false}>2</div>
-          <div>3</div>
-        </cx>
-      );
-    });
-
-    const widget = (
-      <cx>
-        <FComponent />
-      </cx>
-    );
-
-    let store = new Store();
-
-    const component = await createTestRenderer(store, widget);
-
-    let tree = component.toJSON();
-    assert.deepEqual(tree, [
-      {
-        type: "div",
-        children: ["1"],
-        props: {},
-      },
-      {
-        type: "div",
-        children: ["3"],
-        props: {},
-      },
-    ]);
-  });
-
-  it("respects inner layouts", async () => {
-    const FComponent = createFunctionalComponent(({}) => {
-      return (
-        <cx>
-          <LabeledContainer label="Test" />
-          <LabeledContainer label="Test" />
-        </cx>
-      );
-    });
-
-    const widget = (
-      <cx>
-        <div layout={LabelsLeftLayout}>
-          <FComponent />
-        </div>
-      </cx>
-    );
-
-    let store = new Store();
-
-    const component = await createTestRenderer(store, widget);
-
-    let tree = component.toJSON();
-
-    assert.deepEqual(tree, {
-      type: "div",
-      props: {},
-      children: [
-        {
-          type: "table",
-          props: {
-            className: "cxb-labelsleftlayout",
-            style: undefined,
-          },
-          children: [
-            {
-              type: "tbody",
-              props: {},
-              children: [
-                {
-                  type: "tr",
-                  props: {},
-                  children: [
-                    {
-                      type: "td",
-                      props: {
-                        className: "cxe-labelsleftlayout-label",
-                        style: undefined,
-                      },
-                      children: [
-                        {
-                          type: "label",
-                          props: {
-                            className: "cxb-label",
-                          },
-                          children: ["Test"],
-                        },
-                      ],
-                    },
-                    {
-                      type: "td",
-                      props: {
-                        className: "cxe-labelsleftlayout-field",
-                      },
-                      children: null,
-                    },
-                  ],
-                },
-                {
-                  type: "tr",
-                  props: {},
-                  children: [
-                    {
-                      type: "td",
-                      props: {
-                        className: "cxe-labelsleftlayout-label",
-                        style: undefined,
-                      },
-                      children: [
-                        {
-                          type: "label",
-                          props: {
-                            className: "cxb-label",
-                          },
-                          children: ["Test"],
-                        },
-                      ],
-                    },
-                    {
-                      type: "td",
-                      props: {
-                        className: "cxe-labelsleftlayout-field",
-                      },
-                      children: null,
-                    },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    });
-  });
-
-  it("can use refs for data bindings", async () => {
-    const X = createFunctionalComponent(({}) => {
-      let { ref } = useStoreMethods();
-      let x = ref("x", "OK");
-      return (
-        <cx>
-          <div text={x} />
-        </cx>
-      );
-    });
-
-    const widget = (
-      <cx>
-        <X visible={true} />
-      </cx>
-    );
-
-    let store = new Store();
-
-    const component = await createTestRenderer(store, widget);
-
-    let tree = component.toJSON();
-    assert.deepEqual(tree, {
-      type: "div",
-      children: ["OK"],
-      props: {},
-    });
-  });
-
-  it("adds children at the right place", async () => {
-    const X = createFunctionalComponent(({ children }: { children: any }) => (
-      <cx>
-        <header />
-        <main>{children}</main>
-        <footer />
-      </cx>
-    ));
-
-    const widget = (
-      <cx>
-        <X>
-          <div />
-        </X>
-      </cx>
-    );
-
-    let store = new Store();
-
-    const component = await createTestRenderer(store, widget);
-
-    let tree = component.toJSON();
-
-    assert.deepEqual(tree, [
-      {
-        type: "header",
-        children: null,
-        props: {},
-      },
-      {
-        type: "main",
-        children: [
-          {
-            type: "div",
-            children: null,
-            props: {},
-          },
-        ],
-        props: {},
-      },
-      {
-        type: "footer",
-        children: null,
-        props: {},
-      },
-    ]);
-  });
-
-  it("works well with repeaters", async () => {
-    const X = createFunctionalComponent(({}) => {
-      let { ref } = useStoreMethods();
-      let text = ref("$record.text");
-      return (
-        <cx>
-          <div text={text} />
-        </cx>
-      );
-    });
-
-    const widget = (
-      <cx>
-        <Repeater records={bind("array")}>
-          <X />
-        </Repeater>
-      </cx>
-    );
-
-    let store = new Store({
-      data: { array: [{ text: "0" }, { text: "1" }, { text: "2" }] },
-    });
-
-    const component = await createTestRenderer(store, widget);
-
-    let tree = component.toJSON();
-
-    assert.deepEqual(tree, [
-      {
-        type: "div",
-        children: ["0"],
-        props: {},
-      },
-      {
-        type: "div",
-        children: ["1"],
-        props: {},
-      },
-      {
-        type: "div",
-        children: ["2"],
-        props: {},
-      },
-    ]);
-
-    await act(async () => {
-      store.update("array", (array) => [array[0], { text: "10" }, array[2]]);
-    });
-
-    tree = component.toJSON();
-
-    assert.deepEqual(tree, [
-      {
-        type: "div",
-        children: ["0"],
-        props: {},
-      },
-      {
-        type: "div",
-        children: ["10"],
-        props: {},
-      },
-      {
-        type: "div",
-        children: ["2"],
-        props: {},
-      },
-    ]);
-  });
-
-  it("can have its own layout", async () => {
-    const X = createFunctionalComponent(() => (
-      <cx>
-        <div>1</div>
-        <div>2</div>
-        <div>3</div>
-      </cx>
-    ));
-
-    const widget = (
-      <cx>
-        <X layout={FirstVisibleChildLayout} />
-      </cx>
-    );
-
-    let store = new Store();
-
-    const component = await createTestRenderer(store, widget);
-
-    let tree = component.toJSON();
-
-    assert.deepEqual(tree, {
-      type: "div",
-      children: ["1"],
-      props: {},
-    });
-  });
-
-  it("passes type config property to the factory function", async () => {
-    const CustomInput = createFunctionalComponent(
-      ({ type }: { type?: string }) => (
-        <cx>
-          <input type={type || "text"} />
-        </cx>
-      )
-    );
-
-    const widget = (
-      <cx>
-        <CustomInput type="password" />
-      </cx>
-    );
-
-    let store = new Store();
-
-    const component = await createTestRenderer(store, widget);
-
-    let tree = component.toJSON();
-    assert.deepEqual(tree, {
-      type: "input",
-      children: null,
-      props: {
-        type: "password",
-      },
-    });
-  });
-
-  it("passes type config property with other props", async () => {
-    interface ButtonProps {
-      type?: "button" | "submit";
-      label: string;
-    }
-
-    const CustomButton = createFunctionalComponent(
-      ({ type, label }: ButtonProps) => (
-        <cx>
-          <button type={type || "button"}>{label}</button>
-        </cx>
-      )
-    );
-
-    const widget = (
-      <cx>
-        <CustomButton type="submit" label="Submit Form" />
-      </cx>
-    );
-
-    let store = new Store();
-
-    const component = await createTestRenderer(store, widget);
-
-    let tree = component.toJSON();
-    assert.deepEqual(tree, {
-      type: "button",
-      children: ["Submit Form"],
-      props: {
-        type: "submit",
-      },
-    });
-  });
-
-  it("defaults type when not provided", async () => {
-    const CustomInput = createFunctionalComponent(
-      ({ type = "text" }: { type?: string }) => (
-        <cx>
-          <input type={type} />
-        </cx>
-      )
-    );
-
-    const widget = (
-      <cx>
-        <CustomInput />
-      </cx>
-    );
-
-    let store = new Store();
-
-    const component = await createTestRenderer(store, widget);
-
-    let tree = component.toJSON();
-    assert.deepEqual(tree, {
-      type: "input",
-      children: null,
-      props: {
-        type: "text",
-      },
-    });
-  });
-});
+import { Store } from "../data/Store";
+import { createFunctionalComponent } from "./createFunctionalComponent";
+import { bind } from "./bind";
+import { expr } from "./expr";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
+
+import assert from "assert";
+import { Rescope } from "./Rescope";
+import { LabelsLeftLayout } from "./layout/LabelsLeftLayout";
+import { LabeledContainer } from "../widgets/form/LabeledContainer";
+import { Repeater } from "./Repeater";
+import { FirstVisibleChildLayout } from "./layout/FirstVisibleChildLayout";
+import { useStoreMethods } from "../hooks";
+import { AccessorChain, createAccessorModelProxy } from "../data/createAccessorModelProxy";
+
+describe("createFunctionalComponent generic type safety", () => {
+  interface User {
+    id: number;
+    name: string;
+  }
+
+  interface GenericListProps<T> {
+    items: AccessorChain<T[]>;
+    onSelect?: (item: T) => void;
+  }
+
+  const GenericList = createFunctionalComponent(
+    <T,>({ items, onSelect }: GenericListProps<T>) => (
+      <cx>
+        <div />
+      </cx>
+    )
+  );
+
+  it("infers generic type parameter from AccessorChain", () => {
+    let model = createAccessorModelProxy<{ users: User[] }>();
+
+    const widget = (
+      <cx>
+        <GenericList
+          items={model.users}
+          onSelect={(user) => {
+            // user should be inferred as User
+            const id: number = user.id;
+            const name: string = user.name;
+            // @ts-expect-error - nonExistent does not exist on User
+            const x = user.nonExistent;
+          }}
+        />
+      </cx>
+    );
+    assert.ok(widget);
+  });
+
+  it("accepts PureContainerConfig props like visible", () => {
+    let model = createAccessorModelProxy<{ users: User[] }>();
+
+    const widget = (
+      <cx>
+        <GenericList
+          items={model.users}
+          visible={true}
+        />
+      </cx>
+    );
+    assert.ok(widget);
+  });
+});
+
+describe("createFunctionalComponent type safety", () => {
+  interface MyComponentProps {
+    title: string;
+    count: number;
+    optional?: boolean;
+  }
+
+  const TypedComponent = createFunctionalComponent<MyComponentProps>(
+    ({ title, count, optional }) => (
+      <cx>
+        <div text={title} />
+        <div text={String(count)} />
+        {optional && <div text="optional shown" />}
+      </cx>
+    )
+  );
+
+  it("rejects non-existing properties", () => {
+    const widget = (
+      <cx>
+        <TypedComponent
+          title="Test"
+          count={5}
+          // @ts-expect-error - nonExisting does not exist on MyComponentProps
+          nonExisting="invalid"
+        />
+      </cx>
+    );
+    assert.ok(widget);
+  });
+
+  it("rejects wrong property type", () => {
+    const widget = (
+      <cx>
+        <TypedComponent
+          title="Test"
+          // @ts-expect-error - count should be number, not string
+          count="wrong"
+        />
+      </cx>
+    );
+    assert.ok(widget);
+  });
+
+  it("rejects missing required properties", () => {
+    const widget = (
+      <cx>
+        {/* @ts-expect-error - count is required but missing */}
+        <TypedComponent title="Test" />
+      </cx>
+    );
+    assert.ok(widget);
+  });
+});
+
+describe("createFunctionalComponent", () => {
+  it("allows spread", async () => {
+    const SuperDiv = createFunctionalComponent(({ ...props }) => {
+      return (
+        <cx>
+          <div {...props} />
+        </cx>
+      );
+    });
+
+    let props = {
+      text: "Spread",
+      style: "background: red;",
+    };
+
+    const widget = (
+      <cx>
+        <SuperDiv {...props} class="test" />
+      </cx>
+    );
+
+    let store = new Store();
+
+    const component = await createTestRenderer(store, widget);
+
+    let tree = component.toJSON();
+    assert.deepEqual(tree, {
+      type: "div",
+      children: ["Spread"],
+      props: {
+        className: "test",
+        style: {
+          background: "red",
+        },
+      },
+    });
+  });
+
+  it("visible and Rescope behave as expected", async () => {
+    const RootRescope = createFunctionalComponent(({}) => {
+      return (
+        <cx>
+          <Rescope bind="x">
+            <div text={bind("y")} />
+          </Rescope>
+        </cx>
+      );
+    });
+
+    const widget = (
+      <cx>
+        <RootRescope visible={expr("!!{x}")} />
+      </cx>
+    );
+
+    let store = new Store({
+      data: {
+        x: {
+          y: "OK",
+        },
+      },
+    });
+
+    const component = await createTestRenderer(store, widget);
+
+    let tree = component.toJSON();
+    assert.deepEqual(tree, {
+      type: "div",
+      children: ["OK"],
+      props: {},
+    });
+  });
+
+  it("visible and multiple items behave as expected", async () => {
+    const FComponent = createFunctionalComponent(({}) => {
+      return (
+        <cx>
+          <div>1</div>
+          <div visible={false}>2</div>
+          <div>3</div>
+        </cx>
+      );
+    });
+
+    const widget = (
+      <cx>
+        <FComponent />
+      </cx>
+    );
+
+    let store = new Store();
+
+    const component = await createTestRenderer(store, widget);
+
+    let tree = component.toJSON();
+    assert.deepEqual(tree, [
+      {
+        type: "div",
+        children: ["1"],
+        props: {},
+      },
+      {
+        type: "div",
+        children: ["3"],
+        props: {},
+      },
+    ]);
+  });
+
+  it("respects inner layouts", async () => {
+    const FComponent = createFunctionalComponent(({}) => {
+      return (
+        <cx>
+          <LabeledContainer label="Test" />
+          <LabeledContainer label="Test" />
+        </cx>
+      );
+    });
+
+    const widget = (
+      <cx>
+        <div layout={LabelsLeftLayout}>
+          <FComponent />
+        </div>
+      </cx>
+    );
+
+    let store = new Store();
+
+    const component = await createTestRenderer(store, widget);
+
+    let tree = component.toJSON();
+
+    assert.deepEqual(tree, {
+      type: "div",
+      props: {},
+      children: [
+        {
+          type: "table",
+          props: {
+            className: "cxb-labelsleftlayout",
+            style: undefined,
+          },
+          children: [
+            {
+              type: "tbody",
+              props: {},
+              children: [
+                {
+                  type: "tr",
+                  props: {},
+                  children: [
+                    {
+                      type: "td",
+                      props: {
+                        className: "cxe-labelsleftlayout-label",
+                        style: undefined,
+                      },
+                      children: [
+                        {
+                          type: "label",
+                          props: {
+                            className: "cxb-label",
+                          },
+                          children: ["Test"],
+                        },
+                      ],
+                    },
+                    {
+                      type: "td",
+                      props: {
+                        className: "cxe-labelsleftlayout-field",
+                      },
+                      children: null,
+                    },
+                  ],
+                },
+                {
+                  type: "tr",
+                  props: {},
+                  children: [
+                    {
+                      type: "td",
+                      props: {
+                        className: "cxe-labelsleftlayout-label",
+                        style: undefined,
+                      },
+                      children: [
+                        {
+                          type: "label",
+                          props: {
+                            className: "cxb-label",
+                          },
+                          children: ["Test"],
+                        },
+                      ],
+                    },
+                    {
+                      type: "td",
+                      props: {
+                        className: "cxe-labelsleftlayout-field",
+                      },
+                      children: null,
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it("can use refs for data bindings", async () => {
+    const X = createFunctionalComponent(({}) => {
+      let { ref } = useStoreMethods();
+      let x = ref("x", "OK");
+      return (
+        <cx>
+          <div text={x} />
+        </cx>
+      );
+    });
+
+    const widget = (
+      <cx>
+        <X visible={true} />
+      </cx>
+    );
+
+    let store = new Store();
+
+    const component = await createTestRenderer(store, widget);
+
+    let tree = component.toJSON();
+    assert.deepEqual(tree, {
+      type: "div",
+      children: ["OK"],
+      props: {},
+    });
+  });
+
+  it("adds children at the right place", async () => {
+    const X = createFunctionalComponent(({ children }: { children: any }) => (
+      <cx>
+        <header />
+        <main>{children}</main>
+        <footer />
+      </cx>
+    ));
+
+    const widget = (
+      <cx>
+        <X>
+          <div />
+        </X>
+      </cx>
+    );
+
+    let store = new Store();
+
+    const component = await createTestRenderer(store, widget);
+
+    let tree = component.toJSON();
+
+    assert.deepEqual(tree, [
+      {
+        type: "header",
+        children: null,
+        props: {},
+      },
+      {
+        type: "main",
+        children: [
+          {
+            type: "div",
+            children: null,
+            props: {},
+          },
+        ],
+        props: {},
+      },
+      {
+        type: "footer",
+        children: null,
+        props: {},
+      },
+    ]);
+  });
+
+  it("works well with repeaters", async () => {
+    const X = createFunctionalComponent(({}) => {
+      let { ref } = useStoreMethods();
+      let text = ref("$record.text");
+      return (
+        <cx>
+          <div text={text} />
+        </cx>
+      );
+    });
+
+    const widget = (
+      <cx>
+        <Repeater records={bind("array")}>
+          <X />
+        </Repeater>
+      </cx>
+    );
+
+    let store = new Store({
+      data: { array: [{ text: "0" }, { text: "1" }, { text: "2" }] },
+    });
+
+    const component = await createTestRenderer(store, widget);
+
+    let tree = component.toJSON();
+
+    assert.deepEqual(tree, [
+      {
+        type: "div",
+        children: ["0"],
+        props: {},
+      },
+      {
+        type: "div",
+        children: ["1"],
+        props: {},
+      },
+      {
+        type: "div",
+        children: ["2"],
+        props: {},
+      },
+    ]);
+
+    await act(async () => {
+      store.update("array", (array) => [array[0], { text: "10" }, array[2]]);
+    });
+
+    tree = component.toJSON();
+
+    assert.deepEqual(tree, [
+      {
+        type: "div",
+        children: ["0"],
+        props: {},
+      },
+      {
+        type: "div",
+        children: ["10"],
+        props: {},
+      },
+      {
+        type: "div",
+        children: ["2"],
+        props: {},
+      },
+    ]);
+  });
+
+  it("can have its own layout", async () => {
+    const X = createFunctionalComponent(() => (
+      <cx>
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+      </cx>
+    ));
+
+    const widget = (
+      <cx>
+        <X layout={FirstVisibleChildLayout} />
+      </cx>
+    );
+
+    let store = new Store();
+
+    const component = await createTestRenderer(store, widget);
+
+    let tree = component.toJSON();
+
+    assert.deepEqual(tree, {
+      type: "div",
+      children: ["1"],
+      props: {},
+    });
+  });
+
+  it("passes type config property to the factory function", async () => {
+    const CustomInput = createFunctionalComponent(
+      ({ type }: { type?: string }) => (
+        <cx>
+          <input type={type || "text"} />
+        </cx>
+      )
+    );
+
+    const widget = (
+      <cx>
+        <CustomInput type="password" />
+      </cx>
+    );
+
+    let store = new Store();
+
+    const component = await createTestRenderer(store, widget);
+
+    let tree = component.toJSON();
+    assert.deepEqual(tree, {
+      type: "input",
+      children: null,
+      props: {
+        type: "password",
+      },
+    });
+  });
+
+  it("passes type config property with other props", async () => {
+    interface ButtonProps {
+      type?: "button" | "submit";
+      label: string;
+    }
+
+    const CustomButton = createFunctionalComponent(
+      ({ type, label }: ButtonProps) => (
+        <cx>
+          <button type={type || "button"}>{label}</button>
+        </cx>
+      )
+    );
+
+    const widget = (
+      <cx>
+        <CustomButton type="submit" label="Submit Form" />
+      </cx>
+    );
+
+    let store = new Store();
+
+    const component = await createTestRenderer(store, widget);
+
+    let tree = component.toJSON();
+    assert.deepEqual(tree, {
+      type: "button",
+      children: ["Submit Form"],
+      props: {
+        type: "submit",
+      },
+    });
+  });
+
+  it("defaults type when not provided", async () => {
+    const CustomInput = createFunctionalComponent(
+      ({ type = "text" }: { type?: string }) => (
+        <cx>
+          <input type={type} />
+        </cx>
+      )
+    );
+
+    const widget = (
+      <cx>
+        <CustomInput />
+      </cx>
+    );
+
+    let store = new Store();
+
+    const component = await createTestRenderer(store, widget);
+
+    let tree = component.toJSON();
+    assert.deepEqual(tree, {
+      type: "input",
+      children: null,
+      props: {
+        type: "text",
+      },
+    });
+  });
+});