@buoy-gg/route-events 7.0.28 → 7.0.30

package/lib/commonjs/components/RoutesSitemap.js

@@ -9,6 +9,7 @@ var _sharedUi = require("@buoy-gg/shared-ui");
 var _reactNative = require("react-native");
 var _license = require("@buoy-gg/license");
 var _useRouteSitemap = require("../useRouteSitemap");
+var _testIDs = require("../utils/testIDs");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * RoutesSitemap - Visual sitemap of all app routes
@@ -256,6 +257,7 @@ function RoutesSitemap({
         style: styles.loadingContainer,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.loadingText,
+          testID: "buoy-routes-sitemap-loading",
           children: isSupported ? "Loading routes..." : "Route sitemap isn't available on the dashboard — the route tree lives on the device. Use the Events tab to see navigation here."
         })
       })
@@ -263,8 +265,14 @@ function RoutesSitemap({
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [styles.container, style],
-    children: [isSearching && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: [isSearching &&
+    /*#__PURE__*/
+    // The wrapper carries the handle as well as the field: a TextInput's
+    // own testID never reaches the XCUITest element tree on this RN
+    // version, so the a11y lane has nothing else to aim at.
+    (0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.searchContainer,
+      testID: "buoy-routes-sitemap-search-field",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
         size: 16,
         color: _sharedUi.night.color.textTertiary
@@ -276,10 +284,15 @@ function RoutesSitemap({
         onChangeText: setSearchQuery,
         autoCapitalize: "none",
         autoCorrect: false,
-        autoFocus: true
+        autoFocus: true,
+        testID: "buoy-routes-sitemap-search",
+        accessibilityLabel: "Search routes"
       }), searchQuery.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         onPress: () => setSearchQuery(""),
         style: styles.clearButton,
+        testID: "buoy-routes-sitemap-search-clear",
+        accessibilityRole: "button",
+        accessibilityLabel: "Clear route search",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.clearButtonText,
           children: "\u2715"
@@ -290,12 +303,16 @@ function RoutesSitemap({
           setIsSearching(false);
           setSearchQuery("");
         },
+        testID: "buoy-routes-sitemap-search-done",
+        accessibilityRole: "button",
+        accessibilityLabel: "Done searching routes",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.closeSearchText,
           children: "Done"
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      testID: "buoy-routes-sitemap-scroll",
       style: styles.scrollView,
       contentContainerStyle: styles.scrollContent,
       children: [!isSearching && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -308,6 +325,8 @@ function RoutesSitemap({
               style: [styles.iconButton, IS_DESKTOP && styles.iconButtonDesktop],
               onPress: handleGoHome,
               accessibilityLabel: "Go to home route",
+              accessibilityRole: "button",
+              testID: "buoy-routes-sitemap-home",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Home, {
                 size: ACTION_ICON_SIZE,
                 color: _sharedUi.night.color.textSecondary
@@ -320,6 +339,7 @@ function RoutesSitemap({
             style: [styles.actionWrapper, IS_DESKTOP && styles.actionWrapperDesktop],
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CopyButton, {
               value: copyAllData,
+              testID: "buoy-routes-sitemap-copy",
               size: IS_DESKTOP ? ACTION_ICON_SIZE : 14,
               buttonStyle: IS_DESKTOP ? styles.actionButtonHeaderDesktop : styles.actionButtonHeader
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -332,6 +352,9 @@ function RoutesSitemap({
               style: [styles.iconButton, IS_DESKTOP && styles.iconButtonDesktop, isRefreshing && styles.refreshButtonDisabled],
               onPress: handleManualRefresh,
               disabled: isRefreshing,
+              testID: "buoy-routes-sitemap-refresh",
+              accessibilityRole: "button",
+              accessibilityLabel: "Refresh route tree",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RefreshCw, {
                 size: ACTION_ICON_SIZE,
                 color: isRefreshing ? _sharedUi.night.color.textTertiary : _sharedUi.night.color.textSecondary
@@ -345,6 +368,9 @@ function RoutesSitemap({
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
               style: [styles.iconButton, IS_DESKTOP && styles.iconButtonDesktop],
               onPress: () => setIsSearching(true),
+              testID: "buoy-routes-sitemap-search-open",
+              accessibilityRole: "button",
+              accessibilityLabel: "Search routes",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
                 size: ACTION_ICON_SIZE,
                 color: _sharedUi.night.color.textSecondary
@@ -358,28 +384,36 @@ function RoutesSitemap({
           style: styles.statsGrid,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StatItem, {
             value: stats.total,
-            label: "Total"
+            label: "Total",
+            id: "total"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatItem, {
             value: stats.static,
-            label: "Static"
+            label: "Static",
+            id: "static"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatItem, {
             value: stats.dynamic,
-            label: "Dynamic"
+            label: "Dynamic",
+            id: "dynamic"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatItem, {
             value: stats.catchAll,
-            label: "Catch-All"
+            label: "Catch-All",
+            id: "catch-all"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatItem, {
             value: stats.layouts,
-            label: "Layouts"
+            label: "Layouts",
+            id: "layouts"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatItem, {
             value: stats.groups,
-            label: "Groups"
+            label: "Groups",
+            id: "groups"
           })]
         })]
       }), displayGroups.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.emptyState,
+        testID: "buoy-routes-sitemap-empty",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.emptyText,
+          testID: "buoy-routes-sitemap-empty-text",
           children: "No routes found"
         })
       }) : displayGroups.map(group => /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteGroupView, {
@@ -391,11 +425,13 @@ function RoutesSitemap({
         style: styles.metaFooter,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.metaText,
+          testID: "buoy-routes-sitemap-updated",
           children: lastRefreshLabel
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.sourceBadge,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.sourceText,
+            testID: "buoy-routes-sitemap-source",
             children: sourceLabel
           })
         })]
@@ -414,12 +450,19 @@ function RoutesSitemap({
 
 function StatItem({
   value,
-  label
+  label,
+  id
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.statItem,
+    testID: `buoy-routes-stat-${id}`
+    // Fabric merges the number and its caption into this container, so a
+    // stat that isn't spelled out announces as a bare digit.
+    ,
+    accessibilityLabel: `${label}, ${value}`,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.statValue,
+      testID: `buoy-routes-stat-${id}-value`,
       children: value
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.statLabel,
@@ -439,6 +482,9 @@ function RouteGroupView({
       style: styles.groupHeader,
       onPress: onToggleExpand,
       activeOpacity: 0.7,
+      testID: (0, _testIDs.sitemapGroupTestID)(group.title),
+      accessibilityRole: "button",
+      accessibilityLabel: `${group.title}, ${group.routes.length} routes`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.groupHeaderLeft,
         children: [isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
@@ -455,6 +501,7 @@ function RouteGroupView({
         style: styles.groupBadge,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.groupCount,
+          testID: `${(0, _testIDs.sitemapGroupTestID)(group.title)}-count`,
           children: group.routes.length
         })
       })]
@@ -482,6 +529,7 @@ function RouteItemView({
   const hasChildren = route.children.length > 0;
   const typeColor = getRouteTypeColor(route.type);
   const canNavigate = route.type !== "layout" && route.type !== "group";
+  const testID = (0, _testIDs.sitemapRouteTestID)(route.path);
 
   // Leaf routes (no children) have nothing to drill into — expanding would only
   // reveal the Copy/Go actions, so show those inline instead of behind a toggle.
@@ -491,6 +539,7 @@ function RouteItemView({
     style: [styles.routeItem, {
       marginLeft: depth * 12
     }],
+    testID: testID,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.routeCard,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -499,6 +548,9 @@ function RouteItemView({
           style: styles.routeHeaderLeft,
           onPress: () => setIsExpanded(!isExpanded),
           activeOpacity: 0.7,
+          testID: `${testID}-toggle`,
+          accessibilityRole: "button",
+          accessibilityLabel: `${route.path}, ${route.type}, ${route.children.length} nested`,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: styles.expandIndicator,
             children: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
@@ -511,6 +563,7 @@ function RouteItemView({
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.routePath,
             numberOfLines: 3,
+            testID: `${testID}-path`,
             children: route.path
           })]
         }) :
@@ -518,12 +571,19 @@ function RouteItemView({
         // Non-toggling header for leaf routes (keeps the chevron column as a
         // spacer so paths stay aligned with expandable siblings).
         (0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.routeHeaderLeft,
+          style: styles.routeHeaderLeft
+          // `accessible` as well as the label: a plain View is not an
+          // element, so without it the label is never announced and the
+          // path is read as a bare text node with no type beside it.
+          ,
+          accessible: true,
+          accessibilityLabel: `${route.path}, ${route.type}`,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: styles.expandIndicator
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.routePath,
             numberOfLines: 3,
+            testID: `${testID}-path`,
             children: route.path
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -532,6 +592,7 @@ function RouteItemView({
             style: styles.childCountBadge,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: styles.childCountText,
+              testID: `${testID}-children-count`,
               children: route.children.length
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -543,15 +604,20 @@ function RouteItemView({
               style: [styles.typeText, {
                 color: typeColor
               }],
+              testID: `${testID}-type`,
               children: route.type.toUpperCase()
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton, {
             value: route.path,
-            buttonStyle: styles.iconAction
+            buttonStyle: styles.iconAction,
+            testID: `${testID}-copy`
           }), canNavigate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
             style: styles.goButton,
             onPress: () => onNavigate(route),
             activeOpacity: 0.7,
+            testID: `${testID}-go`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Go to ${route.path}`,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: styles.goButtonText,
               children: "Go"

package/lib/commonjs/utils/testIDs.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.eventRowTestID = eventRowTestID;
+exports.pathSlug = pathSlug;
+exports.sitemapGroupTestID = sitemapGroupTestID;
+exports.sitemapRouteTestID = sitemapRouteTestID;
+exports.stackItemTestID = stackItemTestID;
+/**
+ * Stable e2e handles for the routes tool.
+ *
+ * Everything in this tool is addressed by its PATH, never by a list index or a
+ * per-session id. Route events are a prepend-list whose indices shift on every
+ * navigation, the sitemap re-sorts and regroups as you search, and the stack
+ * renumbers itself on every push — the pathname is the one thing that means the
+ * same screen on the next launch, and the only thing a test can name up front.
+ *
+ * A pathname is not testID-safe as it stands (`/blog/2024/react-native-tips`,
+ * `/pokemon/[id]`), so it is slugged the way the rest of Buoy's handles read:
+ * `buoy-routes-route-blog-year-slug`.
+ */
+
+/** Any path-ish string → a testID-safe slug (`/` → `-`, brackets dropped). */
+function pathSlug(path) {
+  return String(path).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "root";
+}
+
+/**
+ * `buoy-routes-event-row-<slug>-<visit>` for one row of the events timeline.
+ *
+ * The visit number is part of the handle because revisiting a screen is the
+ * normal case here: three trips to `/about` would otherwise be three views
+ * sharing one testID, which Detox reports as "multiple elements found" — an
+ * ambiguity error where the test meant "the second visit". It also makes the
+ * tool's own visit counting addressable rather than merely visible.
+ */
+function eventRowTestID(pathname, visitNumber) {
+  return `buoy-routes-event-row-${pathSlug(pathname)}-${visitNumber}`;
+}
+
+/** `buoy-routes-route-<slug>` for one row of the sitemap. */
+function sitemapRouteTestID(path) {
+  return `buoy-routes-route-${pathSlug(path)}`;
+}
+
+/** `buoy-routes-group-<slug>` for a sitemap group header. */
+function sitemapGroupTestID(title) {
+  return `buoy-routes-group-${pathSlug(title)}`;
+}
+
+/**
+ * `buoy-routes-stack-item-<index>` for one frame of the navigation stack.
+ *
+ * The exception to addressing by path: a stack legitimately holds the same
+ * route twice (push `/route-bench/1` from `/route-bench/1`), and its whole
+ * subject is POSITION — "index 2 of 4" is what the row means, so the position
+ * is what the handle should say.
+ */
+function stackItemTestID(index) {
+  return `buoy-routes-stack-item-${index}`;
+}

package/lib/module/components/NavigationStack.js

@@ -13,6 +13,7 @@ import { ChevronDown, ChevronRight, InlineCopyButton, ProUpgradeModal, buoyColor
 import { useIsPro } from "@buoy-gg/license";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { useNavigationStack } from "../useNavigationStack";
+import { stackItemTestID } from "../utils/testIDs";
 
 // ============================================================================
 // Types
@@ -48,6 +49,9 @@ export function NavigationStack({
   const navigateToIndex = index => onAction ? onAction("navigateToIndex", {
     index
   }) : hookResult.navigateToIndex(index);
+  const popToIndex = index => onAction ? onAction("popToIndex", {
+    index
+  }) : hookResult.popToIndex(index);
   const goBack = () => onAction ? onAction("goBack") : hookResult.goBack();
   const popToTop = () => onAction ? onAction("popToTop") : hookResult.popToTop();
   const [expandedIndex, setExpandedIndex] = useState(null);
@@ -102,6 +106,7 @@ export function NavigationStack({
         style: styles.loadingContainer,
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.loadingText,
+          testID: "buoy-routes-stack-loading",
           children: "Loading navigation stack..."
         })
       })
@@ -114,11 +119,13 @@ export function NavigationStack({
       style: [styles.container, style],
       children: /*#__PURE__*/_jsxs(View, {
         style: styles.errorContainer,
+        testID: "buoy-routes-stack-error",
         children: [/*#__PURE__*/_jsx(Text, {
           style: styles.errorText,
           children: "Error loading stack"
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.errorDetail,
+          testID: "buoy-routes-stack-error-detail",
           children: error.message
         })]
       })
@@ -131,8 +138,10 @@ export function NavigationStack({
       style: [styles.container, style],
       children: /*#__PURE__*/_jsxs(View, {
         style: styles.emptyContainer,
+        testID: "buoy-routes-stack-empty",
         children: [/*#__PURE__*/_jsx(Text, {
           style: styles.emptyText,
+          testID: "buoy-routes-stack-empty-text",
           children: "No navigation stack"
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.emptySubtext,
@@ -229,12 +238,19 @@ export function NavigationStack({
     const screensToRemove = stackDepth - 1 - selectedRoute.index;
     const targetIndex = selectedRoute.index;
     confirmDestructive("Pop to Route", `Remove ${screensToRemove} screen${screensToRemove !== 1 ? "s" : ""} above ${selectedRoute.pathname}?`, "Pop",
-    // Navigate to the selected route, which effectively pops everything above it
-    () => navigateToIndex(targetIndex));
+    // POP, not navigate. `navigate` only returns to a mounted screen when
+    // the name AND the params match, so on any dynamic route — the common
+    // case for a stack you would want to unwind — it pushed a fresh copy
+    // instead: the dialog promised to remove two screens and the stack came
+    // back one deeper, with the route in it twice. `popToIndex` is the
+    // action the hook has always exported for this, and the same one the
+    // desktop host already dispatches over the socket.
+    () => popToIndex(targetIndex));
   };
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.container, style],
     children: [/*#__PURE__*/_jsx(ScrollView, {
+      testID: "buoy-routes-stack-scroll",
       style: styles.stackScroll,
       contentContainerStyle: [styles.stackContent, {
         paddingBottom: styles.stackContent.padding + insets.bottom
@@ -243,14 +259,19 @@ export function NavigationStack({
         const actualIndex = stack.length - 1 - reverseIndex;
         const isExpanded = expandedIndex === actualIndex;
         const hasParams = Object.keys(item.params).length > 0;
+        const itemTestID = stackItemTestID(actualIndex);
         return /*#__PURE__*/_jsx(View, {
           style: styles.stackItemWrapper,
+          testID: itemTestID,
           children: /*#__PURE__*/_jsxs(View, {
             style: [styles.stackItem, isExpanded && styles.stackItemSelected],
             children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
               style: styles.stackItemHeader,
               onPress: () => toggleExpand(actualIndex),
               activeOpacity: 0.7,
+              testID: `${itemTestID}-toggle`,
+              accessibilityRole: "button",
+              accessibilityLabel: `${item.pathname}, ${item.isFocused ? "focused" : "mounted"}, position ${actualIndex} of ${stackDepth - 1}`,
               children: [/*#__PURE__*/_jsx(View, {
                 style: styles.expandIndicator,
                 children: isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
@@ -263,10 +284,12 @@ export function NavigationStack({
               }), /*#__PURE__*/_jsx(Text, {
                 style: styles.stackItemPath,
                 numberOfLines: 1,
+                testID: `${itemTestID}-path`,
                 children: item.pathname
               }), /*#__PURE__*/_jsx(InlineCopyButton, {
                 value: item.pathname,
-                buttonStyle: styles.copyRouteButton
+                buttonStyle: styles.copyRouteButton,
+                testID: `${itemTestID}-copy`
               }), /*#__PURE__*/_jsx(View, {
                 style: [styles.statusBadge, {
                   backgroundColor: item.isFocused ? `${buoyColors.success}15` : "#3B82F615",
@@ -276,6 +299,7 @@ export function NavigationStack({
                   style: [styles.statusBadgeText, {
                     color: item.isFocused ? buoyColors.success : "#3B82F6"
                   }],
+                  testID: `${itemTestID}-status`,
                   children: item.isFocused ? "FOCUSED" : "MOUNTED"
                 })
               })]
@@ -288,6 +312,7 @@ export function NavigationStack({
                   children: "Route Name:"
                 }), /*#__PURE__*/_jsx(Text, {
                   style: styles.detailValue,
+                  testID: `${itemTestID}-name`,
                   children: item.name
                 })]
               }), /*#__PURE__*/_jsxs(View, {
@@ -297,6 +322,7 @@ export function NavigationStack({
                   children: "Position:"
                 }), /*#__PURE__*/_jsxs(Text, {
                   style: styles.detailValue,
+                  testID: `${itemTestID}-position`,
                   children: [actualIndex, " / ", stackDepth - 1]
                 })]
               }), hasParams && /*#__PURE__*/_jsx(View, {
@@ -314,6 +340,9 @@ export function NavigationStack({
                     style: [styles.actionButton, isAtRoot && styles.actionButtonDisabled],
                     onPress: handleGoBack,
                     disabled: isAtRoot,
+                    testID: `${itemTestID}-back`,
+                    accessibilityRole: "button",
+                    accessibilityLabel: "Go back one screen",
                     children: /*#__PURE__*/_jsx(Text, {
                       style: [styles.actionButtonText, isAtRoot && styles.actionButtonTextDisabled],
                       children: "Back"
@@ -328,6 +357,9 @@ export function NavigationStack({
                     style: [styles.actionButton, item.isFocused && styles.actionButtonDisabled],
                     onPress: handleGo,
                     disabled: item.isFocused,
+                    testID: `${itemTestID}-go`,
+                    accessibilityRole: "button",
+                    accessibilityLabel: `Navigate to ${item.pathname}`,
                     children: /*#__PURE__*/_jsx(Text, {
                       style: [styles.actionButtonText, item.isFocused && styles.actionButtonTextDisabled],
                       children: "Go"
@@ -342,6 +374,9 @@ export function NavigationStack({
                     style: [styles.actionButton, (item.isFocused || actualIndex === stackDepth - 1) && styles.actionButtonDisabled],
                     onPress: handlePopTo,
                     disabled: item.isFocused || actualIndex === stackDepth - 1,
+                    testID: `${itemTestID}-pop-to`,
+                    accessibilityRole: "button",
+                    accessibilityLabel: `Remove screens above ${item.pathname}`,
                     children: /*#__PURE__*/_jsx(Text, {
                       style: [styles.actionButtonText, (item.isFocused || actualIndex === stackDepth - 1) && styles.actionButtonTextDisabled],
                       children: "Pop To"

package/lib/module/components/RouteEventDetail.js

@@ -23,6 +23,7 @@ export function RouteEventDetail({
   return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
     children: [/*#__PURE__*/_jsx(ScrollView, {
+      testID: "buoy-routes-detail-scroll",
       style: styles.scroll,
       contentContainerStyle: styles.scrollContent,
       showsVerticalScrollIndicator: true,
@@ -37,6 +38,9 @@ export function RouteEventDetail({
         style: styles.goButton,
         onPress: () => onNavigate(event.pathname),
         activeOpacity: 0.8,
+        testID: "buoy-routes-detail-go",
+        accessibilityRole: "button",
+        accessibilityLabel: `Go to route ${event.pathname}`,
         children: [/*#__PURE__*/_jsx(Navigation, {
           size: 16,
           color: night.color.onAccent

package/lib/module/components/RouteEventExpandedContent.js

@@ -37,11 +37,13 @@ export function RouteEventExpandedContent({
       style: styles.section,
       children: [routeTemplate && /*#__PURE__*/_jsxs(View, {
         style: styles.detailRow,
+        testID: "buoy-routes-detail-template",
         children: [/*#__PURE__*/_jsx(Text, {
           style: styles.detailLabel,
           children: "Template:"
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.detailValue,
+          testID: "buoy-routes-detail-template-value",
           children: routeTemplate
         }), /*#__PURE__*/_jsx(InlineCopyButton, {
           value: routeTemplate,
@@ -49,11 +51,13 @@ export function RouteEventExpandedContent({
         })]
       }), event.previousPathname && /*#__PURE__*/_jsxs(View, {
         style: styles.detailRow,
+        testID: "buoy-routes-detail-from",
         children: [/*#__PURE__*/_jsx(Text, {
           style: styles.detailLabel,
           children: "From:"
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.detailValue,
+          testID: "buoy-routes-detail-from-value",
           children: event.previousPathname
         }), /*#__PURE__*/_jsx(InlineCopyButton, {
           value: event.previousPathname,
@@ -61,11 +65,13 @@ export function RouteEventExpandedContent({
         })]
       }), /*#__PURE__*/_jsxs(View, {
         style: styles.detailRow,
+        testID: "buoy-routes-detail-to",
         children: [/*#__PURE__*/_jsx(Text, {
           style: styles.detailLabel,
           children: "To:"
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.detailValue,
+          testID: "buoy-routes-detail-to-value",
           children: event.pathname
         }), /*#__PURE__*/_jsx(InlineCopyButton, {
           value: event.pathname,
@@ -76,20 +82,24 @@ export function RouteEventExpandedContent({
       style: styles.section,
       children: [event.timeSincePrevious !== undefined && /*#__PURE__*/_jsxs(View, {
         style: styles.detailRow,
+        testID: "buoy-routes-detail-duration",
         children: [/*#__PURE__*/_jsx(Text, {
           style: styles.detailLabel,
           children: "Duration:"
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.detailValue,
+          testID: "buoy-routes-detail-duration-value",
           children: formatDuration(event.timeSincePrevious)
         })]
       }), /*#__PURE__*/_jsxs(View, {
         style: styles.detailRow,
+        testID: "buoy-routes-detail-time",
         children: [/*#__PURE__*/_jsx(Text, {
           style: styles.detailLabel,
           children: "Time:"
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.detailValue,
+          testID: "buoy-routes-detail-time-value",
           children: new Date(event.timestamp).toLocaleString()
         })]
       })]
@@ -97,11 +107,13 @@ export function RouteEventExpandedContent({
       style: styles.section,
       children: [event.segments && event.segments.length > 0 && /*#__PURE__*/_jsxs(View, {
         style: styles.detailRow,
+        testID: "buoy-routes-detail-segments",
         children: [/*#__PURE__*/_jsx(Text, {
           style: styles.detailLabel,
           children: "Segments:"
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.detailValue,
+          testID: "buoy-routes-detail-segments-value",
           children: event.segments.join(' → ')
         }), /*#__PURE__*/_jsx(InlineCopyButton, {
           value: JSON.stringify(event.segments),
@@ -113,6 +125,7 @@ export function RouteEventExpandedContent({
           style: styles.dataViewerHeader,
           children: [/*#__PURE__*/_jsxs(Text, {
             style: styles.dataViewerTitle,
+            testID: "buoy-routes-detail-params-title",
             children: ["Parameters (", Object.keys(event.params).length, ")"]
           }), /*#__PURE__*/_jsx(InlineCopyButton, {
             value: JSON.stringify(event.params, null, 2),
@@ -127,11 +140,13 @@ export function RouteEventExpandedContent({
         })]
       }), visitNumber > 1 && /*#__PURE__*/_jsxs(View, {
         style: styles.detailRow,
+        testID: "buoy-routes-detail-visited",
         children: [/*#__PURE__*/_jsx(Text, {
           style: styles.detailLabel,
           children: "Visited:"
         }), /*#__PURE__*/_jsxs(Text, {
           style: styles.detailValue,
+          testID: "buoy-routes-detail-visited-value",
           children: [visitNumber, " time", visitNumber !== 1 ? 's' : '']
         })]
       })]