Skip to content

Commit 3e308f8

Browse files
cortisikocortisiko
authored
test: update predict and confirmations components with proper testIDS (MetaMask#28011)
<!-- 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** > Updates Predict Market Details tab testIDs to be **stable and semantic** by switching from index-based IDs to typed tab-key IDs (`'positions' | 'outcomes' | 'about'`), and updates `PredictMarketDetailsTabBar` plus its unit tests to use the new `getPredictMarketDetailsSelector.tabBarTab(tabKey)` API. > > Adds explicit testIDs to the confirmations `NetworkFilter` tabs by introducing `network-filter.testIds.ts` and passing a required `testID` prop into `NetworkFilterTab` for the “All networks” option and each per-chain tab. > ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: ## **Related issues** Fixes: ## **Manual testing steps** ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** <!-- [screenshots/recordings] --> ## **Pre-merge author checklist** - [ ] 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). - [ ] I've completed the PR template to the best of my ability - [ ] I've included tests if applicable - [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] 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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Low risk: changes are limited to test ID generation and wiring for UI elements, with no business logic or data flow modifications. > > **Overview** > Updates Predict Market Details tab testIDs to be **stable and semantic** by switching from index-based IDs to typed tab-key IDs (`'positions' | 'outcomes' | 'about'`), and updates `PredictMarketDetailsTabBar` plus its unit tests to use the new `getPredictMarketDetailsSelector.tabBarTab(tabKey)` API. > > Adds explicit testIDs to the confirmations `NetworkFilter` tabs by introducing `network-filter.testIds.ts` and passing a required `testID` prop into `NetworkFilterTab` for the “All networks” option and each per-chain tab. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit bea4356. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent 18af7ab commit 3e308f8

5 files changed

Lines changed: 46 additions & 28 deletions

File tree

‎app/components/UI/Predict/Predict.testIds.ts‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,14 @@ export const getPredictFeedMockSelector = {
8080
// PREDICT MARKET DETAILS SELECTORS
8181
// ========================================
8282

83+
export type PredictMarketDetailsTabKey = 'positions' | 'outcomes' | 'about';
84+
85+
export const getPredictMarketDetailsSelector = {
86+
tabBarTab: (tabKey: PredictMarketDetailsTabKey) =>
87+
`predict-market-details-tab-bar-tab-${tabKey}`,
88+
icon: (name: string) => `icon-${name}`,
89+
} as const;
90+
8391
export const PredictMarketDetailsSelectorsIDs = {
8492
// Main screen
8593
SCREEN: 'predict-market-details-screen',
@@ -96,9 +104,9 @@ export const PredictMarketDetailsSelectorsIDs = {
96104
OUTCOMES_TAB: 'predict-market-details-outcomes-tab',
97105

98106
// Tab labels
99-
POSITIONS_TAB_LABEL: 'predict-market-details-tab-bar-tab-0',
100-
OUTCOMES_TAB_LABEL: 'predict-market-details-tab-bar-tab-1',
101-
ABOUT_TAB_LABEL: 'predict-market-details-tab-bar-tab-2',
107+
POSITIONS_TAB_LABEL: getPredictMarketDetailsSelector.tabBarTab('positions'),
108+
OUTCOMES_TAB_LABEL: getPredictMarketDetailsSelector.tabBarTab('outcomes'),
109+
ABOUT_TAB_LABEL: getPredictMarketDetailsSelector.tabBarTab('about'),
102110

103111
// Tab content containers
104112
ABOUT_TAB_CONTENT: 'about-tab-content',
@@ -119,11 +127,6 @@ export const PredictMarketDetailsSelectorsIDs = {
119127
'predict-details-buttons-skeleton-button-1',
120128
} as const;
121129

122-
export const getPredictMarketDetailsSelector = {
123-
tabBarTab: (index: number) => `predict-market-details-tab-bar-tab-${index}`,
124-
icon: (name: string) => `icon-${name}`,
125-
} as const;
126-
127130
export const PredictMarketDetailsSelectorsText = {
128131
// Tab content containers
129132
ABOUT_TAB_TEXT: 'About',

‎app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.test.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -805,7 +805,7 @@ describe('PredictMarketDetails', () => {
805805
setupPredictMarketDetailsTest();
806806

807807
const aboutTab = screen.getByTestId(
808-
getPredictMarketDetailsSelector.tabBarTab(1),
808+
getPredictMarketDetailsSelector.tabBarTab('about'),
809809
);
810810
fireEvent.press(aboutTab);
811811

@@ -818,7 +818,7 @@ describe('PredictMarketDetails', () => {
818818
setupPredictMarketDetailsTest();
819819

820820
const aboutTab = screen.getByTestId(
821-
getPredictMarketDetailsSelector.tabBarTab(1),
821+
getPredictMarketDetailsSelector.tabBarTab('about'),
822822
);
823823
fireEvent.press(aboutTab);
824824

@@ -834,7 +834,7 @@ describe('PredictMarketDetails', () => {
834834
setupPredictMarketDetailsTest();
835835

836836
const aboutTab = screen.getByTestId(
837-
getPredictMarketDetailsSelector.tabBarTab(1),
837+
getPredictMarketDetailsSelector.tabBarTab('about'),
838838
);
839839
fireEvent.press(aboutTab);
840840

@@ -848,7 +848,7 @@ describe('PredictMarketDetails', () => {
848848
const { mockNavigate } = setupPredictMarketDetailsTest();
849849

850850
const aboutTab = screen.getByTestId(
851-
getPredictMarketDetailsSelector.tabBarTab(1),
851+
getPredictMarketDetailsSelector.tabBarTab('about'),
852852
);
853853
fireEvent.press(aboutTab);
854854

@@ -1177,7 +1177,7 @@ describe('PredictMarketDetails', () => {
11771177
setupPredictMarketDetailsTest();
11781178

11791179
const aboutTab = screen.getByTestId(
1180-
getPredictMarketDetailsSelector.tabBarTab(1),
1180+
getPredictMarketDetailsSelector.tabBarTab('about'),
11811181
);
11821182
fireEvent.press(aboutTab);
11831183

@@ -1351,7 +1351,7 @@ describe('PredictMarketDetails', () => {
13511351
setupPredictMarketDetailsTest(marketWithoutEndDate);
13521352

13531353
const aboutTab = screen.getByTestId(
1354-
getPredictMarketDetailsSelector.tabBarTab(1),
1354+
getPredictMarketDetailsSelector.tabBarTab('about'),
13551355
);
13561356
fireEvent.press(aboutTab);
13571357

@@ -1423,7 +1423,7 @@ describe('PredictMarketDetails', () => {
14231423

14241424
// Switch to Positions tab (index 0 when positions exist)
14251425
const positionsTab = screen.getByTestId(
1426-
getPredictMarketDetailsSelector.tabBarTab(0),
1426+
getPredictMarketDetailsSelector.tabBarTab('positions'),
14271427
);
14281428
fireEvent.press(positionsTab);
14291429

@@ -1606,7 +1606,7 @@ describe('PredictMarketDetails', () => {
16061606

16071607
// Switch to Positions tab (index 0 when positions exist)
16081608
const positionsTab = screen.getByTestId(
1609-
getPredictMarketDetailsSelector.tabBarTab(0),
1609+
getPredictMarketDetailsSelector.tabBarTab('positions'),
16101610
);
16111611
fireEvent.press(positionsTab);
16121612

@@ -1641,7 +1641,7 @@ describe('PredictMarketDetails', () => {
16411641

16421642
// Switch to Positions tab (index 0 when positions exist)
16431643
const positionsTab = screen.getByTestId(
1644-
getPredictMarketDetailsSelector.tabBarTab(0),
1644+
getPredictMarketDetailsSelector.tabBarTab('positions'),
16451645
);
16461646
fireEvent.press(positionsTab);
16471647

@@ -1788,7 +1788,7 @@ describe('PredictMarketDetails', () => {
17881788

17891789
// Switch to Positions tab (index 0 when positions exist)
17901790
const positionsTab = screen.getByTestId(
1791-
getPredictMarketDetailsSelector.tabBarTab(0),
1791+
getPredictMarketDetailsSelector.tabBarTab('positions'),
17921792
);
17931793
fireEvent.press(positionsTab);
17941794

@@ -1821,7 +1821,7 @@ describe('PredictMarketDetails', () => {
18211821

18221822
// Switch to Positions tab (index 0 when positions exist)
18231823
const positionsTab = screen.getByTestId(
1824-
getPredictMarketDetailsSelector.tabBarTab(0),
1824+
getPredictMarketDetailsSelector.tabBarTab('positions'),
18251825
);
18261826
fireEvent.press(positionsTab);
18271827

@@ -1854,7 +1854,7 @@ describe('PredictMarketDetails', () => {
18541854

18551855
// Switch to Positions tab (index 0 when positions exist)
18561856
const positionsTab = screen.getByTestId(
1857-
getPredictMarketDetailsSelector.tabBarTab(0),
1857+
getPredictMarketDetailsSelector.tabBarTab('positions'),
18581858
);
18591859
fireEvent.press(positionsTab);
18601860

@@ -2221,7 +2221,7 @@ describe('PredictMarketDetails', () => {
22212221

22222222
// Switch to Positions tab (index 0 when positions exist)
22232223
const positionsTab = screen.getByTestId(
2224-
getPredictMarketDetailsSelector.tabBarTab(0),
2224+
getPredictMarketDetailsSelector.tabBarTab('positions'),
22252225
);
22262226
fireEvent.press(positionsTab);
22272227

@@ -2661,7 +2661,7 @@ describe('PredictMarketDetails', () => {
26612661
setupPredictMarketDetailsTest(closedMarket);
26622662

26632663
const aboutTab = screen.getByTestId(
2664-
getPredictMarketDetailsSelector.tabBarTab(1),
2664+
getPredictMarketDetailsSelector.tabBarTab('about'),
26652665
);
26662666
fireEvent.press(aboutTab);
26672667

@@ -2697,7 +2697,7 @@ describe('PredictMarketDetails', () => {
26972697
);
26982698

26992699
const aboutTabWithPositions = screen.getByTestId(
2700-
getPredictMarketDetailsSelector.tabBarTab(2),
2700+
getPredictMarketDetailsSelector.tabBarTab('about'),
27012701
);
27022702
fireEvent.press(aboutTabWithPositions);
27032703

‎app/components/UI/Predict/views/PredictMarketDetails/components/PredictMarketDetailsTabBar/PredictMarketDetailsTabBar.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,14 @@ import {
99
TextVariant,
1010
} from '@metamask/design-system-react-native';
1111
import { useTailwind } from '@metamask/design-system-twrnc-preset';
12-
import { PredictMarketDetailsSelectorsIDs } from '../../../../Predict.testIds';
13-
14-
type TabKey = 'positions' | 'outcomes' | 'about';
12+
import {
13+
getPredictMarketDetailsSelector,
14+
PredictMarketDetailsSelectorsIDs,
15+
type PredictMarketDetailsTabKey,
16+
} from '../../../../Predict.testIds';
1517

1618
export interface PredictMarketDetailsTabBarProps {
17-
tabs: { label: string; key: TabKey }[];
19+
tabs: { label: string; key: PredictMarketDetailsTabKey }[];
1820
activeTab: number | null;
1921
onTabPress: (tabIndex: number) => void;
2022
}
@@ -41,7 +43,7 @@ const PredictMarketDetailsTabBar = memo(
4143
'w-1/3 py-3',
4244
activeTab === index ? 'border-b-2 border-default' : '',
4345
)}
44-
testID={`${PredictMarketDetailsSelectorsIDs.TAB_BAR}-tab-${index}`}
46+
testID={getPredictMarketDetailsSelector.tabBarTab(tab.key)}
4547
>
4648
<Text
4749
variant={TextVariant.BodyMd}

‎app/components/Views/confirmations/components/network-filter/network-filter.testIds.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const NETWORK_FILTER_ALL_TEST_ID = 'transaction-pay-network-filter-all';
2+
3+
export const getNetworkFilterTestId = (chainId: string): string =>
4+
`transaction-pay-network-filter-${chainId}`;

‎app/components/Views/confirmations/components/network-filter/network-filter.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,18 @@ import {
2020
NETWORK_FILTER_ALL,
2121
} from '../../hooks/send/useNetworkFilter';
2222
import { ScrollView } from 'react-native-gesture-handler';
23+
import {
24+
getNetworkFilterTestId,
25+
NETWORK_FILTER_ALL_TEST_ID,
26+
} from './network-filter.testIds';
2327

2428
interface NetworkFilterTabProps {
2529
label: string;
2630
imageSource?: ImageSourcePropType;
2731
isSelected: boolean;
2832
onPress: () => void;
2933
showIcon?: boolean;
34+
testID: string;
3035
}
3136

3237
const NetworkFilterTab: React.FC<NetworkFilterTabProps> = ({
@@ -35,6 +40,7 @@ const NetworkFilterTab: React.FC<NetworkFilterTabProps> = ({
3540
isSelected,
3641
onPress,
3742
showIcon = false,
43+
testID,
3844
}) => {
3945
const tw = useTailwind();
4046

@@ -49,6 +55,7 @@ const NetworkFilterTab: React.FC<NetworkFilterTabProps> = ({
4955
)
5056
}
5157
hitSlop={{ top: 8, bottom: 8, left: 4, right: 4 }}
58+
testID={testID}
5259
>
5360
{showIcon && imageSource && (
5461
<Box twClassName="mr-2">
@@ -135,6 +142,7 @@ export const NetworkFilter: React.FC<NetworkFilterProps> = ({
135142
isSelected={selectedNetworkFilter === NETWORK_FILTER_ALL}
136143
onPress={() => setSelectedNetworkFilter(NETWORK_FILTER_ALL)}
137144
showIcon={false}
145+
testID={NETWORK_FILTER_ALL_TEST_ID}
138146
/>
139147

140148
{/* Individual Network Tabs */}
@@ -146,6 +154,7 @@ export const NetworkFilter: React.FC<NetworkFilterProps> = ({
146154
isSelected={selectedNetworkFilter === network.chainId}
147155
onPress={() => setSelectedNetworkFilter(network.chainId)}
148156
showIcon
157+
testID={getNetworkFilterTestId(network.chainId)}
149158
/>
150159
))}
151160
</ScrollView>

0 commit comments

Comments
 (0)