Add support for button form property in snaps-simulation (#2830)

In #2712 we added a `form` property to the button component, but we
didn't add support to `snaps-simulation`/`snaps-jest`. In this PR I've
added some logic to `snaps-simulation` to support this prop, so that
forms are submitted when a button is placed outside a form with this
prop.

packages/snaps-simulation/src/interface.test.tsx

@@ -27,6 +27,7 @@ import {
   SelectorOption,
   Card,
   Selector,
+  Field,
 } from '@metamask/snaps-sdk/jsx';
 import {
   getJsxElementFromComponent,
@@ -446,6 +447,31 @@ describe('getElement', () => {
       form: 'form-2',
     });
   });
+
+  it('gets a button with a form property', () => {
+    const content = (
+      <Box>
+        <Form name="referenced-form">
+          <Field>
+            <Input name="input" />
+          </Field>
+        </Form>
+        <Button name="button" type="submit" form="referenced-form">
+          foo
+        </Button>
+      </Box>
+    );
+    const result = getElement(content, 'button');
+
+    expect(result).toStrictEqual({
+      element: (
+        <Button name="button" type="submit" form="referenced-form">
+          foo
+        </Button>
+      ),
+      form: 'referenced-form',
+    });
+  });
 });
 
 describe('clickElement', () => {
@@ -555,6 +581,71 @@ describe('clickElement', () => {
     });
   });
 
+  it('sends a `FormSubmitEvent` to the Snap for a button with a form property', async () => {
+    const content = (
+      <Box>
+        <Form name="referenced-form">
+          <Field>
+            <Input name="input" />
+          </Field>
+        </Form>
+        <Button name="button" type="submit" form="referenced-form">
+          foo
+        </Button>
+      </Box>
+    );
+
+    const interfaceId = await interfaceController.createInterface(
+      MOCK_SNAP_ID,
+      content,
+    );
+
+    await clickElement(
+      rootControllerMessenger,
+      interfaceId,
+      content,
+      MOCK_SNAP_ID,
+      'button',
+    );
+
+    expect(handleRpcRequestMock).toHaveBeenCalledWith(MOCK_SNAP_ID, {
+      origin: '',
+      handler: HandlerType.OnUserInput,
+      request: {
+        jsonrpc: '2.0',
+        method: ' ',
+        params: {
+          event: {
+            type: UserInputEventType.ButtonClickEvent,
+            name: 'button',
+          },
+          id: interfaceId,
+          context: null,
+        },
+      },
+    });
+
+    expect(handleRpcRequestMock).toHaveBeenCalledWith(MOCK_SNAP_ID, {
+      origin: '',
+      handler: HandlerType.OnUserInput,
+      request: {
+        jsonrpc: '2.0',
+        method: ' ',
+        params: {
+          event: {
+            type: UserInputEventType.FormSubmitEvent,
+            name: 'referenced-form',
+            value: {
+              input: null,
+            },
+          },
+          id: interfaceId,
+          context: null,
+        },
+      },
+    });
+  });
+
   it('supports checkboxes', async () => {
     const content = (
       <Form name="form">

packages/snaps-simulation/src/interface.ts

@@ -228,6 +228,24 @@ function getFormElement(form: FormElement, name: string) {
   return { element, form: form.props.name };
 }
 
+/**
+ * Get an object containing the element, and optional form that's associated
+ * with the element if any.
+ *
+ * @param element - The JSX element.
+ * @returns An object containing the element and optional form.
+ */
+function getElementWithOptionalForm(element: NamedJSXElement): {
+  element: NamedJSXElement;
+  form?: string;
+} {
+  if (element.type !== 'Button' || !element.props.form) {
+    return { element };
+  }
+
+  return { element, form: element.props.form };
+}
+
 /**
  * Get an element from a JSX tree with the given name.
  *
@@ -246,7 +264,7 @@ export function getElement(
     }
   | undefined {
   if (isJSXElementWithName(content, name)) {
-    return { element: content };
+    return getElementWithOptionalForm(content);
   }
 
   return walkJsx(content, (element) => {
@@ -255,7 +273,7 @@ export function getElement(
     }
 
     if (isJSXElementWithName(element, name)) {
-      return { element };
+      return getElementWithOptionalForm(element);
     }
 
     return undefined;