MetaMask · cmd-ob · Sep 12, 2024 · Sep 17, 2024 · Sep 17, 2024 · Sep 17, 2024
@@ -44,6 +44,7 @@
   "portfolio.metamask.io",
   "price.api.cx.metamask.io",
   "proxy.api.cx.metamask.io",
+  "push.api.cx.metamask.io",
   "proxy.dev-api.cx.metamask.io",
   "raw.githubusercontent.com",
   "registry.npmjs.org",
@@ -57,6 +58,7 @@
   "test.metamask-phishing.io",
   "token.api.cx.metamask.io",
   "tokens.api.cx.metamask.io",
+  "trigger.api.cx.metamask.io",
   "transaction.api.cx.metamask.io",
   "tx-sentinel-ethereum-mainnet.api.cx.metamask.io",
   "unresponsive-rpc.test",

diff --git a/test/e2e/fixture-builder.js b/test/e2e/fixture-builder.js
@@ -146,6 +146,32 @@ function onboardingFixture() {
         ignoredTokens: [],
         tokens: [],
       },
+      // FIXME: is this correct?
+      NotificationsController: {
+        notifications: {},
+        metamaskNotificationsList: [
+          {
+            type: 'features_announcement',
+            id: 'enhanced-signatures',
+            createdAt: '2024-09-27T13:25:59.000Z',
+            data: {
+              id: 'enhanced-signatures',
+              category: 'ANNOUNCEMENT',
+              title: 'Enhanced signatures',
+              longDescription:
+                '<p>We’re improving signature requests to increase readability, so you can have more control over your assets. Stay tuned for more updates.</p>',
+              shortDescription:
+                "An update that makes it easier to understand and review the actions you're about to approve.",
+              image: {
+                title: 'Enhanced signature confirmations',
+                description: 'Enhanced signature confirmations',
+                url: '//images.ctfassets.net/jdkgyfmyd9sw/3yXPGO8LxTT7RrrSkotNNz/d3635fcef422aeb607016150e4fd5b85/24-09-10_MwM_Blog-Post-Signature-Redesign_1920x1280.png',
+              },
+            },
+            isRead: false,
+          },
+        ],
+      },
       TransactionController: {},
       config: {},
       firstTimeInfo: {
@@ -1321,6 +1347,14 @@ class FixtureBuilder {
     return this.withNameController({ names: {} });
   }
 
+  // FIXME: Is this how to set the notifications before starting test?
+  withMetamaskNotifications(notifications) {
+    merge(this.fixture.data.NotificationsController, {
+      notifications,
+    });
+    return this;
+  }
+
   withTrezorAccount() {
     return this.withAccountTracker({
       accounts: {

diff --git a/test/e2e/mock-e2e.js b/test/e2e/mock-e2e.js
@@ -43,7 +43,7 @@ const blacklistedHosts = [
 const {
   mockEmptyStalelistAndHotlist,
 } = require('./tests/phishing-controller/mocks');
-const { mockNotificationServices } = require('./tests/notifications/mocks');
+const { mockNotificationServices } = require('./tests/profile-sync/mocks');
 
 const emptyHtmlPage = () => `<!DOCTYPE html>
 <html lang="en">

diff --git a/test/e2e/page-objects/flows/enable-notifications.ts b/test/e2e/page-objects/flows/enable-notifications.ts
@@ -0,0 +1,24 @@
+import { Driver } from '../../webdriver/driver';
+import FirstTimeTurnOnNotificationsModal from '../pages/notifications/first-time-turn-on-modal';
+import HeaderNavbar from '../pages/header-navbar';
+
+/**
+ * This function enables the notifications through the header options menu from the home page
+ *
+ * Note: this flow focuses on the journey of a user who is enabling this feature for the first time
+ *
+ * @param driver - The webdriver instance.
+ */
+export const enableNotificationsFirstTime = async (
+  driver: Driver,
+): Promise<void> => {
+  console.log(`Start enable notifications from home screen`);
+  const header = new HeaderNavbar(driver);
+  await header.goToNotifiationsList();
+
+  const turnOnNotificationsModal = new FirstTimeTurnOnNotificationsModal(
+    driver,
+  );
+  await turnOnNotificationsModal.check_pageIsLoaded();
+  await turnOnNotificationsModal.clickTurnOnNotifications();
+};
diff --git a/test/e2e/page-objects/pages/header-navbar.ts b/test/e2e/page-objects/pages/header-navbar.ts
@@ -5,11 +5,14 @@ class HeaderNavbar {
 
   private readonly accountMenuButton = '[data-testid="account-menu-icon"]';
 
+  private accountOptionsMenuButton: string;
   private readonly accountOptionMenu =
     '[data-testid="account-options-menu-button"]';
 
   private readonly accountSnapButton = { text: 'Snaps', tag: 'div' };
 
+  private notificationsMenuItem: string;
+
   private readonly lockMetaMaskButton = '[data-testid="global-menu-lock"]';
 
   private readonly mmiPortfolioButton =
@@ -19,6 +22,14 @@ class HeaderNavbar {
 
   constructor(driver: Driver) {
     this.driver = driver;
+    this.lockMetaMaskButton = '[data-testid="global-menu-lock"]';
+    this.accountMenuButton = '[data-testid="account-menu-icon"]';
+    this.accountOptionsMenuButton =
+      '[data-testid="account-options-menu-button"]';
+    this.notificationsMenuItem = '[data-testid="notifications-menu-item"]'
+    this.mmiPortfolioButton = '[data-testid="global-menu-mmi-portfolio"]';
+    this.settingsButton = '[data-testid="global-menu-settings"]';
+    this.accountSnapButton = { text: 'Snaps', tag: 'div' };
   }
 
   async check_pageIsLoaded(): Promise<void> {
@@ -35,7 +46,7 @@ class HeaderNavbar {
   }
 
   async lockMetaMask(): Promise<void> {
-    await this.driver.clickElement(this.accountOptionMenu);
+    await this.driver.clickElement(this.accountMenuButton);
     // fix race condition with mmi build
     if (process.env.MMI) {
       await this.driver.waitForSelector(this.mmiPortfolioButton);
@@ -49,13 +60,13 @@ class HeaderNavbar {
 
   async openSnapListPage(): Promise<void> {
     console.log('Open account snap page');
-    await this.driver.clickElement(this.accountOptionMenu);
+    await this.driver.clickElement(this.accountMenuButton);
     await this.driver.clickElement(this.accountSnapButton);
   }
 
   async openSettingsPage(): Promise<void> {
     console.log('Open settings page');
-    await this.driver.clickElement(this.accountOptionMenu);
+    await this.driver.clickElement(this.accountMenuButton);
     // fix race condition with mmi build
     if (process.env.MMI) {
       await this.driver.waitForSelector(this.mmiPortfolioButton);
@@ -77,6 +88,11 @@ class HeaderNavbar {
       text: expectedLabel,
     });
   }
+
+  async goToNotifiationsList(): Promise<void> {
+    await this.driver.clickElement(this.accountOptionsMenuButton);
+    await this.driver.clickElement(this.notificationsMenuItem)
+  }
 }
 
 export default HeaderNavbar;
@@ -0,0 +1,31 @@
+import { Driver } from '../../../webdriver/driver';
+
+class FirstTimeTurnOnNotificationsModal {
+  private driver: Driver;
+
+  private readonly turnOnButton =
+    '[data-testid="turn-on-notifications-button"]';
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+  }
+
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.driver.waitForSelector(this.turnOnButton);
+    } catch (e) {
+      console.log(
+        'Timeout while waiting for TurnOnNotificationsModal to be loaded',
+        e,
+      );
+      throw e;
+    }
+    console.log('TurnOnNotificationsModal is loaded');
+  }
+
+  async clickTurnOnNotifications(): Promise<void> {
+    await this.driver.clickElementAndWaitToDisappear(this.turnOnButton, 10000);
+  }
+}
+
+export default FirstTimeTurnOnNotificationsModal;
@@ -0,0 +1,49 @@
+import { Driver } from '../../../webdriver/driver';
+
+class NotificationsListPage {
+  private driver: Driver;
+
+  private readonly backButton = '[data-testid="back-button"]';
+
+  private readonly notificationsSettingsButton =
+    '[data-testid="notifications-settings-button"]';
+
+  private readonly noNotificationsReceivedPlaceholder =
+    '[data-testid="notifications-list-placeholder"]';
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+  }
+
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.driver.waitForMultipleSelectors([
+        this.backButton,
+        this.notificationsSettingsButton,
+      ]);
+    } catch (e) {
+      console.log(
+        'Timeout while waiting for notifications list page to be loaded',
+        e,
+      );
+      throw e;
+    }
+    console.log('Notifications list page is loaded');
+  }
+
+  async check_noNotificationsReceived(): Promise<void> {
+    try {
+      await this.driver.waitForSelector(
+        this.noNotificationsReceivedPlaceholder,
+      );
+    } catch (e) {
+      console.log(
+        'Timed out while waiting for the empty notifications list placeholder to be displayed',
+        e,
+      );
+    }
+    console.log('Notifications list is empty as expected');
+  }
+}
+
+export default NotificationsListPage;
diff --git a/test/e2e/tests/profile-sync/enable-notifications-first-time.ts b/test/e2e/tests/profile-sync/enable-notifications-first-time.ts
@@ -0,0 +1,45 @@
+import {
+  withFixtures,
+  defaultGanacheOptions,
+  completeImportSRPOnboardingFlow,
+} from '../../helpers';
+import { enableNotificationsFirstTime } from '../../page-objects/flows/enable-notifications';
+import FixtureBuilder from '../../fixture-builder';
+import NotificationsListPage from '../../page-objects/pages/notifications/notifications-list';
+import { mockNotificationServices } from './mocks';
+
+const NOTIFICATIONS_TEAM_SEED_PHRASE =
+  'leisure swallow trip elbow prison wait rely keep supply hole general mountain';
+
+const PASSWORD = 'notify_password';
+
+describe('Notifications', function () {
+  describe('from inside MetaMask', function () {
+    it('enables notifications for the first time', async function () {
+      await withFixtures(
+        {
+          fixtures: new FixtureBuilder({ onboarding: true })
+            .withMetamaskNotifications()
+            .build(),
+          ganacheOptions: defaultGanacheOptions,
+          title: this.test?.fullTitle(),
+          testSpecificMock: mockNotificationServices,
+        },
+        async ({ driver }) => {
+          await driver.navigate();
+          await completeImportSRPOnboardingFlow(
+            driver,
+            NOTIFICATIONS_TEAM_SEED_PHRASE,
+            PASSWORD,
+          );
+          await enableNotificationsFirstTime(driver);
+
+          // should land on notifications list
+          const notificationsListPage = new NotificationsListPage(driver);
+          await notificationsListPage.check_pageIsLoaded();
+          await notificationsListPage.check_noNotificationsReceived();
+        },
+      );
+    });
+  });
+});
diff --git a/test/e2e/tests/profile-sync/mockData.ts b/test/e2e/tests/profile-sync/mockData.ts
diff --git a/test/e2e/tests/notifications/mocks.ts → test/e2e/tests/profile-sync/mocks.ts b/test/e2e/tests/notifications/mocks.ts → test/e2e/tests/profile-sync/mocks.ts
@@ -1,15 +1,12 @@
 import { Mockttp, RequestRuleBuilder } from 'mockttp';
-import {
-  AuthenticationController,
-  UserStorageController,
-} from '@metamask/profile-sync-controller';
+import { AuthenticationController } from '@metamask/profile-sync-controller';
 import {
   NotificationServicesController,
   NotificationServicesPushController,
 } from '@metamask/notification-services-controller';
+import { accountsSyncMockResponse, notificationMockResponse } from './mockData';
 
 const AuthMocks = AuthenticationController.Mocks;
-const StorageMocks = UserStorageController.Mocks;
 const NotificationMocks = NotificationServicesController.Mocks;
 const PushMocks = NotificationServicesPushController.Mocks;
 
@@ -30,22 +27,32 @@ export async function mockNotificationServices(server: Mockttp) {
   mockAPICall(server, AuthMocks.getMockAuthLoginResponse());
   mockAPICall(server, AuthMocks.getMockAuthAccessTokenResponse());
 
-  // Storage
-  mockAPICall(server, await StorageMocks.getMockUserStorageGetResponse());
-  mockAPICall(server, await StorageMocks.getMockUserStoragePutResponse());
-
   // TODO - add better mock responses for other Profile Sync features
   // (Account Sync, Network Sync, ...)
-  server
-    .forGet(/https:\/\/user-storage\.api\.cx\.metamask\.io\/.*/gu)
-    ?.thenCallback(() => ({
-      statusCode: 404,
-    }));
-  server
-    .forPut(/https:\/\/user-storage\.api\.cx\.metamask\.io\/.*/gu)
-    ?.thenCallback(() => ({
-      statusCode: 204,
-    }));
+
+  // Notifications Syncing
+  const notificationsRegex =
+    /https:\/\/user-storage\.api\.cx\.metamask\.io\/api\/v1\/userstorage\/notifications\/.*/gu;
+  server.forGet(notificationsRegex)?.thenCallback(() => ({
+    statusCode: 200,
+    json: notificationMockResponse,
+  }));
+
+  server.forPut(notificationsRegex)?.thenCallback(() => ({
+    statusCode: 204,
+  }));
+
+  // Accounts Syncing
+  const accountsRegex =
+    /https:\/\/user-storage\.api\.cx\.metamask\.io\/api\/v1\/userstorage\/accounts/;
+  server.forGet(accountsRegex)?.thenCallback(() => ({
+    statusCode: 200,
+    json: accountsSyncMockResponse,
+  }));
+
+  server.forPut(accountsRegex)?.thenCallback(() => ({
+    statusCode: 204,
+  }));
 
   // Notifications
   mockAPICall(server, NotificationMocks.getMockFeatureAnnouncementResponse());
@@ -56,12 +63,13 @@ export async function mockNotificationServices(server: Mockttp) {
     server,
     NotificationMocks.getMockMarkNotificationsAsReadResponse(),
   );
-
   // Push Notifications
   mockAPICall(server, PushMocks.getMockRetrievePushNotificationLinksResponse());
   mockAPICall(server, PushMocks.getMockUpdatePushNotificationLinksResponse());
   mockAPICall(server, PushMocks.getMockCreateFCMRegistrationTokenResponse());
   mockAPICall(server, PushMocks.getMockDeleteFCMRegistrationTokenResponse());
+
+  mockAPICall(server, PushMocks.getMockDeleteFCMRegistrationTokenResponse());
 }
 
 function mockAPICall(server: Mockttp, response: MockResponse) {

@@ -196,6 +196,7 @@ export const GlobalMenu = ({ closeMenu, anchorElement, isOpen }) => {
           <MenuItem
             iconName={IconName.Notification}
             onClick={() => handleNotificationsClick()}
+            data-testid="notifications-menu-item"
           >
             <Box
               display={Display.Flex}