refactor: btc send form

tests/page-object-models/send.page.ts

@@ -1,8 +1,6 @@
 import { Locator, Page } from '@playwright/test';
 import { CryptoAssetSelectors } from '@tests/selectors/crypto-asset.selectors';
 import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
-import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
-import { createTestSelector } from '@tests/utils';
 
 import { RouteUrls } from '@shared/route-urls';
 
@@ -16,13 +14,13 @@ export class SendPage {
   readonly memoInput: Locator;
   readonly previewSendTxButton: Locator;
   readonly recipientChooseAccountButton: Locator;
+  readonly recipientSelectFieldAddress: Locator;
+  readonly recipientSelectFieldBnsName: Locator;
   readonly recipientInput: Locator;
   readonly recipientBnsAddressLabel: Locator;
-  readonly recipientBnsAddressInfoIcon: Locator;
   readonly sendMaxButton: Locator;
   readonly feesRow: Locator;
   readonly memoRow: Locator;
-  readonly feesSelector: string = createTestSelector(SharedComponentsSelectors.FeeRow);
 
   constructor(page: Page) {
     this.page = page;
@@ -40,13 +38,16 @@ export class SendPage {
     this.recipientChooseAccountButton = page.getByTestId(
       SendCryptoAssetSelectors.RecipientChooseAccountButton
     );
+    this.recipientSelectFieldAddress = this.page.getByTestId(
+      SendCryptoAssetSelectors.RecipientSelectFieldAddress
+    );
+    this.recipientSelectFieldBnsName = this.page.getByTestId(
+      SendCryptoAssetSelectors.RecipientSelectFieldBnsName
+    );
     this.recipientInput = this.page.getByTestId(SendCryptoAssetSelectors.RecipientFieldInput);
     this.recipientBnsAddressLabel = this.page.getByTestId(
       SendCryptoAssetSelectors.RecipientBnsAddressLabel
     );
-    this.recipientBnsAddressInfoIcon = page.getByTestId(
-      SendCryptoAssetSelectors.RecipientBnsAddressInfoIcon
-    );
     this.feesRow = page.getByTestId(SendCryptoAssetSelectors.ConfirmationDetailsFee);
     this.memoRow = page.getByTestId(SendCryptoAssetSelectors.ConfirmationDetailsMemo);
 
@@ -70,8 +71,4 @@ export class SendPage {
     await this.page.waitForURL('**' + `${RouteUrls.SendCryptoAsset}/stx`);
     await this.page.getByTestId(SendCryptoAssetSelectors.SendForm).waitFor();
   }
-
-  async waitForFeesSelector() {
-    await this.page.waitForSelector(this.feesSelector, { timeout: 30000 });
-  }
 }

tests/selectors/send.selectors.ts

@@ -13,9 +13,10 @@ export enum SendCryptoAssetSelectors {
   MemoFieldInput = 'memo-field-input',
   PreviewSendTxBtn = 'preview-send-tx-btn',
   RecipientChooseAccountButton = 'recipient-choose-account-button',
+  RecipientSelectFieldAddress = 'recipient-select-field-address',
+  RecipientSelectFieldBnsName = 'recipient-select-field-bns-name',
   RecipientFieldInput = 'recipient-field-input',
   RecipientBnsAddressLabel = 'recipient-bns-address-label',
-  RecipientBnsAddressInfoIcon = 'recipient-bns-address-info-icon',
   RecipientBnsAddressCopyToClipboard = 'recipient-bns-address-copy-to-clipboard',
   SendForm = 'send-form',
   SendMaxBtn = 'send-max-btn',

tests/specs/send/send-btc.spec.ts

@@ -7,7 +7,6 @@ import { FormErrorMessages } from '@app/common/error-messages';
 import { test } from '../../fixtures/fixtures';
 
 test.describe('send btc', () => {
-  // TODO: Don't run these if we disable bitcoin sending?
   test.beforeEach(async ({ extensionId, globalPage, homePage, onboardingPage, sendPage }) => {
     await globalPage.setupAndUseApiCalls(extensionId);
     await onboardingPage.signInExistingUser();

tests/specs/send/send-stx.spec.ts

@@ -31,26 +31,29 @@ test.describe('send stx', () => {
 
     test('that recipient address matches bns name', async ({ page, sendPage }) => {
       await sendPage.amountInput.fill('.0001');
+      await sendPage.recipientSelectFieldAddress.click();
+      await sendPage.recipientSelectFieldBnsName.click();
       await sendPage.recipientInput.fill(TEST_BNS_NAME);
       await sendPage.recipientInput.blur();
       await sendPage.recipientBnsAddressLabel.waitFor();
-      await sendPage.recipientBnsAddressInfoIcon.hover();
       const bnsResolvedAddress = await page.getByText(TEST_BNS_RESOLVED_ADDRESS).innerText();
 
       test.expect(bnsResolvedAddress).toBeTruthy();
     });
 
     test('that fee row defaults to middle fee estimation', async ({ page }) => {
+      await page.getByTestId(SharedComponentsSelectors.FeeToBePaidLabel).scrollIntoViewIfNeeded();
       const feeToBePaid = await page
         .getByTestId(SharedComponentsSelectors.FeeToBePaidLabel)
         .innerText();
       const fee = Number(feeToBePaid.split(' ')[0]);
       // Using min/max fee caps
-      const isMiddleFee = fee >= 0.003 && fee < 0.75;
+      const isMiddleFee = fee >= 0.003 && fee <= 0.75;
       test.expect(isMiddleFee).toBeTruthy();
     });
 
     test('that low fee estimate can be selected', async ({ page }) => {
+      await page.getByTestId(SharedComponentsSelectors.FeeToBePaidLabel).scrollIntoViewIfNeeded();
       await page.getByTestId(SharedComponentsSelectors.MiddleFeeEstimateItem).click();
       await page.getByTestId(SharedComponentsSelectors.LowFeeEstimateItem).click();
       const feeToBePaid = await page
@@ -58,7 +61,7 @@ test.describe('send stx', () => {
         .innerText();
       const fee = Number(feeToBePaid.split(' ')[0]);
       // Using min/max fee caps
-      const isLowFee = fee >= 0.0025 && fee < 0.5;
+      const isLowFee = fee >= 0.0025 && fee <= 0.5;
       test.expect(isLowFee).toBeTruthy();
     });
   });
@@ -117,21 +120,22 @@ test.describe('send stx', () => {
   });
 
   test.describe('send form preview', () => {
-    test('that it shows preview of tx details to be confirmed', async ({ sendPage }) => {
+    test('that it shows preview of tx details to be confirmed', async ({ page, sendPage }) => {
       await sendPage.amountInput.fill('0.000001');
       await sendPage.recipientInput.fill(TEST_ACCOUNT_2_STX_ADDRESS);
-      await sendPage.waitForFeesSelector();
+      await page.getByTestId(SharedComponentsSelectors.FeeToBePaidLabel).scrollIntoViewIfNeeded();
       await sendPage.previewSendTxButton.click();
       const details = await sendPage.confirmationDetails.allInnerTexts();
       test.expect(details).toBeTruthy();
     });
 
     test('that it shows preview of tx details after validation error is resolved', async ({
+      page,
       sendPage,
     }) => {
       await sendPage.amountInput.fill('0.0000001');
       await sendPage.recipientInput.fill(TEST_ACCOUNT_2_STX_ADDRESS);
-      await sendPage.waitForFeesSelector();
+      await page.getByTestId(SharedComponentsSelectors.FeeToBePaidLabel).scrollIntoViewIfNeeded();
       await sendPage.previewSendTxButton.click();
       const errorMsg = await sendPage.amountInputErrorLabel.innerText();
       test.expect(errorMsg).toEqual(FormErrorMessages.MustBePositive);
@@ -143,6 +147,7 @@ test.describe('send stx', () => {
     });
 
     test('that asset value, recipient, memo and fees on preview match input', async ({
+      page,
       sendPage,
     }) => {
       const amount = '0.000001';
@@ -151,7 +156,7 @@ test.describe('send stx', () => {
       await sendPage.amountInput.fill(amount);
       await sendPage.recipientInput.fill(TEST_ACCOUNT_2_STX_ADDRESS);
       await sendPage.memoInput.fill(memo);
-      await sendPage.waitForFeesSelector();
+      await page.getByTestId(SharedComponentsSelectors.FeeToBePaidLabel).scrollIntoViewIfNeeded();
       const fees = await sendPage.page
         .getByTestId(SharedComponentsSelectors.FeeToBePaidLabel)
         .innerText();
@@ -177,13 +182,13 @@ test.describe('send stx', () => {
       test.expect(confirmationMemo).toEqual(memo);
     });
 
-    test('that empty memo on preview matches default empty value', async ({ sendPage }) => {
+    test('that empty memo on preview matches default empty value', async ({ page, sendPage }) => {
       const amount = '0.000001';
       const emptyMemoPreviewValue = 'No memo';
 
       await sendPage.amountInput.fill(amount);
       await sendPage.recipientInput.fill(TEST_ACCOUNT_2_STX_ADDRESS);
-      await sendPage.waitForFeesSelector();
+      await page.getByTestId(SharedComponentsSelectors.FeeToBePaidLabel).scrollIntoViewIfNeeded();
       await sendPage.previewSendTxButton.click();
 
       const confirmationMemo = await sendPage.memoRow