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

@@ -38,6 +38,25 @@ 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!',
+        { 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/snaps-jest/src/global.ts

@@ -52,6 +52,8 @@ interface SnapsMatchers {
   toSendNotification(
     message: string,
     type?: EnumToUnion<NotificationType>,
+    title?: string,
+    footerLink?: { text: string; href: string },
   ): void;
 
   /**

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

@@ -1,5 +1,5 @@
 import { expect } from '@jest/globals';
-import { panel, text } from '@metamask/snaps-sdk';
+import { NotificationType, panel, text } from '@metamask/snaps-sdk';
 import { Box, Text } from '@metamask/snaps-sdk/jsx';
 
 import {
@@ -160,35 +160,71 @@ describe('toRespondWithError', () => {
 });
 
 describe('toSendNotification', () => {
-  it('passes when the notification is correct', () => {
+  it('passes when a notification is correct', () => {
     expect(
       getMockResponse({
         notifications: [
           {
             id: '1',
-            type: 'native',
+            type: NotificationType.Native,
             message: 'foo',
           },
         ],
       }),
     ).toSendNotification('foo');
   });
 
+  it('passes when an expanded view notification is correct', () => {
+    expect(
+      getMockResponse({
+        notifications: [
+          {
+            id: '1',
+            type: NotificationType.InApp,
+            message: 'foo',
+            title: 'bar',
+            content: 'abcd',
+            footerLink: { text: 'foo', href: 'https://metamask.io' },
+          },
+        ],
+      }),
+    ).toSendNotification('foo', 'inApp', 'bar', {
+      text: 'foo',
+      href: 'https://metamask.io',
+    });
+  });
+
+  it('passes when an expanded view notification without footer is correct', () => {
+    expect(
+      getMockResponse({
+        notifications: [
+          {
+            id: '1',
+            type: NotificationType.InApp,
+            message: 'foo',
+            title: 'bar',
+            content: 'abcd',
+          },
+        ],
+      }),
+    ).toSendNotification('foo', 'inApp', 'bar');
+  });
+
   it('passes when the notification is correct with a type', () => {
     expect(
       getMockResponse({
         notifications: [
           {
             id: '1',
-            type: 'native',
+            type: NotificationType.Native,
             message: 'foo',
           },
         ],
       }),
     ).toSendNotification('foo', 'native');
   });
 
-  it('fails when the notification is incorrect', () => {
+  it('fails when a notification is incorrect', () => {
     expect(() =>
       expect(
         getMockResponse({
@@ -204,6 +240,67 @@ describe('toSendNotification', () => {
     ).toThrow('Received:');
   });
 
+  it("fails when an expanded view notification's title is incorrect", () => {
+    expect(() =>
+      expect(
+        getMockResponse({
+          notifications: [
+            {
+              id: '1',
+              type: 'inApp',
+              message: 'foo',
+              title: 'bar',
+              content: 'abcd',
+            },
+          ],
+        }),
+      ).toSendNotification('foo', 'inApp', 'baz'),
+    ).toThrow('Received:');
+  });
+
+  it("fails when an expanded view notification's footerLink is incorrect", () => {
+    expect(() =>
+      expect(
+        getMockResponse({
+          notifications: [
+            {
+              id: '1',
+              type: 'inApp',
+              message: 'foo',
+              title: 'bar',
+              content: 'abcd',
+              footerLink: { text: 'Leave site', href: 'https://metamask.io' },
+            },
+          ],
+        }),
+      ).toSendNotification('foo', 'inApp', 'bar', {
+        text: 'Go back',
+        href: 'metamask://client/',
+      }),
+    ).toThrow('Received:');
+  });
+
+  it("fails when an expanded view notification's content is missing", () => {
+    expect(() =>
+      expect(
+        getMockResponse({
+          notifications: [
+            {
+              id: '1',
+              type: 'inApp',
+              message: 'foo',
+              title: 'bar',
+              footerLink: { text: 'Leave site', href: 'https://metamask.io' },
+            },
+          ],
+        }),
+      ).toSendNotification('foo', 'inApp', 'bar', {
+        text: 'Leave site',
+        href: 'https://metamask.io',
+      }),
+    ).toThrow('Received:');
+  });
+
   it('fails when the notification is incorrect with a type', () => {
     expect(() =>
       expect(

packages/snaps-jest/src/matchers.ts

@@ -6,11 +6,11 @@
 import type { MatcherFunction } from '@jest/expect';
 import { expect } from '@jest/globals';
 import type {
-  NotificationType,
   EnumToUnion,
   ComponentOrElement,
   Component,
 } from '@metamask/snaps-sdk';
+import { NotificationType } from '@metamask/snaps-sdk';
 import type { JSXElement } from '@metamask/snaps-sdk/jsx';
 import { isJSXElementUnsafe } from '@metamask/snaps-sdk/jsx';
 import type { SnapResponse } from '@metamask/snaps-simulation';
@@ -158,32 +158,87 @@ export const toRespondWithError: MatcherFunction<[expected: Json]> = function (
  * is intended to be used with the `expect` global.
  *
  * @param actual - The actual response.
- * @param expected - The expected notification message.
- * @param type - The expected notification type.
+ * @param expectedMessage - The expected notification message.
+ * @param expectedType - The expected notification type.
+ * @param expectedTitle - The expected notification title.
+ * @param expectedFooterLink - The expected footer link object.
  * @returns The status and message.
  */
 export const toSendNotification: MatcherFunction<
-  [expected: string, type?: EnumToUnion<NotificationType> | undefined]
-> = function (actual, expected, type) {
+  [
+    expectedMessage: string,
+    expectedType?: EnumToUnion<NotificationType> | undefined,
+    expectedTitle?: string | undefined,
+    expectedFooterLink?: { text: string; href: string } | undefined,
+  ]
+> = function (
+  actual,
+  expectedMessage,
+  expectedType,
+  expectedTitle,
+  expectedFooterLink,
+) {
   assertActualIsSnapResponse(actual, 'toSendNotification');
 
+  const notificationValidator = (
+    notification: SnapResponse['notifications'][number],
+  ) => {
+    const { type, message, title, content, footerLink } = notification;
+    const hasExpectedType = expectedType !== undefined;
+    const hasExpectedTitle = expectedTitle !== undefined;
+    const hasExpectedFooterLink = expectedFooterLink !== undefined;
+
+    if (!this.equals(message, expectedMessage)) {
+      return false;
+    }
+
+    if (hasExpectedType && type !== expectedType) {
+      return false;
+    }
+
+    if (type === NotificationType.InApp) {
+      if (hasExpectedTitle && !this.equals(title, expectedTitle)) {
+        return false;
+      }
+
+      if (title && !content) {
+        return false;
+      }
+
+      if (
+        hasExpectedFooterLink &&
+        !this.equals(footerLink, expectedFooterLink)
+      ) {
+        return false;
+      }
+    }
+
+    return true;
+  };
+
   const { notifications } = actual;
-  const pass = notifications.some(
-    (notification) =>
-      this.equals(notification.message, expected) &&
-      (type === undefined || notification.type === type),
-  );
+  const pass = notifications.some(notificationValidator);
 
   const message = pass
     ? () =>
         `${this.utils.matcherHint('.not.toSendNotification')}\n\n` +
-        `Expected: ${this.utils.printExpected(expected)}\n` +
-        `Expected type: ${this.utils.printExpected(type)}\n` +
+        `Expected message: ${this.utils.printExpected(expectedMessage)}\n` +
+        `Expected type: ${this.utils.printExpected(expectedType)}\n` +
+        `Expected title: ${this.utils.printExpected(expectedTitle)}\n` +
+        `Expected footer link: ${this.utils.printExpected(
+          expectedFooterLink,
+        )}\n` +
+        `Expected content id type: ${this.utils.printExpected('String')}\n` +
         `Received: ${this.utils.printReceived(notifications)}`
     : () =>
         `${this.utils.matcherHint('.toSendNotification')}\n\n` +
-        `Expected: ${this.utils.printExpected(expected)}\n` +
-        `Expected type: ${this.utils.printExpected(type)}\n` +
+        `Expected message: ${this.utils.printExpected(expectedMessage)}\n` +
+        `Expected type: ${this.utils.printExpected(expectedType)}\n` +
+        `Expected title: ${this.utils.printExpected(expectedTitle)}\n` +
+        `Expected footer link: ${this.utils.printExpected(
+          expectedFooterLink,
+        )}\n` +
+        `Expected content id type: ${this.utils.printExpected('String')}\n` +
         `Received: ${this.utils.printReceived(notifications)}`;
 
   return { message, pass };

packages/snaps-simulation/src/methods/hooks/notifications.test.ts

@@ -46,6 +46,9 @@ describe('getShowInAppNotificationImplementation', () => {
         id: expect.any(String),
         type: NotificationType.InApp,
         message: 'message',
+        content: undefined,
+        title: undefined,
+        footerLink: undefined,
       },
     ]);
   });