feat: snap notifications 137

package.json

@@ -43,7 +43,9 @@
   "dependencies": {
     "@metamask/providers": "^9.1.0",
     "node-stream-zip": "^1.13.0",
-    "serve-handler": "5.0.8"
+    "p-event": "4.2.0",
+    "serve-handler": "5.0.8",
+    "strict-event-emitter": "^0.2.8"
   },
   "devDependencies": {
     "@chainsafe/eslint-config": "^1.0.0",
@@ -70,8 +72,8 @@
     "web3": "1.3.4"
   },
   "peerDependencies": {
-    "puppeteer": ">13",
-    "playwright": ">=1"
+    "playwright": ">=1",
+    "puppeteer": ">13"
   },
   "peerDependenciesMeta": {
     "soy-puppeteer": {
@@ -81,4 +83,4 @@
       "optional": true
     }
   }
-}
+}

src/metamask/index.ts

@@ -5,6 +5,8 @@ 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 { waitForNotification } from "../snap/waitForNotification";
 import { addNetwork } from "./addNetwork";
 import { addToken } from "./addToken";
 import { approve } from "./approve";
@@ -55,10 +57,12 @@ export const getMetaMask = (page: DappeteerPage): Promise<Dappeteer> => {
         deleteNetwork: deleteNetwork(page),
       },
       snaps: {
+        invokeSnap,
+        waitForNotification,
+        invokeNotification: invokeNotification(page),
         getAllNotifications: getAllNotifications(page),
         acceptDialog: acceptDialog(page),
         rejectDialog: rejectDialog(page),
-        invokeSnap,
         installSnap: installSnap(page),
       },
       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,
+    callback: Function | { default: Function }
+  ): Promise<void> {
+    return this.page.exposeFunction(name, <Function>callback);
+  }
 }

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/NotificationsEmitter.ts

@@ -0,0 +1,89 @@
+import { StrictEventEmitter } from "strict-event-emitter";
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+import pEvent = require("p-event");
+import { DappeteerPage } from "../page";
+import * as dappeteer from "../../src";
+import { clickOnElement, openProfileDropdown } from "../helpers";
+import { NotificationItem, NotificationList } from "./types";
+
+interface EventsMap {
+  newNotification: (notification: NotificationItem) => void;
+}
+
+class NotificationsEmitter extends StrictEventEmitter<EventsMap> {
+  private notifications: NotificationList = [];
+  private notificationsTab: DappeteerPage;
+  private readonly emitter: StrictEventEmitter<EventsMap>;
+  private readonly page: DappeteerPage;
+
+  constructor(protected metamask: dappeteer.Dappeteer) {
+    super();
+    this.page = metamask.page;
+    this.emitter = new StrictEventEmitter<EventsMap>();
+    this.configureEmitterListener();
+  }
+
+  private configureEmitterListener(): void {
+    this.emitter.on("newNotification", (notification: NotificationItem) => {
+      this.notifications.push(notification);
+    });
+  }
+
+  private async exposeEmitNotificationToWindow(): Promise<void> {
+    await this.notificationsTab.exposeFunction(
+      "emitNotification",
+      (notification: NotificationItem) => {
+        this.emitter.emit("newNotification", notification);
+      }
+    );
+  }
+
+  private async openNotificationPage(): Promise<void> {
+    await this.page.bringToFront();
+    await openProfileDropdown(this.page);
+    await clickOnElement(this.page, "Notifications");
+
+    const newPage = await this.page.browser().newPage();
+    await newPage.goto(this.page.url());
+
+    await newPage.waitForSelector(".notifications__container");
+    this.notificationsTab = newPage;
+  }
+
+  private async observeNotificationsMutation(): Promise<void> {
+    await this.notificationsTab.evaluate(() => {
+      const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          if (mutation.addedNodes.length) {
+            const element = mutation.addedNodes[0] as HTMLElement;
+            window.emitNotification({ message: element.innerText });
+            observer.disconnect();
+          }
+        }
+      });
+      observer.observe(document.querySelector(".notifications__container"), {
+        childList: true,
+      });
+    });
+  }
+
+  public async setup(): Promise<void> {
+    await this.openNotificationPage();
+    await this.exposeEmitNotificationToWindow();
+    await this.observeNotificationsMutation();
+  }
+
+  public async cleanup(): Promise<void> {
+    await this.notificationsTab.close();
+  }
+
+  public waitForNotification(): pEvent.CancelablePromise<NotificationItem> {
+    return pEvent<any, NotificationItem>(this.emitter, "newNotification");
+  }
+
+  public getAllNotifications(): NotificationList {
+    return this.notifications;
+  }
+}
+
+export default NotificationsEmitter;

src/snap/invokeNotification.ts

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

src/snap/notificationEmitter.ts

@@ -0,0 +1,46 @@
+import { EventEmitter } from "events";
+import { DappeteerPage } from "../page";
+import { clickOnElement, openProfileDropdown } from "../helpers";
+import { NotificationItem, NotificationList } from "./types";
+
+export const notificationEmitter = async (
+  page: DappeteerPage
+): Promise<{ emitter: EventEmitter; notifications: NotificationList }> => {
+  const notifications: NotificationList = [];
+  const emitter: EventEmitter = new EventEmitter();
+
+  emitter.on("newNotification", (notification: NotificationItem) => {
+    notifications.push(notification);
+  });
+
+  await page.bringToFront();
+  await openProfileDropdown(page);
+  await clickOnElement(page, "Notifications");
+
+  const newPage = await page.browser().newPage();
+  await newPage.goto(page.url());
+
+  await newPage.waitForSelector(".notifications__container");
+  await newPage.exposeFunction(
+    "emitNotification",
+    (notification: NotificationItem) => {
+      emitter.emit("newNotification", notification);
+    }
+  );
+  await newPage.evaluate(() => {
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.addedNodes.length) {
+          const element = mutation.addedNodes[0] as HTMLElement;
+          window.emitNotification({ message: element.innerText });
+          observer.disconnect();
+        }
+      }
+    });
+    observer.observe(document.querySelector(".notifications__container"), {
+      childList: true,
+    });
+  });
+
+  return { emitter, notifications };
+};

src/snap/types.ts

@@ -19,4 +19,5 @@ export interface InstallSnapResult {
   };
 }
 
-export type NotificationList = { message: string }[];
+export type NotificationItem = { message: string };
+export type NotificationList = NotificationItem[];