test: add e2e tests for navigation (#25652)

## **Description**  [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25652?quickstart=1) ## **Related issues** Fixes: [#23978](#23978) ## **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.
MetaMask · Jul 5, 2024 · 6c2cadd · 6c2cadd
1 parent fe23ae0
commit 6c2cadd
Show file tree

Hide file tree

Showing 3 changed files with 222 additions and 0 deletions.
diff --git a/test/e2e/tests/confirmations/navigation.spec.ts b/test/e2e/tests/confirmations/navigation.spec.ts
@@ -0,0 +1,216 @@
+import { strict as assert } from 'assert';
+import { Suite } from 'mocha';
+import { WebElement } from 'selenium-webdriver';
+import {
+  DAPP_HOST_ADDRESS,
+  WINDOW_TITLES,
+  openDapp,
+  unlockWallet,
+  regularDelayMs,
+} from '../../helpers';
+import { Driver } from '../../webdriver/driver';
+import { withRedesignConfirmationFixtures } from './helpers';
+
+describe('Navigation Signature - Different signature types', function (this: Suite) {
+  if (!process.env.ENABLE_CONFIRMATION_REDESIGN) {
+    return;
+  }
+
+  it('initiates and queues multiple signatures and confirms', async function () {
+    await withRedesignConfirmationFixtures(
+      this.test?.fullTitle(),
+      async ({ driver }: { driver: Driver }) => {
+        await unlockWallet(driver);
+        await openDapp(driver);
+        await queueSignatures(driver);
+
+        const origin = await driver.findElement({ text: DAPP_HOST_ADDRESS });
+        const message = await driver.findElement({ text: 'Hi, Alice!' });
+
+        // Verify Sign Typed Data confirmation is displayed
+        assert.ok(await origin);
+        assert.ok(await message, 'message');
+
+        await driver.clickElement(
+          '[data-testid="confirm-nav__next-confirmation"]',
+        );
+
+        // Verify Sign Typed Data v3 confirmation is displayed
+        await verifySignedTypeV3Confirmation(driver, origin);
+
+        await driver.clickElement(
+          '[data-testid="confirm-nav__next-confirmation"]',
+        );
+
+        // Verify Sign Typed Data v4 confirmation is displayed
+        await verifySignedTypeV4Confirmation(driver, origin);
+
+        await driver.clickElement(
+          '[data-testid="confirm-nav__previous-confirmation"]',
+        );
+
+        // Verify Sign Typed Data v3 confirmation is displayed
+        await verifySignedTypeV3Confirmation(driver, origin);
+
+        await driver.clickElement(
+          '[data-testid="confirm-nav__previous-confirmation"]',
+        );
+        // Verify Sign Typed Data v3 confirmation is displayed
+        assert.ok(await origin);
+        assert.ok(await message);
+      },
+    );
+  });
+
+  it('initiates and queues a mix of signatures and transactions and navigates', async function () {
+    await withRedesignConfirmationFixtures(
+      this.test?.fullTitle(),
+      async ({ driver }: { driver: Driver }) => {
+        await unlockWallet(driver);
+        await openDapp(driver);
+        await queueSignaturesAndTransactions(driver);
+
+        const origin = await driver.findElement({ text: DAPP_HOST_ADDRESS });
+        const message = await driver.findElement({ text: 'Hi, Alice!' });
+
+        // Verify Sign Typed Data confirmation is displayed
+        assert.ok(origin, 'origin');
+        assert.ok(message);
+
+        await driver.clickElement(
+          '[data-testid="confirm-nav__next-confirmation"]',
+        );
+
+        // Verify Transaction Sending ETH is displayed
+        await verifyTransaction(driver, 'SENDING ETH');
+
+        await driver.clickElement('[data-testid="next-page"]');
+
+        // Verify Sign Typed Data v3 confirmation is displayed
+        await verifySignedTypeV3Confirmation(driver, origin);
+
+        await driver.clickElement(
+          '[data-testid="confirm-nav__previous-confirmation"]',
+        );
+
+        // Verify Sign Typed Data v3 confirmation is displayed
+        await verifyTransaction(driver, 'SENDING ETH');
+
+        await driver.clickElement('[data-testid="previous-page"]');
+
+        // Verify Sign Typed Data v3 confirmation is displayed
+        assert.ok(await origin);
+        assert.ok(await message);
+      },
+    );
+  });
+
+  it('initiates multiple signatures and rejects all', async function () {
+    await withRedesignConfirmationFixtures(
+      this.test?.fullTitle(),
+      async ({ driver }: { driver: Driver }) => {
+        await unlockWallet(driver);
+        await openDapp(driver);
+        await queueSignatures(driver);
+        await driver.delay(regularDelayMs);
+
+        await driver.clickElement('[data-testid="confirm-nav__reject-all"]');
+
+        await driver.waitUntilXWindowHandles(2);
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+
+        await verifyRejectionResults(driver, '#signTypedDataResult');
+        await verifyRejectionResults(driver, '#signTypedDataV3Result');
+        await verifyRejectionResults(driver, '#signTypedDataV4Result');
+      },
+    );
+  });
+});
+
+async function verifyRejectionResults(driver: Driver, verifyResultId: string) {
+  const rejectionResult = await driver.findElement(verifyResultId);
+  assert.equal(
+    await rejectionResult.getText(),
+    'Error: User rejected the request.',
+  );
+}
+
+async function verifySignedTypeV3Confirmation(
+  driver: Driver,
+  origin: WebElement,
+) {
+  const fromAddress = driver.findElement({
+    css: '.name__value',
+    text: '0xCD2a3...DD826',
+  });
+  const toAddress = driver.findElement({
+    css: '.name__value',
+    text: '0xbBbBB...bBBbB',
+  });
+  const contents = driver.findElement({ text: 'Hello, Bob!' });
+
+  assert.ok(await origin, 'origin');
+  assert.ok(await fromAddress, 'fromAddress');
+  assert.ok(await toAddress, 'toAddress');
+  assert.ok(await contents, 'contents');
+}
+
+async function verifySignedTypeV4Confirmation(
+  driver: Driver,
+  origin: WebElement,
+) {
+  verifySignedTypeV3Confirmation(driver, origin);
+  const attachment = driver.findElement({ text: '0x' });
+  assert.ok(await attachment, 'attachment');
+}
+
+async function queueSignatures(driver: Driver) {
+  await driver.clickElement('#signTypedData');
+  await driver.waitUntilXWindowHandles(3);
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+
+  await driver.clickElement('#signTypedDataV3');
+  await driver.waitUntilXWindowHandles(3);
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+
+  await driver.waitUntilXWindowHandles(3);
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+
+  await driver.clickElement('#signTypedDataV4');
+  await driver.waitUntilXWindowHandles(3);
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+}
+
+async function queueSignaturesAndTransactions(driver: Driver) {
+  await driver.clickElement('#signTypedData');
+  await driver.waitUntilXWindowHandles(3);
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+  await driver.delay(2000); // Delay deeded due to a race condition
+  // To be fixed in https://github.com/MetaMask/metamask-extension/issues/25251
+
+  await driver.waitUntilXWindowHandles(3);
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+
+  await driver.clickElement('#sendButton');
+  await driver.waitUntilXWindowHandles(3);
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+  await driver.delay(2000);
+
+  await driver.waitUntilXWindowHandles(3);
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+
+  await driver.clickElement('#signTypedDataV3');
+  await driver.waitUntilXWindowHandles(3);
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+  await driver.delay(2000);
+}
+
+async function verifyTransaction(
+  driver: Driver,
+  expectedTransactionType: string,
+) {
+  const transactionType = await driver.findElement(
+    '.confirm-page-container-summary__action__name',
+  );
+  assert.equal(await transactionType.getText(), expectedTransactionType);
+}
diff --git a/ui/pages/confirmations/components/confirm/nav/__snapshots__/nav.test.tsx.snap b/ui/pages/confirmations/components/confirm/nav/__snapshots__/nav.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`ConfirmNav should match snapshot 1`] = `
       <button
         aria-label="Previous Confirmation"
         class="mm-box mm-button-icon mm-button-icon--size-sm confirm_nav__left_btn mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
+        data-testid="confirm-nav__previous-confirmation"
       >
         <span
           class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -28,6 +29,7 @@ exports[`ConfirmNav should match snapshot 1`] = `
       <button
         aria-label="Next Confirmation"
         class="mm-box mm-button-icon mm-button-icon--size-sm confirm_nav__right_btn mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
+        data-testid="confirm-nav__next-confirmation"
       >
         <span
           class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -37,6 +39,7 @@ exports[`ConfirmNav should match snapshot 1`] = `
     </div>
     <button
       class="mm-box mm-text mm-button-base mm-button-base--size-md confirm_nav__reject_all mm-button-primary mm-text--body-md-medium mm-text--font-weight-normal mm-box--padding-0 mm-box--padding-right-3 mm-box--padding-left-3 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-xl"
+      data-testid="confirm-nav__reject-all"
       type="secondary"
     >
       <span

diff --git a/ui/pages/confirmations/components/confirm/nav/nav.tsx b/ui/pages/confirmations/components/confirm/nav/nav.tsx
@@ -101,6 +101,7 @@ const Nav = () => {
       <Box alignItems={AlignItems.center} display={Display.Flex}>
         <ButtonIcon
           ariaLabel="Previous Confirmation"
+          data-testid="confirm-nav__previous-confirmation"
           backgroundColor={BackgroundColor.backgroundAlternative}
           borderRadius={BorderRadius.full}
           className="confirm_nav__left_btn"
@@ -119,6 +120,7 @@ const Nav = () => {
         </Text>
         <ButtonIcon
           ariaLabel="Next Confirmation"
+          data-testid="confirm-nav__next-confirmation"
           backgroundColor={BackgroundColor.backgroundAlternative}
           borderRadius={BorderRadius.full}
           className="confirm_nav__right_btn"
@@ -134,6 +136,7 @@ const Nav = () => {
       <Button
         borderRadius={BorderRadius.XL}
         className="confirm_nav__reject_all"
+        data-testid="confirm-nav__reject-all"
         fontWeight={FontWeight.Normal}
         onClick={onRejectAll}
         paddingLeft={3}