Add file input test

MetaMask · Feb 7, 2025 · 305a552 · 305a552
1 parent 3ed45d9
commit 305a552
Show file tree

Hide file tree

Showing 2 changed files with 207 additions and 2 deletions.
diff --git a/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap b/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap
@@ -346,6 +346,69 @@ exports[`SnapUIRenderer supports container backgrounds 1`] = `
 </div>
 `;
 
+exports[`SnapUIRenderer supports file inputs 1`] = `
+<div>
+  <div
+    class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
+    style="overflow-y: auto; margin-bottom: 0px;"
+  >
+    <div
+      class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
+    >
+      <div
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+      >
+        <form
+          class="mm-box snap-ui-renderer__form mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
+          id="form"
+        >
+          <div
+            class="mm-box snap-ui-renderer__file-input snap-ui-renderer__field mm-box--display-flex mm-box--flex-direction-column"
+          >
+            <label
+              class="mm-box mm-text mm-label mm-label--html-for mm-form-text-field__label mm-text--body-md mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
+              for="input"
+            >
+              My Input
+            </label>
+            <input
+              hidden=""
+              id="input"
+              name="input"
+              type="file"
+            />
+            <div
+              class="mm-box snap-ui-renderer__file-input__drop-zone mm-box--padding-top-5 mm-box--padding-bottom-5 mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center mm-box--text-align-center mm-box--rounded-md mm-box--border-style-solid mm-box--border-color-border-muted mm-box--border-width-1"
+            >
+              <span
+                class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-alternative"
+                style="mask-image: url('./images/icons/upload.svg');"
+              />
+              <p
+                class="mm-box mm-text mm-text--body-md mm-box--color-icon-alternative"
+              >
+                Drop your file here
+              </p>
+            </div>
+          </div>
+          <button
+            class="mm-box mm-text snap-ui-renderer__button mm-text--body-md mm-text--font-weight-medium mm-box--color-info-default"
+            id="submit"
+            type="submit"
+          >
+            Submit
+          </button>
+        </form>
+      </div>
+    </div>
+    <span
+      data-renders="1"
+      data-testid="performance"
+    />
+  </div>
+</div>
+`;
+
 exports[`SnapUIRenderer supports forms 1`] = `
 <div>
   <div

diff --git a/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.test.js b/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.test.js
@@ -9,8 +9,10 @@ import {
   Form,
   Field,
   Checkbox,
+  FileInput,
 } from '@metamask/snaps-sdk/jsx';
 import { fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { renderWithProvider } from '../../../../../test/lib/render-helpers';
 import mockState from '../../../../../test/data/mock-state.json';
 import * as backgroundConnection from '../../../../store/background-connection';
@@ -363,7 +365,10 @@ describe('SnapUIRenderer', () => {
           name: 'form',
           children: [
             Field({ label: 'My Input', children: Input({ name: 'input' }) }),
-            Field({ label: 'Checkbox', children: Checkbox({ name: 'checkbox' }) }),
+            Field({
+              label: 'Checkbox',
+              children: Checkbox({ name: 'checkbox' }),
+            }),
             Button({ type: 'submit', name: 'submit', children: 'Submit' }),
           ],
         }),
@@ -421,7 +426,11 @@ describe('SnapUIRenderer', () => {
             method: ' ',
             params: {
               context: null,
-              event: { name: 'checkbox', type: 'InputChangeEvent', value: true },
+              event: {
+                name: 'checkbox',
+                type: 'InputChangeEvent',
+                value: true,
+              },
               id: MOCK_INTERFACE_ID,
             },
           },
@@ -548,4 +557,137 @@ describe('SnapUIRenderer', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  it('supports file inputs', async () => {
+    const { container, getByRole } = renderInterface(
+      Box({
+        children: Form({
+          name: 'form',
+          children: [
+            Field({
+              label: 'My Input',
+              children: FileInput({ name: 'input' }),
+            }),
+            Button({ type: 'submit', name: 'submit', children: 'Submit' }),
+          ],
+        }),
+      }),
+    );
+
+    const file = new File(['foo'], 'foo.svg', { type: 'image/svg' });
+
+    // JSDOM doesn't support array buffer so we overwrite it
+    file.arrayBuffer = async () => {
+      return new Uint8Array([102, 111, 111]);
+    };
+
+    const input = container.querySelector('#input');
+    await userEvent.upload(input, file);
+
+    expect(submitRequestToBackground).toHaveBeenNthCalledWith(
+      1,
+      'updateInterfaceState',
+      [
+        MOCK_INTERFACE_ID,
+        {
+          form: {
+            input: {
+              contentType: 'image/svg',
+              contents: 'Zm9v',
+              name: 'foo.svg',
+              size: 3,
+            },
+          },
+        },
+      ],
+    );
+
+    expect(submitRequestToBackground).toHaveBeenNthCalledWith(
+      2,
+      'handleSnapRequest',
+      [
+        {
+          handler: 'onUserInput',
+          origin: '',
+          request: {
+            jsonrpc: '2.0',
+            method: ' ',
+            params: {
+              context: null,
+              event: {
+                name: 'input',
+                type: 'FileUploadEvent',
+                file: {
+                  contentType: 'image/svg',
+                  contents: 'Zm9v',
+                  name: 'foo.svg',
+                  size: 3,
+                },
+              },
+              id: MOCK_INTERFACE_ID,
+            },
+          },
+          snapId: MOCK_SNAP_ID,
+        },
+      ],
+    );
+
+    const button = getByRole('button');
+    fireEvent.click(button);
+
+    expect(submitRequestToBackground).toHaveBeenNthCalledWith(
+      5,
+      'handleSnapRequest',
+      [
+        {
+          handler: 'onUserInput',
+          origin: '',
+          request: {
+            jsonrpc: '2.0',
+            method: ' ',
+            params: {
+              context: null,
+              event: { name: 'submit', type: 'ButtonClickEvent' },
+              id: MOCK_INTERFACE_ID,
+            },
+          },
+          snapId: MOCK_SNAP_ID,
+        },
+      ],
+    );
+
+    expect(submitRequestToBackground).toHaveBeenNthCalledWith(
+      6,
+      'handleSnapRequest',
+      [
+        {
+          handler: 'onUserInput',
+          origin: '',
+          request: {
+            jsonrpc: '2.0',
+            method: ' ',
+            params: {
+              context: null,
+              event: {
+                name: 'form',
+                type: 'FormSubmitEvent',
+                value: {
+                  input: {
+                    contentType: 'image/svg',
+                    contents: 'Zm9v',
+                    name: 'foo.svg',
+                    size: 3,
+                  },
+                },
+              },
+              id: MOCK_INTERFACE_ID,
+            },
+          },
+          snapId: MOCK_SNAP_ID,
+        },
+      ],
+    );
+
+    expect(container).toMatchSnapshot();
+  });
 });