refactor component tree & fire event

Author: mdjastrzebski

src/__tests__/event-handler.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Text, View } from 'react-native';
 
 import { render, screen } from '..';
-import { getEventHandler } from '../event-handler';
+import { getEventHandlerFromProps } from '../event-handler';
 
 test('getEventHandler strict mode', () => {
   const onPress = jest.fn();
@@ -22,13 +22,13 @@ test('getEventHandler strict mode', () => {
   const testOnly = screen.getByTestId('testOnly');
   const both = screen.getByTestId('both');
 
-  expect(getEventHandler(regular, 'press')).toBe(onPress);
-  expect(getEventHandler(testOnly, 'press')).toBe(testOnlyOnPress);
-  expect(getEventHandler(both, 'press')).toBe(onPress);
+  expect(getEventHandlerFromProps(regular.props, 'press')).toBe(onPress);
+  expect(getEventHandlerFromProps(testOnly.props, 'press')).toBe(testOnlyOnPress);
+  expect(getEventHandlerFromProps(both.props, 'press')).toBe(onPress);
 
-  expect(getEventHandler(regular, 'onPress')).toBe(undefined);
-  expect(getEventHandler(testOnly, 'onPress')).toBe(undefined);
-  expect(getEventHandler(both, 'onPress')).toBe(undefined);
+  expect(getEventHandlerFromProps(regular.props, 'onPress')).toBe(undefined);
+  expect(getEventHandlerFromProps(testOnly.props, 'onPress')).toBe(undefined);
+  expect(getEventHandlerFromProps(both.props, 'onPress')).toBe(undefined);
 });
 
 test('getEventHandler loose mode', () => {
@@ -49,11 +49,13 @@ test('getEventHandler loose mode', () => {
   const testOnly = screen.getByTestId('testOnly');
   const both = screen.getByTestId('both');
 
-  expect(getEventHandler(regular, 'press', { loose: true })).toBe(onPress);
-  expect(getEventHandler(testOnly, 'press', { loose: true })).toBe(testOnlyOnPress);
-  expect(getEventHandler(both, 'press', { loose: true })).toBe(onPress);
+  expect(getEventHandlerFromProps(regular.props, 'press', { loose: true })).toBe(onPress);
+  expect(getEventHandlerFromProps(testOnly.props, 'press', { loose: true })).toBe(testOnlyOnPress);
+  expect(getEventHandlerFromProps(both.props, 'press', { loose: true })).toBe(onPress);
 
-  expect(getEventHandler(regular, 'onPress', { loose: true })).toBe(onPress);
-  expect(getEventHandler(testOnly, 'onPress', { loose: true })).toBe(testOnlyOnPress);
-  expect(getEventHandler(both, 'onPress', { loose: true })).toBe(onPress);
+  expect(getEventHandlerFromProps(regular.props, 'onPress', { loose: true })).toBe(onPress);
+  expect(getEventHandlerFromProps(testOnly.props, 'onPress', { loose: true })).toBe(
+    testOnlyOnPress,
+  );
+  expect(getEventHandlerFromProps(both.props, 'onPress', { loose: true })).toBe(onPress);
 });

src/event-handler.ts

@@ -1,30 +1,30 @@
-import type { HostElement } from 'universal-test-renderer';
+export type EventHandler = (...args: unknown[]) => unknown;
 
 export type EventHandlerOptions = {
   /** Include check for event handler named without adding `on*` prefix. */
   loose?: boolean;
 };
 
-export function getEventHandler(
-  element: HostElement,
+export function getEventHandlerFromProps(
+  props: Record<string, unknown>,
   eventName: string,
   options?: EventHandlerOptions,
-) {
+): EventHandler | undefined {
   const handlerName = getEventHandlerName(eventName);
-  if (typeof element.props[handlerName] === 'function') {
-    return element.props[handlerName];
+  if (typeof props[handlerName] === 'function') {
+    return props[handlerName] as EventHandler;
   }
 
-  if (options?.loose && typeof element.props[eventName] === 'function') {
-    return element.props[eventName];
+  if (options?.loose && typeof props[eventName] === 'function') {
+    return props[eventName] as EventHandler;
   }
 
-  if (typeof element.props[`testOnly_${handlerName}`] === 'function') {
-    return element.props[`testOnly_${handlerName}`];
+  if (typeof props[`testOnly_${handlerName}`] === 'function') {
+    return props[`testOnly_${handlerName}`] as EventHandler;
   }
 
-  if (options?.loose && typeof element.props[`testOnly_${eventName}`] === 'function') {
-    return element.props[`testOnly_${eventName}`];
+  if (options?.loose && typeof props[`testOnly_${eventName}`] === 'function') {
+    return props[`testOnly_${eventName}`] as EventHandler;
   }
 
   return undefined;

src/fire-event.ts

@@ -8,16 +8,14 @@ import type {
 import type { HostElement } from 'universal-test-renderer';
 
 import act from './act';
-import { getEventHandler } from './event-handler';
+import { EventHandler, getEventHandlerFromProps } from './event-handler';
 import { isElementMounted, isHostElement } from './helpers/component-tree';
 import { isHostScrollView, isHostTextInput } from './helpers/host-component-names';
 import { isPointerEventEnabled } from './helpers/pointer-events';
 import { isEditableTextInput } from './helpers/text-input';
 import { nativeState } from './native-state';
 import type { Point, StringWithAutocomplete } from './types';
 
-type EventHandler = (...args: unknown[]) => unknown;
-
 export function isTouchResponder(element: HostElement) {
   if (!isHostElement(element)) {
     return false;
@@ -81,7 +79,7 @@ function findEventHandler(
 ): EventHandler | null {
   const touchResponder = isTouchResponder(element) ? element : nearestTouchResponder;
 
-  const handler = getEventHandler(element, eventName, { loose: true });
+  const handler = getEventHandlerFromProps(element.props, eventName, { loose: true });
   if (handler && isEventEnabled(element, eventName, touchResponder)) {
     return handler;
   }

src/helpers/__tests__/component-tree.test.tsx

@@ -1,12 +1,8 @@
 import React from 'react';
-import { Text, TextInput, View } from 'react-native';
+import { View } from 'react-native';
 
 import { render, screen } from '../..';
-import { getHostSelves, getHostSiblings, getContainerElement } from '../component-tree';
-
-function ZeroHostChildren() {
-  return <></>;
-}
+import { getContainerElement, getHostSiblings } from '../component-tree';
 
 function MultipleHostChildren() {
   return (
@@ -18,55 +14,6 @@ function MultipleHostChildren() {
   );
 }
 
-describe('getHostSelves()', () => {
-  it('returns passed element for host components', () => {
-    render(
-      <View testID="grandparent">
-        <View testID="parent">
-          <View testID="subject" />
-          <View testID="sibling" />
-        </View>
-      </View>,
-    );
-
-    const hostSubject = screen.getByTestId('subject');
-    expect(getHostSelves(hostSubject)).toEqual([hostSubject]);
-
-    const hostSibling = screen.getByTestId('sibling');
-    expect(getHostSelves(hostSibling)).toEqual([hostSibling]);
-
-    const hostParent = screen.getByTestId('parent');
-    expect(getHostSelves(hostParent)).toEqual([hostParent]);
-
-    const hostGrandparent = screen.getByTestId('grandparent');
-    expect(getHostSelves(hostGrandparent)).toEqual([hostGrandparent]);
-  });
-
-  test('returns single host element for React Native composite components', () => {
-    render(
-      <View testID="parent">
-        <Text testID="text">Text</Text>
-        <TextInput
-          testID="textInput"
-          defaultValue="TextInputValue"
-          placeholder="TextInputPlaceholder"
-        />
-      </View>,
-    );
-
-    const compositeText = screen.getByText('Text');
-    const hostText = screen.getByTestId('text');
-    expect(getHostSelves(compositeText)).toEqual([hostText]);
-
-    const compositeTextInputByValue = screen.getByDisplayValue('TextInputValue');
-    const compositeTextInputByPlaceholder = screen.getByPlaceholderText('TextInputPlaceholder');
-
-    const hostTextInput = screen.getByTestId('textInput');
-    expect(getHostSelves(compositeTextInputByValue)).toEqual([hostTextInput]);
-    expect(getHostSelves(compositeTextInputByPlaceholder)).toEqual([hostTextInput]);
-  });
-});
-
 describe('getHostSiblings()', () => {
   it('returns host siblings for host component', () => {
     render(

src/helpers/accessibility.ts

@@ -2,7 +2,7 @@ import type { AccessibilityRole, AccessibilityState, AccessibilityValue, Role }
 import { StyleSheet } from 'react-native';
 import type { HostElement } from 'universal-test-renderer';
 
-import { getHostSiblings, getContainerElement, isHostElement } from './component-tree';
+import { getContainerElement, getHostSiblings, isHostElement } from './component-tree';
 import { findAll } from './find-all';
 import { isHostImage, isHostSwitch, isHostText, isHostTextInput } from './host-component-names';
 import { getTextContent } from './text-content';
@@ -157,9 +157,9 @@ export function computeAriaModal(element: HostElement): boolean | undefined {
 export function computeAriaLabel(element: HostElement): string | undefined {
   const labelElementId = element.props['aria-labelledby'] ?? element.props.accessibilityLabelledBy;
   if (labelElementId) {
-    const rootElement = getContainerElement(element);
+    const container = getContainerElement(element);
     const labelElement = findAll(
-      rootElement,
+      container,
       (node) => isHostElement(node) && node.props.nativeID === labelElementId,
       { includeHiddenElements: true },
     );

src/helpers/component-tree.ts

@@ -14,25 +14,20 @@ export function isElementMounted(element: HostElement) {
   return getContainerElement(element) === screen.container;
 }
 
-/**
- * Return the array of host elements that represent the passed element.
- *
- * @param element The element start traversing from.
- * @returns If the passed element is a host element, it will return an array containing only that element,
- * if the passed element is a composite element, it will return an array containing its host children (zero, one or many).
- */
-export function getHostSelves(element: HostElement | null): HostElement[] {
-  return isHostElement(element) ? [element] : getHostChildren(element);
-}
-
 /**
  * Returns host siblings for given element.
  * @param element The element start traversing from.
  */
-export function getHostSiblings(element: HostElement | null): HostElement[] {
-  const hostParent = element?.parent;
-  const hostSelves = getHostSelves(element);
-  return getHostChildren(hostParent).filter((sibling) => !hostSelves.includes(sibling));
+export function getHostSiblings(element: HostElement): HostElement[] {
+  // Should not happen
+  const parent = element.parent;
+  if (!parent) {
+    return [];
+  }
+
+  return parent.children.filter(
+    (sibling) => typeof sibling !== 'string' && sibling !== element,
+  ) as HostElement[];
 }
 
 /**

src/helpers/host-component-names.ts

@@ -1,7 +1,5 @@
 import type { HostElement } from 'universal-test-renderer';
 
-import type { HostElement } from './component-tree';
-
 const HOST_TEXT_NAMES = ['Text', 'RCTText'];
 const HOST_TEXT_INPUT_NAMES = ['TextInput'];
 const HOST_IMAGE_NAMES = ['Image'];
@@ -13,46 +11,46 @@ const HOST_MODAL_NAMES = ['Modal'];
  * Checks if the given element is a host Text element.
  * @param element The element to check.
  */
-export function isHostText(element: HostElement | null): element is HostElement {
+export function isHostText(element: HostElement | null) {
   return typeof element?.type === 'string' && HOST_TEXT_NAMES.includes(element.type);
 }
 
 /**
  * Checks if the given element is a host TextInput element.
  * @param element The element to check.
  */
-export function isHostTextInput(element: HostElement | null): element is HostElement {
+export function isHostTextInput(element: HostElement | null) {
   return typeof element?.type === 'string' && HOST_TEXT_INPUT_NAMES.includes(element.type);
 }
 
 /**
  * Checks if the given element is a host Image element.
  * @param element The element to check.
  */
-export function isHostImage(element: HostElement | null): element is HostElement {
+export function isHostImage(element: HostElement | null) {
   return typeof element?.type === 'string' && HOST_IMAGE_NAMES.includes(element.type);
 }
 
 /**
  * Checks if the given element is a host Switch element.
  * @param element The element to check.
  */
-export function isHostSwitch(element: HostElement | null): element is HostElement {
+export function isHostSwitch(element: HostElement | null) {
   return typeof element?.type === 'string' && HOST_SWITCH_NAMES.includes(element.type);
 }
 
 /**
  * Checks if the given element is a host ScrollView element.
  * @param element The element to check.
  */
-export function isHostScrollView(element: HostElement | null): element is HostElement {
+export function isHostScrollView(element: HostElement | null) {
   return typeof element?.type === 'string' && HOST_SCROLL_VIEW_NAMES.includes(element.type);
 }
 
 /**
  * Checks if the given element is a host Modal element.
  * @param element The element to check.
  */
-export function isHostModal(element: HostElement | null): element is HostElement {
+export function isHostModal(element: HostElement | null) {
   return typeof element?.type === 'string' && HOST_MODAL_NAMES.includes(element.type);
 }

src/helpers/pointer-events.ts

@@ -1,8 +1,6 @@
 import { StyleSheet } from 'react-native';
 import type { HostElement } from 'universal-test-renderer';
 
-import { getHostParent } from './component-tree';
-
 /**
  * pointerEvents controls whether the View can be the target of touch events.
  * 'auto': The View and its children can be the target of touch events.

src/matchers/to-be-disabled.ts

@@ -1,9 +1,8 @@
-import type { HostElement } from 'universal-test-renderer';
 import { matcherHint } from 'jest-matcher-utils';
 import redent from 'redent';
+import type { HostElement } from 'universal-test-renderer';
 
 import { computeAriaDisabled } from '../helpers/accessibility';
-import { getHostParent } from '../helpers/component-tree';
 import { formatElement } from '../helpers/format-element';
 import { checkHostElement } from './utils';
 

src/matchers/to-be-on-the-screen.ts

@@ -1,6 +1,6 @@
-import type { HostElement } from 'universal-test-renderer';
 import { matcherHint, RECEIVED_COLOR } from 'jest-matcher-utils';
 import redent from 'redent';
+import type { HostElement } from 'universal-test-renderer';
 
 import { getContainerElement } from '../helpers/component-tree';
 import { formatElement } from '../helpers/format-element';