fix: remove hardcoded default testIDs from components (#5088)

Author: k0ndee

docs/6.x/docs/guides/migration.md

@@ -71,12 +71,61 @@ You can use the component's color prop where available, or override the correspo
 
 ### Test IDs
 
-Some hardcoded and generated test IDs have been removed for the following components:
-
-- `Appbar.Header`: `${testID}-root-layer`
-- `Surface`: `surface` and `${testID}-outer-layer`
-
-You can specify a `testID` explicitly and use that value to query the component.
+Hardcoded default test IDs have been removed for the components listed below. Many of these components also derive test IDs for their internal parts by appending a suffix to the `testID` prop (e.g. `${testID}-container`). Since `testID` is no longer defaulted to a hardcoded value, none of these derived test IDs are set either unless you pass a `testID` explicitly — so all queries by the IDs below will stop matching:
+
+- `Appbar.Content`: `appbar-content`
+  - `appbar-content-title-text`
+- `Appbar.Header`: `appbar-header`
+  - `appbar-header-root-layer`
+- `BottomNavigation`: `bottom-navigation`
+  - `bottom-navigation-bar`
+- `BottomNavigation.Bar`: `bottom-navigation-bar`
+  - `bottom-navigation-bar-content`
+  - `bottom-navigation-bar-content-wrapper`
+- `Button`: `button`
+  - `button-container`
+  - `button-icon-container`
+  - `button-text`
+- `Card`: `card`
+  - `card-container`
+  - `card-outline`
+- `Chip`: `chip`
+  - `chip-container`
+- `Drawer.CollapsedItem`: `drawer-collapsed-item`
+  - `drawer-collapsed-item-outline`
+  - `drawer-collapsed-item-container`
+- `FAB`: `floating-action-button`
+  - `floating-action-button-container`
+  - `floating-action-button-text`
+- `FAB.Extended`: `extended-floating-action-button`
+  - `extended-floating-action-button-container`
+  - `extended-floating-action-button-text`
+- `FAB.Menu`: `floating-action-button-menu`
+- `IconButton`: `icon-button`
+  - `icon-button-container`
+  - `icon-button-icon` (and `icon-button-icon-previous` / `icon-button-icon-current` when `animated`)
+- `Menu`: `menu`
+  - `menu-view`
+  - `menu-surface`
+- `Menu.Item`: `menu-item`
+  - `menu-item-title`
+- `Modal`: `modal`
+  - `modal-backdrop`
+  - `modal-wrapper`
+  - `modal-surface`
+- `ProgressBar`: `progress-bar`
+  - `progress-bar-fill`
+- `Searchbar`: `search-bar`
+  - `search-bar-container`
+  - `search-bar-icon`
+  - `search-bar-icon-wrapper`
+  - `search-bar-clear-icon`
+  - `search-bar-trailering-icon`
+  - `search-bar-divider`
+- `Surface`: `surface`
+  - `surface-outer-layer`
+
+You can specify a `testID` explicitly to restore both the component's own test ID and all of its derived test IDs above, using the same suffixes.
 
 ## Components
 

src/components/Appbar/AppbarContent.tsx

@@ -95,7 +95,7 @@ const AppbarContent = ({
   titleMaxFontSizeMultiplier,
   mode = 'small',
   theme: themeOverrides,
-  testID = 'appbar-content',
+  testID,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -135,7 +135,7 @@ const AppbarContent = ({
           numberOfLines={1}
           accessible
           role={onPress ? 'none' : 'heading'}
-          testID={`${testID}-title-text`}
+          testID={testID ? `${testID}-title-text` : undefined}
           maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
         >
           {title}

src/components/Appbar/AppbarHeader.tsx

@@ -85,7 +85,7 @@ const AppbarHeader = ({
   mode = Platform.OS === 'ios' ? 'center-aligned' : 'small',
   elevated = false,
   theme: themeOverrides,
-  testID = 'appbar-header',
+  testID,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);

src/components/BottomNavigation/BottomNavigation.tsx

@@ -335,7 +335,7 @@ const BottomNavigation = <Route extends BaseRoute>({
   safeAreaInsets,
   labelMaxFontSizeMultiplier = 1,
   compact: compactProp,
-  testID = 'bottom-navigation',
+  testID,
   theme: themeOverrides,
   getLazy = ({ route }: { route: Route }) => route.lazy,
 }: Props<Route>) => {
@@ -579,7 +579,7 @@ const BottomNavigation = <Route extends BaseRoute>({
         safeAreaInsets={safeAreaInsets}
         labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}
         compact={compact}
-        testID={`${testID}-bar`}
+        testID={testID ? `${testID}-bar` : undefined}
         theme={theme}
       />
     </View>

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -323,7 +323,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
   safeAreaInsets,
   labelMaxFontSizeMultiplier = 1,
   compact: compactProp,
-  testID = 'bottom-navigation-bar',
+  testID,
   theme: themeOverrides,
 }: Props<Route>) => {
   const theme = useInternalTheme(themeOverrides);
@@ -495,7 +495,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
     >
       <Animated.View
         style={[styles.barContent, { backgroundColor }]}
-        testID={`${testID}-content`}
+        testID={testID ? `${testID}-content` : undefined}
       >
         <View
           style={[
@@ -509,7 +509,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
             },
           ]}
           role={'tablist'}
-          testID={`${testID}-content-wrapper`}
+          testID={testID ? `${testID}-content-wrapper` : undefined}
         >
           {routes.map((route, index) => {
             const focused = navigationState.index === index;

src/components/Button/Button.tsx

@@ -184,7 +184,7 @@ const Button = ({
   uppercase: uppercaseProp,
   contentStyle,
   labelStyle,
-  testID = 'button',
+  testID,
   accessible,
   background,
   maxFontSizeMultiplier,
@@ -292,7 +292,7 @@ const Button = ({
     <Surface
       {...rest}
       ref={ref}
-      testID={`${testID}-container`}
+      testID={testID ? `${testID}-container` : undefined}
       backgroundColor={backgroundOpacity < 1 ? 'transparent' : backgroundColor}
       {...touchableStyle}
       style={[
@@ -342,7 +342,10 @@ const Button = ({
       >
         <View style={[styles.content, { opacity: textOpacity }, contentStyle]}>
           {icon && loading !== true ? (
-            <View style={iconStyle} testID={`${testID}-icon-container`}>
+            <View
+              style={iconStyle}
+              testID={testID ? `${testID}-icon-container` : undefined}
+            >
               <Icon
                 source={icon}
                 size={customLabelSize ?? iconSize}
@@ -369,7 +372,7 @@ const Button = ({
             variant="labelLarge"
             selectable={false}
             numberOfLines={1}
-            testID={`${testID}-text`}
+            testID={testID ? `${testID}-text` : undefined}
             style={[
               styles.label,
               isMode('text')

src/components/Card/Card.tsx

@@ -141,7 +141,7 @@ const Card = ({
   style,
   contentStyle,
   theme: themeOverrides,
-  testID = 'card',
+  testID,
   accessible,
   disabled,
   ref,
@@ -225,13 +225,13 @@ const Card = ({
       style={[{ borderColor }, style]}
       theme={theme}
       elevation={elevation}
-      testID={`${testID}-container`}
+      testID={testID ? `${testID}-container` : undefined}
       {...rest}
     >
       {isMode('outlined') && (
         <View
           pointerEvents="none"
-          testID={`${testID}-outline`}
+          testID={testID ? `${testID}-outline` : undefined}
           style={[
             {
               borderColor,

src/components/Checkbox/CheckboxItem.tsx

@@ -174,7 +174,7 @@ const CheckboxItem = ({
         {isLeading && checkbox}
         <Text
           variant={labelVariant}
-          testID={`${testID}-text`}
+          testID={testID ? `${testID}-text` : undefined}
           maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
           style={[styles.label, computedStyle, labelStyle]}
         >

src/components/Chip/Chip.tsx

@@ -196,7 +196,7 @@ const Chip = ({
   textStyle,
   style,
   theme: themeOverrides,
-  testID = 'chip',
+  testID,
   selectedColor,
   showSelectedCheck = true,
   ellipsizeMode,
@@ -281,7 +281,7 @@ const Chip = ({
       elevation={elevation}
       transitionDuration={elevationTransitionDuration}
       {...rest}
-      testID={`${testID}-container`}
+      testID={testID ? `${testID}-container` : undefined}
       theme={theme}
     >
       <TouchableRipple

src/components/CrossFadeIcon.tsx

@@ -44,7 +44,7 @@ const CrossFadeIcon = ({
   size,
   source,
   theme: themeOverrides,
-  testID = 'cross-fade-icon',
+  testID,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
 
@@ -109,14 +109,14 @@ const CrossFadeIcon = ({
       {hasPreviousIcon ? (
         <Animated.View
           style={[styles.icon, previousIconStyle]}
-          testID={`${testID}-previous`}
+          testID={testID ? `${testID}-previous` : undefined}
         >
           <Icon source={previousIcon} size={size} color={color} theme={theme} />
         </Animated.View>
       ) : null}
       <Animated.View
         style={[styles.icon, currentIconStyle]}
-        testID={`${testID}-current`}
+        testID={testID ? `${testID}-current` : undefined}
       >
         <Icon source={currentIcon} size={size} color={color} theme={theme} />
       </Animated.View>