refactor: scroll view native state (#1661)

* refactor: move scroll state into native state

* refactor: simplify types

* refactor: renaming

Author: mdjastrzebski

src/fire-event.ts

@@ -154,6 +154,6 @@ function setNativeStateIfNeeded(element: ReactTestInstance, eventName: string, v
     isHostTextInput(element) &&
     isTextInputEditable(element)
   ) {
-    nativeState?.elementValues.set(element, value);
+    nativeState?.valueForElement.set(element, value);
   }
 }

src/helpers/text-input.ts

@@ -17,7 +17,7 @@ export function getTextInputValue(element: ReactTestInstance) {
 
   return (
     element.props.value ??
-    nativeState?.elementValues.get(element) ??
+    nativeState?.valueForElement.get(element) ??
     element.props.defaultValue ??
     ''
   );

src/native-state.ts

@@ -1,19 +1,22 @@
 import { ReactTestInstance } from 'react-test-renderer';
+import { Point } from './types';
 
 /**
  * Simulated native state for unmanaged controls.
  *
  * Values from `value` props (managed controls) should take precedence over these values.
  */
 export type NativeState = {
-  elementValues: WeakMap<ReactTestInstance, string>;
+  valueForElement: WeakMap<ReactTestInstance, string>;
+  contentOffsetForElement: WeakMap<ReactTestInstance, Point>;
 };
 
 export let nativeState: NativeState | null = null;
 
 export function initNativeState(): void {
   nativeState = {
-    elementValues: new WeakMap(),
+    valueForElement: new WeakMap(),
+    contentOffsetForElement: new WeakMap(),
   };
 }
 

src/types.ts

@@ -1,3 +1,19 @@
+/**
+ * Location of an element.
+ */
+export interface Point {
+  y: number;
+  x: number;
+}
+
+/**
+ * Size of an element.
+ */
+export interface Size {
+  height: number;
+  width: number;
+}
+
 // TS autocomplete trick
 // Ref: https://github.com/microsoft/TypeScript/issues/29729#issuecomment-567871939
 export type StringWithAutocomplete<T> = T | (string & {});

src/user-event/event-builder/scroll-view.ts

@@ -1,25 +1,12 @@
+import { Point, Size } from '../../types';
 import { baseSyntheticEvent } from './base';
 
-/**
- * Scroll position of a scrollable element.
- */
-export interface ContentOffset {
-  y: number;
-  x: number;
-}
-
 /**
  * Other options for constructing a scroll event.
  */
 export type ScrollEventOptions = {
-  contentSize?: {
-    height: number;
-    width: number;
-  };
-  layoutMeasurement?: {
-    height: number;
-    width: number;
-  };
+  contentSize?: Size;
+  layoutMeasurement?: Size;
 };
 
 /**
@@ -28,7 +15,7 @@ export type ScrollEventOptions = {
  * - 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: ContentOffset = { y: 0, x: 0 }, options?: ScrollEventOptions) => {
+  scroll: (offset: Point = { y: 0, x: 0 }, options?: ScrollEventOptions) => {
     return {
       ...baseSyntheticEvent(),
       nativeEvent: {

src/user-event/event-builder/text-input.ts

@@ -1,4 +1,4 @@
-import { ContentSize } from '../utils/content-size';
+import { Size } from '../../types';
 import { TextRange } from '../utils/text-range';
 import { baseSyntheticEvent } from './base';
 
@@ -68,7 +68,7 @@ export const TextInputEventBuilder = {
    * - iOS: `{"contentSize": {"height": 21.666666666666668, "width": 11.666666666666666}, "target": 75}`
    * - Android: `{"contentSize": {"height": 61.45454406738281, "width": 352.7272644042969}, "target": 53}`
    */
-  contentSizeChange: ({ width, height }: ContentSize) => {
+  contentSizeChange: ({ width, height }: Size) => {
     return {
       ...baseSyntheticEvent(),
       nativeEvent: { contentSize: { width, height }, target: 0 },

src/user-event/paste.ts

@@ -33,7 +33,7 @@ export async function paste(
   dispatchEvent(element, 'selectionChange', EventBuilder.TextInput.selectionChange(rangeToClear));
 
   // 3. Paste the text
-  nativeState?.elementValues.set(element, text);
+  nativeState?.valueForElement.set(element, text);
   dispatchEvent(element, 'change', EventBuilder.TextInput.change(text));
   dispatchEvent(element, 'changeText', text);
 

src/user-event/scroll/scroll-to.ts

@@ -5,20 +5,14 @@ import { EventBuilder } from '../event-builder';
 import { ErrorWithStack } from '../../helpers/errors';
 import { isHostScrollView } from '../../helpers/host-component-names';
 import { pick } from '../../helpers/object';
-import { ContentOffset } from '../event-builder/scroll-view';
+import { nativeState } from '../../native-state';
+import { Point, Size } from '../../types';
 import { dispatchEvent, wait } from '../utils';
 import { createScrollSteps, inertialInterpolator, linearInterpolator } from './utils';
-import { getElementScrollOffset, setElementScrollOffset } from './state';
 
 interface CommonScrollToOptions {
-  contentSize?: {
-    height: number;
-    width: number;
-  };
-  layoutMeasurement?: {
-    height: number;
-    width: number;
-  };
+  contentSize?: Size;
+  layoutMeasurement?: Size;
 }
 
 export interface VerticalScrollToOptions extends CommonScrollToOptions {
@@ -62,7 +56,7 @@ export async function scrollTo(
     options.contentSize?.height ?? 0,
   );
 
-  const initialPosition = getElementScrollOffset(element);
+  const initialPosition = nativeState?.contentOffsetForElement.get(element) ?? { x: 0, y: 0 };
   const dragSteps = createScrollSteps(
     { y: options.y, x: options.x },
     initialPosition,
@@ -79,13 +73,13 @@ export async function scrollTo(
   await emitMomentumScrollEvents(this.config, element, momentumSteps, options);
 
   const finalPosition = momentumSteps.at(-1) ?? dragSteps.at(-1) ?? initialPosition;
-  setElementScrollOffset(element, finalPosition);
+  nativeState?.contentOffsetForElement.set(element, finalPosition);
 }
 
 async function emitDragScrollEvents(
   config: UserEventConfig,
   element: ReactTestInstance,
-  scrollSteps: ContentOffset[],
+  scrollSteps: Point[],
   scrollOptions: ScrollToOptions,
 ) {
   if (scrollSteps.length === 0) {
@@ -115,7 +109,7 @@ async function emitDragScrollEvents(
 async function emitMomentumScrollEvents(
   config: UserEventConfig,
   element: ReactTestInstance,
-  scrollSteps: ContentOffset[],
+  scrollSteps: Point[],
   scrollOptions: ScrollToOptions,
 ) {
   if (scrollSteps.length === 0) {

src/user-event/scroll/state.ts

@@ -1,14 +1,14 @@
-import { ContentOffset } from '../event-builder/scroll-view';
+import { Point } from '../../types';
 
 const DEFAULT_STEPS_COUNT = 5;
 
 type InterpolatorFn = (end: number, start: number, steps: number) => number[];
 
 export function createScrollSteps(
-  target: Partial<ContentOffset>,
-  initialOffset: ContentOffset,
+  target: Partial<Point>,
+  initialOffset: Point,
   interpolator: InterpolatorFn,
-): ContentOffset[] {
+): Point[] {
   if (target.y != null) {
     return interpolator(target.y, initialOffset.y, DEFAULT_STEPS_COUNT).map((y) => ({
       y,

src/user-event/scroll/utils.ts

@@ -95,7 +95,7 @@ export async function emitTypingEvents(
     return;
   }
 
-  nativeState?.elementValues.set(element, text);
+  nativeState?.valueForElement.set(element, text);
   dispatchEvent(element, 'change', EventBuilder.TextInput.change(text));
   dispatchEvent(element, 'changeText', text);
 

src/user-event/type/type.ts

@@ -1,7 +1,4 @@
-export interface ContentSize {
-  width: number;
-  height: number;
-}
+import { Size } from '../../types';
 
 /**
  * Simple function for getting mock the size of given text.
@@ -13,8 +10,7 @@ export interface ContentSize {
  * @param text text to be measure
  * @returns width and height of the text
  */
-
-export function getTextContentSize(text: string): ContentSize {
+export function getTextContentSize(text: string): Size {
   const lines = text.split('\n');
   const maxLineLength = Math.max(...lines.map((line) => line.length));