flatten event builder

Author: mdjastrzebski

src/event-builder/common.ts

@@ -5,7 +5,7 @@ import { baseSyntheticEvent } from './base';
  * - iOS: `{"changedTouches": [[Circular]], "identifier": 1, "locationX": 253, "locationY": 30.333328247070312, "pageX": 273, "pageY": 141.3333282470703, "target": 75, "timestamp": 875928682.0450834, "touches": [[Circular]]}`
  * - Android: `{"changedTouches": [[Circular]], "identifier": 0, "locationX": 160, "locationY": 40.3636360168457, "pageX": 180, "pageY": 140.36363220214844, "target": 53, "targetSurface": -1, "timestamp": 10290805, "touches": [[Circular]]}`
  */
-function touch() {
+export function buildTouchEvent() {
   return {
     ...baseSyntheticEvent(),
     nativeEvent: {
@@ -23,50 +23,46 @@ function touch() {
   };
 }
 
-export type TouchEvent = ReturnType<typeof touch>;
+export type TouchEvent = ReturnType<typeof buildTouchEvent>;
 
-export const CommonEventBuilder = {
-  touch,
-
-  responderGrant: () => {
-    return {
-      ...touch(),
-      dispatchConfig: { registrationName: 'onResponderGrant' },
-    };
-  },
+export function buildResponderGrantEvent() {
+  return {
+    ...buildTouchEvent(),
+    dispatchConfig: { registrationName: 'onResponderGrant' },
+  };
+}
 
-  responderRelease: () => {
-    return {
-      ...touch(),
-      dispatchConfig: { registrationName: 'onResponderRelease' },
-    };
-  },
+export function buildResponderReleaseEvent() {
+  return {
+    ...buildTouchEvent(),
+    dispatchConfig: { registrationName: 'onResponderRelease' },
+  };
+}
 
-  /**
-   * Experimental values:
-   * - iOS: `{"eventCount": 0, "target": 75, "text": ""}`
-   * - Android: `{"target": 53}`
-   */
-  focus: () => {
-    return {
-      ...baseSyntheticEvent(),
-      nativeEvent: {
-        target: 0,
-      },
-    };
-  },
+/**
+ * Experimental values:
+ * - iOS: `{"eventCount": 0, "target": 75, "text": ""}`
+ * - Android: `{"target": 53}`
+ */
+export function buildFocusEvent() {
+  return {
+    ...baseSyntheticEvent(),
+    nativeEvent: {
+      target: 0,
+    },
+  };
+}
 
-  /**
-   * Experimental values:
-   * - iOS: `{"eventCount": 0, "target": 75, "text": ""}`
-   * - Android: `{"target": 53}`
-   */
-  blur: () => {
-    return {
-      ...baseSyntheticEvent(),
-      nativeEvent: {
-        target: 0,
-      },
-    };
-  },
-};
+/**
+ * Experimental values:
+ * - iOS: `{"eventCount": 0, "target": 75, "text": ""}`
+ * - Android: `{"target": 53}`
+ */
+export function buildBlurEvent() {
+  return {
+    ...baseSyntheticEvent(),
+    nativeEvent: {
+      target: 0,
+    },
+  };
+}

src/event-builder/index.ts

@@ -1,9 +1,3 @@
-import { CommonEventBuilder } from './common';
-import { ScrollViewEventBuilder } from './scroll-view';
-import { TextInputEventBuilder } from './text-input';
-
-export const EventBuilder = {
-  Common: CommonEventBuilder,
-  ScrollView: ScrollViewEventBuilder,
-  TextInput: TextInputEventBuilder,
-};
+export * from './common';
+export * from './scroll';
+export * from './text';

src/event-builder/scroll-view.ts src/event-builder/scroll.tssrc/event-builder/scroll-view.ts renamed to src/event-builder/scroll.ts

@@ -14,25 +14,23 @@ export type ScrollEventOptions = {
  * - iOS: `{"contentInset": {"bottom": 0, "left": 0, "right": 0, "top": 0}, "contentOffset": {"x": 0, "y": 5.333333333333333}, "contentSize": {"height": 1676.6666259765625, "width": 390}, "layoutMeasurement": {"height": 753, "width": 390}, "zoomScale": 1}`
  * - Android: `{"contentInset": {"bottom": 0, "left": 0, "right": 0, "top": 0}, "contentOffset": {"x": 0, "y": 31.619047164916992}, "contentSize": {"height": 1624.761962890625, "width": 411.4285583496094}, "layoutMeasurement": {"height": 785.5238037109375, "width": 411.4285583496094}, "responderIgnoreScroll": true, "target": 139, "velocity": {"x": -1.3633992671966553, "y": -1.3633992671966553}}`
  */
-export const ScrollViewEventBuilder = {
-  scroll: (offset: Point = { y: 0, x: 0 }, options?: ScrollEventOptions) => {
-    return {
-      ...baseSyntheticEvent(),
-      nativeEvent: {
-        contentInset: { bottom: 0, left: 0, right: 0, top: 0 },
-        contentOffset: { y: offset.y, x: offset.x },
-        contentSize: {
-          height: options?.contentSize?.height ?? 0,
-          width: options?.contentSize?.width ?? 0,
-        },
-        layoutMeasurement: {
-          height: options?.layoutMeasurement?.height ?? 0,
-          width: options?.layoutMeasurement?.width ?? 0,
-        },
-        responderIgnoreScroll: true,
-        target: 0,
-        velocity: { y: 0, x: 0 },
+export function buildScrollEvent(offset: Point = { y: 0, x: 0 }, options?: ScrollEventOptions) {
+  return {
+    ...baseSyntheticEvent(),
+    nativeEvent: {
+      contentInset: { bottom: 0, left: 0, right: 0, top: 0 },
+      contentOffset: { y: offset.y, x: offset.x },
+      contentSize: {
+        height: options?.contentSize?.height ?? 0,
+        width: options?.contentSize?.width ?? 0,
       },
-    };
-  },
-};
+      layoutMeasurement: {
+        height: options?.layoutMeasurement?.height ?? 0,
+        width: options?.layoutMeasurement?.width ?? 0,
+      },
+      responderIgnoreScroll: true,
+      target: 0,
+      velocity: { y: 0, x: 0 },
+    },
+  };
+}

src/event-builder/text-input.ts

@@ -0,0 +1,74 @@
+import { baseSyntheticEvent } from './base';
+import type { Size, TextRange } from './types';
+
+/**
+ * Experimental values:
+ * - iOS: `{"eventCount": 4, "target": 75, "text": "Test"}`
+ * - Android: `{"eventCount": 6, "target": 53, "text": "Tes"}`
+ */
+export function buildTextChangeEvent(text: string) {
+  return {
+    ...baseSyntheticEvent(),
+    nativeEvent: { text, target: 0, eventCount: 0 },
+  };
+}
+
+/**
+ * Experimental values:
+ * - iOS: `{"eventCount": 3, "key": "a", "target": 75}`
+ * - Android: `{"key": "a"}`
+ */
+export function buildKeyPressEvent(key: string) {
+  return {
+    ...baseSyntheticEvent(),
+    nativeEvent: { key },
+  };
+}
+
+/**
+ * Experimental values:
+ * - iOS: `{"eventCount": 4, "target": 75, "text": "Test"}`
+ * - Android: `{"target": 53, "text": "Test"}`
+ */
+export function buildSubmitEditingEvent(text: string) {
+  return {
+    ...baseSyntheticEvent(),
+    nativeEvent: { text, target: 0 },
+  };
+}
+
+/**
+ * Experimental values:
+ * - iOS: `{"eventCount": 4, "target": 75, "text": "Test"}`
+ * - Android: `{"target": 53, "text": "Test"}`
+ */
+export function buildEndEditingEvent(text: string) {
+  return {
+    ...baseSyntheticEvent(),
+    nativeEvent: { text, target: 0 },
+  };
+}
+
+/**
+ * Experimental values:
+ * - iOS: `{"selection": {"end": 4, "start": 4}, "target": 75}`
+ * - Android: `{"selection": {"end": 4, "start": 4}}`
+ */
+export function buildTextSelectionChangeEvent({ start, end }: TextRange) {
+  return {
+    ...baseSyntheticEvent(),
+    nativeEvent: { selection: { start, end } },
+  };
+}
+
+/**
+ * Experimental values:
+ * - iOS: `{"contentSize": {"height": 21.666666666666668, "width": 11.666666666666666}, "target": 75}`
+ * - Android: `{"contentSize": {"height": 61.45454406738281, "width": 352.7272644042969}, "target": 53}`
+ */
+export function buildContentSizeChangeEvent({ width, height }: Size) {
+  return {
+    ...baseSyntheticEvent(),
+    nativeEvent: { contentSize: { width, height }, target: 0 },
+  };
+}

src/event-builder/text.ts

@@ -8,7 +8,7 @@ import type {
 import type { Fiber, HostElement } from 'test-renderer';
 
 import { act } from './act';
-import { EventBuilder } from './event-builder';
+import { buildScrollEvent, buildTouchEvent } from './event-builder';
 import type { Point } from './event-builder/types';
 import type { EventHandler } from './event-handler';
 import { getEventHandlerFromProps } from './event-handler';
@@ -150,7 +150,7 @@ fireEvent.changeText = async (element: HostElement, text: string) =>
   await fireEvent(element, 'changeText', text);
 
 fireEvent.press = async (element: HostElement, eventProps?: EventProps) => {
-  const event = EventBuilder.Common.touch();
+  const event = buildTouchEvent();
   if (eventProps) {
     mergeEventProps(event, eventProps);
   }
@@ -159,7 +159,7 @@ fireEvent.press = async (element: HostElement, eventProps?: EventProps) => {
 };
 
 fireEvent.scroll = async (element: HostElement, eventProps?: EventProps) => {
-  const event = EventBuilder.ScrollView.scroll();
+  const event = buildScrollEvent();
   if (eventProps) {
     mergeEventProps(event, eventProps);
   }

src/fire-event.ts

@@ -1,6 +1,11 @@
 import type { HostElement } from 'test-renderer';
 
-import { EventBuilder } from '../event-builder';
+import {
+  buildBlurEvent,
+  buildEndEditingEvent,
+  buildFocusEvent,
+  buildTextSelectionChangeEvent,
+} from '../event-builder';
 import { ErrorWithStack } from '../helpers/errors';
 import { isHostTextInput } from '../helpers/host-component-names';
 import { isPointerEventEnabled } from '../helpers/pointer-events';
@@ -22,19 +27,15 @@ export async function clear(this: UserEventInstance, element: HostElement): Prom
   }
 
   // 1. Enter element
-  await dispatchEvent(element, 'focus', EventBuilder.Common.focus());
+  await dispatchEvent(element, 'focus', buildFocusEvent());
 
   // 2. Select all
   const textToClear = getTextInputValue(element);
   const selectionRange = {
     start: 0,
     end: textToClear.length,
   };
-  await dispatchEvent(
-    element,
-    'selectionChange',
-    EventBuilder.TextInput.selectionChange(selectionRange),
-  );
+  await dispatchEvent(element, 'selectionChange', buildTextSelectionChangeEvent(selectionRange));
 
   // 3. Press backspace with selected text
   const emptyText = '';
@@ -46,6 +47,6 @@ export async function clear(this: UserEventInstance, element: HostElement): Prom
 
   // 4. Exit element
   await wait(this.config);
-  await dispatchEvent(element, 'endEditing', EventBuilder.TextInput.endEditing(emptyText));
-  await dispatchEvent(element, 'blur', EventBuilder.Common.blur());
+  await dispatchEvent(element, 'endEditing', buildEndEditingEvent(emptyText));
+  await dispatchEvent(element, 'blur', buildBlurEvent());
 }