@buoy-gg/react-query 7.0.28 → 7.0.29

package/lib/commonjs/react-query/components/DataEditorMode.js

@@ -33,6 +33,7 @@ function DataEditorMode({
   const actionButtons = (0, _useActionButtons.useActionButtons)(selectedQuery, queryClient, queryVersion);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      testID: "buoy-rq-detail-scroll",
       accessibilityLabel: "Data editor mode",
       accessibilityHint: "View data editor mode",
       "sentry-label": "ignore data editor mode",
@@ -60,6 +61,7 @@ function DataEditorMode({
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.queryExplorerContainer,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            testID: "buoy-rq-query-explorer-header",
             style: styles.queryExplorerHeader,
             children: "Query Explorer"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -82,6 +84,7 @@ function DataEditorMode({
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.actionsRow,
         children: actionButtons.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+          testID: `buoy-rq-action-${action.variant}`,
           onClick: action.onPress,
           text: action.label,
           variant: action.variant,
@@ -114,6 +117,7 @@ function DataEditorActionsFooter({
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.actionsRow,
       children: actionButtons.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+        testID: `buoy-rq-action-${action.variant}`,
         onClick: action.onPress,
         text: action.label,
         variant: action.variant,
@@ -131,6 +135,7 @@ function DataExplorer({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.dataContainer,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: "buoy-rq-data-header",
       style: styles.dataHeader,
       children: "Data Editor"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -183,9 +188,11 @@ function DataEmptyState({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.emptyState,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: "buoy-rq-detail-empty-title",
       style: styles.emptyTitle,
       children: title
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: "buoy-rq-detail-empty-description",
       style: styles.emptyDescription,
       children: description
     })]

package/lib/commonjs/react-query/components/FilterStatusBadge.js

@@ -23,12 +23,16 @@ function FilterStatusBadge({
   const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.container,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+      testID: "buoy-rq-filter-badge",
       style: styles.text,
       children: ["Showing ", filteredCount, " of ", totalCount]
     })
   });
   if (onPress) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      testID: "buoy-rq-filter-badge-button",
+      accessibilityRole: "button",
+      accessibilityLabel: `Showing ${filteredCount} of ${totalCount}, open filters`,
       onPress: onPress,
       activeOpacity: 0.7,
       children: content

package/lib/commonjs/react-query/components/MutationEditorMode.js

@@ -25,6 +25,7 @@ function MutationEditorMode({
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      testID: "buoy-rq-mutation-detail-scroll",
       accessibilityLabel: "Mutation editor mode",
       accessibilityHint: "View mutation editor mode",
       "sentry-label": "ignore mutation editor mode",
@@ -90,6 +91,7 @@ function MutationEditorActionsFooter({
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.actionsGrid,
       children: actionButtons.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+        testID: `buoy-rq-action-${action.variant}`,
         onClick: action.onPress,
         text: action.label,
         variant: action.variant,
@@ -149,9 +151,11 @@ function DataEmptyState({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.emptyState,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: "buoy-rq-mutation-detail-empty-title",
       style: styles.emptyTitle,
       children: title
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: "buoy-rq-mutation-detail-empty-description",
       style: styles.emptyDescription,
       children: description
     })]

package/lib/commonjs/react-query/components/WifiToggle.js

@@ -13,7 +13,8 @@ var _jsxRuntime = require("react/jsx-runtime");
  * offline scenarios directly from the modal header.
  */
 function WifiToggle({
-  size = 16
+  size = 16,
+  testID
 }) {
   const {
     isOnline,
@@ -21,6 +22,7 @@ function WifiToggle({
   } = (0, _useWifiState.useWifiState)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
     "sentry-label": `ignore toggle WiFi ${isOnline ? "On" : "Off"}`,
+    testID: testID,
     accessibilityRole: "button",
     accessibilityLabel: `WiFi ${isOnline ? "On" : "Off"}`,
     accessibilityHint: `Tap to turn WiFi ${isOnline ? "off" : "on"} for React Query`,

package/lib/commonjs/react-query/components/modals/DataEditorModal.js

@@ -28,6 +28,30 @@ function DataEditorModal({
     version: queryVersion
   } = (0, _useSelectedQuery.useGetQueryByQueryKeyWithVersion)(selectedQueryKey);
   const [modalMode, setModalMode] = (0, _react.useState)("bottomSheet");
+
+  /**
+   * Fall back to the list when the selected query leaves the cache — a
+   * removal, a cache clear, or garbage collection. Same failure as the
+   * mutation editor: the key that selected it is still set, so this modal
+   * bails out and the browser stays hidden behind it, leaving an "open" tool
+   * with nothing on screen. The ref covers the tick before the subscription
+   * has resolved the query, when undefined does not yet mean gone.
+   */
+  const currentQueryKey = selectedQueryKey ? JSON.stringify(selectedQueryKey) : undefined;
+  const seenQueryKey = (0, _react.useRef)(undefined);
+  (0, _react.useEffect)(() => {
+    if (selectedQuery) {
+      seenQueryKey.current = currentQueryKey;
+      return;
+    }
+    // Keyed to THIS query for the same reason as the mutation editor: the
+    // last-seen key outlives the detail view, so an un-keyed check would fire
+    // on the next selection before its lookup has resolved.
+    if (visible && seenQueryKey.current !== undefined && seenQueryKey.current === currentQueryKey) {
+      seenQueryKey.current = undefined;
+      onQuerySelect(undefined);
+    }
+  }, [visible, selectedQuery, currentQueryKey, onQuerySelect]);
   const handleModeChange = (0, _react.useCallback)(mode => {
     setModalMode(mode);
   }, []);

package/lib/commonjs/react-query/components/modals/MutationEditorModal.js

@@ -25,6 +25,38 @@ function MutationEditorModal({
 }) {
   const selectedMutation = (0, _useSelectedMutation.useGetMutationById)(selectedMutationId);
   const [modalMode, setModalMode] = (0, _react.useState)("bottomSheet");
+
+  /**
+   * Fall back to the list when the selected mutation leaves the cache.
+   *
+   * Without this the whole tool disappears. `Remove` (and a mutation-cache
+   * clear, and ordinary garbage collection) drops the entry while the id that
+   * selected it is still set, so this modal bails out on the missing mutation
+   * and the browser stays hidden behind an `inDetail` that is still true —
+   * leaving an "open" tool with nothing on screen and no way back except
+   * closing and reopening it from the dial.
+   *
+   * The ref is what makes it safe: `useGetMutationById` resolves on a
+   * `setTimeout(0)`, so the mutation is legitimately undefined for the first
+   * tick after a selection. Only a mutation that was HERE and then went away
+   * counts as gone.
+   */
+  const seenMutationId = (0, _react.useRef)(undefined);
+  (0, _react.useEffect)(() => {
+    if (selectedMutation) {
+      seenMutationId.current = selectedMutation.mutationId;
+      return;
+    }
+    // Only THIS mutation going missing counts. Keying the check to the id
+    // matters: leaving a detail view leaves the last-seen id behind, and a
+    // plain "we had one and now we don't" flag would fire on the very next
+    // selection — during the tick before its own lookup resolves — and bounce
+    // the user straight back out of the mutation they just opened.
+    if (visible && seenMutationId.current !== undefined && seenMutationId.current === selectedMutationId) {
+      seenMutationId.current = undefined;
+      onMutationSelect(undefined);
+    }
+  }, [visible, selectedMutation, selectedMutationId, onMutationSelect]);
   const handleModeChange = (0, _react.useCallback)(mode => {
     setModalMode(mode);
   }, []);

package/lib/commonjs/react-query/components/modals/QueryBrowserModal.js

@@ -172,6 +172,7 @@ function QueryBrowserModal({
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
             tabs: tabs,
             activeTab: "filters",
+            testIDPrefix: "buoy-rq-filterview-tab",
             onTabChange: () => {}
           })
         })]

package/lib/commonjs/react-query/components/modals/ReactQueryModalHeader.js

@@ -73,7 +73,8 @@ function ReactQueryModalHeader({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
         onBack: onBack
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-        title: getItemText(selectedQuery ?? selectedMutation)
+        title: getItemText(selectedQuery ?? selectedMutation),
+        testID: "buoy-rq-detail-title"
       })]
     });
   }
@@ -85,11 +86,13 @@ function ReactQueryModalHeader({
       noMargin: true,
       children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.headerSearchContainer,
+        testID: "buoy-rq-search-field",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
           size: 14,
           color: _sharedUi.night.color.textSecondary
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
           ref: searchInputRef,
+          testID: "buoy-rq-search",
           style: styles.headerSearchInput,
           placeholder: "Search query keys...",
           placeholderTextColor: _sharedUi.night.color.textTertiary,
@@ -108,6 +111,9 @@ function ReactQueryModalHeader({
             setIsSearchActive(false);
           },
           "sentry-label": "ignore clear search header",
+          testID: "buoy-rq-search-clear",
+          accessibilityRole: "button",
+          accessibilityLabel: "Clear search",
           style: styles.headerSearchClear,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
             size: 14,
@@ -121,19 +127,25 @@ function ReactQueryModalHeader({
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
             tabs: tabs,
             activeTab: activeTab,
+            testIDPrefix: "buoy-rq-tab",
             onTabChange: tab => onTabChange(tab)
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_WifiToggle.WifiToggle, {
-          size: 16
+          size: 16,
+          testID: "buoy-rq-wifi"
         })]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
         tabs: tabs,
         activeTab: activeTab,
+        testIDPrefix: "buoy-rq-tab",
         onTabChange: tab => onTabChange(tab)
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         "sentry-label": "ignore open search",
+        testID: "buoy-rq-search-open",
+        accessibilityRole: "button",
+        accessibilityLabel: "Search queries and mutations",
         onPress: handleSearchToggle,
         style: styles.headerActionButton,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
@@ -142,6 +154,9 @@ function ReactQueryModalHeader({
         })
       }), onFilterPress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         "sentry-label": "ignore open filter",
+        testID: "buoy-rq-filters",
+        accessibilityRole: "button",
+        accessibilityLabel: hasActiveFilters ? "Filters, active" : "Filters",
         onPress: onFilterPress,
         style: [styles.headerActionButton, hasActiveFilters && styles.activeFilterButton],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
@@ -150,6 +165,8 @@ function ReactQueryModalHeader({
         })
       }), onClearCache && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         "sentry-label": "ignore clear cache",
+        testID: "buoy-rq-clear-cache",
+        accessibilityRole: "button",
         onPress: onClearCache,
         style: [styles.headerActionButton, styles.clearCacheButton],
         accessibilityLabel: `Clear ${activeTab} cache`,

package/lib/commonjs/react-query/components/query-browser/ActionButton.js

@@ -45,11 +45,13 @@ function ActionButton({
   onClick,
   text,
   variant,
-  disabled
+  disabled,
+  testID
 }) {
   const config = buttonConfigs[variant];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
     "sentry-label": "ignore devtools action button",
+    testID: testID,
     disabled: disabled,
     onPress: onClick,
     style: [styles.button, {

package/lib/commonjs/react-query/components/query-browser/Explorer.js

@@ -9,6 +9,7 @@ var _reactQuery = require("@tanstack/react-query");
 var _updateNestedDataByPath = require("../../utils/updateNestedDataByPath");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _deleteItem = _interopRequireDefault(require("../../utils/actions/deleteItem"));
+var _testIDs = require("../../utils/testIDs");
 var _reactNative = require("react-native");
 var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -86,6 +87,8 @@ const DeleteItemButton = /*#__PURE__*/(0, _react.memo)(({
   if (!activeQuery) return null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
     "sentry-label": "ignore devtools explorer delete button",
+    testID: `${(0, _testIDs.explorerTestID)(dataPath)}-delete`,
+    accessibilityRole: "button",
     onPress: handleDelete,
     style: [styles.deleteButton, isFocused && styles.deleteButtonFocused],
     accessibilityLabel: "Delete item",
@@ -115,7 +118,10 @@ const ClearArrayButton = /*#__PURE__*/(0, _react.memo)(({
   if (!activeQuery) return null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
     "sentry-label": "ignore devtools explorer clear button",
+    testID: `${(0, _testIDs.explorerTestID)(dataPath)}-clear`,
     style: [styles.clearButton, isFocused && styles.clearButtonFocused],
+    accessibilityRole: "button",
+    accessibilityLabel: "Remove all items",
     "aria-label": "Remove all items",
     onPress: handleClear,
     hitSlop: HIT_SLOP_OPTIMIZED,
@@ -160,6 +166,9 @@ function ToggleValueButton({
   const textStyle = value ? styles.toggleTextTrue : styles.toggleTextFalse;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
     "sentry-label": "ignore devtools explorer toggle button",
+    testID: `${(0, _testIDs.explorerTestID)(dataPath)}-toggle`,
+    accessibilityRole: "button",
+    accessibilityLabel: `${dataPath[dataPath.length - 1] ?? "value"}, ${value ? "true" : "false"}`,
     style: styles.modernToggleButton,
     onPress: handleClick,
     hitSlop: HIT_SLOP_OPTIMIZED,
@@ -172,6 +181,8 @@ function ToggleValueButton({
       })
     }), itemsDeletable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       "sentry-label": "ignore devtools explorer delete button in toggle",
+      testID: `${(0, _testIDs.explorerTestID)(dataPath)}-delete`,
+      accessibilityRole: "button",
       onPress: handleDelete,
       style: styles.deleteButtonInToggle,
       accessibilityLabel: "Delete item",
@@ -314,6 +325,12 @@ function Explorer({
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
             "sentry-label": "ignore devtools explorer expander button",
             style: styles.expanderButton,
+            testID: (0, _testIDs.explorerTestID)(currentDataPath),
+            accessibilityRole: "button",
+            accessibilityLabel: `${label}, ${subEntries.length} ${subEntries.length === 1 ? "item" : "items"}`,
+            accessibilityState: {
+              expanded: isExpanded
+            },
             onPress: toggleExpanded,
             hitSlop: HIT_SLOP_OPTIMIZED,
             activeOpacity: 0.6,
@@ -395,7 +412,8 @@ function Explorer({
             style: styles.nebulaInputWrapper,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.CyberpunkInput, {
               label: label,
-              accessibilityLabel: "Data input field for editing values",
+              testID: `${(0, _testIDs.explorerTestID)(currentDataPath)}-input`,
+              accessibilityLabel: `${label}, editable value`,
               style: [valueType === "number" ? styles.textNumber : styles.textString],
               keyboardType: valueType === "number" ? "numeric" : "default",
               value: localInputValue,
@@ -440,6 +458,7 @@ function Explorer({
             style: styles.text344054,
             children: label
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            testID: `${(0, _testIDs.explorerTestID)(currentDataPath)}-value`,
             style: styles.displayValueText,
             children: (0, _sharedUi.displayValue)(value)
           })]

package/lib/commonjs/react-query/components/query-browser/MutationButton.js

@@ -7,6 +7,7 @@ exports.default = MutationButton;
 var _reactNative = require("react-native");
 var _svgs = require("./svgs");
 var _sharedUi = require("@buoy-gg/shared-ui");
+var _testIDs = require("../../utils/testIDs");
 var _jsxRuntime = require("react/jsx-runtime");
 const getMutationText = mutation => {
   if (!mutation.options.mutationKey) return "Anonymous Mutation";
@@ -73,8 +74,16 @@ function MutationButton({
     }
   };
   const statusInfo = getStatusInfo();
+  const mutationText = getMutationText(mutation);
+  const testID = (0, _testIDs.mutationRowTestID)(mutation.options.mutationKey, mutation.mutationId);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
     "sentry-label": "ignore devtools mutation button",
+    testID: testID,
+    accessibilityRole: "button"
+    // Same Fabric merge as the query rows: without a spelled-out label the
+    // row announces as an unnamed button.
+    ,
+    accessibilityLabel: `${mutationText}, ${statusInfo.status}`,
     onPress: () => setSelectedMutation(mutation === selected ? undefined : mutation),
     style: [styles.button, selected?.mutationId === mutation.mutationId && styles.selected],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -88,6 +97,7 @@ function MutationButton({
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.statusInfo,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            testID: `${testID}-status`,
             style: [styles.statusLabel, {
               color: statusInfo.color
             }],
@@ -100,8 +110,9 @@ function MutationButton({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.mutationSection,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: `${testID}-key`,
           style: styles.mutationKey,
-          children: getMutationText(mutation)
+          children: mutationText
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

package/lib/commonjs/react-query/components/query-browser/MutationDetails.js

@@ -31,11 +31,13 @@ function MutationDetails({
         horizontal: true,
         style: styles.flex1,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: "buoy-rq-mutation-detail-key",
           style: styles.flexWrap,
           children: `${selectedMutation.options.mutationKey ? (0, _sharedUi.displayValue)(selectedMutation.options.mutationKey, true) : "No mutationKey found"}`
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MutationDetailsChips.default, {
-        status: selectedMutation.state.status
+        status: selectedMutation.state.status,
+        testID: "buoy-rq-mutation-detail-status"
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.row,

package/lib/commonjs/react-query/components/query-browser/MutationDetailsChips.js

@@ -29,7 +29,8 @@ const textColors = {
  * Small status chip used in mutation detail views that adapts styling to the mutation status.
  */
 function QueryDetailsChip({
-  status
+  status,
+  testID
 }) {
   const statusToColor = status;
   const backgroundColor = backgroundColors[statusToColor];
@@ -41,6 +42,7 @@ function QueryDetailsChip({
       borderColor
     }],
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: testID,
       style: [styles.text, {
         color: textColor
       }],

package/lib/commonjs/react-query/components/query-browser/MutationStatusCount.js

@@ -63,6 +63,7 @@ const MutationStatusCount = ({
         isActive: activeFilter === "pending",
         onPress: event => handleFilterClick("pending", event),
         onTouchStart: handleTouchStart,
+        testID: "buoy-rq-mstatus-pending",
         showLabel: true,
         size: size
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
@@ -72,6 +73,7 @@ const MutationStatusCount = ({
         isActive: activeFilter === "success",
         onPress: event => handleFilterClick("success", event),
         onTouchStart: handleTouchStart,
+        testID: "buoy-rq-mstatus-success",
         showLabel: true,
         size: size
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
@@ -81,6 +83,7 @@ const MutationStatusCount = ({
         isActive: activeFilter === "error",
         onPress: event => handleFilterClick("error", event),
         onTouchStart: handleTouchStart,
+        testID: "buoy-rq-mstatus-error",
         showLabel: true,
         size: size
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
@@ -90,6 +93,7 @@ const MutationStatusCount = ({
         isActive: activeFilter === "paused",
         onPress: event => handleFilterClick("paused", event),
         onTouchStart: handleTouchStart,
+        testID: "buoy-rq-mstatus-paused",
         showLabel: true,
         size: size
       })]

package/lib/commonjs/react-query/components/query-browser/MutationsList.js

@@ -119,12 +119,16 @@ function MutationsList({
       style: styles.listWrapper,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
         "sentry-label": "ignore devtools mutations list",
+        testID: "buoy-rq-mutation-list",
         data: filteredMutations,
         renderItem: renderMutation,
         keyExtractor: (item, index) => `${item.mutationId}-${item.state.submittedAt}-${item.state.status}-${index}`,
         inverted: true,
-        showsVerticalScrollIndicator: true,
-        removeClippedSubviews: true,
+        showsVerticalScrollIndicator: true
+        // See QueryBrowser: e2e bundles keep every cell mounted so Detox's
+        // hittability check doesn't reject an on-screen row as clipped.
+        ,
+        removeClippedSubviews: !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E),
         contentContainerStyle: contentContainerStyle || styles.listContent,
         initialNumToRender: 10,
         maxToRenderPerBatch: 10,
@@ -135,6 +139,7 @@ function MutationsList({
       style: styles.emptyContainer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.emptyText,
+        testID: "buoy-rq-mutations-empty",
         children: activeFilter ? `No ${activeFilter} mutations found` : "No mutations found"
       })
     }), selectedMutation && !hideInfoPanel && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {

package/lib/commonjs/react-query/components/query-browser/QueryBrowser.js

@@ -102,6 +102,7 @@ function QueryBrowser({
       style: styles.emptyContainer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.emptyText,
+        testID: "buoy-rq-empty",
         children: emptyStateMessage || (activeFilter ? `No ${activeFilter} queries found` : "No queries found")
       })
     });
@@ -116,6 +117,7 @@ function QueryBrowser({
     // mutable with stable identity, so `stateSig` carries the changing
     // fields for the row's memo comparison.
     (0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+      testID: "buoy-rq-query-list",
       style: styles.listWrapper,
       contentContainerStyle: contentContainerStyle || styles.listContent,
       data: filteredQueries,
@@ -128,8 +130,13 @@ function QueryBrowser({
         isSelected: selectedQuery?.queryHash === query.queryHash,
         onSelect: handleQuerySelect
       }),
-      showsVerticalScrollIndicator: true,
-      removeClippedSubviews: true,
+      showsVerticalScrollIndicator: true
+      // Clipped cells fail Detox's hittability check even when they are on
+      // screen, so e2e bundles (Metro with EXPO_PUBLIC_E2E=1) turn clipping
+      // off. Inlined at bundle time; a non-inlining bundler keeps prod
+      // behavior.
+      ,
+      removeClippedSubviews: !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E),
       initialNumToRender: 12,
       maxToRenderPerBatch: 8,
       windowSize: 5,

package/lib/commonjs/react-query/components/query-browser/QueryDetails.js

@@ -37,11 +37,13 @@ function QueryDetails({
         horizontal: true,
         style: styles.flexOne,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: "buoy-rq-detail-key",
           style: styles.queryKeyText,
           children: (0, _sharedUi.displayValue)(query.queryKey, true)
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryDetailsChip.default, {
-        query: query
+        query: query,
+        testID: "buoy-rq-detail-status"
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.row,
@@ -49,6 +51,7 @@ function QueryDetails({
         style: styles.labelText,
         children: "Observers:"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        testID: "buoy-rq-detail-observers",
         style: styles.valueText,
         children: `${query.getObserversCount()}`
       })]
@@ -58,6 +61,7 @@ function QueryDetails({
         style: styles.labelText,
         children: "Last Updated:"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        testID: "buoy-rq-detail-updated",
         style: styles.valueText,
         children: `${lastUpdated}`
       })]

package/lib/commonjs/react-query/components/query-browser/QueryDetailsChip.js

@@ -39,7 +39,8 @@ const textColors = {
  * Chip component used to display small query metadata values (status, observers, etc.).
  */
 function QueryDetailsChip({
-  query
+  query,
+  testID
 }) {
   const status = (0, _getQueryStatusLabel.getQueryStatusLabel)(query);
   const backgroundColor = backgroundColors[status];
@@ -51,6 +52,7 @@ function QueryDetailsChip({
       borderColor
     }],
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: testID,
       style: [styles.text, {
         color: textColor
       }],

package/lib/commonjs/react-query/components/query-browser/QueryRow.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = require("react");
 var _getQueryStatusLabel = require("../../utils/getQueryStatusLabel");
 var _sharedUi = require("@buoy-gg/shared-ui");
+var _testIDs = require("../../utils/testIDs");
 var _jsxRuntime = require("react/jsx-runtime");
 const getQueryText = query => {
   if (!query?.queryKey) return "Unknown Query";
@@ -70,10 +71,20 @@ const QueryRow = /*#__PURE__*/(0, _react.memo)(function QueryRow({
   })();
   const relativeTime = (0, _sharedUi.useRelativeTime)(bestTimestamp);
   const lastUpdated = isDisabled ? "Disabled" : relativeTime || (query.state.dataUpdatedAt === 0 ? "Not fetched" : `N/A (${query.state.dataUpdatedAt || 0})`);
+  const testID = (0, _testIDs.queryRowTestID)(query.queryKey);
+  const observerText = `${observerCount} observer${observerCount !== 1 ? "s" : ""}`;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompactRow, {
+    testID: testID,
+    statusTestID: `${testID}-status`,
+    statusSublabelTestID: `${testID}-observers`
+    // Spelled out for assistive tech: on Fabric the dot + two words merge
+    // into the row's own accessibility container, so without this the row
+    // announces as a control VoiceOver cannot name.
+    ,
+    accessibilityLabel: `${queryHash}, ${status}, ${observerText}`,
     statusDotColor: getStatusHexColor(status),
     statusLabel: status.charAt(0).toUpperCase() + status.slice(1),
-    statusSublabel: `${observerCount} observer${observerCount !== 1 ? "s" : ""}`,
+    statusSublabel: observerText,
     primaryText: queryHash,
     bottomRightText: lastUpdated,
     badgeText: observerCount,

package/lib/commonjs/react-query/components/query-browser/QueryStatus.js

@@ -18,7 +18,8 @@ const QueryStatus = ({
   isActive = false,
   onPress,
   onTouchStart,
-  size = "default"
+  size = "default",
+  testID
 }) => {
   const isLarge = size === "large";
   // Buoy theme color mapping for status indicators
@@ -66,6 +67,15 @@ const QueryStatus = ({
   const statusColors = getStatusColors(color);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
     "sentry-label": "ignore devtools query status",
+    testID: testID,
+    accessibilityRole: "button"
+    // The dot, the word and the number merge into one container on Fabric,
+    // so the chip is announced without any of them unless it is spelled out.
+    ,
+    accessibilityLabel: `${label}, ${count}${isActive ? ", selected" : ""}`,
+    accessibilityState: {
+      selected: isActive
+    },
     style: [styles.queryStatusTag, isLarge && styles.queryStatusTagLarge,
     // The night chip contract (see NightChip): resting fill never changes;
     // selection is signaled by the tinted border and label.
@@ -89,6 +99,7 @@ const QueryStatus = ({
       ellipsizeMode: "tail",
       children: label
     }), count > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: testID ? `${testID}-count` : undefined,
       style: [styles.count, isLarge && styles.countLarge, {
         color: statusColors.dot
       }],