test: initial off-ramp test to show build quote screen (#11573)

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

This is the initial test and foundation for Off-Ramp testing. It should
go through the onboarding screen, select region, select payment method,
and show the screen to build a Sell quote.


## **Related issues**

https://consensyssoftware.atlassian.net/browse/RAMPS-1869


## **Manual testing steps**

This test is consistently passing:

```
 PASS  e2e/specs/ramps/offramp.spec.js (36.081 s)
  smokeAssets OffRamp
    ✓ should select Region and Payment Method to see the Build Sell Quote screen (16087 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        36.139 s
```

## **Screenshots/Recordings**


## **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.

---------

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>

e2e/pages/Ramps/BuildQuoteView.js

@@ -5,6 +5,11 @@ class BuildQuoteView {
   get amountToBuyLabel() {
     return Matchers.getElementByText(BuildQuoteSelectors.AMOUNT_TO_BUY_LABEL);
   }
+
+  get amountToSellLabel() {
+    return Matchers.getElementByText(BuildQuoteSelectors.AMOUNT_TO_SELL_LABEL);
+  }
+
   get getQuotesButton() {
     return Matchers.getElementByText(BuildQuoteSelectors.GET_QUOTES_BUTTON);
   }

e2e/pages/Ramps/SellGetStartedView.js

@@ -0,0 +1,15 @@
+import Matchers from '../../utils/Matchers';
+import Gestures from '../../utils/Gestures';
+import { GetStartedSelectors } from '../../selectors/Ramps/GetStarted.selectors';
+
+class SellGetStartedView {
+  get getStartedButton() {
+    return Matchers.getElementByText(GetStartedSelectors.GET_STARTED);
+  }
+
+  async tapGetStartedButton() {
+    await Gestures.waitAndTap(this.getStartedButton);
+  }
+}
+
+export default new SellGetStartedView();

e2e/pages/modals/WalletActionsModal.js

@@ -21,6 +21,10 @@ class WalletActionsModal {
     return Matchers.getElementByID(WalletActionsModalSelectorsIDs.BUY_BUTTON);
   }
 
+  get sellButton() {
+    return Matchers.getElementByID(WalletActionsModalSelectorsIDs.SELL_BUTTON);
+  }
+
   async tapSendButton() {
     await Gestures.waitAndTap(this.sendButton);
   }
@@ -36,6 +40,10 @@ class WalletActionsModal {
   async tapBuyButton() {
     await Gestures.waitAndTap(this.buyButton);
   }
+
+  async tapSellButton() {
+    await Gestures.waitAndTap(this.sellButton);
+  }
 }
 
 export default new WalletActionsModal();

e2e/selectors/Ramps/BuildQuote.selectors.js

@@ -2,5 +2,6 @@ import enContent from '../../../locales/languages/en.json';
 
 export const BuildQuoteSelectors = {
   AMOUNT_TO_BUY_LABEL: enContent.fiat_on_ramp_aggregator.amount_to_buy,
+  AMOUNT_TO_SELL_LABEL: enContent.fiat_on_ramp_aggregator.amount_to_sell,
   GET_QUOTES_BUTTON: enContent.fiat_on_ramp_aggregator.get_quotes,
 };

e2e/specs/ramps/offramp.spec.js

@@ -0,0 +1,75 @@
+'use strict';
+import { loginToApp } from '../../viewHelper';
+import TabBarComponent from '../../pages/TabBarComponent';
+import WalletActionsModal from '../../pages/modals/WalletActionsModal';
+import FixtureBuilder from '../../fixtures/fixture-builder';
+import {
+  loadFixture,
+  startFixtureServer,
+  stopFixtureServer,
+} from '../../fixtures/fixture-helper';
+import { CustomNetworks } from '../../resources/networks.e2e';
+import TestHelpers from '../../helpers';
+import FixtureServer from '../../fixtures/fixture-server';
+import { getFixturesServerPort } from '../../fixtures/utils';
+import { SmokeAssets } from '../../tags';
+import Assertions from '../../utils/Assertions';
+import SellGetStartedView from '../../pages/Ramps/SellGetStartedView';
+import SelectRegionView from '../../pages/Ramps/SelectRegionView';
+import SelectPaymentMethodView from '../../pages/Ramps/SelectPaymentMethodView';
+import BuildQuoteView from '../../pages/Ramps/BuildQuoteView';
+
+const fixtureServer = new FixtureServer();
+
+const Regions = {
+  USA: 'United States of America',
+  CALIFORNIA: 'California',
+  FRANCE: 'France',
+  UK: 'United Kingdom',
+};
+
+const PaymentMethods = {
+  DEBIT_OR_CREDIT: 'Debit or Credit',
+  INSTANT_ACH_BANK_TRANSFER: 'Insant ACH Bank Transfer',
+  ACH_BANK_TRANSFER: 'ACH Bank Transfer',
+}
+
+describe(SmokeAssets('Off-Ramp'), () => {
+  beforeAll(async () => {
+    await TestHelpers.reverseServerPort();
+    const fixture = new FixtureBuilder()
+      .withNetworkController(CustomNetworks.Tenderly)
+      .build();
+    await startFixtureServer(fixtureServer);
+    await loadFixture(fixtureServer, { fixture });
+    await device.launchApp({
+      permissions: { notifications: 'YES' },
+      launchArgs: { fixtureServerPort: `${getFixturesServerPort()}` },
+    });
+    await loginToApp();
+  });
+
+  afterAll(async () => {
+    await stopFixtureServer(fixtureServer);
+  });
+
+  beforeEach(async () => {
+    jest.setTimeout(150000);
+  });
+
+  it('should display Build Sell Quote based on selected Region and Payment', async () => {
+    await TabBarComponent.tapWallet();
+    await TabBarComponent.tapActions();
+    await WalletActionsModal.tapSellButton();
+    await SellGetStartedView.tapGetStartedButton();
+    await SelectRegionView.tapSelectRegionDropdown();
+    await SelectRegionView.tapRegionOption(Regions.USA);
+    await SelectRegionView.tapRegionOption(Regions.CALIFORNIA);
+    await SelectRegionView.tapContinueButton();
+    await SelectPaymentMethodView.tapPaymentMethodOption(PaymentMethods.DEBIT_OR_CREDIT);
+    await SelectPaymentMethodView.tapContinueButton();    
+    await Assertions.checkIfVisible(BuildQuoteView.amountToSellLabel);
+    await Assertions.checkIfVisible(BuildQuoteView.getQuotesButton);
+  });
+
+});

e2e/specs/ramps/onramp.spec.js

@@ -41,7 +41,7 @@ describe(SmokeAssets('Buy Crypto'), () => {
     jest.setTimeout(150000);
   });
 
-  it('should select Region and Payment Method to see the Build Quote screen', async () => {
+  it('should select Region and Payment Method to see the Build Buy Quote screen', async () => {
     await TabBarComponent.tapWallet();
     await TabBarComponent.tapActions();
     await WalletActionsModal.tapBuyButton();