fix: remove hardcoded default testIDs from components

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

@@ -88,7 +88,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

@@ -195,7 +195,7 @@ const Chip = ({
   textStyle,
   style,
   theme: themeOverrides,
-  testID = 'chip',
+  testID,
   selectedColor,
   showSelectedCheck = true,
   ellipsizeMode,
@@ -280,7 +280,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>

src/components/DataTable/DataTableCell.tsx

@@ -108,7 +108,7 @@ const CellContent = ({
       style={textStyle}
       numberOfLines={1}
       maxFontSizeMultiplier={maxFontSizeMultiplier}
-      testID={`${testID}-text-container`}
+      testID={testID ? `${testID}-text-container` : undefined}
     >
       {children}
     </Text>

src/components/Drawer/DrawerCollapsedItem.tsx

@@ -111,7 +111,7 @@ const DrawerCollapsedItem = ({
   disabled,
   'aria-label': ariaLabel,
   badge = false,
-  testID = 'drawer-collapsed-item',
+  testID,
   labelMaxFontSizeMultiplier,
   ...rest
 }: Props) => {
@@ -195,12 +195,12 @@ const DrawerCollapsedItem = ({
               style,
               animatedOutlineStyle,
             ]}
-            testID={`${testID}-outline`}
+            testID={testID ? `${testID}-outline` : undefined}
           />
 
           <View
             style={[styles.icon, { top: iconPadding }]}
-            testID={`${testID}-container`}
+            testID={testID ? `${testID}-container` : undefined}
           >
             {badge !== false && (
               <View style={styles.badgeContainer}>

src/components/FAB/Extended.tsx

@@ -169,7 +169,7 @@ const Extended = ({
   labelMaxFontSizeMultiplier,
   background,
   style,
-  testID = 'extended-floating-action-button',
+  testID,
   theme: themeOverrides,
   ref,
 }: Props) => {

src/components/FAB/FAB.tsx

@@ -131,7 +131,7 @@ const FAB = ({
   'aria-expanded': ariaExpanded,
   background,
   style,
-  testID = 'floating-action-button',
+  testID,
   theme,
   ref,
 }: Props) => (

src/components/FAB/Menu.tsx

@@ -446,7 +446,6 @@ const MorphingTrigger = ({
         },
         visible ? styles.pointerEventsBoxNone : styles.pointerEventsNone,
       ]}
-      testID={testID}
     >
       <Shell
         size={size}
@@ -456,6 +455,7 @@ const MorphingTrigger = ({
         visible={visible}
         onPress={onPress}
         aria-label={ariaLabel}
+        testID={testID}
         widthShared={widthShared}
         heightShared={heightShared}
         borderRadiusShared={borderRadiusShared}
@@ -537,7 +537,7 @@ const Menu = ({
   alignment = 'end',
   closeIcon = 'close',
   items,
-  testID = 'floating-action-button-menu',
+  testID,
   theme: themeOverrides,
 }: MenuProps) => {
   const theme = useInternalTheme(themeOverrides);

src/components/FAB/Shell.tsx

@@ -212,7 +212,7 @@ const Shell = ({
   overlay,
   children,
   style,
-  testID = 'fab-shell',
+  testID,
   theme: themeOverrides,
   ref,
 }: ShellProps) => {
@@ -319,7 +319,7 @@ const Shell = ({
         visible ? styles.pointerEventsAuto : styles.pointerEventsNone,
       ]}
       elevation={elevation}
-      testID={`${testID}-container`}
+      testID={testID ? `${testID}-container` : undefined}
       theme={theme}
     >
       <Animated.View style={[styles.clip, clipStyle]}>

src/components/IconButton/IconButton.tsx

@@ -121,7 +121,7 @@ const IconButton = ({
   mode,
   style,
   theme: themeOverrides,
-  testID = 'icon-button',
+  testID,
   loading = false,
   contentStyle,
   ref,
@@ -157,7 +157,7 @@ const IconButton = ({
   return (
     <Animated.View
       ref={ref}
-      testID={`${testID}-container`}
+      testID={testID ? `${testID}-container` : undefined}
       style={[
         styles.container,
         {
@@ -199,7 +199,12 @@ const IconButton = ({
           {loading ? (
             <ActivityIndicator size={size} color={iconColor} />
           ) : (
-            <IconComponent color={iconColor} source={icon} size={size} />
+            <IconComponent
+              color={iconColor}
+              source={icon}
+              size={size}
+              testID={testID ? `${testID}-icon` : undefined}
+            />
           )}
         </View>
       </TouchableRipple>

src/components/List/ListItem.tsx

@@ -242,7 +242,7 @@ const ListItem = ({
           : null}
         <View
           style={[styles.item, styles.content, contentStyle]}
-          testID={`${testID}-content`}
+          testID={testID ? `${testID}-content` : undefined}
         >
           {renderTitle()}