change testIDs to use CONST and displayName

Author: LukasMod

src/CONST/index.ts

@@ -5386,6 +5386,7 @@ const CONST = {
     LOTTIE_VIEW_TEST_ID: 'LottieView',
 
     DOT_INDICATOR_TEST_ID: 'DotIndicator',
+    ANIMATED_COLLAPSIBLE_CONTENT_TEST_ID: 'animated-collapsible-content',
 
     CHAT_HEADER_LOADER_HEIGHT: 36,
 

src/components/AnimatedCollapsible/index.tsx

@@ -110,7 +110,7 @@ function AnimatedCollapsible({isExpanded, children, header, duration = 300, styl
             <Animated.View style={[contentAnimatedStyle, contentStyle]}>
                 {isExpanded || isRendered ? (
                     <Animated.View
-                        testID="animated-collapsible-content"
+                        testID={CONST.ANIMATED_COLLAPSIBLE_CONTENT_TEST_ID}
                         style={styles.stickToTop}
                         onLayout={(e) => {
                             const height = e.nativeEvent.layout.height;

src/components/ReportSearchHeader/index.tsx

@@ -25,7 +25,7 @@ function ReportSearchHeader({report, style, transactions, avatarBorderColor}: Re
         <View
             dataSet={{dragArea: false}}
             style={[style, styles.reportSearchHeaderBar]}
-            testID="report-search-header"
+            testID={ReportSearchHeader.displayName}
         >
             <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden]}>{middleContent}</View>
         </View>

src/components/SelectionListWithSections/Search/ActionCell.tsx

@@ -110,7 +110,7 @@ function ActionCell({
 
         return isLargeScreenWidth ? (
             <Button
-                testID={`action-cell-button-${action}`}
+                testID={ActionCell.displayName}
                 text={text}
                 onPress={goToItem}
                 small

src/components/SelectionListWithSections/Search/TotalCell.tsx

@@ -13,7 +13,7 @@ function TotalCell({total, currency}: TotalCellProps) {
 
     return (
         <TextWithTooltip
-            testID="total-cell"
+            testID={TotalCell.displayName}
             shouldShowTooltip
             text={convertToDisplayString(total, currency)}
             style={[styles.optionDisplayName, styles.pre, styles.justifyContentCenter, styles.textBold, styles.textAlignRight]}

tests/unit/TransactionGroupListItemTest.tsx

@@ -203,11 +203,11 @@ describe('TransactionGroupListItem', () => {
 
         expect(screen.getByRole(CONST.ROLE.CHECKBOX)).toBeTruthy();
         expect(screen.getByRole(CONST.ROLE.CHECKBOX)).not.toBeChecked();
-        expect(screen.getByTestId('report-search-header')).toBeTruthy();
-        expect(screen.getByTestId('total-cell')).toBeTruthy();
-        expect(screen.getByTestId('action-cell-button-view')).toBeTruthy();
+        expect(screen.getByTestId('ReportSearchHeader')).toBeTruthy();
+        expect(screen.getByTestId('TotalCell')).toBeTruthy();
+        expect(screen.getByTestId('ActionCell')).toBeTruthy();
         expect(screen.getByLabelText('Expand')).toBeTruthy();
-        expect(screen.queryByTestId('animated-collapsible-content')).toBeNull();
+        expect(screen.queryByTestId(CONST.ANIMATED_COLLAPSIBLE_CONTENT_TEST_ID)).toBeNull();
     });
 
     it(`should toggle expansion state with ${CONST.TRANSACTION.RESULTS_PAGE_SIZE} items when Expand is triggered`, async () => {
@@ -216,7 +216,7 @@ describe('TransactionGroupListItem', () => {
         await expand();
 
         expect(screen.getByLabelText('Collapse')).toBeTruthy();
-        expect(screen.getByTestId('animated-collapsible-content')).toBeTruthy();
+        expect(screen.getByTestId(CONST.ANIMATED_COLLAPSIBLE_CONTENT_TEST_ID)).toBeTruthy();
 
         expect(getVisibleTransactionRowsCount()).toBe(CONST.TRANSACTION.RESULTS_PAGE_SIZE);
     });