feat: snap notifications 137

package.json

@@ -70,8 +70,8 @@
     "web3": "1.3.4"
   },
   "peerDependencies": {
-    "puppeteer": ">13",
-    "playwright": ">=1"
+    "playwright": ">=1",
+    "puppeteer": ">13"
   },
   "peerDependenciesMeta": {
     "soy-puppeteer": {
@@ -81,4 +81,4 @@
       "optional": true
     }
   }
-}
+}

src/metamask/index.ts

@@ -5,6 +5,7 @@ import { DappeteerPage } from "../page";
 import { acceptDialog } from "../snap/acceptDialog";
 import { rejectDialog } from "../snap/rejectDialog";
 import { getAllNotifications, installSnap, invokeSnap } from "../snap";
+import { invokeNotification } from "../snap/invokeNotification";
 import { addNetwork } from "./addNetwork";
 import { addToken } from "./addToken";
 import { approve } from "./approve";
@@ -55,6 +56,7 @@ export const getMetaMask = (page: DappeteerPage): Promise<Dappeteer> => {
         deleteNetwork: deleteNetwork(page),
       },
       snaps: {
+        invokeNotification: invokeNotification(page),
         getAllNotifications: getAllNotifications(page),
         acceptDialog: acceptDialog(page),
         rejectDialog: rejectDialog(page),

src/page.ts

@@ -1,52 +1,80 @@
-import { DappeteerBrowser } from "./browser";
 import { DappeteerElementHandle } from "./element";
+import { DappeteerBrowser } from "./browser";
 
 export interface DappeteerPage<P = unknown> {
   $(selector: string): Promise<DappeteerElementHandle | null>;
+
   $eval<T>(
     selector: string,
     evalFn: (e: HTMLElement) => Promise<T> | T
   ): Promise<T>;
+
   $$eval<T>(
     selector: string,
     evalFn: (e: HTMLElement[]) => Promise<T[]> | T[]
   ): Promise<T[]>;
+
   $$(selector: string): Promise<DappeteerElementHandle[]>;
+
   getSource(): P;
+
   url(): string;
+
   browser(): DappeteerBrowser;
+
   bringToFront(): Promise<void>;
+
   goto(
     url: string,
     options?: {
       timeout?: number;
       waitUntil?: "load" | "domcontentloaded" | "networkidle" | "commit";
     }
   ): Promise<void>;
+
   title(): Promise<string>;
+
   close(options?: { runBeforeUnload?: boolean }): Promise<void>;
+
   reload(): Promise<void>;
+
   setViewport(opts: { height: number; width: number }): Promise<void>;
+
   waitForResponse(
     urlOrPredicate: string | ((res: Response) => boolean | Promise<boolean>),
     options?: {
       timeout?: number;
     }
   ): Promise<Response>;
+
   waitForSelector(
     selector: string,
     opts?: Partial<{ visible: boolean; timeout: number }>
   ): Promise<DappeteerElementHandle>;
+
   waitForXPath(
     xpath: string,
     opts?: Partial<{ visible: boolean; timeout: number }>
   ): Promise<DappeteerElementHandle>;
+
   waitForTimeout(timeout: number): Promise<void>;
+
   evaluate<Params extends Serializable, Result>(
     evaluateFn: (params: Unboxed<Params>) => Result,
     params?: Params
   ): Promise<Result>;
+
   screenshot(path: string): Promise<void>;
+
+  waitForFunction<Params extends Serializable>(
+    pageFunction: Function | string,
+    params?: Params
+  ): Promise<void>;
+
+  exposeFunction(
+    name: string,
+    puppeteerFunction: Function | { default: Function }
+  ): Promise<void>;
 }
 
 export type Unboxed<Arg> = Arg extends DappeteerElementHandle<any, infer T>

src/playwright/page.ts

@@ -104,14 +104,30 @@ export class DPlaywrightPage implements DappeteerPage<Page> {
   ): Promise<DappeteerElementHandle<ElementHandle>> {
     return this.waitForSelector(xpath, opts);
   }
+
   waitForTimeout(timeout: number): Promise<void> {
     return this.page.waitForTimeout(timeout);
   }
+
   evaluate<Params, Result>(
     evaluateFn: (params?: Unboxed<Params>) => Result | Promise<Result>,
     params?: Params
   ): Promise<Result> {
     //@ts-expect-error
     return this.page.evaluate(evaluateFn, params);
   }
+
+  async waitForFunction<Args>(
+    pageFunction: (params?: Unboxed<Args>) => void | string,
+    params?: Args
+  ): Promise<void> {
+    await this.page.waitForFunction(pageFunction, {}, params);
+  }
+
+  exposeFunction(
+    name: string,
+    puppeteerFunction: Function | { default: Function }
+  ): Promise<void> {
+    return this.page.exposeFunction(name, <Function>puppeteerFunction);
+  }
 }

src/puppeteer/page.ts

@@ -119,9 +119,11 @@ export class DPupeteerPage implements DappeteerPage<Page> {
       await this.page.waitForXPath(xpath, opts)
     );
   }
+
   waitForTimeout(timeout: number): Promise<void> {
     return this.page.waitForTimeout(timeout);
   }
+
   evaluate<Params extends Serializable, Result>(
     evaluateFn: (params?: Unboxed<Params>) => Result | Promise<Result>,
     params?: Params
@@ -131,4 +133,15 @@ export class DPupeteerPage implements DappeteerPage<Page> {
       params
     ) as Promise<Result>;
   }
+
+  async waitForFunction<Params extends Serializable>(
+    pageFunction: (params?: Unboxed<Params>) => void | string,
+    params?: Params
+  ): Promise<void> {
+    await this.page.waitForFunction(pageFunction, {}, params);
+  }
+
+  exposeFunction(name: string, callback: Function): Promise<void> {
+    return this.page.exposeFunction(name, callback);
+  }
 }

src/snap/invokeNotification.ts

@@ -0,0 +1,47 @@
+import { DappeteerPage, Serializable } from "../page";
+import { clickOnElement, openProfileDropdown } from "../helpers";
+import { invokeSnap } from "./invokeSnap";
+
+async function waitForNotification(page: DappeteerPage): Promise<void> {
+  await page.waitForSelector(".notifications__container");
+  await page.evaluate(
+    () =>
+      new Promise((resolve) => {
+        const observer = new MutationObserver((mutations) => {
+          for (const mutation of mutations) {
+            if (mutation.addedNodes.length) {
+              const element = mutation.addedNodes[0] as HTMLElement;
+              resolve(element.innerText);
+              observer.disconnect();
+            }
+          }
+        });
+        observer.observe(document.querySelector(".notifications__container"), {
+          attributes: false,
+          childList: true,
+        });
+      })
+  );
+}
+
+export const invokeNotification =
+  (page: DappeteerPage) =>
+  async <R = unknown, P extends Serializable = Serializable>(
+    testPage: DappeteerPage,
+    snapId: string,
+    method: string,
+    params?: P
+  ): ReturnType<typeof window.ethereum.request<R>> => {
+    await page.bringToFront();
+    await openProfileDropdown(page);
+    await clickOnElement(page, "Notifications");
+
+    const newPage = await page.browser().newPage();
+    await newPage.goto(page.url());
+
+    const snapResult = await invokeSnap<R, P>(testPage, snapId, method, params);
+
+    await waitForNotification(newPage);
+
+    return snapResult;
+  };

src/types.ts

@@ -77,13 +77,29 @@ export type Dappeteer = {
      * Returns all notifications in Metamask notifications page
      */
     getAllNotifications: () => Promise<NotificationList>;
+    /** Invoke notification snap method. The function will open a notification
+    page, invoke the snap, and it will wait until notification is rendered
+    in the DOM. Can be used in pair with getAllNotifications method f.e:
+     await metamask.snaps.invokeNotification(page, "snapid", "method_name")
+     const notifications = await metamask.snaps.getAllNotifications()
+     expect(notifications[0].message).to.equal("Notification message")
+    */
+    invokeNotification: <
+      Result = unknown,
+      Params extends Serializable = Serializable
+    >(
+      page: DappeteerPage,
+      snapId: string,
+      method: string,
+      params?: Params
+    ) => Promise<Partial<Result>>;
     /**
      * Invoke Metamask snap method. Function will throw if there is an error while invoking snap.
      * Use generic params to override result and parameter types.
      * @param page Browser page where injected Metamask provider will be available.
      * For most snaps, openning google.com will suffice.
      * @param snapId id of your installed snap (result of invoking `installSnap` method)
-     * @param method snap method you wan't to invoke
+     * @param method snap method you want to invoke
      * @param params required parameters of snap method
      */
     invokeSnap: <Result = unknown, Params extends Serializable = Serializable>(
@@ -92,12 +108,11 @@ export type Dappeteer = {
       method: string,
       params?: Params
     ) => Promise<Partial<Result>>;
-
     /**
      * Installs snap. Function will throw if there is an error while installing snap.
      * @param snapIdOrLocation either pass in snapId or full path to your snap directory
      * where we can find bundled snap (you need to ensure snap is built)
-     * @param opts {Object} snap method you wan't to invoke
+     * @param opts {Object} snap method you want to invoke
      * @param opts.hasPermissions Set to true if snap uses some permissions
      * @param opts.hasKeyPermissions Set to true if snap uses key permissions
      * @param installationSnapUrl url of your dapp. Defaults to google.com

test/basic.spec.ts

@@ -2,8 +2,8 @@ import { expect, use } from "chai";
 import chaiAsPromised from "chai-as-promised";
 
 import * as dappeteer from "../src";
+import { DappeteerPage } from "../src";
 import { openProfileDropdown } from "../src/helpers";
-import { DappeteerPage } from "../src/page";
 
 import { PASSWORD, TestContext } from "./constant";
 import { clickElement } from "./utils/utils";

test/flask/methods-snap/snap.manifest.json

@@ -3,7 +3,7 @@
   "description": "An example Snap written in TypeScript.",
   "proposedName": "Methods Snap\n",
   "source": {
-    "shasum": "xxu7kMfZ4zKgviSZ5K4gZKSDDGEYi2VqOK5bKAqoybo=",
+    "shasum": "65ylJ5v6kEUqE7jJEezI49brIzKhs3dSY8Y2uRxIIEY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

test/flask/methods-snap/src/index.ts

@@ -25,7 +25,7 @@ export const onRpcRequest: OnRpcRequestHandler = async ({
           params: [
             {
               type: "inApp",
-              message: `Hello, in App notification`,
+              message: `Hello from methods snap in App notification`,
             },
           ],
         });

test/flask/permissions-snap/snap.manifest.json

@@ -3,7 +3,7 @@
   "description": "An example Snap written in TypeScript.",
   "proposedName": "Permissions Snap\n",
   "source": {
-    "shasum": "sApNS/DJjjs8psniSQzWlOdkzJ75IsbtlpdipfKarRI=",
+    "shasum": "LSrgdJ2wzwzWkfVsqwATqBpEFxjjanFr9JdZHu0DmdU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

test/flask/permissions-snap/src/index.ts

@@ -15,6 +15,17 @@ export const onRpcRequest: OnRpcRequestHandler = ({ origin, request }) => {
           },
         ],
       });
+    case "notify_inApp": {
+      return wallet.request({
+        method: "snap_notify",
+        params: [
+          {
+            type: "inApp",
+            message: `Hello from permissions snap in App notification`,
+          },
+        ],
+      });
+    }
     default:
       throw new Error("Method not found.");
   }

test/flask/snaps.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import * as dappeteer from "../../src";
-import { DappeteerPage } from "../../src/page";
+import { DappeteerPage } from "../../src";
 import { TestContext } from "../constant";
 import { Snaps } from "../deploy";
 
@@ -86,18 +86,34 @@ describe("snaps", function () {
         snapId,
         "confirm"
       );
-
       await metamask.snaps.rejectDialog();
 
       expect(await invokeAction).to.equal(false);
     });
 
-    it("should invoke IN APP NOTIFICATIONS and check for a text", async function (this: TestContext) {
-      await metamask.snaps.invokeSnap(testPage, snapId, "notify_inApp");
+    it("should invoke IN APP NOTIFICATIONS", async function (this: TestContext) {
+      const permissionSnapId = await metamask.snaps.installSnap(
+        this.snapServers[Snaps.PERMISSIONS_SNAP],
+        {
+          hasPermissions: true,
+          hasKeyPermissions: false,
+        }
+      );
+
+      await metamask.snaps.invokeNotification(testPage, snapId, "notify_inApp");
+      await metamask.snaps.invokeNotification(
+        testPage,
+        permissionSnapId,
+        "notify_inApp"
+      );
 
       const notifications = await metamask.snaps.getAllNotifications();
-
-      expect(notifications[0].message).to.equal("Hello, in App notification");
+      expect(notifications[0].message).to.equal(
+        "Hello from permissions snap in App notification"
+      );
+      expect(notifications[1].message).to.equal(
+        "Hello from methods snap in App notification"
+      );
     });
   });
 });

tsconfig.json

@@ -3,7 +3,7 @@
     "target": "ES2021",
     "module": "commonjs",
     "moduleResolution": "node",
-    "lib": ["es2017", "dom"],
+    "lib": ["es2021", "dom"],
     "typeRoots": ["./node_modules/@types", "./types"],
     "declaration": true,
     "esModuleInterop": true,