@nyby/detox-component-testing 1.4.2 → 1.5.1

package/src/DebugTree.tsx

@@ -1,280 +0,0 @@
-import React, {useCallback, useRef, useState} from 'react';
-import {Text, TextInput, View} from 'react-native';
-
-type Fiber = {
-  type: any;
-  memoizedProps: Record<string, any>;
-  child: Fiber | null;
-  sibling: Fiber | null;
-  return: Fiber | null;
-  tag: number;
-  stateNode: any;
-};
-
-type TreeNode = {
-  name: string;
-  props?: Record<string, any>;
-  text?: string;
-  children?: TreeNode[];
-};
-
-// React fiber tags
-const FunctionComponent = 0;
-const ClassComponent = 1;
-const HostComponent = 5;
-const HostText = 6;
-const ForwardRef = 11;
-const MemoComponent = 14;
-const SimpleMemoComponent = 15;
-
-const DEFAULT_USEFUL_PROPS = new Set([
-  'testID',
-  'accessibilityLabel',
-  'accessibilityRole',
-  'title',
-  'name',
-  'variant',
-  'size',
-  'value',
-  'placeholder',
-  'disabled',
-  'selected',
-  'checked',
-  'visible',
-]);
-
-const DEFAULT_SKIP_NAMES = new Set([
-  'StaticContainer',
-  'EnsureSingleNavigator',
-  'PreventRemoveProvider',
-  'NavigationContent',
-  'NavigationStateContext',
-  'ScreenStackHeaderConfig',
-  'RenderErrorBoundary',
-  'DebugTree',
-  'PressabilityDebugView',
-]);
-
-const DEFAULT_NATIVE_DUPLICATES = new Set([
-  'RCTText',
-  'RCTView',
-  'RCTScrollView',
-  'RCTCustomScrollView',
-  'RCTScrollContentView',
-  'RCTSinglelineTextInputView',
-  'RCTUITextField',
-]);
-
-function findFiberFromRef(ref: any): Fiber | null {
-  if (!ref) return null;
-
-  // React Native: __internalInstanceHandle is the fiber node
-  if (ref.__internalInstanceHandle) {
-    return ref.__internalInstanceHandle;
-  }
-
-  // React DEV builds
-  if (ref._internalFiberInstanceHandleDEV) {
-    return ref._internalFiberInstanceHandleDEV;
-  }
-
-  // React DOM style: __reactFiber$ key on the node
-  for (const key of Object.getOwnPropertyNames(ref)) {
-    if (key.startsWith('__reactFiber$')) {
-      return ref[key];
-    }
-  }
-
-  return null;
-}
-
-function getComponentName(fiber: Fiber): string | null {
-  const {type, tag} = fiber;
-
-  if (tag === HostText) return null;
-
-  if (tag === HostComponent) {
-    return typeof type === 'string' ? type : null;
-  }
-
-  if (tag === FunctionComponent || tag === ClassComponent || tag === SimpleMemoComponent) {
-    return type?.displayName || type?.name || null;
-  }
-
-  if (tag === ForwardRef) {
-    return type?.displayName || type?.render?.displayName || type?.render?.name || null;
-  }
-
-  if (tag === MemoComponent) {
-    return type?.displayName || type?.type?.displayName || type?.type?.name || null;
-  }
-
-  return null;
-}
-
-function isUserComponent(fiber: Fiber): boolean {
-  const {tag} = fiber;
-  return (
-    tag === FunctionComponent ||
-    tag === ClassComponent ||
-    tag === ForwardRef ||
-    tag === MemoComponent ||
-    tag === SimpleMemoComponent
-  );
-}
-
-function extractProps(fiber: Fiber, usefulProps: Set<string>): Record<string, any> | undefined {
-  const {memoizedProps} = fiber;
-  if (!memoizedProps) return undefined;
-
-  const result: Record<string, any> = {};
-  let hasProps = false;
-
-  for (const key of Object.keys(memoizedProps)) {
-    if (key === 'children' || key === 'style') continue;
-    if (usefulProps.has(key)) {
-      const val = memoizedProps[key];
-      if (typeof val === 'string' || typeof val === 'number' || typeof val === 'boolean') {
-        result[key] = val;
-        hasProps = true;
-      }
-    }
-  }
-
-  if (memoizedProps.onPress) {
-    result.onPress = true;
-    hasProps = true;
-  }
-
-  return hasProps ? result : undefined;
-}
-
-function getTextContent(fiber: Fiber): string | undefined {
-  if (fiber.tag === HostText) {
-    return typeof fiber.memoizedProps === 'string' ? fiber.memoizedProps : undefined;
-  }
-  if (typeof fiber.memoizedProps?.children === 'string') {
-    return fiber.memoizedProps.children;
-  }
-  return undefined;
-}
-
-function shouldShow(fiber: Fiber, skipNames: Set<string>, nativeDuplicates: Set<string>): boolean {
-  const name = getComponentName(fiber);
-  if (!name) return false;
-  if (skipNames.has(name)) return false;
-  if (nativeDuplicates.has(name)) return false;
-
-  if (isUserComponent(fiber)) return true;
-
-  if (fiber.tag === HostComponent) {
-    const props = fiber.memoizedProps;
-    if (props?.testID || props?.accessibilityLabel) return true;
-    if (typeof props?.children === 'string') return true;
-  }
-
-  return false;
-}
-
-function walkFiber(
-  fiber: Fiber | null,
-  collect: TreeNode[],
-  usefulProps: Set<string>,
-  skipNames: Set<string>,
-  nativeDuplicates: Set<string>,
-): void {
-  if (!fiber) return;
-
-  const name = getComponentName(fiber);
-  const show = fiber.tag !== HostText && shouldShow(fiber, skipNames, nativeDuplicates);
-
-  if (show && name) {
-    const node: TreeNode = {name};
-    const props = extractProps(fiber, usefulProps);
-    if (props) node.props = props;
-    const text = getTextContent(fiber);
-    if (text) node.text = text;
-
-    const childNodes: TreeNode[] = [];
-    walkFiber(fiber.child, childNodes, usefulProps, skipNames, nativeDuplicates);
-    if (childNodes.length > 0) node.children = childNodes;
-
-    collect.push(node);
-  } else {
-    walkFiber(fiber.child, collect, usefulProps, skipNames, nativeDuplicates);
-  }
-
-  walkFiber(fiber.sibling, collect, usefulProps, skipNames, nativeDuplicates);
-}
-
-export function captureTree(
-  ref: any,
-  usefulProps: Set<string> = DEFAULT_USEFUL_PROPS,
-  skipNames: Set<string> = DEFAULT_SKIP_NAMES,
-  nativeDuplicates: Set<string> = DEFAULT_NATIVE_DUPLICATES,
-): string {
-  const fiber = findFiberFromRef(ref);
-  if (!fiber) return '[]';
-
-  const tree: TreeNode[] = [];
-  walkFiber(fiber.child, tree, usefulProps, skipNames, nativeDuplicates);
-
-  return JSON.stringify(tree);
-}
-
-export interface DebugTreeProps {
-  children: React.ReactNode;
-  /** Props to include in tree output. Defaults to testID, accessibilityLabel, etc. */
-  usefulProps?: string[];
-  /** Component names to skip (internal wrappers that add noise). */
-  skipNames?: string[];
-  /** Native component names that duplicate their parent (e.g. RCTText inside Text). */
-  nativeDuplicates?: string[];
-}
-
-/**
- * Debug component that captures the React component tree on demand.
- * Wrap your test content with this. Trigger via Detox:
- *
- *   await element(by.id('debug-tree-control')).replaceText('dump');
- *   const attrs = await element(by.id('debug-tree-output')).getAttributes();
- */
-export function DebugTree({children, usefulProps, skipNames, nativeDuplicates}: DebugTreeProps) {
-  const rootRef = useRef<View>(null);
-  const [tree, setTree] = useState('');
-
-  const usefulPropsSet = usefulProps ? new Set(usefulProps) : DEFAULT_USEFUL_PROPS;
-  const skipNamesSet = skipNames ? new Set(skipNames) : DEFAULT_SKIP_NAMES;
-  const nativeDuplicatesSet = nativeDuplicates
-    ? new Set(nativeDuplicates)
-    : DEFAULT_NATIVE_DUPLICATES;
-
-  const handleCommand = useCallback(
-    (text: string) => {
-      if (text === 'dump' && rootRef.current) {
-        const result = captureTree(
-          rootRef.current,
-          usefulPropsSet,
-          skipNamesSet,
-          nativeDuplicatesSet,
-        );
-        setTree(result);
-      }
-    },
-    [usefulPropsSet, skipNamesSet, nativeDuplicatesSet],
-  );
-
-  return (
-    <>
-      <TextInput testID="debug-tree-control" onChangeText={handleCommand} style={{height: 1}} />
-      <View ref={rootRef} style={{flex: 1}} collapsable={false}>
-        {children}
-      </View>
-      {tree ? (
-        <Text testID="debug-tree-output" style={{height: 1}}>
-          {tree}
-        </Text>
-      ) : null}
-    </>
-  );
-}