test: e2e metrics test and refactor (#25632)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25632?quickstart=1)

## **Related issues**

Fixes:
[#23979](#23979)

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

test/e2e/tests/confirmations/helpers.ts

@@ -1,5 +1,6 @@
 import FixtureBuilder from '../../fixture-builder';
 import { defaultGanacheOptions, withFixtures } from '../../helpers';
+import { Mockttp } from '../../mock-e2e';
 import { Driver } from '../../webdriver/driver';
 
 export async function scrollAndConfirmAndAssertConfirm(driver: Driver) {
@@ -23,6 +24,10 @@ export function withRedesignConfirmationFixtures(
       },
       fixtures: new FixtureBuilder()
         .withPermissionControllerConnectedToTestDapp()
+        .withMetaMetricsController({
+          metaMetricsId: 'fake-metrics-id',
+          participateInMetaMetrics: true,
+        })
         .withPreferencesController({
           preferences: {
             redesignedConfirmationsEnabled: true,
@@ -31,7 +36,53 @@ export function withRedesignConfirmationFixtures(
         .build(),
       ganacheOptions: defaultGanacheOptions,
       title,
+      testSpecificMock: mockSegment,
     },
     testFunction,
   );
 }
+
+async function mockSegment(mockServer: Mockttp) {
+  return [
+    await mockServer
+      .forPost('https://api.segment.io/v1/batch')
+      .withJsonBodyIncluding({
+        batch: [{ type: 'track', event: 'Signature Requested' }],
+      })
+      .thenCallback(() => {
+        return {
+          statusCode: 200,
+        };
+      }),
+    await mockServer
+      .forPost('https://api.segment.io/v1/batch')
+      .withJsonBodyIncluding({
+        batch: [{ type: 'track', event: 'Signature Approved' }],
+      })
+      .thenCallback(() => {
+        return {
+          statusCode: 200,
+        };
+      }),
+    await mockServer
+      .forPost('https://api.segment.io/v1/batch')
+      .withJsonBodyIncluding({
+        batch: [{ type: 'track', event: 'Signature Rejected' }],
+      })
+      .thenCallback(() => {
+        return {
+          statusCode: 200,
+        };
+      }),
+    await mockServer
+      .forPost('https://api.segment.io/v1/batch')
+      .withJsonBodyIncluding({
+        batch: [{ type: 'track', event: 'Account Details Opened' }],
+      })
+      .thenCallback(() => {
+        return {
+          statusCode: 200,
+        };
+      }),
+  ];
+}

test/e2e/tests/confirmations/signatures/permit.spec.ts

@@ -13,21 +13,31 @@ import {
 } from '../../../helpers';
 import { Ganache } from '../../../seeder/ganache';
 import { Driver } from '../../../webdriver/driver';
+import {
+  assertAccountDetailsMetrics,
+  assertHeaderInfoBalance,
+  assertPastedAddress,
+  assertSignatureMetrics,
+  clickHeaderInfoBtn,
+  copyAddressAndPasteWalletAddress,
+} from './signature-helpers';
 
 describe('Confirmation Signature - Permit', function (this: Suite) {
   if (!process.env.ENABLE_CONFIRMATION_REDESIGN) {
     return;
   }
 
-  it('initiates and confirms', async function () {
+  it('initiates and confirms and emits the correct events', async function () {
     await withRedesignConfirmationFixtures(
       this.test?.fullTitle(),
       async ({
         driver,
         ganacheServer,
+        mockedEndpoint: mockedEndpoints,
       }: {
         driver: Driver;
         ganacheServer: Ganache;
+        mockedEndpoint: unknown;
       }) => {
         const addresses = await ganacheServer.getAccounts();
         const publicAddress = addresses?.[0] as string;
@@ -37,17 +47,45 @@ describe('Confirmation Signature - Permit', function (this: Suite) {
         await driver.clickElement('#signPermit');
         await switchToNotificationWindow(driver);
 
+        await clickHeaderInfoBtn(driver);
+        await assertHeaderInfoBalance(driver);
+        await assertAccountDetailsMetrics(
+          driver,
+          mockedEndpoints,
+          'eth_signTypedData_v4',
+        );
+
+        await copyAddressAndPasteWalletAddress(driver);
+        await assertPastedAddress(driver);
+        await switchToNotificationWindow(driver);
+
         await assertInfoValues(driver);
         await scrollAndConfirmAndAssertConfirm(driver);
+        await driver.delay(1000);
+
+        await assertSignatureMetrics(
+          driver,
+          mockedEndpoints,
+          'eth_signTypedData_v4',
+          'Permit',
+          ['redesigned_confirmation', 'permit'],
+        );
+
         await assertVerifiedResults(driver, publicAddress);
       },
     );
   });
 
-  it('initiates and rejects', async function () {
+  it('initiates and rejects and emits the correct events', async function () {
     await withRedesignConfirmationFixtures(
       this.test?.fullTitle(),
-      async ({ driver }: { driver: Driver }) => {
+      async ({
+        driver,
+        mockedEndpoint: mockedEndpoints,
+      }: {
+        driver: Driver;
+        mockedEndpoint: unknown;
+      }) => {
         await unlockWallet(driver);
         await openDapp(driver);
         await driver.clickElement('#signPermit');
@@ -56,6 +94,7 @@ describe('Confirmation Signature - Permit', function (this: Suite) {
         await driver.clickElement(
           '[data-testid="confirm-footer-cancel-button"]',
         );
+        await driver.delay(1000);
 
         await driver.waitUntilXWindowHandles(2);
         await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
@@ -65,6 +104,14 @@ describe('Confirmation Signature - Permit', function (this: Suite) {
           text: 'Error: User rejected the request.',
         });
         assert.ok(rejectionResult);
+
+        await assertSignatureMetrics(
+          driver,
+          mockedEndpoints,
+          'eth_signTypedData_v4',
+          'Permit',
+          ['redesigned_confirmation', 'permit'],
+        );
       },
     );
   });

test/e2e/tests/confirmations/signatures/personal-sign.spec.ts

@@ -10,6 +10,14 @@ import {
 } from '../../../helpers';
 import { Ganache } from '../../../seeder/ganache';
 import { Driver } from '../../../webdriver/driver';
+import {
+  assertHeaderInfoBalance,
+  assertPastedAddress,
+  clickHeaderInfoBtn,
+  copyAddressAndPasteWalletAddress,
+  assertSignatureMetrics,
+  assertAccountDetailsMetrics,
+} from './signature-helpers';
 
 describe('Confirmation Signature - Personal Sign', function (this: Suite) {
   if (!process.env.ENABLE_CONFIRMATION_REDESIGN) {
@@ -22,9 +30,11 @@ describe('Confirmation Signature - Personal Sign', function (this: Suite) {
       async ({
         driver,
         ganacheServer,
+        mockedEndpoint: mockedEndpoints,
       }: {
         driver: Driver;
         ganacheServer: Ganache;
+        mockedEndpoint: unknown;
       }) => {
         const addresses = await ganacheServer.getAccounts();
         const publicAddress = addresses?.[0] as string;
@@ -34,19 +44,37 @@ describe('Confirmation Signature - Personal Sign', function (this: Suite) {
         await driver.clickElement('#personalSign');
         await switchToNotificationWindow(driver);
 
+        await clickHeaderInfoBtn(driver);
+        await assertHeaderInfoBalance(driver);
+
+        await copyAddressAndPasteWalletAddress(driver);
+        await assertPastedAddress(driver);
+        await assertAccountDetailsMetrics(
+          driver,
+          mockedEndpoints,
+          'personal_sign',
+        );
+        await switchToNotificationWindow(driver);
         await assertInfoValues(driver);
 
         await driver.clickElement('[data-testid="confirm-footer-button"]');
 
         await assertVerifiedPersonalMessage(driver, publicAddress);
+        await assertSignatureMetrics(driver, mockedEndpoints, 'personal_sign');
       },
     );
   });
 
   it('initiates and rejects', async function () {
     await withRedesignConfirmationFixtures(
       this.test?.fullTitle(),
-      async ({ driver }: { driver: Driver }) => {
+      async ({
+        driver,
+        mockedEndpoint: mockedEndpoints,
+      }: {
+        driver: Driver;
+        mockedEndpoint: unknown;
+      }) => {
         await unlockWallet(driver);
         await openDapp(driver);
         await driver.clickElement('#personalSign');
@@ -64,6 +92,7 @@ describe('Confirmation Signature - Personal Sign', function (this: Suite) {
           text: 'Error: User rejected the request.',
         });
         assert.ok(rejectionResult);
+        await assertSignatureMetrics(driver, mockedEndpoints, 'personal_sign');
       },
     );
   });