chore: Adding e2e for confirmation page scroll button (#13575)

<!--
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**

Adding e2e for confirmation page scroll button

## **Related issues**

Fixes: #13575

## **Manual testing steps**
NA

## **Screenshots/Recordings**
NA

## **Pre-merge author checklist**

- [X] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.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.

app/components/Views/confirmations/context/ScrollContext/ScrollContext.test.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 
-import { ConfirmationFooterSelectorIDs } from '../../../../../../e2e/selectors/Confirmation/ConfirmationView.selectors';
+import {
+  ConfirmationFooterSelectorIDs,
+  ConfirmationPageSectionsSelectorIDs,
+} from '../../../../../../e2e/selectors/Confirmation/ConfirmationView.selectors';
 import renderWithProvider from '../../../../../util/test/renderWithProvider';
 import { personalSignatureConfirmationState } from '../../../../../util/test/confirm-data-helpers';
 import Footer from '../../components/Confirm/Footer';
@@ -55,7 +58,9 @@ describe('ScrollContext', () => {
         state: personalSignatureConfirmationState,
       },
     );
-    expect(queryByTestId('scroll-to-bottom-button')).toBeNull();
+    expect(
+      queryByTestId(ConfirmationPageSectionsSelectorIDs.SCROLL_BUTTON),
+    ).toBeNull();
   });
 });
 

app/components/Views/confirmations/context/ScrollContext/ScrollContext.tsx

@@ -15,6 +15,7 @@ import {
   View,
 } from 'react-native';
 
+import { ConfirmationPageSectionsSelectorIDs } from '../../../../../../e2e/selectors/Confirmation/ConfirmationView.selectors';
 import ButtonIcon, {
   ButtonIconSizes,
 } from '../../../../../component-library/components/Buttons/ButtonIcon';
@@ -87,7 +88,7 @@ export const ScrollContextProvider: React.FC<ScrollContextProviderProps> = ({
           iconName={IconName.Arrow2Down}
           iconColor={IconColor.Inverse}
           onPress={scrollToBottom}
-          testID="scroll-to-bottom-button"
+          testID={ConfirmationPageSectionsSelectorIDs.SCROLL_BUTTON}
         />
       )}
       <ScrollView

e2e/pages/Browser/Confirmations/PageSections.js

@@ -1,4 +1,5 @@
 import { ConfirmationPageSectionsSelectorIDs } from '../../../selectors/Confirmation/ConfirmationView.selectors';
+import Gestures from '../../../utils/Gestures';
 import Matchers from '../../../utils/Matchers';
 
 class PageSections {
@@ -25,6 +26,16 @@ class PageSections {
       ConfirmationPageSectionsSelectorIDs.MESSAGE_SECTION,
     );
   }
+
+  get ScrollButton() {
+    return Matchers.getElementByID(
+      ConfirmationPageSectionsSelectorIDs.SCROLL_BUTTON,
+    );
+  }
+
+  async tapScrollButton() {
+    await Gestures.waitAndTap(this.ScrollButton);
+  }
 }
 
 export default new PageSections();

e2e/pages/Browser/TestDApp.js

@@ -96,6 +96,12 @@ class TestDApp {
       TestDappSelectorsWebIDs.ETHEREUM_SIGN,
     );
   }
+  get permitSignButton() {
+    return Matchers.getElementByWebID(
+      BrowserViewSelectorsIDs.BROWSER_WEBVIEW_ID,
+      TestDappSelectorsWebIDs.PERMIT_SIGN,
+    );
+  }
   // This taps on the transfer tokens button under the "SEND TOKENS section"
   get nftTransferFromTokensButton() {
     return Matchers.getElementByWebID(
@@ -199,6 +205,10 @@ class TestDApp {
     await this.tapButton(this.ethereumSignButton);
   }
 
+  async tapPermitSignButton() {
+    await this.tapButton(this.permitSignButton);
+  }
+
   async tapERC20TransferButton() {
     await this.tapButton(this.erc20TransferTokensButton);
   }

e2e/selectors/Browser/TestDapp.selectors.js

@@ -8,6 +8,7 @@ export const TestDappSelectorsWebIDs = {
   INCREASE_ALLOWANCE_BUTTON_ID: 'increaseTokenAllowance',
   NFT_TRANSFER_FROM_BUTTON_ID: 'transferFromButton',
   PERSONAL_SIGN: 'personalSign',
+  PERMIT_SIGN: 'signPermit',
   SET_APPROVAL_FOR_ALL_NFT_BUTTON_ID: 'setApprovalForAllButton',
   SET_APPROVAL_FOR_ALL_ERC1155_BUTTON_ID: 'setApprovalForAllERC1155Button',
   SIGN_TYPE_DATA: 'signTypedData',

e2e/selectors/Confirmation/ConfirmationView.selectors.js

@@ -22,4 +22,5 @@ export const ConfirmationPageSectionsSelectorIDs = {
   SIWE_SIGNING_ACCOUNT_INFO_SECTION: 'siwe-signing-account-info-section',
   MESSAGE_SECTION: 'message-section',
   STAKING_DETAILS_SECTION: 'staking-details-section',
+  SCROLL_BUTTON: 'scroll-to-bottom-button',
 };

e2e/specs/confirmations-redesigned/signatures/confirm-scroll.spec.js

@@ -0,0 +1,78 @@
+'use strict';
+import Assertions from '../../../utils/Assertions.js';
+import Browser from '../../../pages/Browser/BrowserView.js';
+import FixtureBuilder from '../../../fixtures/fixture-builder.js';
+import FooterActions from '../../../pages/Browser/Confirmations/FooterActions.js';
+import PageSections from '../../../pages/Browser/Confirmations/PageSections.js';
+import TabBarComponent from '../../../pages/wallet/TabBarComponent.js';
+import TestDApp from '../../../pages/Browser/TestDApp.js';
+import TestHelpers from '../../../helpers.js';
+import { loginToApp } from '../../../viewHelper.js';
+import {
+  withFixtures,
+  defaultGanacheOptions,
+} from '../../../fixtures/fixture-helper.js';
+import { SmokeConfirmationsRedesigned } from '../../../tags.js';
+import { mockEvents } from '../../../api-mocking/mock-config/mock-events.js';
+
+const permitSignRequestBody = {
+  method: 'eth_signTypedData_v4',
+  params: [
+    '0x76cf1cdd1fcc252442b50d6e97207228aa4aefc3',
+    '{"primaryType":"Permit","types":{"EIP712Domain":[{"name":"name","type":"string"},{"name":"version","type":"string"},{"name":"chainId","type":"uint256"},{"name":"verifyingContract","type":"address"}],"Permit":[{"name":"owner","type":"address"},{"name":"spender","type":"address"},{"name":"value","type":"uint256"},{"name":"nonce","type":"uint256"},{"name":"deadline","type":"uint256"}]},"domain":{"chainId":1,"name":"MyToken","verifyingContract":"0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC","version":"1"},"message":{"owner":"0x8eeee1781fd885ff5ddef7789486676961873d12","spender":"0x5B38Da6a701c568545dCfcB03FcB875f56beddC4","value":3000,"nonce":0,"deadline":50000000000}}',
+  ],
+  origin: 'localhost',
+};
+
+describe(SmokeConfirmationsRedesigned('Confirmations Page Scroll'), () => {
+  beforeAll(async () => {
+    jest.setTimeout(2500000);
+    await TestHelpers.reverseServerPort();
+  });
+
+  it('should display scroll button only if the page has scroll', async () => {
+    await withFixtures(
+      {
+        dapp: true,
+        fixture: new FixtureBuilder()
+          .withGanacheNetwork()
+          .withPermissionControllerConnectedToTestDapp()
+          .build(),
+        restartDevice: true,
+        ganacheOptions: defaultGanacheOptions,
+        testSpecificMock: {
+          GET: [mockEvents.GET.remoteFeatureFlagsReDesignedConfirmations],
+          POST: [
+            {
+              ...mockEvents.POST.securityAlertApiValidate,
+              requestBody: permitSignRequestBody,
+              response: {
+                block: 20733277,
+                result_type: 'Malicious',
+                reason: 'malicious_domain',
+                description: `You're interacting with a malicious domain. If you approve this request, you might lose your assets.`,
+                features: [],
+              },
+            },
+          ],
+        },
+      },
+      async () => {
+        await loginToApp();
+
+        await TabBarComponent.tapBrowser();
+        await Browser.navigateToTestDApp();
+
+        await TestDApp.tapPersonalSignButton();
+        await Assertions.checkIfNotVisible(PageSections.ScrollButton);
+        await FooterActions.tapCancelButton();
+
+        await TestDApp.tapPermitSignButton();
+        await Assertions.checkIfVisible(PageSections.ScrollButton);
+        await PageSections.tapScrollButton();
+        await Assertions.checkIfNotVisible(PageSections.ScrollButton);
+        await FooterActions.tapCancelButton();
+      },
+    );
+  });
+});