feat: don't hardcode header back test ID

BREAKING CHANGE: Now the back button test ID can be customized using headerBackTestID option
react-navigation · Jan 15, 2021 · 22a8afa · 22a8afa
1 parent 4954d6a
commit 22a8afa
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx
@@ -147,6 +147,10 @@ export type StackHeaderOptions = {
    * Accessibility label for the header back button.
    */
   headerBackAccessibilityLabel?: string;
+  /**
+   * ID to locate this back button in tests.
+   */
+  headerBackTestID?: string;
   /**
    * Title string used by the back button on iOS. Defaults to the previous scene's `headerTitle`.
    * Use `headerBackTitleVisible: false` to hide it.
@@ -449,6 +453,10 @@ export type StackHeaderLeftButtonProps = {
    * Accessibility label for the button for screen readers.
    */
   accessibilityLabel?: string;
+  /**
+   * ID to locate this button in tests.
+   */
+  testID?: string;
   /**
    * Style object for the button.
    */

diff --git a/packages/stack/src/views/Header/HeaderBackButton.tsx b/packages/stack/src/views/Header/HeaderBackButton.tsx
@@ -30,6 +30,7 @@ export default function HeaderBackButton({
   titleLayout,
   truncatedLabel = 'Back',
   accessibilityLabel = label && label !== 'Back' ? `${label}, back` : 'Go back',
+  testID,
   style,
 }: Props) {
   const { dark, colors } = useTheme();
@@ -155,7 +156,7 @@ export default function HeaderBackButton({
       accessible
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
-      testID="header-back"
+      testID={testID}
       delayPressIn={0}
       onPress={disabled ? undefined : handlePress}
       pressColor={pressColorAndroid}

diff --git a/packages/stack/src/views/Header/HeaderSegment.tsx b/packages/stack/src/views/Header/HeaderSegment.tsx
@@ -163,6 +163,7 @@ export default function HeaderSegment(props: Props) {
     headerTruncatedBackTitle: truncatedLabel,
     headerPressColorAndroid: pressColorAndroid,
     headerBackAccessibilityLabel: backAccessibilityLabel,
+    headerBackTestID: backTestID,
     headerBackAllowFontScaling: backAllowFontScaling,
     headerTitleAllowFontScaling: titleAllowFontScaling,
     headerTitleStyle: customTitleStyle,
@@ -292,6 +293,7 @@ export default function HeaderSegment(props: Props) {
         backImage,
         pressColorAndroid,
         accessibilityLabel: backAccessibilityLabel,
+        testID: backTestID,
         allowFontScaling: backAllowFontScaling,
         onPress: onGoBack,
         labelVisible: headerBackTitleVisible,