add support for onSettingsPage in snaps-simulation and snaps-jest

Author: GuillaumeRx

packages/examples/packages/settings-page/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "yWcDv7XuV/FGRxKdOMkelR4qB0Ivel7oP9fEuNz0EE8=",
+    "shasum": "Ha9z5pHnxqQOH7GQoWBcj99quZy5eqRMzjxOKCEIIQI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/settings-page/src/index.test.tsx

@@ -1,22 +1,19 @@
 import { describe, it } from '@jest/globals';
 import { installSnap } from '@metamask/snaps-jest';
-import { Box, Text } from '@metamask/snaps-sdk/jsx';
+import { Box, Heading, Text } from '@metamask/snaps-sdk/jsx';
 
-describe('onHomePage', () => {
+describe('onSettingsPage', () => {
   it('returns custom UI', async () => {
-    const { onHomePage } = await installSnap();
+    const { onSettingsPage } = await installSnap();
 
-    const response = await onHomePage();
+    const response = await onSettingsPage();
 
     const screen = response.getInterface();
 
-    await screen.clickElement('footer_button');
-
-    const newUi = response.getInterface();
-
-    expect(newUi).toRender(
+    expect(screen).toRender(
       <Box>
-        <Text>Footer button was pressed</Text>
+        <Heading>Hello world!</Heading>
+        <Text>Welcome to my Snap settings page!</Text>
       </Box>,
     );
   });

packages/examples/packages/settings-page/src/index.tsx

@@ -1,17 +1,5 @@
 import type { OnSettingsPageHandler } from '@metamask/snaps-sdk';
-import {
-  assert,
-  UserInputEventType,
-  type OnUserInputHandler,
-} from '@metamask/snaps-sdk';
-import {
-  Box,
-  Container,
-  Footer,
-  Heading,
-  Text,
-  Button,
-} from '@metamask/snaps-sdk/jsx';
+import { Box, Heading, Text } from '@metamask/snaps-sdk/jsx';
 
 /**
  * Handle incoming settings page requests from the MetaMask clients.
@@ -22,43 +10,10 @@ import {
 export const onSettingsPage: OnSettingsPageHandler = async () => {
   return {
     content: (
-      <Container>
-        <Box>
-          <Heading>Hello world!</Heading>
-          <Text>Welcome to my Snap settings page!</Text>
-        </Box>
-        <Footer>
-          <Button name="footer_button">Footer button</Button>
-        </Footer>
-      </Container>
+      <Box>
+        <Heading>Hello world!</Heading>
+        <Text>Welcome to my Snap settings page!</Text>
+      </Box>
     ),
   };
 };
-
-/**
- * Handle incoming user events coming from the Snap interface.
- *
- * @param params - The event parameters.
- * @param params.id - The Snap interface ID where the event was fired.
- * @param params.event - The event object containing the event type, name and
- * value.
- * @see https://docs.metamask.io/snaps/reference/exports/#onuserinput
- */
-export const onUserInput: OnUserInputHandler = async ({ event, id }) => {
-  // Since this Snap only has one event, we can assert the event type and name
-  // directly.
-  assert(event.type === UserInputEventType.ButtonClickEvent);
-  assert(event.name === 'footer_button');
-
-  await snap.request({
-    method: 'snap_updateInterface',
-    params: {
-      id,
-      ui: (
-        <Box>
-          <Text>Footer button was pressed</Text>
-        </Box>
-      ),
-    },
-  });
-};

packages/snaps-jest/src/helpers.test.tsx

@@ -774,6 +774,32 @@ describe('installSnap', () => {
     });
   });
 
+  describe('getSettingsPage', () => {
+    it('sends a OnSettingsPage request and returns the result', async () => {
+      jest.spyOn(console, 'log').mockImplementation();
+
+      const { snapId, close: closeServer } = await getMockServer({
+        sourceCode: `
+          module.exports.onSettingsPage = async () => {
+            return { content: { type: 'text', value: 'Hello, world!' } };
+          };
+         `,
+      });
+
+      const { onSettingsPage, close } = await installSnap(snapId);
+      const response = await onSettingsPage();
+
+      expect(response).toStrictEqual(
+        expect.objectContaining({
+          getInterface: expect.any(Function),
+        }),
+      );
+
+      await close();
+      await closeServer();
+    });
+  });
+
   describe('onKeyringRequest', () => {
     it('sends a keyring request and returns the result', async () => {
       jest.spyOn(console, 'log').mockImplementation();

packages/snaps-jest/src/helpers.ts

@@ -178,6 +178,7 @@ export async function installSnap<
     onCronjob,
     runCronjob,
     onHomePage,
+    onSettingsPage,
     onKeyringRequest,
     onInstall,
     onUpdate,
@@ -194,6 +195,7 @@ export async function installSnap<
     onCronjob,
     runCronjob,
     onHomePage,
+    onSettingsPage,
     onKeyringRequest,
     onInstall,
     onUpdate,

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

@@ -548,6 +548,32 @@ describe('helpers', () => {
     });
   });
 
+  describe('getSettingsPage', () => {
+    it('sends a OnSettingsPage request and returns the result', async () => {
+      jest.spyOn(console, 'log').mockImplementation();
+
+      const { snapId, close: closeServer } = await getMockServer({
+        sourceCode: `
+          module.exports.onSettingsPage = async () => {
+            return { content: { type: 'text', value: 'Hello, world!' } };
+          };
+         `,
+      });
+
+      const { onSettingsPage, close } = await installSnap(snapId);
+      const response = await onSettingsPage();
+
+      expect(response).toStrictEqual(
+        expect.objectContaining({
+          getInterface: expect.any(Function),
+        }),
+      );
+
+      await close();
+      await closeServer();
+    });
+  });
+
   describe('onKeyringRequest', () => {
     it('sends a keyring request and returns the result', async () => {
       jest.spyOn(console, 'log').mockImplementation();

packages/snaps-simulation/src/helpers.ts

@@ -118,6 +118,13 @@ export type SnapHelpers = {
    */
   onHomePage(): Promise<SnapResponseWithInterface>;
 
+  /**
+   * Get the response from the snap's `onSettingsPage` method.
+   *
+   * @returns The response.
+   */
+  onSettingsPage(): Promise<SnapResponseWithInterface>;
+
   /**
    * Send a keyring request to the Snap.
    *
@@ -402,6 +409,26 @@ export function getHelpers({
       return response;
     },
 
+    onSettingsPage: async (): Promise<SnapResponseWithInterface> => {
+      log('Rendering settings page.');
+
+      const response = await handleRequest({
+        snapId,
+        store,
+        executionService,
+        controllerMessenger,
+        runSaga,
+        handler: HandlerType.OnSettingsPage,
+        request: {
+          method: '',
+        },
+      });
+
+      assertIsResponseWithInterface(response);
+
+      return response;
+    },
+
     mockJsonRpc(mock: JsonRpcMockOptions) {
       log('Mocking JSON-RPC request %o.', mock);
 

packages/snaps-simulation/src/methods/specifications.test.ts

@@ -123,6 +123,15 @@ describe('getPermissionSpecifications', () => {
           ],
           "targetName": "endowment:page-home",
         },
+        "endowment:page-settings": {
+          "allowedCaveats": null,
+          "endowmentGetter": [Function],
+          "permissionType": "Endowment",
+          "subjectTypes": [
+            "snap",
+          ],
+          "targetName": "endowment:page-settings",
+        },
         "endowment:rpc": {
           "allowedCaveats": [
             "rpcOrigin",

packages/snaps-simulation/src/types.ts

@@ -420,6 +420,13 @@ export type Snap = {
    */
   onHomePage(): Promise<SnapResponseWithInterface>;
 
+  /**
+   * Get the response from the snap's `onSettingsPage` method.
+   *
+   * @returns The response.
+   */
+  onSettingsPage(): Promise<SnapResponseWithInterface>;
+
   /**
    * Send a keyring to the Snap.
    *