@react-native-harness/ui 1.0.0-alpha.23 → 1.0.0-alpha.24

package/src/NativeHarnessUI.ts

@@ -1,8 +1,6 @@
 import { TurboModuleRegistry, type TurboModule } from 'react-native';
 
-/**
- * Represents the position and dimensions of a view in screen coordinates (points/dp).
- */
+// This interface needs to be there for Codegen to work.
 export interface ViewInfo {
   x: number;
   y: number;
@@ -11,56 +9,14 @@ export interface ViewInfo {
 }
 
 interface Spec extends TurboModule {
-  /**
-   * Simulates a native press at the specified screen coordinates.
-   * Returns a promise that resolves when the press action is complete.
-   */
   simulatePress(x: number, y: number): Promise<void>;
-
-  /**
-   * Finds a view by its testID (accessibilityIdentifier on iOS, tag on Android).
-   * Returns null if no view is found.
-   */
   queryByTestId(testId: string): ViewInfo | null;
-
-  /**
-   * Finds all views by testID (accessibilityIdentifier on iOS, tag on Android).
-   * Returns an empty array if no views are found.
-   */
   queryAllByTestId(testId: string): ViewInfo[];
-
-  /**
-   * Finds a view by its accessibility label.
-   * Returns null if no view is found.
-   */
   queryByAccessibilityLabel(label: string): ViewInfo | null;
-
-  /**
-   * Finds all views by accessibility label.
-   * Returns an empty array if no views are found.
-   */
   queryAllByAccessibilityLabel(label: string): ViewInfo[];
-
-  /**
-   * Captures a screenshot of the app UI.
-   * @param bounds Optional bounds to capture a specific region. Pass null to capture the entire window.
-   * @returns Promise resolving to Base64 encoded string containing PNG data, or null on failure.
-   */
   captureScreenshot(bounds: ViewInfo | null): Promise<string | null>;
-
-  /**
-   * Types a single character into the currently focused text input.
-   * If no text input is focused, this is a no-op.
-   */
   typeChar(character: string): Promise<void>;
-
-  /**
-   * Blurs (resigns first responder from) the currently focused element.
-   * Optionally triggers submitEditing event before blur.
-   */
   blur(options: { submitEditing?: boolean }): Promise<void>;
 }
 
-export type HarnessUIModule = Spec;
-
 export default TurboModuleRegistry.getEnforcing<Spec>('HarnessUI');

package/src/WebHarnessUI.ts

@@ -0,0 +1,78 @@
+import { type HarnessUIModule, type ViewInfo } from './types.js';
+
+declare global {
+  interface Window {
+    __RN_HARNESS_CAPTURE_SCREENSHOT__: (
+      bounds: ViewInfo | null
+    ) => Promise<string | null>;
+    __RN_HARNESS_SIMULATE_PRESS__: (x: number, y: number) => Promise<void>;
+    __RN_HARNESS_TYPE_CHAR__: (character: string) => Promise<void>;
+    __RN_HARNESS_BLUR__: (options: {
+      submitEditing?: boolean;
+    }) => Promise<void>;
+  }
+}
+
+const getElementViewInfo = (element: Element): ViewInfo => {
+  const rect = element.getBoundingClientRect();
+  return {
+    x: rect.left,
+    y: rect.top,
+    width: rect.width,
+    height: rect.height,
+  };
+};
+
+const WebHarnessUI: HarnessUIModule = {
+  simulatePress: async (x, y) => {
+    await window.__RN_HARNESS_SIMULATE_PRESS__(x, y);
+  },
+
+  queryByTestId: (testId) => {
+    const element = document.querySelector(`[data-testid="${testId}"]`);
+    return element ? getElementViewInfo(element) : null;
+  },
+
+  queryAllByTestId: (testId) => {
+    const elements = document.querySelectorAll(`[data-testid="${testId}"]`);
+    return Array.from(elements).map(getElementViewInfo);
+  },
+
+  queryByAccessibilityLabel: (label) => {
+    const element = document.querySelector(`[aria-label="${label}"]`);
+    return element ? getElementViewInfo(element) : null;
+  },
+
+  queryAllByAccessibilityLabel: (label) => {
+    const elements = document.querySelectorAll(`[aria-label="${label}"]`);
+    return Array.from(elements).map(getElementViewInfo);
+  },
+
+  captureScreenshot: async (bounds) => {
+    return await window.__RN_HARNESS_CAPTURE_SCREENSHOT__(bounds);
+  },
+
+  typeChar: async (character) => {
+    await window.__RN_HARNESS_TYPE_CHAR__(character);
+  },
+
+  blur: async (options) => {
+    if (options.submitEditing) {
+      // If we want to submit, we must NOT blur before pressing Enter.
+      // We let the runner-side bridge handle both Enter and the subsequent blur.
+      await window.__RN_HARNESS_BLUR__(options);
+    } else {
+      // If there is a focused element, blur it directly in the DOM first
+      // to trigger local events, then call the runner-side bridge.
+      if (
+        document.activeElement instanceof HTMLElement ||
+        document.activeElement instanceof SVGElement
+      ) {
+        document.activeElement.blur();
+      }
+      await window.__RN_HARNESS_BLUR__(options);
+    }
+  },
+};
+
+export default WebHarnessUI;

package/src/harness.ts

@@ -0,0 +1,12 @@
+import { Platform } from "react-native";
+import { HarnessUIModule } from "./types.js";
+
+const getHarnessUI = (): HarnessUIModule => {
+	if (Platform.OS === 'web') {
+		return require('./WebHarnessUI.js').default;
+	}
+
+	return require('./NativeHarnessUI.js').default;
+}
+
+export default getHarnessUI();

package/src/index.ts

@@ -15,4 +15,4 @@ export {
   type ScreenshotResult,
 } from './screen.js';
 export { userEvent, type UserEvent } from './userEvent.js';
-export type { ViewInfo } from './NativeHarnessUI.js';
+export type { ViewInfo } from './types.js';

package/src/screen.ts

@@ -1,5 +1,6 @@
-import NativeHarnessUI, { type ViewInfo } from './NativeHarnessUI.js';
+import { type ViewInfo } from './types.js';
 import { waitFor } from '@react-native-harness/runtime';
+import HarnessUI from './harness.js';
 
 /**
  * Represents an element found on screen with its position and dimensions.
@@ -80,7 +81,7 @@ const createScreen = (): Screen => {
   return {
     findByTestId: async (testId: string): Promise<ElementReference> => {
       return waitFor(() => {
-        const result = NativeHarnessUI.queryByTestId(testId);
+        const result = HarnessUI.queryByTestId(testId);
         if (!result) {
           throw new Error(`Unable to find element with testID: ${testId}`);
         }
@@ -90,7 +91,7 @@ const createScreen = (): Screen => {
 
     findAllByTestId: async (testId: string): Promise<ElementReference[]> => {
       return waitFor(() => {
-        const results = NativeHarnessUI.queryAllByTestId(testId);
+        const results = HarnessUI.queryAllByTestId(testId);
         if (results.length === 0) {
           throw new Error(`Unable to find any elements with testID: ${testId}`);
         }
@@ -99,18 +100,18 @@ const createScreen = (): Screen => {
     },
 
     queryByTestId: (testId: string): ElementReference | null => {
-      return NativeHarnessUI.queryByTestId(testId);
+      return HarnessUI.queryByTestId(testId);
     },
 
     queryAllByTestId: (testId: string): ElementReference[] => {
-      return NativeHarnessUI.queryAllByTestId(testId);
+      return HarnessUI.queryAllByTestId(testId);
     },
 
     findByAccessibilityLabel: async (
       label: string
     ): Promise<ElementReference> => {
       return waitFor(() => {
-        const result = NativeHarnessUI.queryByAccessibilityLabel(label);
+        const result = HarnessUI.queryByAccessibilityLabel(label);
         if (!result) {
           throw new Error(
             `Unable to find element with accessibility label: ${label}`
@@ -124,7 +125,7 @@ const createScreen = (): Screen => {
       label: string
     ): Promise<ElementReference[]> => {
       return waitFor(() => {
-        const results = NativeHarnessUI.queryAllByAccessibilityLabel(label);
+        const results = HarnessUI.queryAllByAccessibilityLabel(label);
         if (results.length === 0) {
           throw new Error(
             `Unable to find any elements with accessibility label: ${label}`
@@ -135,18 +136,18 @@ const createScreen = (): Screen => {
     },
 
     queryByAccessibilityLabel: (label: string): ElementReference | null => {
-      return NativeHarnessUI.queryByAccessibilityLabel(label);
+      return HarnessUI.queryByAccessibilityLabel(label);
     },
 
     queryAllByAccessibilityLabel: (label: string): ElementReference[] => {
-      return NativeHarnessUI.queryAllByAccessibilityLabel(label);
+      return HarnessUI.queryAllByAccessibilityLabel(label);
     },
 
     screenshot: async (
       element?: ElementReference
     ): Promise<ScreenshotResult | null> => {
       const bounds = element ?? null;
-      const base64String = await NativeHarnessUI.captureScreenshot(bounds);
+      const base64String = await HarnessUI.captureScreenshot(bounds);
 
       if (!base64String) {
         return null;

package/src/types.ts

@@ -0,0 +1,60 @@
+/**
+ * Represents the position and dimensions of a view in screen coordinates (points/dp).
+ */
+export interface ViewInfo {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface HarnessUIModule {
+  /**
+   * Simulates a native press at the specified screen coordinates.
+   * Returns a promise that resolves when the press action is complete.
+   */
+  simulatePress(x: number, y: number): Promise<void>;
+
+  /**
+   * Finds a view by its testID (accessibilityIdentifier on iOS, tag on Android).
+   * Returns null if no view is found.
+   */
+  queryByTestId(testId: string): ViewInfo | null;
+
+  /**
+   * Finds all views by testID (accessibilityIdentifier on iOS, tag on Android).
+   * Returns an empty array if no views are found.
+   */
+  queryAllByTestId(testId: string): ViewInfo[];
+
+  /**
+   * Finds a view by its accessibility label.
+   * Returns null if no view is found.
+   */
+  queryByAccessibilityLabel(label: string): ViewInfo | null;
+
+  /**
+   * Finds all views by accessibility label.
+   * Returns an empty array if no views are found.
+   */
+  queryAllByAccessibilityLabel(label: string): ViewInfo[];
+
+  /**
+   * Captures a screenshot of the app UI.
+   * @param bounds Optional bounds to capture a specific region. Pass null to capture the entire window.
+   * @returns Promise resolving to Base64 encoded string containing PNG data, or null on failure.
+   */
+  captureScreenshot(bounds: ViewInfo | null): Promise<string | null>;
+
+  /**
+   * Types a single character into the currently focused text input.
+   * If no text input is focused, this is a no-op.
+   */
+  typeChar(character: string): Promise<void>;
+
+  /**
+   * Blurs (resigns first responder from) the currently focused element.
+   * Optionally triggers submitEditing event before blur.
+   */
+  blur(options: { submitEditing?: boolean }): Promise<void>;
+}

package/src/userEvent.ts

@@ -1,4 +1,4 @@
-import NativeHarnessUI from './NativeHarnessUI.js';
+import HarnessUI from './harness.js';
 import type { ElementReference } from './screen.js';
 
 /**
@@ -66,13 +66,13 @@ const createUserEvent = (): UserEvent => {
       // Calculate center point of the element
       const centerX = element.x + element.width / 2;
       const centerY = element.y + element.height / 2;
-      await NativeHarnessUI.simulatePress(centerX, centerY);
+      await HarnessUI.simulatePress(centerX, centerY);
       // Flush pending events to ensure onPress and other callbacks are processed
       await flushEvents();
     },
 
     pressAt: async (x: number, y: number): Promise<void> => {
-      await NativeHarnessUI.simulatePress(x, y);
+      await HarnessUI.simulatePress(x, y);
       // Flush pending events to ensure onPress and other callbacks are processed
       await flushEvents();
     },
@@ -93,26 +93,26 @@ const createUserEvent = (): UserEvent => {
         // Calculate center point of the element
         const centerX = element.x + element.width / 2;
         const centerY = element.y + element.height / 2;
-        await NativeHarnessUI.simulatePress(centerX, centerY);
+        await HarnessUI.simulatePress(centerX, centerY);
         await flushEvents();
       } else {
         // Still need to press to focus, but ideally without press events
         // For now, we press anyway - future enhancement could add a focusOnly method
         const centerX = element.x + element.width / 2;
         const centerY = element.y + element.height / 2;
-        await NativeHarnessUI.simulatePress(centerX, centerY);
+        await HarnessUI.simulatePress(centerX, centerY);
         await flushEvents();
       }
 
       // Type each character one by one
       for (const char of text) {
-        await NativeHarnessUI.typeChar(char);
+        await HarnessUI.typeChar(char);
         await flushEvents(); // Let onChangeText fire
       }
 
       // Blur (triggers endEditing and blur unless skipBlur)
       if (!options?.skipBlur) {
-        await NativeHarnessUI.blur({
+        await HarnessUI.blur({
           submitEditing: options?.submitEditing ?? false,
         });
         await flushEvents();