test: add scenario navigate through multiple unapproved transactions. (…

…#23569)

## **Description**

In this PR we add the scenario for the flow 'Navigate through multiple
unapproved transactions, approve and reject individually, reject all at
once'.
This task belongs to the effort of documenting manual QA flows in this
[Epic](#21962).

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

## **Related issues**

Fixes:
[22410](#22410)

## **Manual testing steps**

1. Verify that the test steps align with the sequence in the video.
2. You can find rendered table
[here](https://github.com/MetaMask/metamask-extension/blob/2d6b8f9df35a33d9382ba5e7f6e7cd00fefebf1d/test/scenarios/3.%20transactions/navigate%20multiple%20transactions.csv).


## **Screenshots/Recordings**



https://github.com/MetaMask/metamask-extension/assets/104780023/9163cde9-8c94-4dde-9a48-b1ba9baca337



### **Before**

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

### **After**

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

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained what problem this PR is solving and how it
is solved.
- [x] I've linked related issues
- [x] I've included manual testing steps
- [x] I've included screenshots/recordings if applicable
- [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-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [x] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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/scenarios/3. transactions/navigate multiple transactions.csv

@@ -0,0 +1,18 @@
+Step,Test steps,Test data,Expected result,Notes
+1,Open the extension.,,The Welcome Back screen is shown.,
+2,Proceed to Unlock the wallet.,password (8 characters min).,The Ether balance is shown on the overview. The wallet address is shown on the overview. The selected network is Ethereum Mainnet.        ,
+3,Switch networks to a test network.,e.g. Sepolia,The Sepolia balance is shown on the overview. The wallet address is shown on the overview. The selected network is Sepolia.,
+4,Open the test dapp in another tab.,https://metamask.github.io/test-dapp/,,
+5,Proceed to connect with MetaMask. ,,Connect with the current account. ,
+6,Create a transaction using test dapp.,,"Click 'Send legacy transaction', 'Send EIP 1559 transaction' or deploy any kind of contract.",
+7,Do not confirm the transaction.,,"A MetaMask popup is displayed, presenting the estimated gas fees and total fees.",
+8,Click outside the MetaMask popup on the test dapp tab.,,"A blue badge, indicating the number of unapproved transactions (1), is displayed on the MetaMask logo.",
+9,Use test dapp to create another transaction.,,"Click 'Send legacy transaction', 'Send EIP 1559 transaction' or deploy any kind of contract.",
+10,Do not confirm the transaction.,,"A MetaMask popup is displayed, presenting the estimated gas fees and total fees. At the top, there is  a notification indicating '1 of 2 requests waiting to be acknowledged,' accompanied by navigation arrows ('>' and '>>') for managing multiple requests.",
+11,Click outside the MetaMask popup on the test dapp tab.,,"A blue badge, indicating the number of unapproved transactions (2), is displayed on the MetaMask logo.",
+12,Use test dapp to create third transaction.,,"Click 'Send legacy transaction', 'Send EIP 1559 transaction' or deploy any kind of contract. A MetaMask popup is displayed, presenting the estimated gas fees and total fees. At the top, there is  a notification indicating '1 of 3 requests waiting to be acknowledged,' accompanied by navigation arrows ('>' and '>>') for managing multiple requests. A blue badge, indicating the number of unapproved transactions (3), is displayed on the MetaMask logo.",
+,"On the confirmation screen, user can smoothly navigate through multiple unapproved transactions using the arrows at the top.",,"The single arrows ('>' and '<') allow for moving to the next or previous transaction, while the double arrows ('>>' and '<<') enable quick access to the first or last transaction in the queue, ensuring efficient transaction management.",
+13,Scroll to the bottom of the confirmation screen.,,The notification 'Reject 3 transactions' is displayed.,
+14,Reject any chosen transaction to make sure the transactions can be individually rejected.,,"Upon successfully rejecting the transaction, the notification at the bottom of the confirmation screen is updated to 'Reject 2 transactions'.",
+15,Click 'Reject 2 transactions'.,,The popup with the notification 'You are about to batch reject 2 transactions' appears.,
+16,Click 'Reject all'.,,"The transaction queue is cleared, the blue badge on the MetaMask logo disappears, signifying that there are no pending transactions.",