Expand testing for expanded-view notifications

packages/examples/packages/notifications/snap.config.ts

@@ -1,7 +1,7 @@
 import type { SnapConfig } from '@metamask/snaps-cli';
 
 const config: SnapConfig = {
-  input: './src/index.ts',
+  input: './src/index.tsx',
   server: {
     port: 8016,
   },

packages/examples/packages/notifications/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "BCoBVWLL9kEMS4mzBTMcdS5vPQvj8L9ghKBJLng9mg0=",
+    "shasum": "Eb+BA76BVAepPArIg/rG5eUOOHDm4mbiHE/GzpFOeHo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/notifications/src/index.test.ts → packages/examples/packages/notifications/src/index.test.tsx

@@ -1,6 +1,7 @@
 import { expect } from '@jest/globals';
 import { installSnap } from '@metamask/snaps-jest';
 import { NotificationType } from '@metamask/snaps-sdk';
+import { Address, Box, Row } from '@metamask/snaps-sdk/jsx';
 
 describe('onRpcRequest', () => {
   it('throws an error if the requested method does not exist', async () => {
@@ -38,6 +39,34 @@ describe('onRpcRequest', () => {
     });
   });
 
+  describe('inApp-expanded', () => {
+    it('sends an expanded view notification', async () => {
+      const { request } = await installSnap();
+
+      const response = await request({
+        method: 'inApp-expanded',
+        origin: 'Jest',
+      });
+
+      expect(response).toRespondWith(null);
+      expect(response).toSendNotification(
+        'Hello from MetaMask, click here for an expanded view!',
+        NotificationType.InApp,
+        'Hello World!',
+        <Box>
+          <Row
+            label="From"
+            variant="warning"
+            tooltip="This address has been deemed dangerous."
+          >
+            <Address address="0x1234567890123456789012345678901234567890" />
+          </Row>
+        </Box>,
+        { text: 'Go home', href: 'metamask://client/' },
+      );
+    });
+  });
+
   describe('native', () => {
     it('sends a native notification', async () => {
       const { request } = await installSnap();

packages/examples/packages/notifications/src/index.ts → packages/examples/packages/notifications/src/index.tsx

@@ -1,5 +1,6 @@
 import { MethodNotFoundError, NotificationType } from '@metamask/snaps-sdk';
 import type { OnRpcRequestHandler } from '@metamask/snaps-sdk';
+import { Box, Row, Address } from '@metamask/snaps-sdk/jsx';
 
 /**
  * Handle incoming JSON-RPC requests from the dapp, sent through the
@@ -39,6 +40,28 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
         },
       });
 
+    case 'inApp-expanded':
+      return await snap.request({
+        method: 'snap_notify',
+        params: {
+          type: NotificationType.InApp,
+          message: 'Hello from MetaMask, click here for an expanded view!',
+          title: 'Hello World!',
+          content: (
+            <Box>
+              <Row
+                label="From"
+                variant="warning"
+                tooltip="This address has been deemed dangerous."
+              >
+                <Address address="0x1234567890123456789012345678901234567890" />
+              </Row>
+            </Box>
+          ),
+          footerLink: { text: 'Go home', href: 'metamask://client/' },
+        },
+      });
+
     default:
       // eslint-disable-next-line @typescript-eslint/no-throw-literal
       throw new MethodNotFoundError({ method: request.method });

packages/examples/packages/notifications/tsconfig.json

@@ -1,8 +1,9 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "composite": false,
-    "baseUrl": "./"
+    "baseUrl": "./",
+    "jsx": "react-jsxdev",
+    "composite": false
   },
   "include": ["src", "snap.config.ts"]
 }

packages/snaps-jest/src/global.ts

@@ -5,6 +5,7 @@ import type {
   NotificationType,
   ComponentOrElement,
 } from '@metamask/snaps-sdk';
+import type { JSXElement } from '@metamask/snaps-sdk/jsx';
 
 interface SnapsMatchers {
   /**
@@ -42,16 +43,21 @@ interface SnapsMatchers {
    * `expect(response.notifications).toContainEqual({ message, type })`.
    *
    * @param message - The expected notification message.
-   * @param type - The expected notification type, i.e., 'inApp' or 'native'. If
-   * not provided, the type will be ignored.
+   * @param type - The expected notification type, i.e., 'inApp' or 'native'.
+   * @param title - The title of an expanded notification.
+   * @param content - The content of an expanded notification.
+   * @param footerLink - The footer link of an expanded notification (if it exists).
    * @throws If the snap did not send a notification with the expected message.
    * @example
    * const response = await request({ method: 'foo' });
    * expect(response).toSendNotification('bar', NotificationType.InApp);
    */
   toSendNotification(
     message: string,
-    type?: EnumToUnion<NotificationType>,
+    type: EnumToUnion<NotificationType>,
+    title?: string,
+    content?: JSXElement,
+    footerLink?: { text: string; href: string },
   ): void;
 
   /**