test: add simple notifications test, add page objects for test

privacy-snapshot.json

@@ -6,13 +6,15 @@
   "api.web3modal.com",
   "app.ens.domains",
   "arbitrum-mainnet.infura.io",
+  "authentication.api.cx.metamask.io",
   "bafkreifvhjdf6ve4jfv6qytqtux5nd4nwnelioeiqx5x2ez5yrgrzk7ypi.ipfs.dweb.link",
   "bafybeidxfmwycgzcp4v2togflpqh2gnibuexjy4m4qqwxp7nh3jx5zlh4y.ipfs.dweb.link",
   "bridge.api.cx.metamask.io",
   "cdn.segment.com",
   "cdn.segment.io",
   "cdnjs.cloudflare.com",
   "chainid.network",
+  "client-side-detection.api.cx.metamask.io",
   "configuration.dev.metamask-institutional.io",
   "configuration.metamask-institutional.io",
   "connect.trezor.io",
@@ -24,19 +26,22 @@
   "gas.api.cx.metamask.io",
   "github.com",
   "goerli.infura.io",
+  "lattice.gridplus.io",
   "localhost:8000",
   "localhost:8545",
   "mainnet.infura.io",
   "metamask.eth",
   "metamask.github.io",
   "min-api.cryptocompare.com",
   "nft.api.cx.metamask.io",
+  "oidc.api.cx.metamask.io",
+  "on-ramp-content.api.cx.metamask.io",
+  "on-ramp-content.uat-api.cx.metamask.io",
   "phishing-detection.api.cx.metamask.io",
   "portfolio.metamask.io",
   "price.api.cx.metamask.io",
-  "on-ramp-content.api.cx.metamask.io",
-  "on-ramp-content.uat-api.cx.metamask.io",
   "proxy.api.cx.metamask.io",
+  "push.api.cx.metamask.io",
   "raw.githubusercontent.com",
   "registry.npmjs.org",
   "responsive-rpc.test",
@@ -49,14 +54,10 @@
   "test.metamask-phishing.io",
   "token.api.cx.metamask.io",
   "tokens.api.cx.metamask.io",
+  "trigger.api.cx.metamask.io",
   "tx-sentinel-ethereum-mainnet.api.cx.metamask.io",
-  "unresponsive-rpc.url",
-  "www.4byte.directory",
-  "lattice.gridplus.io",
   "unresponsive-rpc.test",
-  "authentication.api.cx.metamask.io",
-  "oidc.api.cx.metamask.io",
-  "price.api.cx.metamask.io",
-  "token.api.cx.metamask.io",
-  "client-side-detection.api.cx.metamask.io"
+  "unresponsive-rpc.url",
+  "user-storage.api.cx.metamask.io",
+  "www.4byte.directory"
 ]

test/e2e/page-objects/flows/enable-notifications.ts

@@ -0,0 +1,24 @@
+import HomePage from '../pages/homepage';
+import { Driver } from '../../webdriver/driver';
+import FirstTimeTurnOnNotificationsModal from '../pages/notifications/first-time-turn-on-modal';
+
+/**
+ * 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 homePage = new HomePage(driver);
+  await homePage.goToNotifiationsList();
+
+  const turnOnNotificationsModal = new FirstTimeTurnOnNotificationsModal(
+    driver,
+  );
+  await turnOnNotificationsModal.check_pageIsLoaded();
+  await turnOnNotificationsModal.clickTurnOnNotifications();
+};

test/e2e/page-objects/pages/account-options-menu.ts

@@ -0,0 +1,18 @@
+import { testId } from '../../../../ui/selectors/util';
+import { Driver } from '../../webdriver/driver';
+
+class AccountOptionsMenu {
+  private driver: Driver;
+
+  private readonly notificationsMenuItem = testId('notifications-menu-item');
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+  }
+
+  async clickNotificationsMenuItem(): Promise<void> {
+    await this.driver.clickElement(this.notificationsMenuItem);
+  }
+}
+
+export default AccountOptionsMenu;

test/e2e/page-objects/pages/header-navbar.ts

@@ -1,27 +1,32 @@
+import { testId } from '../../../../ui/selectors/util';
 import { Driver } from '../../webdriver/driver';
 
 class HeaderNavbar {
   private driver: Driver;
 
   private accountMenuButton: string;
 
-  private accountOptionMenu: string;
+  private accountOptionsMenuButton: string;
 
   private lockMetaMaskButton: string;
 
   constructor(driver: Driver) {
     this.driver = driver;
-    this.accountMenuButton = '[data-testid="account-menu-icon"]';
-    this.accountOptionMenu = '[data-testid="account-options-menu-button"]';
-    this.lockMetaMaskButton = '[data-testid="global-menu-lock"]';
+    this.lockMetaMaskButton = testId('global-menu-lock');
+    this.accountMenuButton = testId('account-menu-icon');
+    this.accountOptionsMenuButton = testId('account-options-menu-button');
   }
 
   async openAccountMenu(): Promise<void> {
     await this.driver.clickElement(this.accountMenuButton);
   }
 
+  async openAccountOptionsMenu(): Promise<void> {
+    await this.driver.clickElement(this.accountOptionsMenuButton);
+  }
+
   async lockMetaMask(): Promise<void> {
-    await this.driver.clickElement(this.accountOptionMenu);
+    await this.openAccountOptionsMenu();
     await this.driver.clickElement(this.lockMetaMaskButton);
   }
 }

test/e2e/page-objects/pages/homepage.ts

@@ -2,6 +2,7 @@ import { strict as assert } from 'assert';
 import { Driver } from '../../webdriver/driver';
 import { DEFAULT_GANACHE_ETH_BALANCE_DEC } from '../../constants';
 import HeaderNavbar from './header-navbar';
+import AccountOptionsMenu from './account-options-menu';
 
 class HomePage {
   private driver: Driver;
@@ -24,9 +25,12 @@ class HomePage {
 
   public headerNavbar: HeaderNavbar;
 
+  public accountOptionsMenu: AccountOptionsMenu;
+
   constructor(driver: Driver) {
     this.driver = driver;
     this.headerNavbar = new HeaderNavbar(driver);
+    this.accountOptionsMenu = new AccountOptionsMenu(driver);
     this.sendButton = '[data-testid="eth-overview-send"]';
     this.activityTab = '[data-testid="account-overview__activity-tab"]';
     this.tokensTab = '[data-testid="account-overview__asset-tab"]';
@@ -84,6 +88,11 @@ class HomePage {
     await this.driver.clickElement(this.activityTab);
   }
 
+  async goToNotifiationsList(): Promise<void> {
+    this.headerNavbar.openAccountOptionsMenu();
+    this.accountOptionsMenu.clickNotificationsMenuItem();
+  }
+
   async openAccountMenu(): Promise<void> {
     console.log(`Opening account menu`);
     await this.driver.clickElement(this.accountMenuButton);

test/e2e/page-objects/pages/notifications/first-time-turn-on-modal.ts

@@ -0,0 +1,31 @@
+import { testId } from '../../../../../ui/selectors/util';
+import { Driver } from '../../../webdriver/driver';
+
+class FirstTimeTurnOnNotificationsModal {
+  private driver: Driver;
+
+  private readonly turnOnButton = 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.clickElement(this.turnOnButton);
+  }
+}
+
+export default FirstTimeTurnOnNotificationsModal;

test/e2e/page-objects/pages/notifications/notifications-list.ts

@@ -0,0 +1,42 @@
+import { testId } from '../../../../../ui/selectors/util';
+import { Driver } from '../../../webdriver/driver';
+
+class NotificationsListPage {
+  private driver: Driver;
+
+  private readonly backButton = testId('back-button');
+
+  private readonly notificationsSettingsButton = testId(
+    'notifications-settings-button',
+  );
+
+  private readonly noNotificationsReceivedPlaceholder = 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> {
+    await this.driver.waitForSelector(this.noNotificationsReceivedPlaceholder);
+  }
+}
+
+export default NotificationsListPage;

test/e2e/tests/notifications/enable-notifications-first-time.ts

@@ -0,0 +1,33 @@
+import {
+  withFixtures,
+  logInWithBalanceValidation,
+  defaultGanacheOptions,
+} 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';
+
+describe('Notifications', function () {
+  describe('from inside MetaMask', function () {
+    it('enables notifications for the first time', async function () {
+      await withFixtures(
+        {
+          fixtures: new FixtureBuilder().build(),
+          ganacheOptions: defaultGanacheOptions,
+          title: this.test?.fullTitle(),
+          testSpecificMock: mockNotificationServices,
+        },
+        async ({ driver, ganacheServer }) => {
+          await logInWithBalanceValidation(driver, ganacheServer);
+          await enableNotificationsFirstTime(driver);
+
+          // should land on notifications list
+          const notificationsListPage = new NotificationsListPage(driver);
+          await notificationsListPage.check_pageIsLoaded();
+          await notificationsListPage.check_noNotificationsReceived();
+        },
+      );
+    });
+  });
+});

test/e2e/tests/notifications/mocks.ts

@@ -1,15 +1,11 @@
 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';
 
 const AuthMocks = AuthenticationController.Mocks;
-const StorageMocks = UserStorageController.Mocks;
 const NotificationMocks = NotificationServicesController.Mocks;
 const PushMocks = NotificationServicesPushController.Mocks;
 
@@ -31,8 +27,21 @@ export async function mockNotificationServices(server: Mockttp) {
   mockAPICall(server, AuthMocks.getMockAuthAccessTokenResponse());
 
   // Storage
-  mockAPICall(server, await StorageMocks.getMockUserStorageGetResponse());
-  mockAPICall(server, await StorageMocks.getMockUserStoragePutResponse());
+  const NOTIFICATIONS_USER_STORAGE_ENDPOINT =
+    'https://user-storage.api.cx.metamask.io/api/v1/userstorage/notifications';
+  const NOTIFICATION_USER_STORAGE_ID =
+    'df1d90e0a8c2c7c48a84cfc80c979b68c7e7d5624b89986a83a280ab92511bd4';
+  mockAPICall(server, {
+    url: `${NOTIFICATIONS_USER_STORAGE_ENDPOINT}/${NOTIFICATION_USER_STORAGE_ID}`,
+    requestMethod: 'GET',
+    response: NotificationMocks.createMockFullUserStorage(),
+  });
+
+  mockAPICall(server, {
+    url: `${NOTIFICATIONS_USER_STORAGE_ENDPOINT}/${NOTIFICATION_USER_STORAGE_ID}`,
+    requestMethod: 'PUT',
+    response: null,
+  });
 
   // Notifications
   mockAPICall(server, NotificationMocks.getMockFeatureAnnouncementResponse());
@@ -43,12 +52,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) {

ui/components/multichain/global-menu/global-menu.js

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

ui/selectors/util.js

@@ -15,3 +15,5 @@ export const filterAndShapeUnapprovedTransactions = (transactions) => {
       return result;
     }, {});
 };
+
+export const testId = (id) => `[data-testid=${id}]`;