feat(appbar): remove unnecessary derived testID

Author: Paweł Kata

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

@@ -72,7 +72,6 @@ You can use the component's color prop where available, or override the correspo
 
 Hardcoded default test IDs have been removed for the components listed below:
 
-- `Appbar`: `${testID}-root-layer`
 - `BottomNavigation`: `bottom-navigation`
 - `BottomNavigation.Bar`: `bottom-navigation-bar`
 - `Button`: `button`
@@ -156,6 +155,10 @@ const MyComponent = () => (
 
 Material Design 3 drops the bottom bar support contained previously in the `Appbar` scope and moves it to `Toolbars`, hence you can't use the component to construct a bottom bar anymore - for these cases please use the `Toolbar` component.
 
+#### Test IDs
+
+`Appbar` no longer derives internal, implementation-only test IDs (e.g. for its surface, content, or search layout wrappers) from the `testID` prop. Only the `testID` prop itself is set on the root element; the `Searchbar` rendered by the `search` variant accepts its own `testID` through `searchBar.testID`.
+
 ### Surface
 
 - The `elevation` prop no longer accepts a React Native `Animated.Value`. Any `elevation` changes are animated automatically.

src/components/Appbar/Appbar.tsx

@@ -257,18 +257,15 @@ const Appbar = ({
     const {
       inputStyle: _searchInputStyle,
       style: _searchStyle,
-      testID: searchTestID = `${testID}-search`,
+      testID: searchTestID,
       ...searchProps
     } = searchBar;
 
     return (
       <View style={styles.searchRow}>
         {renderLeadingButton()}
-        <View testID={`${testID}-search-slot`} style={styles.searchSlot}>
-          <View
-            testID={`${testID}-search-width-limiter`}
-            style={styles.searchWidthLimiter}
-          >
+        <View style={styles.searchSlot}>
+          <View style={styles.searchWidthLimiter}>
             <Searchbar
               {...searchProps}
               aria-label={searchProps['aria-label'] ?? searchProps.placeholder}
@@ -302,7 +299,6 @@ const Appbar = ({
           onHeadlinePress,
           subtitle,
           subtitleProps,
-          testID: `${testID}-content`,
           theme,
           variant,
         }
@@ -311,7 +307,6 @@ const Appbar = ({
   const renderFlexibleHeadlineImage = () =>
     headlineImage ? (
       <View
-        testID={`${testID}-content-headline-image`}
         aria-hidden
         importantForAccessibility="no-hide-descendants"
         style={styles.flexibleHeadlineImage}
@@ -384,7 +379,6 @@ const Appbar = ({
   return (
     <Surface
       ref={ref}
-      testID={`${testID}-root-layer`}
       elevation={0}
       backgroundColor={backgroundColor}
       theme={theme}

src/components/Appbar/AppbarContent.tsx

@@ -26,7 +26,6 @@ type Props = Pick<
   theme: Theme;
   variant: AppbarHeadlineVariant;
   style?: StyleProp<ViewStyle>;
-  testID: string;
 };
 
 const headlineVariants: Record<AppbarHeadlineVariant, TypescaleKey> = {
@@ -57,7 +56,6 @@ const AppbarContent = ({
   onHeadlinePress,
   subtitle,
   subtitleProps,
-  testID,
   theme,
   variant,
   style,
@@ -97,11 +95,7 @@ const AppbarContent = ({
   );
 
   const content = hasHeadlineImage ? (
-    <View
-      testID={`${testID}-headline-image`}
-      aria-hidden
-      style={styles.headlineImage}
-    >
+    <View aria-hidden style={styles.headlineImage}>
       {headlineImage}
     </View>
   ) : (
@@ -132,11 +126,6 @@ const AppbarContent = ({
     </>
   );
 
-  const wrapperProps = {
-    testID,
-    style: wrapperStyle,
-  };
-
   if (onHeadlinePress) {
     const {
       'aria-label': ariaLabel,
@@ -147,7 +136,7 @@ const AppbarContent = ({
 
     return (
       <Pressable
-        {...wrapperProps}
+        style={wrapperStyle}
         {...restHeadlinePressableProps}
         role="button"
         aria-label={
@@ -170,7 +159,7 @@ const AppbarContent = ({
 
   return (
     <View
-      {...wrapperProps}
+      style={wrapperStyle}
       accessible={hasHeadlineImage || undefined}
       accessibilityLabel={hasHeadlineImage ? headline : undefined}
       role={hasHeadlineImage ? 'heading' : undefined}

src/components/__tests__/Appbar/Appbar.test.tsx

@@ -169,7 +169,7 @@ describe('Appbar content', () => {
       <Appbar variant="small" headline="Inbox" testID={testIDPrefix} />
     );
 
-    expect(screen.getByTestId('appbar-content')).toHaveStyle({
+    expect(screen.getByText('Inbox').parent).toHaveStyle({
       marginStart: 12,
     });
 
@@ -182,7 +182,7 @@ describe('Appbar content', () => {
       />
     );
 
-    expect(screen.getByTestId('appbar-content')).toHaveStyle({
+    expect(screen.getByText('Inbox').parent).toHaveStyle({
       marginStart: 4,
     });
   });
@@ -199,7 +199,7 @@ describe('Appbar content', () => {
         />
       );
 
-      expect(screen.getByTestId('appbar-content')).toHaveStyle({
+      expect(screen.getByText('Inbox').parent).toHaveStyle({
         flexBasis: 'auto',
       });
     }
@@ -213,7 +213,7 @@ describe('Appbar surface', () => {
       <Appbar variant="small" headline="Inbox" testID={testIDPrefix} />
     );
 
-    expect(screen.getByTestId('appbar-root-layer')).toHaveStyle({
+    expect(screen.getByTestId(testIDPrefix).parent).toHaveStyle({
       backgroundColor: LightTheme.colors.surface,
     });
 
@@ -226,7 +226,7 @@ describe('Appbar surface', () => {
       />
     );
 
-    expect(screen.getByTestId('appbar-root-layer')).toHaveStyle({
+    expect(screen.getByTestId(testIDPrefix).parent).toHaveStyle({
       backgroundColor: LightTheme.colors.surfaceContainer,
     });
 
@@ -240,7 +240,7 @@ describe('Appbar surface', () => {
       />
     );
 
-    expect(screen.getByTestId('appbar-root-layer')).toHaveStyle({
+    expect(screen.getByTestId(testIDPrefix).parent).toHaveStyle({
       backgroundColor: customBackground,
     });
   });
@@ -267,7 +267,7 @@ describe('Appbar surface', () => {
       </SafeAreaProvider>
     );
 
-    expect(screen.getByTestId('appbar-root-layer')).toHaveStyle({
+    expect(screen.getByTestId(testIDPrefix).parent).toHaveStyle({
       borderBottomLeftRadius: 16,
       borderBottomRightRadius: 16,
       paddingTop: 20,
@@ -468,7 +468,9 @@ describe('Appbar search', () => {
     expect(
       screen.getByRole('searchbox', { name: 'Search messages' })
     ).toBeOnTheScreen();
-    expect(screen.getByTestId('appbar-search').parent).toHaveStyle({
+    expect(
+      screen.getByRole('searchbox', { name: 'Search messages' }).parent
+    ).toHaveStyle({
       backgroundColor: LightTheme.colors.surfaceContainer,
     });
 
@@ -549,7 +551,7 @@ describe('Appbar search', () => {
     expect(screen.getByTestId('message-search').parent).toHaveStyle({
       width: '100%',
     });
-    expect(screen.getByTestId('appbar-search-width-limiter')).toHaveStyle({
+    expect(screen.getByTestId('message-search').parent?.parent).toHaveStyle({
       width: '100%',
       maxWidth: 720,
     });
@@ -750,10 +752,9 @@ describe('Appbar accessibility', () => {
         )
       );
 
-      const imageContainer = screen.getByTestId(
-        'appbar-content-headline-image',
-        { includeHiddenElements: true }
-      );
+      const imageContainer = screen.getByLabelText('Brand artwork', {
+        includeHiddenElements: true,
+      }).parent?.parent;
 
       expect(imageContainer).toHaveProp('aria-hidden', true);
       expect(