feat(19726): fix flaky test in Dapp interactions caused by home-container rerender (#19997)

test/e2e/tests/dapp-interactions.spec.js

@@ -5,13 +5,12 @@ const {
   openDapp,
   DAPP_URL,
   DAPP_ONE_URL,
+  unlockWallet,
+  WINDOW_TITLES,
 } = require('../helpers');
 const FixtureBuilder = require('../fixture-builder');
 
 describe('Dapp interactions', function () {
-  let windowHandles;
-  let extension;
-  let popup;
   const ganacheOptions = {
     accounts: [
       {
@@ -34,30 +33,13 @@ describe('Dapp interactions', function () {
       },
       async ({ driver }) => {
         await driver.navigate();
-        await driver.fill('#password', 'correct horse battery staple');
-        await driver.press('#password', driver.Key.ENTER);
-
         await openDapp(driver);
-        windowHandles = await driver.getAllWindowHandles();
-        extension = windowHandles[0];
-
-        // Lock Account
-        await driver.switchToWindow(extension);
-        await driver.clickElement(
-          '[data-testid="account-options-menu-button"]',
-        );
-        await driver.clickElement({ text: 'Lock', tag: 'div' });
 
         // Trigger Notification
-        await driver.switchToWindowWithTitle('E2E Test Dapp', windowHandles);
         await driver.clickElement('#addEthereumChain');
         await driver.waitUntilXWindowHandles(3);
-        await driver.switchToWindowWithTitle(
+        await driver.switchToWindowWithTitle('MetaMask Notification');
-          'MetaMask Notification',
+        await unlockWallet(driver);
-          windowHandles,
-        );
-        await driver.fill('#password', 'correct horse battery staple');
-        await driver.press('#password', driver.Key.ENTER);
         const notification = await driver.isElementPresent({
           text: 'Allow this site to add a network?',
           tag: 'h3',
@@ -81,45 +63,34 @@ describe('Dapp interactions', function () {
       },
       async ({ driver }) => {
         await driver.navigate();
-        await driver.fill('#password', 'correct horse battery staple');
-        await driver.press('#password', driver.Key.ENTER);
 
-        await openDapp(driver);
+        // Connect to 2nd dapp => DAPP_ONE
-        windowHandles = await driver.getAllWindowHandles();
-        extension = windowHandles[0];
-
-        // Lock Account
-        await driver.switchToWindow(extension);
-        await driver.clickElement(
-          '[data-testid="account-options-menu-button"]',
-        );
-        await driver.clickElement({ text: 'Lock', tag: 'div' });
-
-        // Connect to Dapp1
         await openDapp(driver, null, DAPP_ONE_URL);
         await driver.clickElement({ text: 'Connect', tag: 'button' });
-        await driver.waitUntilXWindowHandles(4);
+        await driver.waitUntilXWindowHandles(3);
-        windowHandles = await driver.getAllWindowHandles();
 
-        popup = await driver.switchToWindowWithTitle(
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.Notification);
-          'MetaMask Notification',
-          windowHandles,
-        );
 
-        await driver.switchToWindow(popup);
+        await unlockWallet(driver);
-        await driver.fill('#password', 'correct horse battery staple');
-        await driver.press('#password', driver.Key.ENTER);
         await driver.clickElement({ text: 'Next', tag: 'button' });
         await driver.clickElement({ text: 'Connect', tag: 'button' });
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+        await driver.waitForSelector({
+          css: '#accounts',
+          text: '0x5cfe73b6021e818b776b421b1c4db2474086a7e1',
+        });
 
         // Assert Connection
-        await driver.switchToWindow(extension);
+        await driver.switchToWindowWithTitle(
-        await driver.fill('#password', 'correct horse battery staple');
+          WINDOW_TITLES.ExtensionInFullScreenView,
-        await driver.press('#password', driver.Key.ENTER);
+        );
+        await unlockWallet(driver);
         await driver.clickElement(
           '[data-testid ="account-options-menu-button"]',
         );
+
         await driver.clickElement({ text: 'Connected sites', tag: 'div' });
+
         const connectedDapp1 = await driver.isElementPresent({
           text: DAPP_URL,
           tag: 'bdi',

ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.js

@@ -93,14 +93,8 @@ const InteractiveReplacementTokenNotification = ({ isVisible }) => {
     };
 
     handleShowNotification();
-  }, [
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-    dispatch,
+  }, [address, interactiveReplacementToken.oldRefreshToken, isUnlocked]);
-    address,
-    interactiveReplacementToken,
-    isUnlocked,
-    keyring,
-    mmiActions,
-  ]);
 
   return showNotification ? (
     <Box

ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js

@@ -1,6 +1,7 @@
 import React, { useContext, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
+import isEqual from 'lodash/isEqual';
 import PulseLoader from '../../../components/ui/pulse-loader';
 import { CUSTODY_ACCOUNT_ROUTE } from '../../../helpers/constants/routes';
 import {
@@ -38,7 +39,7 @@ const ConfirmAddCustodianToken = () => {
   const mmiActions = mmiActionsFactory();
 
   const mostRecentOverviewPage = useSelector(getMostRecentOverviewPage);
-  const connectRequests = useSelector(getInstitutionalConnectRequests);
+  const connectRequests = useSelector(getInstitutionalConnectRequests, isEqual);
   const isComplianceActivated = useSelector(complianceActivated);
   const [showMore, setShowMore] = useState(false);
   const [isLoading, setIsLoading] = useState(false);