Outline plan for reviewer comments

Author: bfullam

app/components/UI/Bridge/Views/BridgeView/BridgeView.test.tsx

@@ -25,6 +25,7 @@ import { BridgeViewSelectorsIDs } from './BridgeView.testIds';
 import { MOCK_ENTROPY_SOURCE as mockEntropySource } from '../../../../../util/test/keyringControllerTestUtils';
 import { RootState } from '../../../../../reducers';
 import { mockQuoteWithMetadata } from '../../_mocks_/bridgeQuoteWithMetadata';
+import { BridgeTrendingTokensSectionTestIds } from '../../components/BridgeTrendingTokensSection/BridgeTrendingTokensSection.testIds';
 
 // Mock the account-tree-controller file that imports the problematic module
 jest.mock(
@@ -849,7 +850,7 @@ describe('BridgeView', () => {
       expect(queryByTestId('banneralert')).toBeNull();
       expect(queryByTestId('edit-slippage-button')).toBeNull();
       expect(
-        queryByTestId(BridgeViewSelectorsIDs.TRENDING_TOKENS_SECTION),
+        queryByTestId(BridgeTrendingTokensSectionTestIds.SECTION),
       ).toBeNull();
       expect(queryByText('Fetching quote')).toBeNull();
     });
@@ -925,7 +926,7 @@ describe('BridgeView', () => {
       });
       expect(queryByTestId('edit-slippage-button')).toBeNull();
       expect(
-        queryByTestId(BridgeViewSelectorsIDs.TRENDING_TOKENS_SECTION),
+        queryByTestId(BridgeTrendingTokensSectionTestIds.SECTION),
       ).toBeNull();
     });
 
@@ -963,7 +964,7 @@ describe('BridgeView', () => {
       });
       expect(getByTestId(BridgeViewSelectorsIDs.CONFIRM_BUTTON)).toBeTruthy();
       expect(
-        queryByTestId(BridgeViewSelectorsIDs.TRENDING_TOKENS_SECTION),
+        queryByTestId(BridgeTrendingTokensSectionTestIds.SECTION),
       ).toBeNull();
     });
 
@@ -1016,7 +1017,7 @@ describe('BridgeView', () => {
       );
 
       expect(
-        getByTestId(BridgeViewSelectorsIDs.TRENDING_TOKENS_SECTION),
+        getByTestId(BridgeTrendingTokensSectionTestIds.SECTION),
       ).toBeTruthy();
       expect(queryByTestId('edit-slippage-button')).toBeNull();
     });

app/components/UI/Bridge/Views/BridgeView/BridgeView.testIds.ts

@@ -6,11 +6,6 @@ export const BridgeViewSelectorsIDs = {
   CONFIRM_BUTTON: 'bridge-confirm-button',
   CONFIRM_BUTTON_KEYPAD: 'bridge-confirm-button-keypad',
   BRIDGE_VIEW_SCROLL: 'bridge-view-scroll',
-  TRENDING_TOKENS_SECTION: 'bridge-trending-tokens-section',
-  TRENDING_PRICE_FILTER: 'bridge-trending-price-filter',
-  TRENDING_NETWORK_FILTER: 'bridge-trending-network-filter',
-  TRENDING_TIME_FILTER: 'bridge-trending-time-filter',
-  TRENDING_SHOW_MORE: 'bridge-trending-show-more',
   QUOTE_DETAILS_SKELETON: 'bridge-quote-details-skeleton',
 } as const;
 

app/components/UI/Bridge/components/BridgeTrendingTokensSection/BridgeTrendingTokensSection.test.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import BridgeTrendingTokensSection from './BridgeTrendingTokensSection';
 import { useTokenListFilters } from '../../../Trending/hooks/useTokenListFilters/useTokenListFilters';
 import { useTrendingRequest } from '../../../Trending/hooks/useTrendingRequest/useTrendingRequest';
+import { BridgeTrendingTokensSectionTestIds } from './BridgeTrendingTokensSection.testIds';
 
 jest.mock('react-redux', () => ({
   useSelector: jest.fn(() => ({})),
@@ -30,24 +31,24 @@ jest.mock('../../../Trending/utils/sortTrendingTokens', () => ({
 jest.mock(
   '../../../Trending/components/TrendingTokenRowItem/TrendingTokenRowItem',
   () => {
-    const React = jest.requireActual('react');
+    const ReactLib = jest.requireActual('react');
     const { View } = jest.requireActual('react-native');
     return {
       __esModule: true,
       default: ({ token }: { token: { assetId: string } }) =>
-        React.createElement(View, { testID: `row-${token.assetId}` }),
+        ReactLib.createElement(View, { testID: `row-${token.assetId}` }),
     };
   },
 );
 
 jest.mock(
   '../../../Trending/components/TrendingTokenSkeleton/TrendingTokensSkeleton',
   () => {
-    const React = jest.requireActual('react');
+    const ReactLib = jest.requireActual('react');
     const { View } = jest.requireActual('react-native');
     return {
       __esModule: true,
-      default: () => React.createElement(View, { testID: 'skeleton-row' }),
+      default: () => ReactLib.createElement(View, { testID: 'skeleton-row' }),
     };
   },
 );
@@ -118,7 +119,9 @@ describe('BridgeTrendingTokensSection', () => {
 
     const rows = getAllByTestId(/^row-/);
     expect(rows).toHaveLength(12);
-    expect(getByTestId('bridge-trending-show-more')).toBeTruthy();
+    expect(
+      getByTestId(BridgeTrendingTokensSectionTestIds.SHOW_MORE),
+    ).toBeTruthy();
   });
 
   it('appends one chunk when isNearBottom becomes true', () => {
@@ -143,15 +146,19 @@ describe('BridgeTrendingTokensSection', () => {
     rerender(<BridgeTrendingTokensSection />);
 
     expect(getAllByTestId(/^row-/)).toHaveLength(8);
-    expect(queryByTestId('bridge-trending-show-more')).toBeNull();
+    expect(
+      queryByTestId(BridgeTrendingTokensSectionTestIds.SHOW_MORE),
+    ).toBeNull();
   });
 
   it('does not append chunk while a bottom sheet is open', () => {
     const { getAllByTestId, getByTestId, rerender } = render(
       <BridgeTrendingTokensSection />,
     );
 
-    fireEvent.press(getByTestId('bridge-trending-price-filter'));
+    fireEvent.press(
+      getByTestId(BridgeTrendingTokensSectionTestIds.PRICE_FILTER),
+    );
 
     rerender(<BridgeTrendingTokensSection isNearBottom />);
 

app/components/UI/Bridge/components/BridgeTrendingTokensSection/BridgeTrendingTokensSection.testIds.ts

@@ -0,0 +1,10 @@
+export const BridgeTrendingTokensSectionTestIds = {
+  SECTION: 'bridge-trending-tokens-section',
+  PRICE_FILTER: 'bridge-trending-price-filter',
+  NETWORK_FILTER: 'bridge-trending-network-filter',
+  TIME_FILTER: 'bridge-trending-time-filter',
+  SHOW_MORE: 'bridge-trending-show-more',
+} as const;
+
+export type BridgeTrendingTokensSectionTestIdsType =
+  typeof BridgeTrendingTokensSectionTestIds;

app/components/UI/Bridge/components/BridgeTrendingTokensSection/BridgeTrendingTokensSection.tsx

@@ -27,12 +27,12 @@ import { useTokenListFilters } from '../../../Trending/hooks/useTokenListFilters
 import { useTrendingRequest } from '../../../Trending/hooks/useTrendingRequest/useTrendingRequest';
 import { sortTrendingTokens } from '../../../Trending/utils/sortTrendingTokens';
 import { strings } from '../../../../../../locales/i18n';
-import { BridgeViewSelectorsIDs } from '../../Views/BridgeView/BridgeView.testIds';
 import { getNetworkImageSource } from '../../../../../util/networks';
 import { NETWORK_TO_SHORT_NETWORK_NAME_MAP } from '../../../../../constants/bridge';
 import type { ProcessedNetwork } from '../../../../hooks/useNetworksByNamespace/useNetworksByNamespace';
 import type { CaipChainId } from '@metamask/utils';
 import { FilterButton } from '../../../Trending/components/FilterBar/FilterBar';
+import { BridgeTrendingTokensSectionTestIds } from './BridgeTrendingTokensSection.testIds';
 
 const TOKEN_CHUNK_SIZE = 12;
 
@@ -142,7 +142,7 @@ const BridgeTrendingTokensSection = ({
     <>
       <Box
         twClassName="mt-4 px-4 pb-4"
-        testID={BridgeViewSelectorsIDs.TRENDING_TOKENS_SECTION}
+        testID={BridgeTrendingTokensSectionTestIds.SECTION}
       >
         <Text
           variant={TextVariant.HeadingLg}
@@ -156,19 +156,19 @@ const BridgeTrendingTokensSection = ({
           twClassName="gap-2 mb-3 w-full"
         >
           <FilterButton
-            testID={BridgeViewSelectorsIDs.TRENDING_PRICE_FILTER}
+            testID={BridgeTrendingTokensSectionTestIds.PRICE_FILTER}
             onPress={() => setActiveBottomSheet('price_change')}
             label={priceChangeButtonText}
             twClassName="flex-1"
           />
           <FilterButton
-            testID={BridgeViewSelectorsIDs.TRENDING_NETWORK_FILTER}
+            testID={BridgeTrendingTokensSectionTestIds.NETWORK_FILTER}
             onPress={() => setActiveBottomSheet('network')}
             label={selectedNetworkName}
             twClassName="flex-1"
           />
           <FilterButton
-            testID={BridgeViewSelectorsIDs.TRENDING_TIME_FILTER}
+            testID={BridgeTrendingTokensSectionTestIds.TIME_FILTER}
             onPress={() => setActiveBottomSheet('time')}
             label={selectedTimeOption}
             twClassName="w-[72px] shrink-0"
@@ -192,7 +192,7 @@ const BridgeTrendingTokensSection = ({
               ))}
         {!isLoading && hasMore ? (
           <Pressable
-            testID={BridgeViewSelectorsIDs.TRENDING_SHOW_MORE}
+            testID={BridgeTrendingTokensSectionTestIds.SHOW_MORE}
             onPress={loadNextChunk}
             style={({ pressed }) =>
               tw.style('mt-3 py-2 self-center', pressed && 'opacity-70')