feat: remove derived testIDs and add missing testIDs (#5099)

Author: k0ndee

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

@@ -71,61 +71,41 @@ You can use the component's color prop where available, or override the correspo
 
 ### Test IDs
 
-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:
+Hardcoded default test IDs have been removed for the components listed below:
 
 - `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.
+You can specify a `testID` explicitly to restore each component's own test ID.
+
+These components used to also derive test IDs for internal, implementation-only elements by appending a suffix to the `testID` prop (e.g. `${testID}-container`, `${testID}-icon`, `${testID}-outline`). They have been removed entirely.
+
+If you were relying on internal test IDs, update your tests not to rely on internal implementation details and only interact with elements or assert content your users can reach, e.g.: query by role, label, text etc., or `testID` props accepted by the component.
+
+Some components now accept explicit `testID` props for their interactable elements:
+
+- `BottomNavigation`: `barTestID` for the internal `BottomNavigation.Bar`, replacing the previous `${testID}-bar` derivation.
+- `Chip`: `closeIconTestID` for the close icon button.
+- `Dialog` and `Modal`: `overlayTestID` for the overlay displayed behind the content.
+- `Menu`: `overlayTestID` for the overlay displayed behind the menu.
+- `Searchbar`: `searchTestID`, `clearTestID`, and `trailingTestID` for the search, clear, and trailing icon buttons.
+- `Snackbar`: `iconTestID` for the icon button.
 
 ## Components
 

src/components/Appbar/AppbarContent.tsx

@@ -135,7 +135,6 @@ const AppbarContent = ({
           numberOfLines={1}
           accessible
           role={onPress ? 'none' : 'heading'}
-          testID={testID ? `${testID}-title-text` : undefined}
           maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
         >
           {title}

src/components/BottomNavigation/BottomNavigation.tsx

@@ -252,6 +252,10 @@ export type Props<Route extends BaseRoute> = {
    * TestID used for testing purposes
    */
   testID?: string;
+  /**
+   * testID for the underlying `BottomNavigation.Bar`.
+   */
+  barTestID?: string;
 };
 
 const FAR_FAR_AWAY = Platform.OS === 'web' ? 0 : 9999;
@@ -336,6 +340,7 @@ const BottomNavigation = <Route extends BaseRoute>({
   labelMaxFontSizeMultiplier = 1,
   compact: compactProp,
   testID,
+  barTestID,
   theme: themeOverrides,
   getLazy = ({ route }: { route: Route }) => route.lazy,
 }: Props<Route>) => {
@@ -579,7 +584,7 @@ const BottomNavigation = <Route extends BaseRoute>({
         safeAreaInsets={safeAreaInsets}
         labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}
         compact={compact}
-        testID={testID ? `${testID}-bar` : undefined}
+        testID={barTestID}
         theme={theme}
       />
     </View>

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -493,10 +493,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
       ]}
       onLayout={onLayout}
     >
-      <Animated.View
-        style={[styles.barContent, { backgroundColor }]}
-        testID={testID ? `${testID}-content` : undefined}
-      >
+      <Animated.View style={[styles.barContent, { backgroundColor }]}>
         <View
           style={[
             styles.items,
@@ -509,7 +506,6 @@ const BottomNavigationBar = <Route extends BaseRoute>({
             },
           ]}
           role={'tablist'}
-          testID={testID ? `${testID}-content-wrapper` : undefined}
         >
           {routes.map((route, index) => {
             const focused = navigationState.index === index;

src/components/Button/Button.tsx

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

src/components/Card/Card.tsx

@@ -204,7 +204,7 @@ const Card = ({
   const borderRadius = theme.shapes.corner.medium;
 
   const content = (
-    <View style={[styles.innerContainer, contentStyle]} testID={testID}>
+    <View style={[styles.innerContainer, contentStyle]}>
       {React.Children.map(children, (child, index) =>
         React.isValidElement(child)
           ? React.cloneElement(child as React.ReactElement<any>, {
@@ -225,13 +225,12 @@ const Card = ({
       style={[{ borderColor }, style]}
       theme={theme}
       elevation={elevation}
-      testID={testID ? `${testID}-container` : undefined}
+      testID={hasPassedTouchHandler ? undefined : testID}
       {...rest}
     >
       {isMode('outlined') && (
         <View
           pointerEvents="none"
-          testID={testID ? `${testID}-outline` : undefined}
           style={[
             {
               borderColor,
@@ -252,6 +251,7 @@ const Card = ({
           onPress={onPress}
           onPressIn={handlePressIn}
           onPressOut={handlePressOut}
+          testID={testID}
         >
           {content}
         </Pressable>

src/components/Card/CardTitle.tsx

@@ -102,6 +102,10 @@ export type Props = ViewProps & {
    * @optional
    */
   theme?: ThemeProp;
+  /**
+   * testID to be used on tests.
+   */
+  testID?: string;
 };
 
 const LEFT_SIZE = 40;
@@ -143,14 +147,15 @@ const CardTitle = ({
   rightStyle,
   style,
   theme: themeOverrides,
+  testID,
 }: Props) => {
   useInternalTheme(themeOverrides);
 
   const minHeight = subtitle || left || right ? 72 : 50;
   const marginBottom = subtitle ? 0 : 2;
 
   return (
-    <View style={[styles.container, { minHeight }, style]}>
+    <View style={[styles.container, { minHeight }, style]} testID={testID}>
       {left ? (
         <View style={[styles.left, leftStyle]}>
           {left({

src/components/Checkbox/CheckboxItem.tsx

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

src/components/Chip/Chip.tsx

@@ -87,6 +87,10 @@ export type Props = Omit<ViewProps, 'style'> & {
    * Accessibility label for the close icon. This is read by the screen reader when the user taps the close icon.
    */
   closeIconAccessibilityLabel?: string;
+  /**
+   * testID for the close icon button.
+   */
+  closeIconTestID?: string;
   /**
    * Function to execute on press.
    */
@@ -186,6 +190,7 @@ const Chip = ({
   'aria-label': ariaLabel,
   role = 'button',
   closeIconAccessibilityLabel = 'Close',
+  closeIconTestID,
   onPress,
   onLongPress,
   onPressOut,
@@ -281,7 +286,6 @@ const Chip = ({
       elevation={elevation}
       transitionDuration={elevationTransitionDuration}
       {...rest}
-      testID={testID ? `${testID}-container` : undefined}
       theme={theme}
     >
       <TouchableRipple
@@ -386,6 +390,7 @@ const Chip = ({
             disabled={disabled}
             role="button"
             aria-label={closeIconAccessibilityLabel}
+            testID={closeIconTestID}
           >
             <View style={[styles.icon, styles.closeIcon, styles.md3CloseIcon]}>
               {closeIcon ? (

src/components/CrossFadeIcon.tsx

@@ -98,6 +98,7 @@ const CrossFadeIcon = ({
 
   return (
     <View
+      testID={testID}
       style={[
         styles.content,
         {
@@ -107,17 +108,11 @@ const CrossFadeIcon = ({
       ]}
     >
       {hasPreviousIcon ? (
-        <Animated.View
-          style={[styles.icon, previousIconStyle]}
-          testID={testID ? `${testID}-previous` : undefined}
-        >
+        <Animated.View style={[styles.icon, previousIconStyle]}>
           <Icon source={previousIcon} size={size} color={color} theme={theme} />
         </Animated.View>
       ) : null}
-      <Animated.View
-        style={[styles.icon, currentIconStyle]}
-        testID={testID ? `${testID}-current` : undefined}
-      >
+      <Animated.View style={[styles.icon, currentIconStyle]}>
         <Icon source={currentIcon} size={size} color={color} theme={theme} />
       </Animated.View>
     </View>