From f9f0c73f35145efcb07c6e191982b20b6e7619e9 Mon Sep 17 00:00:00 2001 From: Priya Date: Fri, 5 Jul 2024 16:44:19 +0530 Subject: [PATCH] test: e2e metrics test and refactor (#25632) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25632?quickstart=1) ## **Related issues** Fixes: [#23979](https://github.com/MetaMask/metamask-extension/issues/23979) ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings** ### **Before** ### **After** ## **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/header.spec.js | 112 ------------------ test/e2e/tests/confirmations/helpers.ts | 51 ++++++++ .../confirmations/signatures/permit.spec.ts | 53 ++++++++- .../signatures/personal-sign.spec.ts | 31 ++++- .../signatures/sign-typed-data-v3.spec.ts | 64 ++++++++-- .../signatures/sign-typed-data-v4.spec.ts | 46 ++++++- .../signatures/sign-typed-data.spec.ts | 44 ++++++- .../signatures/signature-helpers.ts | 99 ++++++++++++++++ .../components/confirm/header/header-info.tsx | 1 + 9 files changed, 372 insertions(+), 129 deletions(-) delete mode 100644 test/e2e/tests/confirmations/header.spec.js create mode 100644 test/e2e/tests/confirmations/signatures/signature-helpers.ts diff --git a/test/e2e/tests/confirmations/header.spec.js b/test/e2e/tests/confirmations/header.spec.js deleted file mode 100644 index c829958f8b5e..000000000000 --- a/test/e2e/tests/confirmations/header.spec.js +++ /dev/null @@ -1,112 +0,0 @@ -const { strict: assert } = require('assert'); -const { - defaultGanacheOptions, - openDapp, - unlockWallet, - WINDOW_TITLES, - withFixtures, -} = require('../../helpers'); -const FixtureBuilder = require('../../fixture-builder'); - -const SIGNATURE_CONFIRMATIONS = [ - { name: 'Personal Sign signature', testDAppBtnId: 'personalSign' }, - { name: 'Sign Typed Data signature', testDAppBtnId: 'signTypedData' }, - { name: 'Sign Typed Data v3 signature', testDAppBtnId: 'signTypedDataV3' }, - { name: 'Sign Typed Data v4 signature', testDAppBtnId: 'signTypedDataV4' }, - { name: 'Sign Permit signature', testDAppBtnId: 'signPermit' }, -]; - -const WALLET_ADDRESS = '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1'; -const WALLET_ETH_BALANCE = '25'; - -describe('Confirmation Header Component', function () { - SIGNATURE_CONFIRMATIONS.forEach((confirmation) => { - it(`${confirmation.name} component includes header with balance`, async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .withPreferencesController({ - preferences: { redesignedConfirmationsEnabled: true }, - }) - .build(), - ganacheOptions: defaultGanacheOptions, - title: this.test?.fullTitle(), - }, - async ({ driver }) => { - await unlockWallet(driver); - await openDapp(driver); - - await clickConfirmationBtnOnTestDapp( - driver, - confirmation.testDAppBtnId, - ); - await clickHeaderInfoBtn(driver); - - await assertHeaderInfoBalance(driver, WALLET_ETH_BALANCE); - }, - ); - }); - - it(`${confirmation.name} component includes copyable address element`, async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .withPreferencesController({ - preferences: { redesignedConfirmationsEnabled: true }, - }) - .build(), - ganacheOptions: defaultGanacheOptions, - title: this.test?.fullTitle(), - }, - async ({ driver }) => { - await unlockWallet(driver); - await openDapp(driver); - - await clickConfirmationBtnOnTestDapp( - driver, - confirmation.testDAppBtnId, - ); - await clickHeaderInfoBtn(driver); - await copyAddressAndPasteWalletAddress(driver); - - await assertPastedAddress(driver, WALLET_ADDRESS); - }, - ); - }); - - async function clickConfirmationBtnOnTestDapp(driver, btnId) { - await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); - await driver.clickElement(`#${btnId}`); - await driver.delay(2000); - } - - async function clickHeaderInfoBtn(driver) { - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - await driver.clickElement('button[data-testid="header-info-button"]'); - } - - async function assertHeaderInfoBalance(driver, walletEthBalance) { - const headerBalanceEl = await driver.findElement( - '[data-testid="header-balance"]', - ); - await driver.waitForNonEmptyElement(headerBalanceEl); - assert.equal(await headerBalanceEl.getText(), `${walletEthBalance}\nETH`); - } - - async function copyAddressAndPasteWalletAddress(driver) { - await driver.clickElement('[data-testid="address-copy-button-text"]'); - await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); - await driver.findElement('#eip747ContractAddress'); - await driver.pasteFromClipboardIntoField('#eip747ContractAddress'); - } - - async function assertPastedAddress(driver, walletAddress) { - const formFieldEl = await driver.findElement('#eip747ContractAddress'); - assert.equal(await formFieldEl.getProperty('value'), walletAddress); - } - }); -}); diff --git a/test/e2e/tests/confirmations/helpers.ts b/test/e2e/tests/confirmations/helpers.ts index b6a19a6b95a9..ba27cbb44da2 100644 --- a/test/e2e/tests/confirmations/helpers.ts +++ b/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, + }; + }), + ]; +} diff --git a/test/e2e/tests/confirmations/signatures/permit.spec.ts b/test/e2e/tests/confirmations/signatures/permit.spec.ts index 03941dbecc3f..2b42aa74576f 100644 --- a/test/e2e/tests/confirmations/signatures/permit.spec.ts +++ b/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'], + ); }, ); }); diff --git a/test/e2e/tests/confirmations/signatures/personal-sign.spec.ts b/test/e2e/tests/confirmations/signatures/personal-sign.spec.ts index 175f7459d467..996e48dd51b4 100644 --- a/test/e2e/tests/confirmations/signatures/personal-sign.spec.ts +++ b/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,11 +44,23 @@ 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'); }, ); }); @@ -46,7 +68,13 @@ describe('Confirmation Signature - Personal Sign', function (this: Suite) { 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'); }, ); }); diff --git a/test/e2e/tests/confirmations/signatures/sign-typed-data-v3.spec.ts b/test/e2e/tests/confirmations/signatures/sign-typed-data-v3.spec.ts index 4dfdb9851b2a..53e1fea01717 100644 --- a/test/e2e/tests/confirmations/signatures/sign-typed-data-v3.spec.ts +++ b/test/e2e/tests/confirmations/signatures/sign-typed-data-v3.spec.ts @@ -13,6 +13,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 - Sign Typed Data V3', function (this: Suite) { if (!process.env.ENABLE_CONFIRMATION_REDESIGN) { @@ -25,9 +33,11 @@ describe('Confirmation Signature - Sign Typed Data V3', 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; @@ -37,8 +47,26 @@ describe('Confirmation Signature - Sign Typed Data V3', function (this: Suite) { await driver.clickElement('#signTypedDataV3'); await switchToNotificationWindow(driver); + await clickHeaderInfoBtn(driver); + await assertHeaderInfoBalance(driver); + + await copyAddressAndPasteWalletAddress(driver); + await assertPastedAddress(driver); + await assertAccountDetailsMetrics( + driver, + mockedEndpoints, + 'eth_signTypedData_v3', + ); + await switchToNotificationWindow(driver); + await assertInfoValues(driver); await scrollAndConfirmAndAssertConfirm(driver); + await driver.delay(1000); + await assertSignatureMetrics( + driver, + mockedEndpoints, + 'eth_signTypedData_v3', + ); await assertVerifiedResults(driver, publicAddress); }, ); @@ -47,7 +75,13 @@ describe('Confirmation Signature - Sign Typed Data V3', function (this: Suite) { 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('#signTypedDataV3'); @@ -56,21 +90,31 @@ describe('Confirmation Signature - Sign Typed Data V3', function (this: Suite) { await driver.clickElement( '[data-testid="confirm-footer-cancel-button"]', ); + await driver.delay(1000); + + await assertSignatureMetrics( + driver, + mockedEndpoints, + 'eth_signTypedData_v3', + ); await driver.waitUntilXWindowHandles(2); await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); - const rejectionResult = await driver.waitForSelector({ - css: '#signTypedDataV3Result', - text: 'Error: User rejected the request.', - }); - assert.ok(rejectionResult); + const rejectionResult = await driver.findElement( + '#signTypedDataV3Result', + ); + assert.equal( + await rejectionResult.getText(), + 'Error: User rejected the request.', + ); }, ); }); }); async function assertInfoValues(driver: Driver) { + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); const origin = driver.findElement({ text: DAPP_HOST_ADDRESS }); const contractPetName = driver.findElement({ css: '.name__value', @@ -102,14 +146,12 @@ async function assertInfoValues(driver: Driver) { async function assertVerifiedResults(driver: Driver, publicAddress: string) { await driver.waitUntilXWindowHandles(2); - await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); + const windowHandles = await driver.getAllWindowHandles(); + await driver.switchToWindowWithTitle('E2E Test Dapp', windowHandles); await driver.clickElement('#signTypedDataV3Verify'); + await driver.delay(500); const verifyResult = await driver.findElement('#signTypedDataV3Result'); - await driver.waitForSelector({ - css: '#signTypedDataV3VerifyResult', - text: publicAddress, - }); const verifyRecoverAddress = await driver.findElement( '#signTypedDataV3VerifyResult', ); diff --git a/test/e2e/tests/confirmations/signatures/sign-typed-data-v4.spec.ts b/test/e2e/tests/confirmations/signatures/sign-typed-data-v4.spec.ts index 5c5101d5e018..5c860ed6bb56 100644 --- a/test/e2e/tests/confirmations/signatures/sign-typed-data-v4.spec.ts +++ b/test/e2e/tests/confirmations/signatures/sign-typed-data-v4.spec.ts @@ -13,6 +13,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 - Sign Typed Data V4', function (this: Suite) { if (!process.env.ENABLE_CONFIRMATION_REDESIGN) { @@ -25,9 +33,11 @@ describe('Confirmation Signature - Sign Typed Data V4', 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; @@ -37,8 +47,27 @@ describe('Confirmation Signature - Sign Typed Data V4', function (this: Suite) { await driver.clickElement('#signTypedDataV4'); await switchToNotificationWindow(driver); + await clickHeaderInfoBtn(driver); + await assertHeaderInfoBalance(driver); + + await copyAddressAndPasteWalletAddress(driver); + await assertPastedAddress(driver); + await assertAccountDetailsMetrics( + driver, + mockedEndpoints, + 'eth_signTypedData_v4', + ); + await assertInfoValues(driver); await scrollAndConfirmAndAssertConfirm(driver); + await driver.delay(1000); + + await assertSignatureMetrics( + driver, + mockedEndpoints, + 'eth_signTypedData_v4', + 'Mail', + ); await assertVerifiedResults(driver, publicAddress); }, ); @@ -47,7 +76,13 @@ describe('Confirmation Signature - Sign Typed Data V4', function (this: Suite) { 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('#signTypedDataV4'); @@ -56,6 +91,14 @@ describe('Confirmation Signature - Sign Typed Data V4', function (this: Suite) { await driver.clickElement( '[data-testid="confirm-footer-cancel-button"]', ); + await driver.delay(1000); + + await assertSignatureMetrics( + driver, + mockedEndpoints, + 'eth_signTypedData_v4', + 'Mail', + ); await driver.waitUntilXWindowHandles(2); await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); @@ -71,6 +114,7 @@ describe('Confirmation Signature - Sign Typed Data V4', function (this: Suite) { }); async function assertInfoValues(driver: Driver) { + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); const origin = driver.findElement({ text: DAPP_HOST_ADDRESS }); const contractPetName = driver.findElement({ css: '.name__value', diff --git a/test/e2e/tests/confirmations/signatures/sign-typed-data.spec.ts b/test/e2e/tests/confirmations/signatures/sign-typed-data.spec.ts index 01f807397a97..fcef531a36b9 100644 --- a/test/e2e/tests/confirmations/signatures/sign-typed-data.spec.ts +++ b/test/e2e/tests/confirmations/signatures/sign-typed-data.spec.ts @@ -10,6 +10,14 @@ 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 - Sign Typed Data', function (this: Suite) { if (!process.env.ENABLE_CONFIRMATION_REDESIGN) { @@ -22,9 +30,11 @@ describe('Confirmation Signature - Sign Typed Data', 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,9 +44,27 @@ describe('Confirmation Signature - Sign Typed Data', function (this: Suite) { await driver.clickElement('#signTypedData'); await switchToNotificationWindow(driver); + await clickHeaderInfoBtn(driver); + await assertHeaderInfoBalance(driver); + + await copyAddressAndPasteWalletAddress(driver); + await assertPastedAddress(driver); + await assertAccountDetailsMetrics( + driver, + mockedEndpoints, + 'eth_signTypedData', + ); + await assertInfoValues(driver); await driver.clickElement('[data-testid="confirm-footer-button"]'); + await driver.delay(1000); + + await assertSignatureMetrics( + driver, + mockedEndpoints, + 'eth_signTypedData', + ); await assertVerifiedResults(driver, publicAddress); }, @@ -46,7 +74,13 @@ describe('Confirmation Signature - Sign Typed Data', function (this: Suite) { 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('#signTypedData'); @@ -55,6 +89,13 @@ describe('Confirmation Signature - Sign Typed Data', function (this: Suite) { await driver.clickElement( '[data-testid="confirm-footer-cancel-button"]', ); + await driver.delay(1000); + + await assertSignatureMetrics( + driver, + mockedEndpoints, + 'eth_signTypedData', + ); await driver.waitUntilXWindowHandles(2); await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); @@ -70,6 +111,7 @@ describe('Confirmation Signature - Sign Typed Data', function (this: Suite) { }); async function assertInfoValues(driver: Driver) { + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); const origin = driver.findElement({ text: DAPP_HOST_ADDRESS }); const message = driver.findElement({ text: 'Hi, Alice!' }); diff --git a/test/e2e/tests/confirmations/signatures/signature-helpers.ts b/test/e2e/tests/confirmations/signatures/signature-helpers.ts new file mode 100644 index 000000000000..8c8e74d59496 --- /dev/null +++ b/test/e2e/tests/confirmations/signatures/signature-helpers.ts @@ -0,0 +1,99 @@ +import { strict as assert } from 'assert'; +import { WINDOW_TITLES, getEventPayloads } from '../../../helpers'; +import { Driver } from '../../../webdriver/driver'; + +export const WALLET_ADDRESS = '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1'; +export const WALLET_ETH_BALANCE = '25'; + +export async function assertSignatureMetrics( + driver: Driver, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + mockedEndpoints: any, + type: string, + primaryType: string = '', + uiCustomizations = ['redesigned_confirmation'], +) { + const events = await getEventPayloads(driver, mockedEndpoints); + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const signatureEventProperty: any = { + account_type: 'MetaMask', + signature_type: type, + category: 'inpage_provider', + chain_id: '0x539', + environment_type: 'background', + locale: 'en', + security_alert_response: 'NotApplicable', + ui_customizations: uiCustomizations, + }; + + if (primaryType !== '') { + signatureEventProperty.eip712_primary_type = primaryType; + } + + assert.deepStrictEqual( + events[0].properties, + { + ...signatureEventProperty, + security_alert_reason: 'NotApplicable', + }, + 'Signature request event details do not match', + ); + assert.deepStrictEqual( + events[1].properties, + signatureEventProperty, + 'Signature Accepted/Rejected event properties do not match', + ); +} + +export async function assertAccountDetailsMetrics( + driver: Driver, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + mockedEndpoints: any, + type: string, +) { + const events = await getEventPayloads(driver, mockedEndpoints); + + assert.equal(events[1].event, 'Account Details Opened'); + assert.deepStrictEqual( + events[1].properties, + { + action: 'Confirm Screen', + location: 'signature_confirmation', + signature_type: type, + category: 'Confirmations', + locale: 'en', + chain_id: '0x539', + environment_type: 'notification', + }, + 'Account Details Metrics do not match', + ); +} + +export async function clickHeaderInfoBtn(driver: Driver) { + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + await driver.clickElement('button[data-testid="header-info-button"]'); +} + +export async function assertHeaderInfoBalance(driver: Driver) { + const headerBalanceEl = await driver.findElement( + '[data-testid="header-balance"]', + ); + await driver.waitForNonEmptyElement(headerBalanceEl); + assert.equal(await headerBalanceEl.getText(), `${WALLET_ETH_BALANCE}\nETH`); +} + +export async function copyAddressAndPasteWalletAddress(driver: Driver) { + await driver.clickElement('[data-testid="address-copy-button-text"]'); + await driver.clickElement( + '[data-testid="account-details-modal-close-button"]', + ); + await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); + await driver.findElement('#eip747ContractAddress'); + await driver.pasteFromClipboardIntoField('#eip747ContractAddress'); +} + +export async function assertPastedAddress(driver: Driver) { + const formFieldEl = await driver.findElement('#eip747ContractAddress'); + assert.equal(await formFieldEl.getAttribute('value'), WALLET_ADDRESS); +} diff --git a/ui/pages/confirmations/components/confirm/header/header-info.tsx b/ui/pages/confirmations/components/confirm/header/header-info.tsx index 0f40b35f00ef..4968a4807003 100644 --- a/ui/pages/confirmations/components/confirm/header/header-info.tsx +++ b/ui/pages/confirmations/components/confirm/header/header-info.tsx @@ -188,6 +188,7 @@ const HeaderInfo = ({ iconName={IconName.Close} size={ButtonIconSize.Sm} className="confirm_header__close-button" + data-testid="account-details-modal-close-button" onClick={() => setShowAccountInfo(false)} />