From 6a4a64e0736b58f99b9b08c2f2847ae36666f608 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 23 Oct 2024 15:01:07 -0700
Subject: [PATCH] chore: Cleanup, and queryByTestID for test stability

---
 .../BottomSheetDialog.test.tsx                |  2 --
 .../TokenSortBottomSheet.test.tsx             | 31 ++++++++++++-------
 .../TokenSortBottomSheet.tsx                  | 11 +++++--
 .../UI/Tokens/TokensBottomSheet/index.ts      |  1 -
 e2e/selectors/wallet/WalletView.selectors.js  |  3 ++
 5 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.test.tsx b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.test.tsx
index 3573dfed9bc..e103ee36076 100644
--- a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.test.tsx
+++ b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.test.tsx
@@ -10,7 +10,6 @@ import BottomSheetDialog from './BottomSheetDialog';
 import { BottomSheetDialogRef } from './BottomSheetDialog.types';
 
 jest.mock('react-native-safe-area-context', () => {
-  // using disting digits for mock rects to make sure they are not mixed up
   const inset = { top: 1, right: 2, bottom: 3, left: 4 };
   const frame = { width: 5, height: 6, x: 7, y: 8 };
   return {
@@ -94,5 +93,4 @@ describe('BottomSheetDialog', () => {
 
     expect(onCloseMock).toHaveBeenCalled();
   });
-  //   Note: Add Gesture tests when react-native-gesture-handler gets updated
 });
diff --git a/app/components/UI/Tokens/TokensBottomSheet/TokenSortBottomSheet.test.tsx b/app/components/UI/Tokens/TokensBottomSheet/TokenSortBottomSheet.test.tsx
index ca5da6fe2e7..49ba7695b53 100644
--- a/app/components/UI/Tokens/TokensBottomSheet/TokenSortBottomSheet.test.tsx
+++ b/app/components/UI/Tokens/TokensBottomSheet/TokenSortBottomSheet.test.tsx
@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux';
 import Engine from '../../../../core/Engine';
 import { selectTokenSortConfig } from '../../../../selectors/preferencesController';
 import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
+import { WalletViewSelectorsIDs } from '../../../../../e2e/selectors/wallet/WalletView.selectors';
 
 jest.mock('react-redux', () => ({
   useSelector: jest.fn(),
@@ -67,17 +68,23 @@ describe('TokenSortBottomSheet', () => {
   });
 
   it('renders correctly with the default sort option selected', () => {
-    const { getByText } = render(<TokenSortBottomSheet />);
-
-    expect(getByText('Sort By')).toBeTruthy();
-    expect(getByText('Declining balance (USD high-low)')).toBeTruthy();
-    expect(getByText('Alphabetically (A-Z)')).toBeTruthy();
+    const { getByText, queryByTestId } = render(<TokenSortBottomSheet />);
+
+    expect(queryByTestId(WalletViewSelectorsIDs.SORT_BY)).toBeTruthy();
+    expect(
+      queryByTestId(WalletViewSelectorsIDs.SORT_DECLINING_BALANCE),
+    ).toBeTruthy();
+    expect(
+      queryByTestId(WalletViewSelectorsIDs.SORT_ALPHABETICAL),
+    ).toBeTruthy();
   });
 
   it('triggers PreferencesController to sort by token fiat amount when first cell is pressed', async () => {
-    const { getByText } = render(<TokenSortBottomSheet />);
+    const { queryByTestId } = render(<TokenSortBottomSheet />);
 
-    fireEvent.press(getByText('Declining balance (USD high-low)'));
+    fireEvent.press(
+      queryByTestId(WalletViewSelectorsIDs.SORT_DECLINING_BALANCE),
+    );
 
     await waitFor(() => {
       expect(
@@ -91,9 +98,9 @@ describe('TokenSortBottomSheet', () => {
   });
 
   it('triggers PreferencesController to sort alphabetically when the second cell is pressed', async () => {
-    const { getByText } = render(<TokenSortBottomSheet />);
+    const { queryByTestId } = render(<TokenSortBottomSheet />);
 
-    fireEvent.press(getByText('Alphabetically (A-Z)'));
+    fireEvent.press(queryByTestId(WalletViewSelectorsIDs.SORT_ALPHABETICAL));
 
     await waitFor(() => {
       expect(
@@ -114,8 +121,10 @@ describe('TokenSortBottomSheet', () => {
       return null;
     });
 
-    const { getByText } = render(<TokenSortBottomSheet />);
+    const { queryByTestId } = render(<TokenSortBottomSheet />);
 
-    expect(getByText('Alphabetically (A-Z)')).toBeTruthy();
+    expect(
+      queryByTestId(WalletViewSelectorsIDs.SORT_ALPHABETICAL),
+    ).toBeTruthy();
   });
 });
diff --git a/app/components/UI/Tokens/TokensBottomSheet/TokenSortBottomSheet.tsx b/app/components/UI/Tokens/TokensBottomSheet/TokenSortBottomSheet.tsx
index c084c7e0291..7518f5506a6 100644
--- a/app/components/UI/Tokens/TokensBottomSheet/TokenSortBottomSheet.tsx
+++ b/app/components/UI/Tokens/TokensBottomSheet/TokenSortBottomSheet.tsx
@@ -15,6 +15,7 @@ import currencySymbols from '../../../../util/currency-symbols.json';
 import Cell, {
   CellVariant,
 } from '../../../../component-library/components/Cells/Cell';
+import { WalletViewSelectorsIDs } from '../../../../../e2e/selectors/wallet/WalletView.selectors';
 
 const TokenSortBottomSheet = () => {
   const { colors } = useTheme();
@@ -48,10 +49,15 @@ const TokenSortBottomSheet = () => {
   return (
     <BottomSheet shouldNavigateBack>
       <View style={styles.bottomSheetWrapper}>
-        <Text variant={TextVariant.HeadingMD} style={styles.bottomSheetTitle}>
-          Sort By
+        <Text
+          testID={WalletViewSelectorsIDs.SORT_BY}
+          variant={TextVariant.HeadingMD}
+          style={styles.bottomSheetTitle}
+        >
+          {strings('wallet.sort_by')}
         </Text>
         <Cell
+          testID={WalletViewSelectorsIDs.SORT_DECLINING_BALANCE}
           variant={CellVariant.Select}
           title={strings('wallet.declining_balance', {
             currency:
@@ -63,6 +69,7 @@ const TokenSortBottomSheet = () => {
           onPress={() => onSortControlsActionSheetPress(0)}
         />
         <Cell
+          testID={WalletViewSelectorsIDs.SORT_ALPHABETICAL}
           variant={CellVariant.Select}
           title={strings('wallet.alphabetically')}
           isSelected={tokenSortConfig.key !== 'tokenFiatAmount'}
diff --git a/app/components/UI/Tokens/TokensBottomSheet/index.ts b/app/components/UI/Tokens/TokensBottomSheet/index.ts
index 2f394e23a19..0f9bc12f503 100644
--- a/app/components/UI/Tokens/TokensBottomSheet/index.ts
+++ b/app/components/UI/Tokens/TokensBottomSheet/index.ts
@@ -1,6 +1,5 @@
 import Routes from '../../../../constants/navigation/Routes';
 import { createNavigationDetails } from '../../../../util/navigation/navUtils';
-// import { TokenSortBottomSheetParams } from './AccountSelector.types';
 
 export const createTokensBottomSheetNavDetails = createNavigationDetails(
   Routes.MODAL.ROOT_MODAL_FLOW,
diff --git a/e2e/selectors/wallet/WalletView.selectors.js b/e2e/selectors/wallet/WalletView.selectors.js
index fb45acaee3b..265a13cd0b1 100644
--- a/e2e/selectors/wallet/WalletView.selectors.js
+++ b/e2e/selectors/wallet/WalletView.selectors.js
@@ -27,6 +27,9 @@ export const WalletViewSelectorsIDs = {
   TEST_COLLECTIBLE: 'collectible-Test Dapp NFTs #1-1',
   COLLECTIBLE_FALLBACK: 'fallback-nft-with-token-id',
   IMPORT_TOKEN_FOOTER_LINK: 'import-token-footer-link',
+  SORT_DECLINING_BALANCE: 'sort-declining-balance',
+  SORT_ALPHABETICAL: 'sort-alphabetical',
+  SORT_BY: 'sort-by',
 };
 
 export const WalletViewSelectorsText = {