feature(17946): implement mv3 e2e for popup consistency after service worker restarted (#19010)

* feature(17946): implement mv3 e2e for popup consistency after service worker restarts

* feature(17946): fix typo

---------

Co-authored-by: Dan J Miller <danjm.com@gmail.com>

test/e2e/mv3/service-worker-restart.spec.js

@@ -39,9 +39,9 @@ async function mockSegment(mockServer) {
 
 describe('MV3 - Service worker restart', function () {
   let windowHandles;
+  const driverOptions = { openDevToolsForTabs: true };
 
   it('should continue to add new a account when service worker can not restart immediately', async function () {
-    const driverOptions = { openDevToolsForTabs: true };
     await withFixtures(
       {
         dapp: true,
@@ -121,6 +121,77 @@ describe('MV3 - Service worker restart', function () {
       },
     );
   });
+
+  it('should restore the transaction when service worker restarts', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withPermissionControllerConnectedToTestDapp()
+          .build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test.title,
+        // because of segment
+        failOnConsoleError: false,
+        driverOptions,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        // log in wallet
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+
+        // initialize a transaction of send from dapp
+        await driver.openNewPage('http://127.0.0.1:8080');
+        await driver.clickElement('#sendButton');
+
+        // A popup window is initialized
+        windowHandles = await driver.getAllWindowHandles();
+        await driver.waitUntilXWindowHandles(4);
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+
+        // Assert recipient and eth quantity are correct
+        await assertTransactionDetails(driver);
+
+        // Restart service worker in a new window
+        // Because if we stay in the same window we will lose the popup when opening a new tab
+        await driver.switchToNewWindow();
+        await driver.openNewURL('chrome://inspect/#service-workers');
+        windowHandles = await driver.getAllWindowHandles();
+        // MM expanded view, Dapp, Notification popup, console and service worker
+        await driver.waitUntilXWindowHandles(5);
+        await driver.clickElement({
+          text: 'terminate',
+          tag: 'span',
+        });
+
+        // Should still have only 1 popup
+        windowHandles = await driver.getAllWindowHandles();
+        await driver.waitUntilXWindowHandles(5);
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+
+        // And popup has the same value
+        await assertTransactionDetails(driver);
+
+        // Confirm the transaction
+        await driver.clickElement({ text: 'Confirm', tag: 'button' });
+        await driver.switchToWindowWithTitle('MetaMask', windowHandles);
+        await driver.clickElement('[data-testid="home__activity-tab"]');
+        await driver.wait(async () => {
+          const confirmedTxes = await driver.findElements(
+            '.transaction-list__completed-transactions .transaction-list-item',
+          );
+          return confirmedTxes.length === 1;
+        }, 10000);
+      },
+    );
+  });
 });
 
 async function assertSWRestartTimeEvent(request) {
@@ -170,3 +241,16 @@ async function assertSWProcessActionQueueEvent(request, method) {
   assert.equal(firstResult.properties.environment_type, 'background');
   assert.equal(firstResult.properties.locale, 'en');
 }
+
+async function assertTransactionDetails(driver) {
+  const TRUNCATED_RECIPIENT_ADDRESS = '0x0c5...AaFb';
+  const recipientAddress = await driver.findElement(
+    '[data-testid="sender-to-recipient__name"]',
+  );
+  assert.equal(await recipientAddress.getText(), TRUNCATED_RECIPIENT_ADDRESS);
+  const transactionAmounts = await driver.findElements(
+    '.currency-display-component__text',
+  );
+  const transactionAmount = transactionAmounts[0];
+  assert.equal(await transactionAmount.getText(), '0');
+}

test/e2e/webdriver/driver.js

@@ -337,10 +337,13 @@ class Driver {
   }
 
   // Window management
+  async openNewURL(url) {
+    await this.driver.get(url);
+  }
 
   async openNewPage(url) {
     const newHandle = await this.driver.switchTo().newWindow();
-    await this.driver.get(url);
+    await this.openNewURL(url);
     return newHandle;
   }
 
@@ -348,6 +351,10 @@ class Driver {
     await this.driver.switchTo().window(handle);
   }
 
+  async switchToNewWindow() {
+    await this.driver.switchTo().newWindow('window');
+  }
+
   async switchToFrame(element) {
     await this.driver.switchTo().frame(element);
   }